4. Атрибуты стиля (CSS attributes)

Размеры и цвета

Единицы размеров

Шрифт и текст

Рамки, поля, отступы, фон

Размещение и размер. Переполнение и обрезка

Наследование. Разбивка на страницы

Наследование элементами свойств контейнеров

Свойства, относящиеся к представлению документа на печатном носителе

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

Рассмотрим соответствующие свойства CSS.

Размеры и цвета

Единицы размеров

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

Допустимые абсолютные единицы:

in – дюймы (2,54 см)

cm – сантиметры

mm – миллиметры

pt – пункты (points, 1pt = 1/72in)

pc – пики (picas, 1pc = 12pt)

Относительные единицы:

em – размер на основе размера шрифта (атрибута font-size). В типографии em - это единица измерения, которая представляет высоту заглавной буквы М шрифта. В веб-дизайне 1 em - это высота базового шрифта в браузере, которая обычно составляет 16 пикселов (но пользователь может изменять ее). Если эта единица применяется для определения размера шрифта, то она имеет смысл относительной величины по отношению к размеру шрифта в родительском элементе. Пример: left: 2.5em

ex – размер буквы x

px – вычисляется на основе разрешения монитора или принтера

% – размер относительно другого, как правило, родительского элемента. Например, ширина ячейки таблицы может быть выражена в процентах от ширины таблицы

Абсолютные единицы хороши для определения размеров элементов в версии для печати. Для отображения на экране, как правило, применяются пикселы, проценты и em. Выбирая, какую единицу измерения использовать, следует исходить из согласованности размеров элементов веб-страницы (текста, блоков, изображений и т.п.). Фактический размер элементов предсказать невозможно (это зависит от разрешения монитора, который пользователь может менять), поэтому речь идет именно о согласованности, т.е. о совместном изменении размеров элементов страницы при ее масштабировании. Если пользователь считает текст слишком мелким, то он должен иметь возможность увеличить его (и наоборот). Современные браузеры позволяют масштабировать страницу как единое целое - все элементы увеличиваются и уменьшаются пропорционально. Однако более старые браузеры (например, IE6-) не предоставляли такой возможности - вместо этого разрешалось регулировать только размер шрифта (т.е. масштабировался текст, а остальные элементы не меняли своих размеров). Существенное изменение размера шрифта текста без изменения размера контейнера этого текста, как правило, нежелательно. Здесь на помощь приходит такая единица длины как em: когда меняется размер шрифта, меняется и величина em, и размеры блоков удается согласовать таким образом со шрифтом. Измерение размера в процентах (от соответствующего размера контейнера) позволяет поддерживать согласованность другого рода - между размерами блоков и размером окна браузера. В большинстве же случаев измерение длины в пикселах - достаточно хорошее решение.

border: 1px solid black;

Ширина этой секции указана в пикселах

Ширина этой секции указана в процентах

Ширина этой секции указана в em

Листинг 4.1. Использование различных единиц измерения для задания ширины (html, txt)

Упражнение. Откройте пример в новом окне браузера и измените а) масштаб страницы; б) размер шрифта; в) ширину окна. Проследите за шириной блоков.

Цвета

