Сегодня я ознакомлю вас с понятием таблиц каскадных стилей (CSS) и приведу несложные примеры их использования в оформлении веб-страниц.

Итак, CSS представляет собой технологию, я бы даже сказала своеобразный язык, описания стилей внешнего оформления и структуры гипертекстовых документов, созданных посредством одного из существующих языков разметки (HTML, XML, xHTML). С утверждением стандарта CSS существенно упростилась верстка веб-документов, поскольку стало возможным разделение содержимого и его представления.

Описание стилей гипертекстового документа обычно хранится в файлах с расширением ***.css. При этом следует различать следующие варианты определения стилей:

- во внешнем файле CSS с расширением *.css, подключаемом к HTML-документу посредством конструкции

- в виде отдельных блоков внутри самого HTML-документа (преимущественно в его начале) — встроенные стили(<style type=»text/css»>…some styles…</style>).

- непосредственно внутри отдельного элемента HTML-кода — так называемое инлайн-определение стиля элемента в значении его атрибута style (<div style=»font-size:16px;color:red;»>…</div>).

Два последних способа определения стилей идеально подойдут Вам в случае разработки небольшого гипертекстового документа. Для осуществления же оформления более объемного проекта, например веб-сайта, наиболее оптимальным представляется выведение CSS в отдельный файл. Этот шаг позволит Вам существенно облегчить дальнейшую работу по добавлению и изменению стилей.

Теперь, имея представление о размещении и подключении CSS файлов, предлагаю приступить к изучению их содержимого. Описание стилей — это своеобразный набор правил, применяемых к различным элементам HTML-кода и определяющих особенности их представления с помощью интернет-браузера. Каждое такое определение состоит из селектора и соответственного блока определений. В блоке объявлений, непременно заключенном в фигурные скобки, размещается список объявлений. Каждое объявление состоит из названия свойства элемента и его значения, разделяемых знаком двоеточия «:». Разделителем между объявлениями служит точка с запятой.

Схематически вышеописанное определение стиля можно представить следующим образом:

Приведу конкретный пример описания стиля, который успешно применяла сама для оформления элемента selekt (выпадающий список):

где width:150px — это ширина поля селекта, font-family: Verdana, sans-serif — описание шрифта, border:1px solid #333333 — описание цвета и типа границы селекта, background-color:#131212 — задает цвет фона элемента select.

Следуя такой схеме, можно легко создать стиль для внешнего представления любого элемента HTML-документа.

Кроме авторских стилей, определяемых автором документа, существуют также стили браузера по умолчанию и пользовательские стили, содержащиеся в пользовательских настройках браузера. При этом следует учитывать то, что последний тип стилей обладает высшим приоритетом по сравнению с авторскими стилями и способен их переопределять.