Глава 6
Данная глава является своего рода продолжением главы первой о способах внедрения CSS в HTML документ. Отложил эту главу «на потом», нарушив тем самым стандартную последовательность обучения CSS, с той лишь целью, чтобы раньше времени не забивать Вам голову информацией, которая в начале была для Вас малопонятной.
Теперь, когда Вы уже познакомились с некоторыми свойствами CSS, поняли принцип построения и внедрения CSS в HTML, настал час и необходимость поговорить о CSS классах и идентификаторах, так как дальнейшее обучение, хоть и представляется возможным, но не раскроет в полной мере все возможности CSS.
Классы CSS.
Начнём с классов..
Как присвоить элементу или группе идентичных элементов индивидуальный стиль, отличный от основного, уже указанного в стилевом описании документа? Не знаю задавались Вы этим вопросом или нет, но рано или поздно на него необходимо найти ответ.
Итак.. предположим в файле CSS к элементу <p> у нас применён следующий стиль:
p {color: #0000ff; font-size:14px}
И все вроде бы хорошо.. все параграфы синенькие и размер у них 14px, но нам надо сделать так чтобы некоторые из этих параграфов были розовые! И как быть??
На помощь приходят классы.
Для того чтобы выделить некоторые из параграфов розовым цветом, необходимо присвоить элементу определённое имя и вывести его тем самым в класс, в некую нестандартную, для страницы или сайта в целом, категорию.
Ну что давайте попробуем? Делается это так:
p.rose {color: #ff00ff; font: italic 16px Arial}
Поясню p — это элемент HTML (селектор) в данном случае наш параграф, .rose — это индивидуальное имя класса которое мы сами выдумали, оно может быть любым необязательно rose-розовый, точка между селектором и именем класса есть дань уважения к синтаксису принятому в CSS — теперь браузер поймет что данный элемент p выведен в класс rose.
Ну что ж имя мы присвоили теперь нам необходимо в документе HTML указать теги (в нашем случае теги <p>) которым необходим индивидуальный стиль. Делается это с помощью атрибута class.
Вот так:
<p class=»rose»>Этот параграф использует имя класса rose и тем самым выделяется из основной массы</p>
Ну и пример:
В данном примере класс «rose» может быть присвоен только параграфу — элементу p. Для того чтобы данное стилевое описание могло распространятся на все элементы, в файле CSS (или между тегами <style></style> в заголовке документа) элемент явно не указывается и синтаксис приобретает следующий вид:
.rose {color: #ff00ff}
Теперь указав в любом элементе class=»rose» он примет стиль данного класса.
Пример:
Обратите внимание на тот факт, что недостающие описания стиля выведенного в отдельный класс, элементы черпают из основного стилевого описания или же берут из свойств элемента «по умолчанию».
Например, заголовок <h1 class=»rose»> был синим, а стал розовым, но при этом сохранил свой размер 22 пикселя, так как в нашем классе rose никаких разговоров о размере шрифта не шло.. мы лишь «договорились» с браузером, что элементы из группы rose будут розовыми.
Идентификаторы
Идентификаторы они же id селекторы, весьма схожи с классами, с тем лишь отличием, что идентификатор может иметь одно единственное уникальное имя во всем документе. Идентификаторы, как правило, применяются в том случае, если возникает необходимость управлять стилем элемента динамически с помощью скрипта, обращаясь к его индивидуальному имени.
В файле CSS имя указывается со знаком решётки в его начале.
Вот так, например:
#block {color: #ff00ff; font: italic 16px Arial}
А к нужному элементу добавляется атрибут id=»block» например
<p id=»block»>Параграф с идентификатором</p>
Вот пример:
Ну так в чем же отличие между классом и идентификатором?
Покажу на примере:
Курсивом, в данном примере, выделен скрипт, который может динамически обрабатывать блоки <div> с уникальными именами «block» и «block1» (скрывать и показывать его по нажатии на ссылку), и хотя пока Вам, думаю, мало, что понятно из выше написанного, но цель данного примера показать, как скрипт может обращаться к блоку через атрибут id. А вот с помощью классов мы бы не достигли такого результата.
Ну, думаю, объяснил кое как..
Полезные советы:
-
При построении CSS будьте логичны, соблюдайте «значимость» элементов и их порядок, так же как они вложены друг в друга в HTML коде.
Например:
body {сначала опишите стиль страницы в целом}
div {потом её отдельных частей — блоков}
a {затем ссылок}
h1.-.h6 {далее заголовков}
p {и в конце параграфов}
Для чего это нужно?
Ну во-первых, просто для удобного чтения и «навигации» по CSS описанию. Когда Вам потребуется найти какой ни будь элемент Вы уже изначально будете представлять где он приблизительно находится в начале, середине, или конце..
Во-вторых, что более важно, загрузка страницы происходит не моментально и не всегда приятно наблюдать как содержание данной страницы при загрузке «прыгает» и всячески «шевелится» так как сначала прописываются «малозначимые» стили элементов, например шрифт параграфов, а в конце «значительные» например размеры блоков, с помощью которых свёрстан весь сайт. К тому же загрузка, по каким либо причинам, вообще может пройти не до конца..
Что увидит (сначала увидит) пользователь при «неправильном» построении CSS? Красивый шрифт, беспорядочно разбросанный в окне браузера? Или нормальное построение, но без красивого шрифта? — Это уже решать Вам!
-
При использовании классов и идентификаторов придумывайте им осмысленные информативные имена. Варианты тапа: .aaa .123 #abc #cba приведут к путанице!, я уж не говорю о том, что возможно в Вашем коде будет разбираться посторонний человек. Придумайте свою «систему» названий и не нарушайте её, так Вы сэкономите собственное время и затраченные усилия.
www.webremeslo.ru
Селектор id
CSS селектор id
(идентификатор) предназначен для применения стиля к уникальным элементам на веб-странице. Уникальность элемента означает, что элемент с данным оформлением будет использоваться на странице всего один раз. В роли таких элементов могут быть: шапка сайта, нижний колонтитул, меню навигации и тд.
Для использования селектора id
, нужно создать идентификатор (id), придумав ему уникальное имя, и прописать его в атрибуте id
элемента, к которому будет применяться стиль. В CSS коде селектор id
начинается с символа #
сразу после которого идет имя идентификатора.
Каждый идентификатор может встречаться на странице только один раз, т.е. определенный id
должен быть использован на странице только с тем тегом, для которого он предназначен. Если один и тот же идентификатор будет применен более, чем к одному элементу, во-первых HTML код не пройдет валидацию, во-вторых это может вызвать некорректную обработку кода браузером и вы можете увидеть не тот результат, которого ожидали.
Пример работы селектора id
:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1">Добро пожаловать!</p> <p>К этому абзацу не будет применен стиль.</p> </body> </html>
Попробовать »
Примечание: не давайте идентификаторам имена, начинающиеся с цифр, они не будут работать в браузере Mozilla Firefox
.
Селектор class
CSS селектор class
позволяет также как и селектор id
стилизовать конкретный элемент страницы, но в отличие от id
, селектор class
позволяет применить свой стиль к нескольким элементам на веб-странице, а не только к одному.
Для использования селектора class
, нужно указать, к какому элементу на странице вы хотите его применить, для этого надо всего лишь добавить атрибут class
к HTML тегу, который нужно стилизовать, и указать в качестве значения нужное имя класса.
Правила для имен классов:
- в CSS коде все обозначения селекторов класс должны начинаться с точки, с ее помощью браузеры опознают селектор класс в таблице стилей CSS
- в имени класса разрешается использовать только буквы, числа, дефис и знак подчеркивания
- имя класса после точки всегда должно начинаться с буквы
- имена классов чувствительны к регистру, например
.Menu
и.menu
будут рассматриваться в CSS, как два разных класса
CSS код для классов ничем не отличается от CSS кода для других селекторов. После имени класса идет блок объявлений, содержащий все необходимые свойства:
.menu { color: #33CCFF; font-family: sans-serif; }
Если атрибут class
, с одним и тем же именем, добавлен к нескольких разным тегам, а вам нужно чтобы стиль применялся только к определенным тегам, то в селекторе перед обозначением класса нужно указать тег, к которому должен быть применён стиль:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> p.center { text-align: center; } </style> </head> <body> <h1 class="center">Стиль не будет применен.</h1> <p class="center">Абзац будет выровнен по центру.</p> </body> </html>
Попробовать »
Как вы уже заметили из примера, писать точку перед именем класса в HTML коде (в значении атрибута class) не нужно. Она требуется только в обозначении селектора в таблице стилей.
puzzleweb.ru
Идентификаторы
Каждый НТМL-элемент может иметь атрибут id. Он предназначен для идентификации какого-либо конкретного тега. В пределах всей HTML-страницы должен существовать только один тег с определенным значением атрибута id.
личие нескольких элементов с одинаковым значением id не допускается и может привести к ошибке. Значение атрибута id может состоять из букв латинского алфавита, цифр, знака подчеркивания и дефиса. Причем значение атрибута может начинаться с латинской буквы или со знака подчеркивания (но не с цифры или другого символа). Кроме того, значения атрибута id чувствительны к регистру. Атрибут id называют глобальным, поскольку он может быть использован с любыми НТМL-элементами.
В CSS id-селектор содержит символ (#), непосредственно за которым следует значение атрибута id. Например, следующий id-селектор сопоставляется элементу <h2>, значение атрибута id которого равно chapter7:
#chapter7 {background-color:#FF00FF;}
После описания идентификатора его следует включить в состав тега:
<h2 id="chapter7">Заголовок второго уровня с id</h2>
Классы
Классы используются для классификации элементов по общим группам, поэтому в отличие от атрибута id, множеству элементов может быть присвоено общее имя класса. Присваивая элементам имя одного класса, вы можете применить стили ко всем таким элементам одновременно с помощью единственного правила стилей. Чтобы сделать это, следует воспользоваться атрибутом class. Его значение должно описывать, к какому классу принадлежит элемент.
Класс похож на идентификатор, но вместо символа (#) перед именем класса указывается точка (.):
<style> h2.boldfont {font-weight: bold;} h2.italicfont {font-style: courier;} </style>
После описания класса его следует включить в открывающий тег элемента:
<h2 class="boldfont">Заголовок второго уровня</h2>
Обратите внимание, что один и тот же элемент может иметь одновременно класс и идентификатор. Также любому тегу может быть присвоено сразу несколько классов. В этом случае они указываются через пробел в значении атрибута class. |
Задачи
wm-school.ru
Атрибут class определяет один или несколько имен классов для HTML элемента.
В основном атрибут class используется для указания на класс в каскадной таблице стилей. Тем не менее, он также может использоваться скриптами JavaScript для манипулирования (посредством HTML DOM) элементами HTML с заданным классом.
В HTML5 атрибут class можно использовать с любым HTML элементом (все элементы с этим атрибутом будут проходить валидацию. Тем не менее, это не всегда имеет смысл!).
В HTML 4.01 атрибут class нельзя использовать с элементами <base>, <head>, <html>, <meta>, <param>, <script>, <style>, <title>.
Значения атрибута
Значение | Описание |
---|---|
имя_класса |
Одно или несколько имен классов. Чтобы присвоить несколько классов, необходимо эти имена классов разделять пробелом, например, <span class=»left important»>. Это позволяет одному HTML элементу присвоить несколько CSS классов. Имя класса:
|
Пример использования атрибута
Использование атрибута class в HTML документе:
<html> <head> <style> h1.intro { color: blue; } p.important { color: green; } </style> </head> <body> <h1 class="intro">Заголовок 1</h1> <p>Параграф.</p> <p class="important">Это очень важный параграф. :)</p> </body> </html>
msiter.ru
Селекторы тегов и классов (class) в языке CSS
Прежде, чем изучать стилевые правила, необходимо будет узнать, как и по каким принципам задавать те метки, по которым браузер поймет, к каким же именно элементам Html кода нужно их применять. Селекторы бывают разные. Самые простые, с точки зрения понимания, используют названия тегов, к которым должны будут применяться написанные после них правила языка CSS.
В данном примере для всех тегов абзаца P будет использоваться красный цвет шрифта и серый цвет для заливки фона. У любого CSS правила может быть прописано сразу несколько селекторов. Как нужно их будет читать при этом? Всегда справа налево, т.е. начинать с самого ближнего к открывающей фигурной скобке.
В приведенном примере в первой строчке показан селектор тега (элемента), который предписывает использовать красный цвет шрифта для всех контейнеров Div.
<div> Содержимое обычного контейнера Div </div>
Содержимое обычного контейнера Div
Во второй строчке мы видим пример сложного селектора, в котором у нас появляется такой новый элемент, как класс (class). Он прописывается в качестве атрибута любого тега в Html коде. В качестве значения для class мы можем использовать произвольное имя, используя символы [0-9],[a-z],[A-Z],[_],[-].
Но кроме class в языке стилевой разметки используется еще и Id. Чем отличается класс от Id? Значение последнего должно быть уникальным, т.к. Id является уникальным идентификатором для Html тега и его название (значение) может использоваться в коде только один раз.
А значение для class не является уникальным и может использоваться для сколь угодно большого количества элементов в коде. Т.е. разные теги (Div, P, H1 и т.д) могут иметь одинаковое значение своего атрибута class:
А как он используется в селекторах CSS? Оказывается, что его имя пишется с поставленной впереди точкой.
Поэтому, когда мы видим в CSS коде что-то начинающееся с точки, то сразу понимаем, что речь идет про класс. Если рассматривать пример приведенный на скриншоте, то теперь во всех элементах Html кода, где будет прописан «class» со значение «Blue», текст будет покрашен в синий цвет.
Но это произойдет вовсе не из-за того, что название класса мы выбрали «Blue». Можно было назвать его как угодно (хоть «xyz»), а цвет в нашем примере задается именно CSS правилом «color:blue» приписанным для селектора с этим классом. Надеюсь, это понятно? Давайте поменяем название (значение) class в примере:
<p class="xyz"> Абзац с текстом</p>
Абзац с текстом
Т.е. теперь у нас класс XYZ и прописанное для него правило:
.xyz {color:blue}
покрасило текст абзаца в синий цвет. Этот пример еще раз подчеркивает, что название для атрибута class можно использовать любое. Однако, продолжим.
Давайте еще раз посмотрим на примере, как используются селекторы тегов и классов в CSS. Представим, что у нас прописаны следующие стилевые правила:
div {color:red} div.a123 {color:green} .xyz {color:blue}
А так же представим, что в Html коде у нас присутствуют следующие элементы:
В соответствии с прописанными правилами для указанных селекторов содержимое приведенных элементов Html кода должно будет выглядеть так:
А теперь давайте посмотрим, почему именно так браузер интерпретировал стилевое оформления данных элементов Html кода. Для первого контейнера Div, в котором не прописано никакого class, будет действовать CSS правило применимое для всех контейнеров: div {color:red}. Следовательно, его содержимое будет окрашено в красный цвет. Что и требовалось показать.
В теге второго Div у нас прописан класс «a123». В этом случае будут применяться CSS правила соответствующие «div.a123» (ибо у нас как раз имеется в наличии тег Div с прописанным в нем атрибутом class=»a123″). Поэтому содержимое второго контейнера будет окрашено в зеленый цвет.
Но вы, наверное, заметили, что ко второму Div можно ведь применить и первое CSS правило «div {color:red}», ибо оно предназначено для всех контейнеров без исключения. Получается противоречие, которое решается в CSS путем ввода понятия приоритетов CSS селекторов.
Мы с вами об этом поговорим подробно чуть позже, ну, а сейчас я просто скажу, что приоритет «div.a123» (для второго Div в рассматриваемом примере) будет выше.
Кстати, похожая ситуация возникает и с третьим Div из нашего примера. К нему подходят сразу два варианта: селектор тега «div» и класса «.xyz». Опять же в силу пока не объясненных мною причин (читайте об этом по приведено чуть выше ссылке), приоритет последнего будет выше, поэтому содержимое третьего контейнера будет окрашено в синий цвет.
Давайте двигаться дальше. В приведенном примере у нас дальше идет тег абзаца P, в котором прописан class=»a123″. Получается так, что данный элемент не попадает ни под один из трех прописанных нами селекторов (все три мимо него промахнулись).
У него есть только пересечение со вторым вариантом, однако этот селектор будет использоваться только для тегов «Div» с классом «a123», но никак не для тега абзаца P. В результате цвет текста в этом абзаце останется принятым по умолчанию, т.е. черным.
Дальше в примере у нас следует элемент параграфа с class=»xyz». Для него будет применяться последнее CSS правило «.xyz {color:blue}». Следовательно, текст этого абзаца будет окрашен в синий цвет. Тут, думаю, все понятно.
Универсальный селектор и уникальный идентификатор ID
Теперь давайте перейдем к Id, о которых я уже успел упомянуть. Когда мы в CSS коде видим что то со стоящей впереди решеткой (хешем), то это означает, что мы имеем дело с Id:
Обычно этот селектор пишут без упоминания тега, к которому он относится (первый вариант на приведенном чуть выше примере), хотя второй вариант написания тоже допустим, но употребляется редко. Связано это с тем, что значение атрибута Id в коде будет уникальным, а значит не может быть двух элементов с одинаковыми значениями Id. Т.е. нет смысла уточнять, хотя это не возбраняется.
Поэтому обычно просто пишут хеш (решетку), а сразу за ним значение (название) атрибута Id. Предположим, что у нас прописано следующее правило для Id:
#back {color:red}
а в коде имеется следующий фрагмент:
<div id="back"> Контейнер Div с уникальным идентификатором </div>
который в результате применения к нему правила, стоящего после «#back», будет интерпретирован браузером так:
Контейнер Div с уникальным идентификатором
Так же в CSS предусмотрен и универсальный селектор обозначаемый звездочкой, которая показывает, что данное правило будет применяться вообще к любому элементу в коде:
* {color:black}
В этом случае текст, заключенный в любой тег, будет черным (цвет по умолчанию). Понятно, что все остальные селекторы (тегов, классов и Id) будут иметь приоритет выше, чем у универсального.
ktonanovenkogo.ru
Довольно часто, просматривая исходный код многих HTML-страниц, можно видеть добавление к HTML-элементам двух атрибутов:
+ class
+ id
Посмотрите, скажем, на это изображение:
Давайте разберемся, для чего нужны два этих атрибута и как их правильно использовать.
Как вы можете видеть из примера выше, атрибуты class и id имеют значение, которое указывается после знака «=».
class="значение"
id="значение"
Возникает вопрос, что же можно указывать в качестве этого значения?
Значением этих атрибутов может быть:
+ Любая комбинация букв и цифр латинского алфавита [a-zA-Z0-9] знака «-» и «_».
НО, получившаяся комбинация не должна начинаться:
+ с цифры
+ Двух знаков тире «—«
Таким образом значение атрибутов class и id придумываете вы сами.
Например, давайте для элемента абзаца на странице добавим атрибут class и придумаем для него какое-нибудь значение.
<p>Пример абзаца</p>
Добавление атрибута class или id, само по себе, никаких изменений во внешний вид элемента не вносит. Давайте в этом сейчас убедимся.
<p>Пример абзаца без атрибутов</p <p>Пример абзаца с атрибутом class</p> <p id="my_parag1">Пример абзаца с атрибутом id</p>
Так для чего же нужны эти атрибуты?
С их помощью вы даете элементам на странице что-то вроде уникального номера-названия.
Это чем-то похоже, когда в деревне каждую корову нумеруют специальной меткой, по которой ее потом можно будет отличить от других коров.
Когда у вас на странице огромное количество одинаковых абзацев или др. элементов, как вы можете обратиться к какому-то определенному из них?
Дав имя элементу с помощью атрибута class или id, вы отделяете какой-то абзац от всех остальных элементов на странице. Точно также можно выделить любой другой элемент на странице.
Таким образом, добавляя элементам на веб-странице атрибуты id или class мы просто даем им имена.
Теперь, когда у элемента есть имя, к нему можно обращаться и легко находить его среди других элементов. Этим успешно пользуются такие технологии как CSS и язык Javascript. С помощью значений этих атрибутов они легко находят нужный элемент в коде и производят с ним нужные действия.
webgyry.info
Примеры
Пример
В данном примере всем абзацам с классом test задан красный цвет текста:
Пример . Несколько классов для элемента
В данном примере первому абзацу дано несколько классов — test1 и test2 (они записаны через пробел). Класс test1 задает красный цвет тексту, а класс test2 задает размер шрифта в 20px. Второму абзацу дан только класс test1 (этот абзац станет красным), а третьему абзацу — класс test2 (этот абзац будет иметь размер шрифта в 20px). Первый абзац, у которого два класса, будет иметь одновременно и красный цвет и размер шрифта в 20px:
code.mu
Как применять CSS-селектор ID
Селектор ID используется для обозначения отдельного HTML-элемента с помощью уникального значения атрибута id. В следующем примере представлен элемент <div>, значением атрибута id которого является header.
В CSS к этому div-элементу можно применять различную стилизацию:
Не забывайте использовать знак # (хэштег) перед именем. Подробнее об этом можно узнать здесь и здесь.
Как применять CSS-селектор class
Селектор class HTML CSS используется для выделения отдельного или целой группы HTML-элементов с идентичным значением атрибута class.
В CSS к нескольким абзацам можно применять различную стилизацию:
Не забудьте использовать знак . (точка) перед названием класса при объявлении CSS-правила. Подробнее об этом можно узнать здесь и здесь.
Чем отличаются CSS Class и ID
Cелектор id используется для отдельных элементов страницы (#header), в то время как селектор class (.content) – для нескольких. Так как значение id задается лишь одному HTML-элементу. Другими словами, у нескольких элементов не может быть одинакового значения id в рамках одной отдельной страницы. Например, у вас может быть только один элемент с id #header, или же один элемент с id #footer.
Одинаковое значение class можно задавать одному или нескольким HTML-элементам. К примеру, у вас может быть несколько абзацев с классом .content или несколько ссылок с классом .external.
Следующий пример поможет лучше понять различия между CSS class и id, а также понять, как правильно использовать:
Приведенную выше HTML-разметку мы начали с div-элемента container. Мы задали ему id (#container), так как на нашей странице будет размещаться единственный контейнер. Внутри него мы размещаем разделы меню (#menu) и контента (#content). Как и в случае с контейнером, у нас будет только одно меню, и один раздел с контентом. Внутри menu располагаются четыре ссылки <a>, но к каждой из них мы применили CSS class (.link). Точно также мы применили класс (.text) к каждому абзацу в div-элементе content.
Если нужно стилизовать эти элементы, то можно использовать следующий пример:
Когда используется class, а когда id?
ID используется для отдельных элементов, которые встречаются на странице только один раз. Например, заголовок, подвал, меню и т. д. Селектор class используется для одного или нескольких элементов, которые встречаются на странице несколько раз. Например, абзацы, ссылки, кнопки, элементы ввода. И хотя вы можете использовать class для отдельного элемента, но лучше использовать эти селекторы по назначению.
Также следует учитывать, что у HTML-элемента может быть указан и id, и class. Предположим, что на странице имеется два блока с одинаковым размером и стилизацией, но с разным позиционированием. В таком случае можно применить один и тот же класс к этим блокам для изменения размеров и стилизации, а затем использовать отдельный ID-селектор к каждому блоку, чтобы задать им разное позиционирование.
Элементы также можно привязывать одновременно к нескольким классам. Это очень удобно, когда нужно применить стилизацию к отдельной группе элементов определенного типа. Например, имеется класс .content, который применен ко всем абзацам. Если нужно будет добавить границу или любую другую стилизацию к нескольким отдельным абзацам, то можно сделать это при помощи дополнительного CSS p class .bordered:
Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Ниже приведен пример CSS-кода:
Важно правильно применять id и CSS class, так как их неправильное использование может привести к ошибкам в отображении HTML-кода.
Данная публикация представляет собой перевод статьи «CSS Class vs ID: Which One to Use» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru