2.12.4. Синтаксис и принцип работы css.
Как и любой другой язык программирования, CSS имеет строго определенный синтаксис, т.е. правила по которым создаются таблицы стилей. Запомните, в CSS в отличие от HTML нет ни элементов, ни атрибутов, ни тегов. Основной структурной единицей здесь является правило, которое определяет, как будет выглядеть тот или иной элемент в документе.
Рассмотрим следующую структуру правила описания свойства CSS.
.tab1 { font-family: 'Arial'; font-size: 14pt ; font-weight: bold; background:white; color:black; }
Cначала записывается так называемый селектор, показывающий к какому html тегу(тегам) применяется то или иное свойство, т.е. на этот селектор могут ссылаться любые тэги HTML. Далее, непосредственно за селектором, пишется блок объявления стилей, который обязательно заключается в фигурные скобки. Каждое объявление в свою очередь состоит из свойства и его значения. После свойства ставится двоеточие. Правило может содержать в себе несколько объявлений (как показано в примере слева). В таком случае они должны быть отделены друг от друга точкой с запятой, причем после последнего объявления точку с запятой можно не ставить. Рассматриваемый пример блока объявления стилей определяет следующие правила :
font-family: 'Arial'; |
- вид шрифта (наименование Arial) |
font-size: 14pt ; |
- размер шрифта ( 14 pt) в пикселах |
font-weight: bold; |
- жирный (bold) шрифт текста |
background:white; |
- цвет фон (white - белый) |
color:black; |
- цвет текста (black - черный) |
Между HTML и CSS много общего, и поэтому запомнить свойства CSS будет очень просто.
Рис. 2.3. Схема подключения CSS к HTML-документу.
На рис. 3.2. показана схема подключения таблицы CSS к создаваемому HTML-документу. Набор блоков объявления стилей объединяются в один файл, который имеет тип (расширение) css (например, файл с именем mystyle.css). На этот css-файл может ссылаться любой html-документа. Для этого, в каждом html-документе внутри тэга HEAD нужно использовать тэг подключения LINK, который должен иметь параметр ссылки на css-файл : href="mystyle.css". Общий вид тэга следующий :
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head> Эта строка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла. Ниже приводятся еду еще два способа подключения стилей, которые не требуют внешней таблицы стилей. Надо отметить, что применять их на практике не рекомендуется, т.к. это очень неудобно. Первый способ: располагать правила стилей непосредственно «в голове документа»:
<html><head> <title>Работаем со стилями</title> <style type="text/css"> h1{color:blue;font-size:14px} </style> </head> <body> <h1>Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета </h1> </body></html>
Второй способ: задавать стиль с помощью атрибута style .
<html><head> <title>Работаем со стилями</title> </head><body> <h1 style="color:blue;font-size:14px">Это моя первая таблица стилей, и если все работает, то несмотря на то, что это заголовок первого уровня, он отобразиться высотой всего лишь 14 пикселей и будет голубого цвета</h1> </body></html>
Оба эти примера не используют хотя бы потому, что они не дают особых преимуществ перед html. Ведь при попытке изменить дизайн всего сайта, построенного по такому принципу, придется изменять стили на всех страницах, а это опять же время.