2-qism css asoslari. Web-sahifani stillar yordamida formatash

Примечание
Web-браузер Internet Explorer поддерживает селектор, начиная с версии 7.0.

□ Селектор1 + Селектор2 — элемент, соответствующий параметру Селек-тор2, который является соседним для контейнера, соответствующего па­раметру селектор1, и следует сразу после него:

div + a { color: red }
Цвет текста ссылки станет красным, если тег следует сразу после элемента div:

Teкcт

Cc^Iлкa


Примечание
Web-браузер Internet Explorer поддерживает селектор, начиная с версии 8.0.

При необходимости можно составлять выражения из нескольких селекторов:

div span a { color: red }
Цвет текста ссылки станет красным, если тег расположен внутри тега
, а тот в свою очередь вложен в тег

:

Ccылкa 1


Cc^iлкa 2

В этом примере только ссылка 2 будет красного цвета.
Для привязки к параметрам тегов применяются следующие селекторы:
□ [пaрaмeтр] — элементы с указанным параметром:
a[id] { color: red }
Цвет текста ссылки станет красным, если тег имеет параметр id:
Ccылкa 1
□ [Пaрaмeтр=^, Знaчeниe'] — элементы, у которых параметр точно равен значению:
a[href="link1.html"] { color: red }
Цвет текста ссылки станет красным, если параметр href тега имеет значение "link1.html";
□ [Пaрaмeтр^л=^, Знaчeниe'] — элементы, у которых параметр начинается с указанного значения:
a[href*="li"] { color: red }
Цвет текста ссылки станет красным, если значение параметра href тега начинается с "li" ;
□ [Пaрaмeтр$=^, Знaчeниe'] — элементы, у которых параметр оканчивается указанным значением:
a[href$=".html"] { color: red }
Цвет текста ссылки станет красным, если значение параметра href тега оканчивается на расширение ".html";
□ [Пaрaмeтр*=^, Змчение'] — элементы, у которых параметр содержит ука­занный фрагмент значения:
a[href*="link"] { color: red }
Цвет текста ссылки станет красным, если значение параметра href тега содержит фрагмент "link" .
В качестве селектора могут быть также указаны следующие псевдоэлементы:
□ :first-letter — задает стиль для первой буквы. Выделим первую букву всех абзацев:
p:first-letter { font-size: 150%; font-weight: bold; color: red }
□ :first-line — задает стиль для первой строки. Пример:
p:first-line { font-weight: bold; color: red }
□ :before и :after — позволяют добавить текст в начало и конец элемента соответственно. Добавляемый текст должен быть указан в атрибуте
content:
p:before { content: "before "; } p:after { content: " after"; }

Teкст
Результат:

before Текст after


Примечание
Web-браузер Internet Explorer поддерживает псевдоэлементы :before и :after начиная с версии 8.0.