23 марта 2010

Работаем с селекторами CSS.Часть 2

wordpress для чайниковТеперь, когда вы познакомились с основными селекторами CSS, можно перейти к изучению возможности использования в CSS следующих правил. Таким образом, вы сможете улучшить качество вашего кода, а также сократить время загрузки веб-страниц, однако если вы хотите начать использовать WordPress, но не хотите углубляться в изучение CSS, то можете быстро создать блог на бесплатной платформе.

Универсальный селектор

Этот селектор очень мощный инструмент и представлен он звездочкой (*). Его можно читать как «все элементы». Он часто используется для «сброса» полей и отступов для всех элементов страницы:

* {
margin: 0;
padding: 0;
}

Это эквивалентно тому, что записать все HTML элементы друг за другом и для каждого из них установить нулевые поля и отступы.
Обратите внимание, что такие записи для всех идентификаторов и описаний классов, используемых в CSS:

#about { ..rules..}
.post { ..rules }

идиентичны записи

*#about { ..rules..}
*.post {..rules..}

Селекторы атрибутов

Селекторы атрибутов, как следует из названия, позволяют применять стили для элемента, основанного на названии или значении атрибута. В CSS 2.1 список выбора предусматривает четыре различных варианта:

  1. выбор, основанный на наличии атрибута
  2. выбор, основанный на значении атрибута
  3. выбор, основанный на значении атрибута из списка
  4. выбор, основанный на значении атрибута, который закончивается «тире».

Выбор, основанный на наличии атрибута

Благодаря этому типу селектора вы можете применить стили к элементу, который определен конкретным атрибутом. Например, рассмотрим правило:

img[alt] {
border:5px solid red;
}

Это правило следует читать так: «Выделить все img элементы, которые имеют атрибут alt и применить красную, в 5 пикселей толщиной границу к ним».
Если применить это правило к коду:

<img width="80" height="80" alt="First image" src="image1.jpg"/>
<img width="80" height="80" alt="Second image" src="image2.jpg"/>
<img width="80" height="80" alt="" src="image3.jpg"/>
<img width="80" height="80"  src="image4.jpg"/>

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

Выбор, основанный на значении атрибута [атрибут = «значение»]

Этот селектор позволяет применять стили для всех элементов, которые имеют точное значение атрибута.
Возьмем правило:

input[type="text"]{
background-color: yellow;
}

его следует читать так «Выделить все элементы ввода, которые имеют значение типа атрибута «text», а затем сделать цвет фона желтым».

Выбор, основанный на значении атрибута из списка значений [атрибут~= «значение»]

Этот тип селектора позволяет выбрать элементы, которые имеют значение атрибута состоящем в списке слов, разделенных пробелами. Рассмотрим правило:

p[class~="highlighted"] {
line-height:1.2;
}

которое можно прочесть так: «Выделить все параграфы(абзацы) с атрибутом class, который содержит слово highlighted«. Это не важно, где находится выделенное слово, важно то, что оно присутствует в списке значений атрибута. Это правило можно применить для следующего кода:

<p class="highlighted introduction">This introduction needs to be highlighted..</p>
<p class="postscriptum highlighted">This is a post scriptum and needs to be highlighted..</p>
<p class="editorial post highlighted">Instead this is an editorial and needs to be highlighted..</p>

Ко всем параграфам будет применено правило, поскольку они содержат слово highlighted.
Еще один пример оспользования выбора, основанного на значении атрибута из списка значений. Это общепринятый список ссылок друзей на блоге, известный как Blogroll:

<a href="http://peter.ex.ru" rel="sweetheart met">Peter's Blog</a>
<a href="http://max.ex.ru" rel="friend co-worker">Max</a>

Применим правило для элемента «sweetheart» (который должен быть уникальным) и выделим его красным , а затем покажем значок work.png рядом со списком контактов co-worker:

a[rel~="sweetheart"]{
color:red;
}
a[rel~="co-worker"]{
padding-left:18px;
background:#FFF url(/press-tsentr/work.png) center left no-repeat;
}

Выбор, основанный на значении атрибута, который закончивается “тире”

Это селектор, который используется реже всего. В основном он выбирает все элементы, имеющие атрибут, который является словом или словом с последующим тире (-).
Пример использования:

<a href="http://american-site.example.com" hreflang="en-US">American site</a>
<a href="http://english-site.example.com" hreflang="en">English site</a>
<a href="http://example.site.com">Example site</a>

Следующее правило:

a[hreflang|="en"]{
color:yellow;
}

первые две ссылки станут желтыми, поскольку имеют атрибут hreflang и начинаются либо с EN либо с EN-.
Еще пример использования:

img[class|="img"]{
.. здесь объявления CSS класса начинаются с img или img- ..
}
Статьи по теме
Статья оказалась полезной? Подпишись на RSS рассылку или следуй за мной на твиттере @wpstarter или по этой ссылке wpstarter

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

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

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

  1. универсальный селектор не рекомендуется использовать, IE его зачастую криво обрабатывает

  2. admin:

    2y0ung5eo спасибо за замечание
    В любом случае знать о нем надо
    Это ж основы

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

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

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