Каскадные таблицы стилей CSS
На самом деле на современном этапе развития неб-технологий все меньше и меньше людей для создания и сопровождения своих сайтов идут тем путем, что был описан выше, то есть мало кто пишет сайт в текстовом редакторе вручную. Это не высокопроизводительный способ, занимающий очень много времени, которое просто уходит на набор и отладку кода.
Такая же ручная работа по созданию стилистического оформления веб-страниц тоже малопроизводительна, ведь в визуальном HTML-редакторе весь набор, определяющий тот или иной стиль объекта, делается несколькими щелчками кнопкой мыши. Но было бы неправильно не дать краткого представления о каскадных таблицах стилей и возможности их применения при создании веб-страниц.
Итак, основная концепция каскадных таблиц стилей состоит в том, чтобы определить набор средств для описания внешнего вида отображения любых HTML-документов. Благодаря языку описания каскадных стилевых таблиц можно полностью управлять стилем и расположением каждого элемента веб-страницы, что является более простым и функциональным по сравнению с применением обычного набора HTML-тегов.
Ниже представлен следующий фрагмент кода веб-страницы:
<html>
<head>
<style type="text/css">
< ! --
.mystyle {font-family:Arial, Helvetica, sans-serif;
font-size: 16pt; font-style: italic;
font-weight: bold; color: #6600CC}
- ->
</style>
</head>
<body>
<span class="mystyle"> текст оформленный согласно стилю mystyle</span>
</body>
</html>
Здесь нас интересуют только неизвестные нам строки, описывающие сам стиль и способы его применения, поэтому рассмотрим их более детально. Начальный тег определения стиля выглядит следующим образом:
<style type="text/CSS">
Он содержит атрибут type="text/ess", значение которого говорит браузеру о том, что далее будет следовать текст, оформленный согласно правилам языка CSS. Само же определение стиля помещается в скобки комментария языка HTML < ! --...-->. Здесь в самом начале обязательно должен присутствовать селектор стиля, в нашем случае .mystyle, с обязательной точкой перед именем селектора. Далее в фигурных скобках перечисляются конкретные свойства данного стиля с заданными для них значениями в виде свойство: значение, где до двоеточия прописывается имя свойства, а после двоеточия - его конкретное значение. Таким образом, данный фрагмент кода можно описать так:
- < !- - - начало описания стиля;
- .mystyle - селектор стиля;
- {font-family :Arial, Helvetica, sans-serif; - семейство шрифтов, которые наиболее предпочтительны для отображения данной страницы;
- font-size: 16pt; - размер шрифта, заданный в абсолютных единицах;
- font-style: italic; - стиль или начертание шрифта, в нашем случае это курсив;
- font-weight: bold; - «вес» шрифта, в нашем случае полужирный;
- color: #6600 СС} - цвет шрифта, заданный в числовом виде в системе RGB;
- --> - конец описания стиля;
- </style> - завершающий тег описания стиля.
Для применения стиля mystyle ктексту, который необходимо отформатировать, например размещенному в элементе span, нужно непосредственно указать в коде данного элемента атрибут class, которому и присвоить значение в виде созданного нами стиля.
<span class="mystyle"> текст, оформленный согласно стилю mystyle</span>
Как видно из вышеописанного, присваивать значение созданного стиля можно любым текстовым фрагментам, включенным в текст веб-страницы. Далее при необходимости изменить, например, размер или начертание шрифта следует просто проделать это в самом коде описания стиля, и внесенные изменения отразятся на всех записях веб-страницы, оформленных в данном стиле.
Таким же образом, сгруппировав в единый файл стили, используемые для оформления сайта, можно одним росчерком пера изменить вид всего сайта.
| ← Связывание стилевых CSS таблиц с документом | Создание основы сайта: Размещение сайта на бесплатном хостинге → |
|---|