A5.ru: конструктор сайтовA5.ru: создать собственный сайт без лишних затрат и усилий! |
Классы и идентификаторы CSS - в прошлый раз мы с Вами рассмотрели варианты определения стилей и соответствующий этим определениям стилей, правила их написания - синтаксис CSS. В этом уроке, мы с Вами поговорим о классах и идентификаторах CSS. Для наглядности, рассмотрим простой пример. Давайте создадим новый файл index.html, с обязательными тегами и выведем на экран простой текстовый блок параграфом:
Стили определим во внешнем файле с именем style.css, котрый пока оставим пустым. В файле index.html тегом link, укажем путь к файлу стилей. В результате мы получим два файла с именами style.css и index.html. Файл style.css вначале будет пустым, а файл index.html будет иметь вот такой код:
Если открыть файл index.html, то браузер отобразит строку - "Классы и идентификаторы CSS”: Теперь в таблице стилей style.css, определим цвет содержимого тега P, добавив строку - p {color: Green;} Обновим страницу браузера, мы видим, что код сработал и цвет текста в окне, стал зеленым: Предположим, что следующий тег P, должен содержать текст - красного цвета. Что здесь можно сделать, ведь мы в таблице стилей уже задали для тега P зелёный цвет? Чтобы решить проблему, мы прибегнем к понятию – классы CSS.
Обновим окно браузера:
Как видите, с помощью тега параграф, мы вывели строку с другими стилями. Это стало возможным, благодоря созданию нового класса .red для тега P. Итак, чтобы создать классы для одного и того же тега, достаточно в таблице стилей, через точку добавить имя нового класса и описать его стили. При обращении к классу, в теле html документа указывается его имя.
Теперь перейдем к идентификаторам CSS. Из рассмотренных выше примеров, мы видим, что селекторы привязаны к конкретным тегам. При использовании идентификаторов CSS, такая привязка отсутствует. В таблице стилей идентификаторы обозначаются значком лестница или решётка - #, в дальнейшем идентификатор можно использовать с любым элементом текста, то есть у идентификатора CSS, нет привязки к конкретному тегу. Для вызова идентификатора используется атрибут ID. Рассмотрим ещё один пример.
Ну что же, различные варианты синтаксиса CSS стилей, мы рассмотрели в третьем уроке данного курса. В этом уроке, мы рассмотрели примеры создания в таблицах стилей классов и идентификаторов CSS. В следующем уроке мы рассмотрим работу html тега DIV. Автор: Виктор Милованов |
CSS для начинающихСкачать без регистрацииКак создать сайт в блокнотеСкачать без регистрацииКак создать простой сайт без знания HTML-2Скачать без регистрации |