A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

Классы и идентификаторы CSS  - в прошлый раз мы с Вами рассмотрели варианты определения стилей и соответствующий этим определениям стилей, правила их написания - синтаксис CSS. В этом уроке, мы с Вами поговорим о классах и идентификаторах CSS.

Для наглядности, рассмотрим простой пример. Давайте создадим новый файл index.html, с обязательными тегами  и выведем на экран простой текстовый блок параграфом:

<p>Классы и идентификаторы CSS</p>

Стили определим во внешнем файле с именем style.css, котрый пока оставим пустым. В файле index.html тегом link, укажем путь к файлу стилей.

В результате мы получим два файла с именами style.css и index.html. Файл style.css вначале будет пустым, а файл  index.html будет иметь   вот такой код:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Классы и идентификаторы CSS</title>
<link href="style.css"   rel="stylesheet"   type="text/css"/>
</head>
<body>
<p>Классы и идентификаторы CSS</p>
</body>
</html>



Если открыть файл index.html, то браузер отобразит строку - "Классы и идентификаторы CSS”:

Классы и идентификаторы CSS на картинке

Теперь в таблице стилей style.css, определим цвет содержимого тега P, добавив строку  -  p {color: Green;}

Обновим страницу браузера, мы видим, что код сработал и  цвет текста в окне, стал зеленым:

Классы и идентификаторы CSS

Предположим, что следующий тег P, должен содержать текст - красного цвета.

Что здесь можно сделать, ведь мы в таблице стилей уже задали  для тега P зелёный цвет?

Чтобы решить проблему, мы прибегнем к понятию – классы CSS.


В нашем примере, добавим в таблицу стилей  ещё одну строку, чтобы содержимое файла style.css стало следующим:

p {color: Green;}

p.red {color: Red;}  (Добавляем новый класс для тега P, и указываем для него свои стили).

 

В файл index.html добавим вот эту строку:   <p class="red">Классы и идентификаторы CSS</p>

в результате, содержимое файла index.html, станет вот таким:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Классы и идентификаторы CSS</title>
<link href="style.css"   rel="stylesheet"   type="text/css"/>
</head>
<body>
<p>Классы и идентификаторы CSS</p>

<p class="red">Классы и идентификаторы CSS</p>
</body>
</html>



Обновим окно браузера:

Классы и идентификаторы CSS - класс добавляется через точку

 

Как видите, с помощью тега параграф, мы вывели строку с другими стилями. Это стало возможным, благодоря созданию нового класса   .red  для тега P. Итак, чтобы создать классы для одного и того же тега, достаточно в таблице стилей, через точку добавить имя нового класса и описать его стили.  При обращении к классу, в теле html документа указывается его имя.

 

Теперь перейдем к идентификаторам CSS.

Из рассмотренных выше примеров, мы видим, что селекторы привязаны к конкретным тегам.

При использовании идентификаторов CSS, такая привязка отсутствует.

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

Для вызова  идентификатора используется атрибут ID.

Рассмотрим ещё один пример.



Добавим в нашу таблицу стилей строку с идентификатором #color_blue. Файл стилей file.css при этом будет содержать следующий код:

p {color: Green;}

p.red {color: Red;} 

#color_blue {color:Blue;} 

Для вызова идентификатора #color_blue, в файле  index.html добавим следующую строку: <p id="color_blue"Классы и идентификаторы CSS</p>

То есть файл index.html, будет содержать следующий код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Классы и идентификаторы CSS</title>
<link href="style.css"   rel="stylesheet"   type="text/css"/>
</head>
<body>
<p>Классы и идентификаторы CSS</p>

<p class="red">Классы и идентификаторы CSS</p>


<p id="color_blue"Классы и идентификаторы CSS</p>
</body>
</html>


Если мы обновим страницу браузера, то увидим строку текста голубого цвета, в соответствии с работой идентификатора #color_blue


Идентификаторы CSS

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

В следующем уроке мы рассмотрим работу html тега DIV.

Автор: Виктор Милованов

 

Как создать сайт без знания HTML

Как создать сайт без знания HTML

Как создать сайт на WordPress

Как создать сайт на WordPress

CSS для начинающих

CSS для начинающих

Скачать без регистрации