вторник, 28 августа 2012 г.

День 22. Лукавство простительно?

Вот если используем CSS, то стиль прикрепляется к элементу, в зависисмости от определения
стиля. Соответственно наличие самого элемента в документе представляется необходимым. И ведь правда, глупо писать стиль для элемента которого нет. Правда, есть загвоздка. В HTML нет, допустим, отдельного элемента для первой строки абзаца или первой буквы абзаца. А сделать стиль для этой самой заглавной буквы смерть как хочется. Вот тут и приходят на помощь псевдоэлементы и псевдоклассы. Их название объясняется тем, что строго говоря этих элементов нет в спецификации языка разметки, они вводятся в рамках CSS, несколько искутсвенно расшияя возможности создания сайтов. Ниже приведены лишь несколько прмеров псевдоклассов и псевдоэлементов, дабы когда в дальнейшем буду их использовать, и, соответственно, вам об этом говорить, у вас не было недоумения по поводу того, что это такое. На самом деле псевдоэлементов около двух десятков и приводить их все разом, наверное, несколько бессмысленно, лучше по мере необходимости я буду говорить о том, что, когда и для чего я использовал.

Псевдокласс : first-child


"Псевдокласс : first-child сопоставляется с элементом, который является первым дочерним элементом другого элемента"
Эта формулировка взята из одной умной книжки, вероятно поэтому формулировка и есть такая заумная. Поэтому давайте посмотрим пример.

p:first-child em {color:red}

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


Псевдоклассы ссылок.



Обычно наши с вами браузеры по-разному отображают посещенные и непосещенные ссылки и чтобы эти ссылки различить можно использовать псевдоклассы ссылок:
:link - используется для непосещенных ссылок
:visited - используется для просмотренных уже ссылок
Вот пример:

a.external:visited {color:red}

Где a.external - это стиль для элементов ссылок, :visited - псевдокласс, ну а {color:red} сам стиль, собственно.

Псевдоэлемент :first-line

Он используется для применения стиля к первой строке абзаца. Объявляется он следующим образом:

p:first-line {color:red}

Это значит, что для первых строк абзацев будет использован красный цвет.

Псевдоэлемент :first-letter


Его действие аналогично предыдущему псевдоэлементу, за исключением того, что действие применяется к первой букве.
Используется он, как я понял, для создания заглавных букв и буквиц.

На сегодня все.


На сегодня в общем-то все... Да не все. Я немного слукавил, я сегодня проработал еще форматирование текста средствами CSS, однако решил сегодня не писать подробности, просто чтобы не перегружать вас. И, разумеется, если я принял неправильное решение, то вы смело можете сообщить мне об этом, дабы я не допускал таких ошибок впредь)
До завтра, друзья.

Комментариев нет:

Отправить комментарий