Главное меню

Уроки CSS - введение

Перед тем как приниматься за создание сайта вам обязательно необходимо изучить уроки CSS по каскадным таблицам стилей. Уроки css достаточно просты, но очень важны. Поэтому заведите себе тетрадку в которую будете записывать основные моменты этих уроков css. Они вам пригодятся при создании сайтов.

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

Смысл каскадных таблиц стилей будет очень просто понять на следующем примере.

Допустим мы имеем на странице нашего сайта несколько абзацев, текст которых написан шрифтом Verdana, размером - двойка и цветом - темно-серым. Все эти атрибуты и параметры мы должны прописать в HTML-коде для всех абзацев. А если у нас на сайте много страниц с такими параметрами, то и для всех страниц.

Но в один прекрасный момент мы решили изменить дизайн сайта. А это, в свою очередь, может привести к изменению шрифта текста, его размеру и цвету.

Если же объем нашего сайта имеет более ста страниц, и на каждой странице нам необходимо будет изменить параметры абзацев, то это заберет у нас много нашего драгоценного времени.

Вот в решении этой проблемы нам и поможет таблица стилей CSS.

Смысл таблицы в том, что в ней задаются различные правила в которых прописываются параметры для тегов. Таблица стилей подключается к html-странице в области тега <head> с помощью тега link и соответственно подключаются эти правила.

Пример правила для абзацев:

p {

font-family: Verdana;

font-size: 12px;

color: #000000;

}

Это единое правило для всех тегов <p> (для всех абзацев). Вот как это облегчает нашу работу - уже нет необходимости каждому тегу <p> прописывать атрибуты с параметрами. Все это прописываем в таблице стилей.

Но возникает другой вопрос: а если у нас какой нибудь один абзац имеет другие параметры. Другой шрифт, размер, цвет. В этом случае для этого абзаца в таблице стилей пишем отдельное правило.


Пример правила для отдельного абзаца:

.sk {

font-weight: bold;

color: #424242;

}


С помощью атрибута class мы можем любому тегу <p> прописать правило .sk с другими параметрами.

Пример:

<p class="sk">Текст абзаца</p>

И так, что бы произвести какие либо изменения на страницах сайта, нам достаточно открыть таблицу стилей и прописать изменения параметров в правилах CSS-таблицы.

Вот такое удобное для web-дизайнеров изобретение - таблицы стилей CSS.

Продолжим изучение уроков css.