Html class

Глава 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 классов. Имя класса: должно начинаться с латинской буквы A-Z или a-z за которой может следовать: латинские буквы (A-Za-z), цифры (0-9), дефис («-«) и символ подчеркивания («_») в HTML все значения регистронезависимы

Пример использования атрибута

Использование атрибута 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: