17 марта 2010

Основы: Работаем с селекторами CSS


Это тема, которая касается многих разработчиков. Стили CSS служат для определения того, каким образом содержание страницы отображается в браузерах. Как нужно применять эти стили в работе, чтобы экономить время при одновременном повышении качества?
Ответ заключается в использовании селекторов.

Давайте начнем с основ

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

li {color: red;}

,где li — селектор, color — свойство CSS, red — значение.

Сейчас изменим цвет фона всех параграфов на странице:

p {background-color: red;}

Селекторы CLASS и ID

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

ID

ID селектор (называемый также «Идентификатор») определяет уникальное имя элемента, которое используется для изменения стиля, кроме того, обращения к нему через скрипты позволяют управлять стилем элемента динамически.
Полезно запомнить, что нужно думать об идентификаторе, как о «личности», как идентификационном номере, который является уникальным, удостоверяющим личность и может быть связан только с одним элементом на веб-странице.
Чтобы применить атрибут ID элемента, достаточно включить его сразу после открывающего тега того же элемента. Например, чтобы применить ID ‘myparagraph’, все что вам нужно — написать вот этот код:

<p id="myparagraph">Этот параграф мы написали красного цвета!</p>

Но не забываем, что нужно указать элемент в таблице стилей CSS, и все, что вам нужно сделать, это вставить символ # перед ID. Так что в этом случае правило запишется так:

#myparagraph { color:red; }
Class

Еще раз! Каждый атрибут ID должен быть уникальным. Поэтому, если вы хотите выделить, например, два параграфа вместо одного, то вам придется определить и применять более чем один ID:

<p id="myparagraph1">Этот параграф мы написали красного цвета!</p>
<p id="myparagraph2">Этот параграф мы написали красного цвета тоже!</p>

Конечно ID вы должны описать в таблице CSS:

#myparagraph1 { color:red; } #myparagraph2 { color:red; }

Конечно это не удобно. Вот в этом случае пригодится Class. Класс может быть применен к более чем одному элементу, не вызывая проблем. Процедура включает в себя шаги, аналогичные тем, которые используются для ID, единственным исключением является «точка» в имени класса:

.myparagraph { color:red; }

Тогда раскрасить параграфы будет удобнее:

<p class="myparagraph">Этот параграф мы написали красного цвета!</p>
<p class="myparagraph">Этот параграф мы написали красного цвета тоже!</p>

Объединение Class и ID с разными селекторами

Возможно вам интересно, что произойдет, если вы примените Class «myparagraph» к другим элементам?
Например вот так:

<h2 class="myparagraph">Заголовок в красном</h2>
<p class="myparagraph">Этот параграф мы написали красного цвета!</p>
<p class="myparagraph">Этот параграф мы написали красного цвета тоже!</p>

Да ничего особенного, просто все станет красного цвета.
А если нужно менять цвет только параграфов и не трогать остальные селекторы?
Напишите в таблице CSS следующий код:

p.myparagraph { color:red; }

Правило будет звучать примерно так: «Применить красный цвет для всех параграфов имеющим Class myparagraph«.
Теперь только параграфы будут показаны красным цветом, а заголовок, начинающийся тэгом h2 не будет красным, даже если он имеет класс myparagraph. Таким образом, чтобы применить класс только к определенным типам элементов, все что вам нужно сделать, это использовать имя элемента, точку и имя класса.
То же самое можно сказать и об атрибуте ID. Если у вас есть <h2> с идентификатором «Title», вы сможете сделать так:

<h2 id="title">Заголовок статьи</h2>

А в таблице CSS

h2#title { font-size: 28px; }

Размер h2 элемента c ID «title» (и только этим) изменится до 28 пикселей.

CSS — это правила для тех кто делает сайты

А для того, чтобы на наших дорогах не было хаоса существуют правила дорожного движения. И чтобы знать их нужны экзаменационные билеты пдд 2010 которые есть на сайте http://pdd.irr.ru, чтобы вы могли самостоятельно готовиться к экзамену пдд онлайн находясь дома. Успеха!

[tweetmeme]

Статьи по теме
Статья оказалась полезной? Подпишись на RSS рассылку или следуй за мной на твиттере @wpstarter или по этой ссылке wpstarter

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

Вы можете следовать любому комментарию через RSS 2.0 feed.

Вы можете оставить комментарий или trackback с вашего сайта.

  1. Oleg:

    Поясните, для чего иногда в селекторах используют «+». Нигде не могу найти инфу об этом, но в коде подобное видел.

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

Обведите фигуру по линии:

Ставим WordPress на локальном копьютере