Цвет в CSS может быть задан по имени или в виде шестнадцатеричного числа, определяющего интенсивности красного, зеленого и синего цветов (RGB схема). Стандарт HTML 4.01 определяет только 16 цветов, спецификация CSS 2.1 добавляет еще один цвет; RGB схема позволяет задать свыше 2,000,000 цветов, от черного (#000000) до белого (#FFFFFF).

Следующий пример показывает способы задания красного цвета текста:

p { color: red; }

/* стандартный цвет */

p { color: #f00; }

p { color: #ff0000; }

p { color: rgb(255,0,0); }

/* целые в диапазоне 0 – 255 */

p { color: rgb(100%, 0.0%, 0%); }

/* диапазон 0.0% - 100.0% */

Internet Explorer и некоторые другие браузеры распознают множество других именованных цветов, однако нет гарантии, что выбранный именованный цвет (в отличие от RGB схемы) поддерживается всеми браузерами.

Шрифт и текст

Описание шрифта и форматирования текста состоит из целого ряда отдельных атрибутов. Многие термины здесь почерпнуты из типографской практики.

Font-family (гарнитура) задает название используемого шрифта. Поскольку нет полной уверенности, что указанный шрифт установлен и доступен в любом браузере и на любой клиентской машине, разработчик может задать список альтернативных шрифтов в порядке убывания предпочтительности, разделив список запятыми. Если название шрифта содержит пробелы, оно должно быть заключено в кавычки. Пример:

p {font-family: "Times New Roman", Times, serif;}

Font-size (кегль) задает размер шрифта в абсолютных или относительных единицах или относительно пользовательских предпочитаемых размеров.

font-size: small;

/* варианты: xx-small, x-small, small, medium, large, x-large, xx-large */

font-size: larger;

/* варианты: larger, smaller */

font-size: 10pt;

/* абсолютный размер 10 пунктов */

font-size: 10px;

/* размер 10 пикселей. Зависит от разрешения экрана или принтера */

font-size: 120%;

/* 120% от размера шрифта родительского элемента */

Font-style (начертание) переключает между обычным (normal) и курсивным (italic).

h3 {font-style: italic;} /* курсив */

Font-weight задает насыщенность (жирность) шрифта. Возможные значения:

normal – обычный

bold – жирный

bolder – жирнее родительского

lighter – светлее родительского

100 – самый светлый

400 – то же что normal

700 – то же что bold

900 – самый жирный

Установки жирности зависят от установленных на пользовательской машине шрифтов. Часто пользователь не может увидеть различий между близкими значениями жирности.

li {font-weight: bold;}

Font-variant переключает шрифт между обычным (normal) и малыми заглавными буквами (small-caps).

p:first-line {font-variant: small-caps;}

Line-height задает межстрочный интервал в размерных единицах или процентах межстрочного интервала родительского объекта.

p {line-height: 8mm;}

Перечисленные выше атрибуты могут быть объединены в составной атрибут font в следующем порядке: font-style, font-variant, font-weight, font-size, line-height, font-family.

Пример:

font: italic normal 400 12px/14px Arial;

/* выделенные жирным значения обязательны, остальные могут быть опущены */

Эквивалентно

font-style: italic;

font-variant: normal; /* значение по умолчанию можно опустить*/

font-weight: 400; /* значение по умолчанию можно опустить*/

font-size: 12px;

line-height: 14px;

font-family: Arial;

Значения font-size и font-family должны всегда присутствовать в объявлении font и быть расположены в установленном порядке. Если какое-либо из них будет пропущено, то все правило будет признано недействительным.

Text-decoration допускает следующие значения: none (без декорирования), underline (подчеркнутый), overline (надчеркнутый), line-through (перечеркнутый), а также их сочетания.

li {text-decoration: underline line-through;}

Text-transform задает преобразование текста следующим образом: none (нет преобразования, по умолчанию), capitalize (делает первую букву каждого слова заглавной), uppercase (все заглавные), lowercase (все строчные).

h1 {text-transform: capitalize;}

Text-align задает выравнивание текста внутри блока влево (left), вправо (right), по центру (center) или по ширине (justify). Text-indent определяет отступ первой строки текста от левой границы блока.

text-align: justify;

text-indent: 20px;

/* допускаются положительные и отрицательные значения */

letter-spacing регулирует расстояние между буквами. Значения: любая единица измерения CSS (обычно em или px), хотя проценты для этого свойства не работают в большинстве браузеров. Допускаются отрицательные значения. Значение normal сбрасывает letter-spacing в стандартное значение.

Vertical-align устанавливает базовую линию элемента относительно базовой линии окружающего содержимого. С помощью этого свойства можно немного поднять или опустить символ относительно окружающего текста. При применении к ячейке таблицы значения top, middle, bottom и baseline управляют вертикальным размещением содержимого внутри ячейки.

color устанавливает цвет текста. Значение: любое корректное значение цвета.

font: 14px Verdana;

Ко всем абзацам данного примера применено стилевое правило, устанавливающее

кегль 14px и гарнитуру Verdana. Данный абзац демонстрирует эти свойства

в чистом виде.

Текст этого абзаца крупнее, поскольку к нему применен встроенный стиль

со значением свойства font-size:larger.

В этом абзаце увеличен межстрочный интервал путем задания свойста стиля

line-height: 200%, что означает удвоенную высоту строки. Кроме того, тексту

назначен красный цвет.

Эффект разреженного текста достигается

путем применения свойства letter-spacing.

Пример 4.2. Свойства шрифта и текста (html , txt )

Рис. 4.1. Свойства шрифта и текста

Упражнение . Попробуйте практически применить рассмотренные свойства шрифта и текста к элементам body и p в примере.

Рамки, поля, отступы, фон

Рамки

border-style определяет стиль для всех границ блока. Допустимые значения: solid, dotted, dashed, double, groove, ridge, inset, outset, none, и hidden.

Пример : p { border-style: solid; }

Отдельные стили для каждой границы задаются при помощи свойств border-bottom-style, border-left-style, border-top-style и border-right-style, принимающих такие же значения.

Пример : p { border-top-style: double; }

border-width определяет толщину для всех границ блока, указанную в любой из единиц измерения CSS, кроме процентов (как правило, в пикселах). Пример: p { border-width: 2px; }

То же свойство для каждой из границ в отдельности задается при помощи одного из свойств border-top-width, border-right-width, border-bottom-width, border-left-width.

border-color определяет цвет границ блока. Значение цвета указывается любым допустимым способом.

Пример : p { border-color: Green; }

Цвета отдельных границ устанавливаются при помощи свойств border-top-color, border-right-color, border-bottom-color, border-left-color.

border - сокращенное свойство, объединяющее border-width, border-style и border-color.

Пример : p { border: 2px solid #f33; }

Поля

Пустое пространство между содержимым блока и его рамкой (или если, рамки нет, то границей фона) - поле - задается свойством padding. Его размер можно указать в любых единицах измерения.

Свойства padding-top, padding-right, padding-bottom и padding-left задают соответственно верхнее, правое, нижнее и левое поля. Пример: p { padding-left: 20px; }

Свойство padding - сокращенное: оно позволяет задать либо сразу все поля одинаковыми (если указано одно значение), либо различные вертикальные и горизонтальные поля (если указано два значения), либо четыре различных поля, перечисленных в следующем порядке: top, right, bottom, left.

Примеры:

p { padding: 20px; }

/* все поля равны 20 пикс */

p { padding: 5px 20px; }

/* вертикальные поля равны 5 пикс, а горизонтальные 20 пикс */

p { padding: 5px 20px 5px 10px; }

/* сверху 5, справа 20, снизу 5, а слева 10 пикс */

Отступы

Пустое пространство между границей блока и другими блоками задается свойством margin. Оно полностью аналогично свойству padding, с тем отличием, что пространство добавляется не внутри блока, а снаружи.

Пример : p { margin: 20px; }

Цвет фона блока устанавливается при помощи свойства background-color.

Пример : p { background-color: #765; }

padding: 5px 10px;

border: 5px solid gray;

background-color: #2ae;

В данном примере к элементу body применены свойства margin, padding, border

и background-color. В упражнении предлагается назначить эти же свойства

другим элементам страницы - абзацу, списку (и его элементам), а также

изображению.

margin - отступ

padding - поле

border - рамка

background-color - цвет фона

Листинг 4.3. Поля, рамки, отступы и фон (html, txt)

Рис. 4.2. Поля, отступы, рамки и фон

Упражнение. В данном примере все свойства применены к элементу body. Примените их вместо этого поочередно к остальным имеющимся в примере элементам (div, p, ul, li и т.д.). Попробуйте задавать различные значения для разных границ, разных полей и отступов.

Размещение и размер. Переполнение и обрезка

top, left, right и bottom управляют положением элемента относительно контейнера: top устанавливает расстояние верхней границы элемента от верхней границы контейнера; bottom - нижней границы элемента от нижней границы контейнера и т.д. Эти свойства работают только тогда, когда элемент позиционирован абсолютно (а контейнером, относительно которого ведется отсчет, считается тот контейнер, которые позиционирован абсолютно, относительно или фиксированно). Позиционированию посвящена отдельная лекция.

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

max-width и max-height , а также min-width и min-height определяют соответственно максимальные и минимальные размеры элемента.

overflow определяет, как отображать содержимое элемента, если оно не вмещается внутри него - такое может произойти, если размеры элемента ограничены при помощи одного из описанных в данном разделе свойств. Значения: visible, hidden, scroll, auto. Значение visible позволяет показать не поместившееся содержимое вне области элемента (IE6- просто увеличивает в этом случае саму область); hidden скрывает любое содержимое за пределами отведенной ему области; scroll добавляет полосы прокрутки к элементу, auto добавляет полосы прокрутки, только когда они необходимы.

position: absolute;

border: 2px solid black;

overflow: scroll;

overflow: hidden;

overflow: visible;

max-width: 150px;

max-height: 100px;

Эта секция имеет свойство стиля overflow: scroll - поэтому полосы прокрутки

показаны (хотя и не нужны).

Эта секция имеет свойство стиля overflow: hidden - поэтому не поместившийся

в нее текст остается невидим. sed ultrices sed, malesuada pulvinar metus.

Эта секция имеет свойство стиля overflow: visible - поэтому часть текста

(если его много) может выходить за ее границы.

Листинг 4.4. Применение свойства overflow (html, txt)

Рис. 4.3 . Задание позиции, размера и поведения при переполнении блоков

Упражнения . Измените значение scroll на auto. Добавьте в блок, на который влияет это свойство, столько текста, чтобы появился скроллер. Чем ограничена высота блока?

clip создает прямоугольное окно, которое показывает часть элемента. Значения: rect(y1, x2, y2, x1), причем вырезанная область будет представлять собой прямоугольник с левым верхним углом в (x1; y1) и левым нижним в (x2; y2). Порядок координат легко запомнить, если заметить, что x1 перенесено в конец списка. Данное свойство влияет только на абсолютно позиционированные элементы.

position: absolute;

background-image: url(clipped.png);

clip: rect(10px 240px 280px 20px);

background-color: Blue;

Листинг 4.5. Обрезка абсолютно позиционированных блоков (html, txt)

Рис. 4.4. Обрезка блока

Упражнение. Модифицируйте значение свойства clip так, чтобы показать а) верхнюю половину; б) левую половину; в) правую нижнюю четверть прямоугольника.

display позволяет вариант отображения элемента: строчный сделать блочным (что вызывает разрыв линии над и под элементом, как у абзаца и секции), а блочный - строчным (что заставит элемент отображаться на той же линии, что и окружающие элементы, как якорь или изображение). Значения: block, inline, none (всего 17 значений, большинство из которых не дают никакого эффекта в современных браузерах). Значение none заставляет элемент полностью исчезнуть со страницы.

display: inline;

Этому заголовку назначено стилевое свойство display: inline

и поэтому он располагается в одной строке с соседними элементами.

сделаны блочными элементами

и поэтому они располагаются на отдельных строках.

Листинг 4.6. Изменение варианта отображения элемента при помощи свойства display (html, txt)

Упражнение. Пронаблюдайте влияние свойства display, устанавливая его значения поочередно в block, inline и none.

visibility определяет, отображает ли браузер элемент. В отличие от значения none свойства display, установка которого скрывает элемент и удаляет его из потока страницы, значение hidden свойства visibility оставляет пустое пространство в том месте, где был бы элемент.

cursor позволяет изменять вид указателя мыши, когда он передвигается над определенным элементом. Значения: auto, default, crosshair, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, progress.

Рис. 4.5. Применение свойства display

Наследование. Разбивка на страницы

Наследование элементами свойств контейнеров

Наследование - это механизм, с помощью которого свойства, относящиеся к какому-либо элементу страницы, распространяются и на вложенные в него элементы. Например, поскольку элемент р (абзац) всегда находится внутри элемента body (тело документа), то атрибуты, применяемые к body, наследуются и р. Например, задав CSS-свойство color элементу body, вы тем самым установите цвет для всего текста документа (на каком бы уровне вложенности текст ни находился - в абзаце, списке или заголовке). Таким образом, механизм наследования экономит время: без него дизайнеру пришлось бы заботиться отдельно о секциях, абзацах, выделениях и т.п.

С другой стороны, естественно, что большинство CSS-свойств вообще не наследуется, например border - иначе бы рамка, заданная, например, для body, появилась бы и во всех списках (в каждом пункте и подпункте), абзацах и других блоках. Как правило, свойства, которые затрагивают размещение элементов на странице (отступы, поля, рамки элементов), не наследуются.

Обычно наследуются следующие основные свойства: color, font, letter-spacing, line-height, list-style, text-align, text-decoration, text-indent, text-transform, visibility, word-spacing. Но и здесь возможны исключения: задание свойств color и font-size для body не повлияет на цвет гиперссылок, а размеры заголовков, хотя и изменятся, но останутся больше размера обычного текста - это вытекает из здравого смысла.

font-size: 20px;

border: 5px double blue;

Заголовок 1 уровня

Текст в абзаце. В данном примере элементу body назначены следующие стилевые

свойства: цвет текста, размер шрифта, рамка и поле. Как видите, вложенные

элементы наследуют эти свойства выборочно.

Листинг 4.7. Наследование стилей (html , txt )

Рис. 4.6. Наследование стилей

Упражнение. Какие свойства элемента и какими элементами унаследованы в данном примере от свойств body ?

Свойства, относящиеся к представлению документа на печатном носителе

page-break-before и page-break-after управляют разрывом страниц. Если применить одно из этих свойств со значением always к какому-либо элементу страницы, то при печати документа будет произведен переход на новую страницу соответственно до или после этого элемента. Существует и ряд других свойств, относящихся к печатному носителю, но они пока не получили единой поддержки во всех браузерах.

page-break-after: always;

border: 2px solid gray;

В данном примере документ содержит два элемента style - один для представления

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

рамки и поля, а печатный - ничего.

Данному абзацу назначено стилевое свойство page-break-after: always, в

результате чего при печати следующий абзац будет выведен на новой странице.

То, как будет выглядеть напечатанная страница, всегда можно увидеть, воспользовавшись

командой меню Файл - Предварительный просмотр.

Листинг 4.8. Свойства, относящиеся к представлению документа на печатном носителе (html , txt )

Рис. 4.7. Свойства для печатной версии

Рис. 4.8. Предварительный просмотр

Упражнение . Попробуйте применить свойство page-break-before. Проверьте результат в окне предварительного просмотра.

Вопросы

Перечислите единицы измерения, применяемые в CSS. Какие из них используются наиболее часто?

Какими способами можно задать цвет в CSS?

Какие способы применяются для задания размера шрифта?

Какие параметры шрифта можно указать при помощи CSS-свойства font?

Перечислите основные свойства CSS, относящиеся к тексту.

Какие свойства рамок регулируются правилами CSS?

Чем отличаются отступы от полей? Какие свойства CSS задают то и другое?

Как задать положение и размеры элемента (при абсолютном позиционировании)?

Что такое наследование стилей?

Какие свойства вызывают разрывы страниц при печати?

На этом уроке познакомимся с тем как найти элементы на странице по атрибуту.

В jQuery выборка элементов по атрибуту выполнена в соответствии со спецификацией CSS.

Когда Вы используете атрибуты для выбора элементов, учитывайте то, что некоторые атрибуты могут иметь несколько значений, разделенных между собой пробелом.

Например:

... ... ... // Выбрать элементы a, имеющие атрибут $("a");

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

• двойные кавычки внутри одинарных кавычек: $("a") .
• одинарные кавычки внутри двойных кавычек: $("").
• экранированные одинарные кавычки внутри одинарных кавычек: $("a") .
• экранированные двойные кавычки внутри двойных кавычек: $("a") .

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

jQuery - Селекторы для поиска элементов по атрибуту

Выбирает элементы, которые имеют указанный атрибут (name) со значением, равным заданной строки (value) или начинающимся с этой строки (value), за которой следует дефис.

Например, выбрать все элементы div , которые имеют атрибут class со значением, равным alert или начинающимся с alert- .

...

... ... ... ... ... //Выберет все элементы div, которые имеют атрибут class со //значением alert или со значением, начинающимся с alert- $("div");

Выбирает элементы, который имеют указанный атрибут (name) со значением, содержащим заданную подстроку (value).

Например: выбрать все элементы, которые имеют атрибут href, содержащий в качестве своего значения подстроку youtube:

... ... ... //Выберет элементы, которые имеют атрибут href со значением //содержащим подстроку youtube $("");

Выбирает элементы, которые имеют указанный атрибут (name) со значением, содержащим заданное значение (value) как одно из его значений (т.е. отделенно от другого значения пробелом) или равным этому значению (value).

Например, выбрать все элементы а, которые имеют атрибут class со значением, содержащим значение btn как одно из его значений (т.е. отделено от другого знаения пробелом) или равным btn:

... ... Отправить ... ... $("a");

Выбирает элементы, которые имеют указанный атрибут (name) со значением, которое заканчивается заданным значением (value).

Например, выбрать все элементы, которые имеют атрибут href , заканчивающийся на ".zip".

... ... ... //выберет все элементы а, у которых значение атрибута href заканчивается на.zip $("a");

Выбирает элементы, у которых указанный атрибут (name) имеет значение value .

Например, выбрать все элементы, которые атрибут type со значением button:

Информация о заказе $("");

Выбирает элементы, которые не имеют указанный атрибут (name) или имеют указанный атрибут (name), но он не содержит заданного значения (value).

Например, выбрать элементы a , которые не имеют атрибут rel или имеют его, но он не содержит значение nofollow.

... ... ... ... $("a");

Выбирает элементы, которые имеют указанный атрибут (name) со значением, начинающимся с заданного значения (value).

Например, выбрать все элементы а, имеющие класс btn и атрибут href со значением, начинающимся с "http".

... ... ... $("a.btn");

Выбирает элементы, которые имеют указанный атрибут (name). Значение данного атрибута (name) может быть любым.

Например, выбрать изображения (img), имеющие атрибут alt:

$("img");

- выбирает элементы, у которых указанные атрибуты (name1 и name2) имеют соответствующие значения (Value1 и Value2).

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

$(""); //attr1 - селектор атрибута 1 //attr2 - селектор атрибута 2 //attrN - селектор атрибута N

Например, выбрать элементы a , имеющие атрибут id , атрибут href начинающийся с http и атрибут class со значением, содержащим значение btn как одно из его значений или равным btn:

... ... $("a");

Устанавливает стиль для элемента, если задан специфичный атрибут. Его значение в данном случае не важно.

Синтаксис

[] { Описание правил стиля } E[] { Описание правил стиля }

Стиль применяется к тем элементам, внутри которых добавлен указанный атрибут. Пробел между именем селектора и квадратными скобками не допускается.

Обозначения Описание Пример

	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	{1,4}
#	Повторять один или больше раз через запятую.	#

× Пример

Селекторы атрибутов q { font-style: italic; /* Курсивное начертание */ quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */ } q { color: maroon; /* Цвет текста */ }

Продолжая известный закон Мерфи, который гласит: Если неприятность может случиться, то она обязательно случится, можем ввести свое наблюдение: После того, как веб-страница будет корректно отображаться в одном браузере, выяснится, что она неправильно показывается в другом.

Результат примера показан на рис. 1.

Рис. 1. Изменение стиля элемента в зависимости от применения атрибута title

В данном примере меняется цвет текста внутри контейнера , когда к нему добавляется атрибут title . Обратите внимание, что для селектора q нет нужды повторять стилевые свойства, поскольку они наследуются от селектора q .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

×

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

Селекторы в CSS

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

P{ стили… }

В данном случае селектором выступает p – тег абзацев. Такое правило добавит стили для всех абзацев на веб-странице.

Какими бывают css селекторы?

Селектор тега – самый простой . Он был продемонстрирован в примере. Чтобы записать его в css, нужно написать имя тега без угловых скобок. Стили будут применены ко всем элементам с таким тегом.
table{} – стили для всех таблиц
li{} – стили для всех пунктов списка
a{} – стили для всех ссылок

Стилевой класс – к любому элементу на веб-странице можно привязать стилевой класс. Даже к одной букве. Потом в css-файле можно обратиться к этому элементу, прописав для него собственные стили. Для этого нужно поставить точку и написать имя стилевого класса после нее. Примеры:
.about{} – правила применятся ко всем элементам, которые имеют атрибут class = "about"
.down{} – правила применятся ко всем элементам, которые имеют атрибут class = "down"
.float{} – правила применятся ко всем элементам, которые имеют атрибут class = "float"

Как видите, главное поставить точку. Стилевой класс можно привязывать к неограниченному количеству элементов. Элементу можно прописать несколько классов.

Идентификатор – еще один вид селекторов. Один идентификатор можно задать только одному элементу. Он не может иметь двух идентификаторов, а также id привязанный к этому элементу, не может быть прописан нигде более.

Задается он так:

Абзац

То есть также, как и класс, только используется атрибут id в качестве значения которого используется любое слово.

Чтобы обратиться к элементу с идентификатором через css нужно написать значение id и перед ним поставить решетку.

#first{ font-size: 22px }

Мы обратились к абзацу с id = first . Стиль применится только к нему. У остальных абзацев размер шрифта не изменится.

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

В CSS есть один интересный вид селекторов – псевдоклассы. То есть классы, которые по умолчанию есть у элементов и их не нужно дополнительно задавать. Некоторые из них работают только для ссылок, а некоторые можно применить ко всем элементам. В любом случае css псевдоклассы сильно облегчают работу веб-разработчику.

Псвевдокласс – это стилевой класс элемента, который мы на самом деле не задавали сами, просто он есть сам по себе. Например, увидев в html такой код:

Абзац

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

Для ссылок Для полей ввода и ссылок

:focus – стиль применяется к элементу, который получает фокус ввода.
На самом деле для полей ввода появилось очень много новых классных псевдоклассов, но все они впервые введены в CSS3 , а в этой статье я хотел бы обсудить только самые простые. О CSS3 селекторах обязательно будет статья в дальнейшем.

Для всех элементов

:hover – стиль применяется при наведении на элемент

:first-child – выбрать первый дочерний элемент

:last-child – последний дочерний элемент

:nth-child() – в скобках записывается число или формула, которая определяет, какие элементы будут выбраны.

:first-of-type, :last-of-type, :nth-of-type() – работают практически аналогично предыдущим псевдоклассам. Разница только в том, что здесь учитывается тип элемента. Разницу можно почувствовать на примере:
li:first-child – будет выбран первый пункт списка, но только в том случае, если в родительском блоке элемент li идет первым. Если до него стоит другой тег, не выберется ничего.

li:first-of-type – будет выбран первый пункт списка из всех, что есть в родителе. При этом не важно, где они располагаются в коде. Надеюсь, разница понятна.

:nth-last-child – работает аналогично:nth-child, но отсчет ведется от последнего элемента, а не от первого.

:nth-last-of-type – аналогично:nth-last-child, но с учетом типа элемента.

Это не все псевдоклассы, но самые популярные и необходимые. Собственно, все псевдоклассы помечаются в css одинаково, через двоеточие. К тому же можно комбинировать селекторы и получать интересные возможности:
a:visited:active – стили для уже посещенной ссылки, на которую кликают.
div:first-child:hover – стили для всех первых блоков в их родителях, на которые наводят курсор.

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

Объединение селекторов

Еще одно важное правило, о котором нужно знать. Селекторы стилевых классов можно записать, не отделяя их друг от друга. Например:
.class1.class2 – выберет те элементы, у которых есть оба этих класса.
.class1.class3.class8 – выберет элементы, к которым привязаны все три стилевых класса.

Вложенные селекторы

Если отделять селекторы друг от друга пробелами, то можно оттянутся до нужного нам элемента. Примеры:
table td – выберет все ячейки, лежащие в таблицах
ul li a – выберет все ссылки, лежащие в пунктах списков (а пункты списков в свою очередь лежат в самих списках)
.class1 p – выберет все абзацы с атрибутом class = “class1”
.class2 p span – выберет все содержимое тегов, лежащее в абзацах с классом class2.

Вкладывать и комбинировать таким образом можно сколько угодно раз. Примеры:
#header .logo span:first-letter{} – выберет первую букву в спане логотипа, который расположен в шапке
.class1.class2:hover{} – определит стиль при наведении мышки для элементов, которые имеют оба стилевых класса.

Дочерние селекторы

Если вам нужно задать стили для элементов родителя, которые являются НАПРЯМУЮ дочерними , то нужно прописать это так:
ul > li{} – выберет пункты списка, которые вложены в него напрямую, а не лежат в других тегах
p > a{} – выберет только те ссылки в абзацах, которые лежат непосредственно в них, а не вложены в другие теги (которые, в свою очередь, уже вложены в абзацы)
Пример:

Если прописать такой селектор p > a , то применятся ли стили к ссылке в вышеприведенном примере? Нет, потому что она еще вложена в другой тег, то есть не является напрямую дочерней.

Соседние селекторы

Последнее, что мы сегодня рассмотрим. Если прописать в css так:
.class1 + .class4 {} , то этот селектор выберет элемент с атрибутом class = "class4" , и этот элемент должен стоять в HTML-коде сразу же за элементом с классом class1. Только в этом случае все будет работать. Опять же рассмотрим на примере:

Сработает ли вышеуказанный селектор (.class1 + .class4 {})? Нет, потому что элементы не стоят рядом. Между ними находится тег img . Вот если его удалить, тогда все заработает.

Итак, мы с вами рассмотрели самые основные и наиболее простые селекторы. Наверняка этих знаний вам хватит, чтобы решить 95% проблем. В следующей статье я опишу некоторые более специфические css селекторы.

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

Позволяют выбрать определенные элементы, не привязывая к ним стилевой класс или идентификатор.

Селекторы атрибутов, это те селекторы, в которых в квадратных скобках записывается атрибут, либо атрибут со значением. Несколько примеров, чтобы было понятно:
* – выбирает все элементы, которые имеют атрибут href с любым значением.
input – выбирает все input-элементы, у которых есть атрибут disable (все отключенные поля).
input – выбирает все поля, тип которых password , то есть поля для ввода пароля.
img – выбирает картинку, у которой задан атрибут src = "/logo.png" .

Как видите, прописывать css селекторы атрибутов не так уж и сложно. Их самое главное отличие – квадратные скобки, в которых записывается либо просто атрибут, либо атрибут с его точным значением. Но на этом функционал этих селекторов не заканчивается.

Продвинутые css селекторы атрибутов

Все нижеперечисленные селекторы чувствительны к регистру.
Поиск в начале строки
div – выбирает все div-ы, у которых есть стилевой класс, начинающийся на "block" . Таким образом, будут выбраны, например, такие блоки: "block-head", "block-3", "blocknote" . Главное, чтобы в начале значения было ключевое слово.

Поиск в конце строки
a – выбирает все ссылки, у которых адрес заканчивается на.rar . Таким образом, если у вас на сайте можно что-то скачать, то вы можете добавить иконку рядом со всеми ссылками на архивные файлы.

Поиск подстроки везде в значении
span – выберет все теги span, у которых в имени класса в любом месте этого имени содержится “art”. Таким образом, будут выбраны, например, спаны с такими классами: party, clart, art-1.

Поиск префиксов
p – выберет абзацы со стилевым классом, которые имеют имя, либо точно совпадающее с “first”, либо содержащие префикс first- , с которого начинается имя класса.

Поиск слов внутри значения
input – выберет все элементы input, в которых значение атрибута идентификатора содержит в себе слово text . Его отличие от поиска подстроки везде отличается тем, что входить должно именно слово, а не подстрока.

Последние два варианта редко где применяются и едва ли вам часто пригодятся, но для общего развития все-таки можно о них знать.

Для чего могут пригодиться селекторы атрибутов

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

Реализовать это можно так:

A {css-правила}

На самом деле способов применения селекторов атрибутов можно придумать еще много. Они могут в какой-то мере упростить работу там, где это нужно. Используйте css и подписывайтесь на блог, чтобы узнавать больше о веб-разработке.

Css3 селекторы и псевдоклассы

О новых css3 селекторах, о которых не писал в прошлых статьях.

Улучшение работы с формами

Это новые псевдоклассы. В основном все они касаются новых возможностей форм.
:enabled – псевдокласс выберет все активные поля. То есть те, в которые можно что-то записать или они хотя бы доступны для чтения.
:disabled – противоположный псевдокласс, выбирает все заблокированные поля. Соответственно, с его помощью вы можете добавить дополнительные стили таким полям.
:read-only – выбор всех input , которые доступны только для чтения.
:read-write – выбираются все поля, которые доступны для редактирования.

Добавление стилей с учетом валидности

Также появились очень интересные псевдоклассы, с помощью которых вы можете назначить стили в зависимости от валидности или невалидности введенного значения. Раньше это можно было сделать только с помощью JavaScript .
:valid – выбирает все поля, введенное значение в которых удовлетворяет требованиям. Сами требования обычно задают с помощью атрибута pattern. Также может зависеть от типа поля. Например, поле, в котором пишется адрес электронной почты, будет считаться невалидным, если во введенном значении нет @ .
:invalid – соответственно, выбирает все невалидные поля, в которых значение не соответствует тому, что ожидается. Например, вы можете сделать цвет текста в таких полях красным:

Input:invalid{ color: red; }

Теперь если мы пишем неправильные значения в полях, текст становится красным. Соответственно, можно также использовать картинки галочки и крестика для того, чтобы показывать пользователю, правильно ли он заполнил все.

Стили для обязательных полей

Также хотел бы отметить, что соответствующий псевдокласс появился и для обязательных полей.
:required – выберет элементы, у которых есть данный атрибут. То есть все поля, обязательные к заполнению.
:optional – противоположный класс, выберет поля, которые являются необязательными.

Псевдокласс:not

:not является своего рода антиселектором, который позволяет определить, к каким элементам НЕ ПРИМЕНЯТЬ стили. Пару примеров.
a:not(:last-child){} – выберет все ссылки на странице, кроме последней.
.nav:not(li){} – выберет все элементы с классом nav , но это не должны быть пункты списка (li).
#article p:not(.special:first-child) – выберет все абзацы в блоке article , кроме первого абзаца с классом special.

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

Вот такой вот нужный иногда псевдокласс, он нужен не только в теории, но и на практике. Ах да, еще же вы можете продолжить составление селектора после:not (). Например:
div:not(#header) .wrap – выбирает все дивы c классом wrap , кроме дива с id="header"

Это были селекторы, которые появились в CSS3.

Приоритет css селекторов

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

Класс является более приоритетным селектором, чем селектор тега (p, table, ul). Псевдокласс имеет такой же вес, что и простой класс. p:first-line приоритетнее, чем.firstline , потому что во втором селекторе просто класс, а в первом — селектор тега + псевдокласс.

Еще одно полезное правило — чем конкретнее селектор, тем более приоритетными являются стили для него. Например, между body и p битву выигрывает абзац, поскольку это более конкретный селектор, чем body (потому что это вся страница, то есть не очень конкретно). А table p , в свою очередь, конкретнее, чем просто p . В общем, просто знайте о таких правилах.

Итог

В этой статье были рассмотрены почти все селекторы CSS. Хочу еще добавить, что если вы используете jQuery, то там свои селекторы, хотя очень похожие на эти, но небольшие различия есть.

CSS является мощным инструментом для веб разработки. Он позволяет воплощать в жизнь практически все наши задумки и идеи.

Важное преимущество CSS — это возможность применения стилей ко всем однотипным элементам страницы. Чтобы эффективно пользоваться данной возможностью, нужно хорошо разобраться с CSS селекторами . Селектор — это как раз то, к чему применяется какое-либо правило.

Существует несколько видов CSS селекторов. Перейдем к рассмотрению этих видов и примеров их применения.

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

Универсальный селектор задает стиль всем элементам документа. Обозначается символом звездочки (*). Например, данное определяет, что все элементы будут иметь красный цвет:

* {color: red;}

Селекторы элементов

Когда пишутся стили для HTML документа, то в качестве элементов выступают HTML теги (h1, p, img, a, body...). Например:

H1 { font-family:Verdana; font-size:12px; color:#666; }

В данном случае все заголовки первого уровня в документе будут иметь шрифт Verdana, размер 12px и серый цвет.

Селекторы классов

Данный селектор позволяет назначить стиль независимо от типа элемента. Но для их работы нужно добавить некоторые пометки в HTML код, а именно атрибут class с каким либо значением, которое вы будите использовать при создании CSS правила.

Допустим, необходимо некоторые изображения на странице обвести в рамку. Для этих изображений прописывается атрибут class . Например:

А в файле стилей пишем правило:

Border_img {border:1px solid #00f;}

Данный класс можно применять ко многим элементам страницы и не обязательно только к изображениям. К одному HTML элементу можно применить сразу несколько классов, которые пишутся через пробел:

Селекторы идентификаторов

Тоже позволяет назначить стиль независимо от типа элемента. Но, в отличии от селектора классов, может использоваться в документе только один раз. Обозначается символом решетки (# ). У тега прописывается атрибут id . Например:

... #menu { width:25%; background-color:#ccc; float:left; }

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

Применяются для выбора элементов на основании их атрибутов, а так же значений этих атрибутов.

Для выбора элемента по его атрибуту, независимо от значения этого атрибута используется следующая конструкция: [атрибут] . Например, нам понадобилось отметить красной рамкой изображения у которых задан атрибут alt . Делаем так:

img {border:1px solid red;}

Можно выбрать только те теги, атрибуты которых имеют определенное значение. Нужно, например, ко всем тегам с атрибутом type , значение которого text , применить правило — размер текста 16px. Делается следующим образом:

{font-size:16px;}

Если нужно выбрать элементы, атрибут class которых содержит слово img , то используется такой код:

{margin:5px;}

Если нужно выбрать атрибут, значение которого начинается с какого-либо текста:

{color:#009};

Если нужно выбрать атрибут, значение которого заканчивается на какой-либо текст:

{font-size:10px;}

Если нужно выбрать атрибут, значение которого содержит какой-либо текст:

{background-color:#0cc;}

Селекторы потомков (контекстные селекторы)

Селекторы потомков подразумевают задание правил для тех элементов, которые находятся внутри какого-то определенного элемента. Понятнее будет на примере. Допустим нужно выделить красным цветом только те ссылки a , которые находятся внутри параграфа p и являются к нему дочерними:

p>a {color:red;}

Селекторы сестринских (соседних) элементов

Для выбора соседних элементов, расположенных на одном уровне, имеющих одного родителя делаем так:

Для выбора элементов, расположенных на одном уровне, имеющие одного родителя делаем так.

strong + em {font-style:italic;}

Соседними в данном случае являются теги strong и em , а так же em и a .

Селекторы псевдоклассов

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

Например, нужно изменить цвет посещенных ссылок:

A:visited {color:#933;}

Или, например, изменить цвет текста при фокусе (установке курсора) на текстовом поле формы:

Input:focus {color: red;}

Селекторы псевдоэлементов

Псевдоэлементы - это условные фиктивные элементы, которые являются частью существующих элементов или вводятся в документ дополнительно. Селектор псевдоэлементов и селектор псевдоклассов, точки зрения синтаксиса - это фактически одно и то же. Разница только в выбираемых элементах.

В CSS2 определено 4 псевдоэлемента: первая буква (:first-letter ), первая строка (:first-line ) и применение специальных стилей до (:before )и после (:after ) элемента.

Зададим, к примеру, первой букве каждого абзаца свой стиль:

P:first-letter { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #333; }

Посредством селекторов можно довольно просто создавать CSS-правила, применяемые к большому числу аналогичных элементов.