В данном уроке мы рассмотрим, что такое CSS селекторы (CSS Selectors), для чего они предназначены и чем они могут быть полезны при оформлении страниц.
Грамотное использование CSS селекторов позволяет не перегружать код, а также сделать его более логичным.
Существует несколько видов CSS селекторов это селектор по элементу, селектор по классу, селектор по ID, контекстный селектор, а также псевдоэлементы и псевдоклассы. Теперь мы разберем каждый из них по порядку.
Из урока Основы CSS вы уже знаете, что присвоение свойств тому или иному элементу задается при помощи правил. Структура правила имеет следующую конструкцию:
Как вы видите, селектором называется левая часть правила до фигурной скобки. Дальше идет блок объявления стилей который состоит из свойства и значения. Рассмотрим все особенности и виды селекторов по порядку.
CSS Селектор по элементу.
CSS Селекторами могут быть любые элементы html т. е. обычные теги. Например, зададим цвет и размер текста обрамленного в тег <p></p> т. е. цвет и размер абзаца текста.
p {color:#666; font-size:12px;}
Т. е. в этом случае тег <p> является селектором. Таким же образом в качестве селектора можно использовать любые теги. В данном случае, цвет и размер текста задается тегу <p>, и все теги <p>, которые будут встречаться в коде страницы, будут иметь заданный размер и цвет текста.
Это является одновременно и достоинством и недостатком этого типа селекторов. Достоинством является то, что не нужно каждый раз задавать стиль абзацу, а недостатком то что очень часто необходимо сделать другое отличающееся от заданного, оформление абзаца, например, задать красный цвет текста. Тут нам на помощь приходит следующий вид селекторов.
CSS Селекторы классов.
Данные селекторы позволяют каждому тегу присвоить класс, который будет иметь свое определенно стилевое оформление. Присвоение класса тегу происходит следующим образом:<p class=”redmal”> Где вместо “redmal” можно задавать любое другое слово или буквы.
Код стилей будет иметь следующий вид:
p {color:#666; font-size:12px;}
p.redmal { color:#b50404; font-size:11px;}
Код этих абзацев в html файле будет следующий:
<p>Текст оформленный при помощи селектора p</p> <p class="redmal">Текст оформленный при помощи селектора p.redmal</p>
Первый абзац, как и раньше, будет иметь серый текст размером 12 пикселей. Второй абзац будет иметь красный текст размером 11 пикселей.
Кроме этого данный класс можно применить не только к тегу <p> но и к любому другому элементу. Чтобы это стало возможным в стилях необходимо указать, что данный класс можно применять ко всем тегам. Для этого перед точкой элемент ставить не нужно. Например:
.redmal {color:#b50404; font-size:11px;}
Теперь этот класс можно применить как к тегу <p> так и к любому другому. Например, применим его и к абзацу и к ячейке таблицы:
<p>Текст оформленный при помощи селектора p</p> <p class="redmal">Текст абзаца оформленный при помощи селектора .redmal</p> <table border="1"> <tr> <td class="redmal">Текст помещенный в ячейку таблицы и оформленный при помощи селектора .redmal </td> </tr> </table>
Можно так же придать разное оформление тегам с одним и тем же классом. В этом случае в стилях необходимо прописать следующее:
p.redmal { color:#b50404; font-size:12px;}
td.redmal { color:#666666; font-size:14px;}
При этом текст в теге <p> будет красный размером 12 пикселей, а в теге <td> серый размером 14 пикселей.
Следующий вид CSS селекторов это селекторы по идентификатору или сокращенно по ID. Селекторы по ID задаются аналогично классам, однако каждый ID может быть применен только к одному элементу. Т. е. в коде страницы может быть только один тег с данным ID.
Это правило очень часто игнорируется потому, как все браузеры позволяют применять один и тот же ID к нескольким элементам. Главное отличие ID от класса в том, что в ID для адресации используется знак # а не точка. Например:
p#sin { color:#548DD4; }
В HTML коде необходимо написать следующее:
<p id="sin">Текст оформленный при помощи ID p#sin</p>
Текст в абзаце будет синего цвета:
Контекстный селектор. Предположим, что нам необходимо в абзаце выделить текст тегом <strong></strong> т. е., текст заключенный между этими тегами будет жирный. Но кроме того что он будет жирным нам необходимо чтобы он был например красного цвета.
Какие действия можно предпринять исходя из того что мы уже знаем о селекторах? Можно задать элементу <strong> красный цвет при помощи следующего стиля:
strong {color:#C00000;}
В html коде прописать следующее:
<p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p>
Недостаток данного способа заключается в том, что в данном случае все элементы на странице выделенные элементом <strong> будут иметь красный цвет.
Следующий способ это задать элементу <strong> свой класс. Например:
redstr {color:#C00000;}
В этом случае html код будет следующий:
<p>Текст<strong class=" redstr ">выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p>
Недостаток этого способа в том, что нам каждый раз придется прописывать класс. Здесь нам на помощь приходят контекстные CSS селекторы. Стиль можно написать следующим образом:
p strong {color:#C00000;}
Это обозначает, что тег <strong> находящийся внутри элемента <p> будет иметь красный цвет. HTML код в этом случае будет таким:
<p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p>
Таким способом можно применять стили, к любому уровню вложенности тегов. Например можно сделать так:
td p strong {color:#C00000;}
Код будет следующий:
<table border="1"> <tr> <td><p>Текст<strong>выделенный жирным шрифтом</strong>, а дальше простой текст абзаца</p> </td> </tr> </table>
В этом случае текст, заключенный в тег <strong> будет выделен красным цветом, если он находится внутри тега <p>, который в свою очередь находится внутри тега <td>
Псевдоэлементы.
Псевдоэлементы применяются для выделения первой буквы параграфа, т. е. для создания так называемой буквицы, а так же для выделения первой строки параграфа. Данные элементы не присутствуют в самом html коде, а только стилях. Не прибегая к помощи псевдоэлементов, первую букву параграфа мы можем выделить, создав для этого отдельный класс:
.bukv { color:#cc0000; font-size:36px;}
p {color:#666; font-size:14px;}
В этом случае код будет таким:
<p><span class="bukv">П</span>ервая буква будет большая, а дальше пойдет нормальный текст</p>
В данном случае каждый раз нам придется прописывать к первой букве данный класс. Для того чтобы заглавная буква в каждом параграфе выделялась автоматически существует псевдоэлемент first-letter стили в этом случае будут такими:
p { color:#666; font-size:14px;}
p:first-letter { color:#cc0000; font-size:36px;}
Код будет таким:
<p>Первая буква будет большая, а дальше пойдет нормальный текст</p>
Сама буквица будет такой:
Селектор p:first-letter будет задавать стили всем первым буквам текста заключенного в теги <p></p> Для того чтобы текст обтекал букву слева данному селектору можно добавить свойство float:left В этом случае буквица окажется внутри текста.
Для выделения первых строк абзацев используется селектор first-line Применяется он аналогично селектору, который мы рассмотрели выше:
p { color:#666; font-size:14px;}
p: first-line { color:#cc0000; font-size:25px;}
Код будет таким:
<p>Первая строка будет выделена шрифтом размером 25 пикселей красного цвета <br> вторая строка <br> третья строка </p>
Теги <br> я добавил специально, чтобы перескочили строки, потому что в данном примере текста не много и если он раскинется на всю ширину экрана, то другие строчки вы не увидите. В результате у вас должно получиться следующее:
Псевдоклассы.
Псевдоклассы подобны псевдоэлементам они так же не отображаются в теле html документа, а указываются только в стилях. Существую 4 псевдокласса которые предназначены для оформления ссылок это псевдоклассы обозначающие не посещенную ссылку, посещенную ссылку, ссылку при наведении курсоры мыши, а также активную ссылку которая отобразится в момент нажатия на нее:
a:link {color:#548DD4}
a:visited {color:#666666}
a:hover {color:#B1030D}
a:active {color:#92D050}
В html коде записывается просто:
<a href="http://webmastermix.ru">Ссылка на сайт</a>
В результате не посещенная ссылка будет синей, посещенная серой, при наведении курсора мыши красной и активная, т. е. в момент нажатия зеленая.
В этом случае все ссылки находящиеся на странице будут иметь такое же оформление. Если вам нужно изменить оформление, каких либо ссылок и оформить их по другому, то можно применить классы.
a.sul:link {color:#548DD4}
a.sul:visited {color:#666666}
a.sul:hover {color:#B1030D}
a.sul:active {color:#92D050}
В теле документа к ссылке естественно необходимо добавить данный класс:
<a href=http://webmastermix.ru class="sul">Ссылка на сайт</a>
И последнее что нам необходимо разобрать в рамках данного урока это понятие группировка селекторов. Очень часто необходимо задать одно и то же оформление для разных элементов. В таком случае для того чтобы постоянно не переписывать одни и те же стили можно их назначить сразу нескольким элементам. Например:
p, td, h1 {color:#cc0000; font-size:16px;}
Т. е. селекторы перечисляются через запятую. Таким образом, можно указать какое угодно количество селекторов и задать им всем одинаковое оформление. В данном случае весь текст, заключенный в теги <p> <td> и <h1> будет отображен красным цветом размером 16 пикселей.
Как вы видите CSS селекторы дают огромное количество возможностей и вариантов оформления содержимого ваших страниц. Поэтому селекторы являются одним из самых важных элементов CSS.