Урок №9: CSS - Каскадные Таблицы Стилей - HTML - Каталог статей

Урок №9: CSS - Каскадные Таблицы Стилей

Урок №5: Таблицы (часть 2)

Введение в CSS.

Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте (например - всех абзацев), придется просматривать все страницы, чтобы найти и поменять теги.

Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяет хранить цвет, размеры текста и другие параметры в стилях. Стилем называется набор элементов форматирования, который применяется к тексту документа, чтобы быстро изменить его внешний вид.

Основное преимущество CSS состоит в том, что стили предлагают намного больше возможностей для форматирования, нежели простой HTML, в чем вы сами могли убедиться на практике. Стили позволяют одним действием применить сразу всю группу атрибутов форматирования. Кроме того, с их помощью можно, например, изменить вид всех заголовков или абзацев в документе. Вместо форматирования заголовка в три приема, когда сначала задается его размер, затем шрифт "Arial" и, наконец, выравнивание по центру, то же самое можно сделать одновременно, применив стиль к тегу H1 (или P для абзаца). Если требуется быстро изменить внешний вид текста, созданного с помощью одного из стилей, достаточно изменить параметры стиля во всех документах, где он используется, и вид текста поменяется автоматически.

Стили могут храниться во внешнем файле. Браузер кэширует такие документы, поэтому загрузка сайта будет происходить чуть быстрее.

CSS представляют собой мощную систему для разработчиков сайтов, расширяя их возможности по дизайну и верстке веб-страниц. В научной среде, откуда пошла родом технология WWW, люди были более заняты содержанием документов, чем их оформлением. Однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник и подходов к созданию веб-страниц. Таких как:

Использование различных расширений HTML;
Применение изображений вместо текста;
Использование рисунков для контроля пустого пространства, так называемые распорки;
Использование таблиц для верстки веб-страниц;
Написание программных скриптов.

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

Стили решают часть этих проблем механизмов представления HTML.

Добавление стиля

Стили могут быть добавлены на страницу тремя разными способами, которые различаются по своим возможностям.

Атрибут "style" (внутренний стиль)

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

Пример:

<h1 style="color: #660000; text-decoration: underline;">Заголовок, 
 использующий стиль.</h1>

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

Элемент "style" (таблицы глобальных стилей)

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля значительно превосходит предыдущий. Он позволяет размещать все стили в одном месте в документе и применять форматирование не одному элементу, а сразу множеству элементов, отбираемых с помощью селекторов (см. далее). Определение стиля задается тегом <style>. Атрибут type данного элемента должен указывать тип используемого языка стилей.

Пример:

...
<head>
 <style type="text/css">
 p { 
 font-size: 18pt; 
 font-family: Arial, sans-serif; 
 color: #333366; 
 } 
 </style>
</head>
<body>
 <p>Hello, world!</p>
</body>
...

Благодаря заданному правилу стиля, форматирование шрифта и цвета будет применено ко всем абзацам в документе. Забегая немного вперед можно отметить, что "p" - селектор, позволяющий отбирать элементы заданного типа - абзацы.

Внешние, подключаемые таблицы стилей

Самый мощный и удобный способ определения стилей для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег <link /> в заголовке страницы:

<link rel="stylesheet" type="text/css" href="mysite.css" />

В данном примере вдрес "mysite.css" - файл, содержащий правила оформления элементов для данной страницы.

Достоинства данного способа:

Используется один файл со стилем для любого количества веб-страниц, а также возможно его применять на других сайтах (исп. абсолютный адрес);
Можно изменять внешний вид элементов без модификации веб-страниц;
При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех ста или больше веб-страницах нашего сайта.
Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

В заключение отмечу, что файл стилей "*.css" не должен содержать в себе элементов разметки. Только стилевае правила и комментарии. Комментарии в CSS используются только блочные и оформляются как блочные комментарии в "C++" или "JavaScript":

/* Сие есть стилевое правило для элемента "р" - сиречь абзаца */
p { 
 font-size: 10pt; 
 font-family: Arial, sans-serif; 
 color: #333366; 
} 
/* А это другое правило уже - заголовка для */
h1 { 
 font-size: 18pt; 
 font-family: Tahoma, sans-serif; 
 text-align: center; 
}

По большому счету, и расширение .css не является обязательным. Вы можете использовать файлы с любыми расширениями. Главное - правильно написанное содержимое. Расширение .css просто является устоявшимся, традиционным и общепринятым.

Категория: HTML | Добавил: slava (18.07.2009)

Просмотров: 4283 | Рейтинг: 5.0/1

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]