Статьи и справочные
материалы
Поискать на сайте
Цитаты и афоризмы:
"Программирование, как и любовь -- одно слово, за которым скрывается бесконечное множество занятий."
Туча тегов
| Публикаций — | 121 |
| Комментариев — | 607 |
| Пользователей — | 46 |
Вход в систему
Работа с CSS: основы
Эта статья призвана облегчить жизнь как начинающему верстальщику, так и программисту, которому пришлось что-нибудь заверстать.
CSS (Cascading Style Sheets — каскадные таблицы стилей) - это технология, практически язык, описания стиля(вида, внешней структуры) документа написанного на каком-нибудь ML(markup language - язык разметки), будь то HTML, xHTML, XML.
До начала поддержки браузерами стандартов CSS, верстка и оформление html-документов производилась исключительно с помощью атрибутов тегов и специальных тегов. Однако после принятия "рекомендаций" технологии CSS1 в 1996 году, а затем и CSS2 в 1998, появилось гораздо больше возможностей html-верстки и описания разметки. Преимущество этого способа описания документов очевидно - можно менять стиль, не исправляя и никак не взаимодействуя с HTML, иначе - "разделение содержимого и представления".
Итак - различают несколько способов подключения CSS-файлов (****.css) к файлу содержимого:
Внешние таблицы стилей
- Подключаются внешним файлом, обычно в теге <head>:
или
<link rel="stylesheet" href="****.css" type="text/css" />
<style type="text/css" media="all">@import "****.css";</style>
Встроенные стили
- Описание стилей внутри документа (в виде блоков):
<style type="text/css"> ...some styles... </style>
Inline-указание стилей
- Запись стилей для единичного элемента html в значении атрибута style:
<div style="font-size:12px;color:red;">...</div>
Также различают несколько видов стилей:
Авторские стили
- Стили, указываемые автором документа. То, что приведено выше.
Пользовательские стили
- Например, стили, которые указываются в настройках браузера. Имеют больший приоритет, чем авторские и переопределяют их.
Стили браузера
- Дефолтные css-стили браузеров, используемые для отображения страниц без определенных авторских стилей.
Запись стилей схематически представить как набор правил. Набор правил (также называемый правилом) состоит из селектора и следующего за ним блока объявлений. Блок объявлений начинается с левой фигурной скобки "{" и заканчивается соответствующей ей правой фигурной скобкой "}". Между ними должен находиться, список объявлений (он может быть пустым), отделенных друг от друга точкой с запятой ";".
Объявление может быть пустым или включать свойство и следующие за ним двоеточие ":" и значение этого свойства. Вокруг каждого из этих трех элементов может находиться произвольное количество пробелов.
Таким образом CSS-правило можно представить в виде блока:
Селектор {
свойство: значение;
свойство1: значение1;
свойство2: значение3
}
Например, чтобы указать для заголовка <h1>header</h1> отображение шрифтом Tahoma, размером 16 пикселей, нежирным курсивом, синим цветом, достаточно написать такое правило:
h1 {
font-family: Tahoma;
font-size: 16px;
font-weight: normal;
font-style: italic;
color: blue
}
Несколько слов о поддержке стандартов CSS разными браузерами:
В силу некоторой "маркетинговой модели развития" самый распространеннный браузер, Internet Explorer 6 (а в скором будущем таковым станет IE 7) поддерживает спецификацию CSS (на данный момент CSS2) не в полном обьеме. Да и, что греха таить, с явными ошибками. В отличие него Mozilla Firefox, Opera и Safari, следующие по числу почитателей браузеры, обрабатывают листы стилей довольно хорошо.
В сети много споров о качестве поддержки CSS мозиллой и оперой, однако лично я склоняюсь к опере. В одной из следующих статей я приведу ошибки, неоднозначности и необрабатываемые обьявления для разных браузеров.
Продолжение следует...
Комментарии
Отправить комментарий