Внедренный стиль CSS

Внедренный стиль CSS

Внедренный стиль CSS

str0Внедренный стиль CSS вписывается внутри тега контейнера <style></style>, а прописывается такой контейнер между тегами <head></head> в котором можно создать сразу несколько правил для одной страницы HTML.

Вообще правил можно создать сколько угодно и какие угодно, все зависит от нашей изобретательности.

Для примера сделаем на страничке, чтобы все ссылки не были подчеркнуты, были зеленого цвета, а при наведении на них курсора мышки меняли свой цвет и появлялась полоса подчеркивания, заголовок страницы находился по середине страницы и имел темно желтый с коричневым оттенком цвет. В итоге получиться следующая запись:

<style>
A {
text-decoration: none; color: #1b6f1c;
}

A:hover {
text-decoration: underline; color: #e30000;
}

h2 {
text-align: center; color: #d28900;
}

</style>

 

Далее вписываем тег контейнер с правилами в страницу HTML и смотрим что
получилось (страничка сайта и ниже код страницы).

посмотреть

В результате использования внедренного стиля мы указали браузеру, что и как отображать на данной странице. Теперь все по порядку: Первая строка в выше изложенной записи выглядит следующим образом:

A {text-decoration: none; color:#1b6f1c;}

и содержит в себе селектор к которому будет применяться правило в
нашем случае это название тега А то есть ссылка и непосредственно правило заключенное в фигурные скобки

{text-decoration: none; color: #1b6f1c;}

в котором мы указали браузеру: не подчеркивать ссылки text-decoration: none; и что ссылки должны быть зеленого цвета color: #1b6f1c;

Во второй строке A:hover {text-decoration: underline; color: #e30000;} для
селектора A:hover (Данный селектор указывает, что делать браузеру при наведении маркера мыши на ссылку) указываем, что при наведении маркера нужно подчеркнуть ссылку text-decoration: underline; и изменить цвет ссылки color: #e30000;

В третьей строке h2 {text-align: center; color: #d28900;} указываем правило для
заголовка h2 в котором указываем, что заголовки h2 должны располагаться по
центру text-align: center; и должны быть темно желтого с коричневым оттенком
цвета color: #d28900;

Кроме двух выше изложенных примеров в которых стиль CSS находится внутри страницы, таблицу стилей можно написать в отдельный файл, прописав на странице, к которой вы хотите применить стиль, ссылку на данный файл.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *