CSS (Cascading Style Sheets) - это способ описания внешнего вида документа. Обычно используется вместе с html и xml. Основой задачей CSS является придание документу определенного стиля, начиная от цвета и размера шрифта и заканчивая всевозможными эффектами, типа прозрачности, скругленных углов таблиц и т.п. Причиной к созданию CSS послужила необходимость управлять внешним видом web-страниц и теперь эта технология используется в большинстве сайтов.

Синтаксис CSS очень прост. Любой CSS состоит из правил. Правило состоит из селектора и описания.

body {

background-color: #ECE9D8;

}

Селектор отвечает за то, к чему будут применены свойства в правиле. Селектор может быть именем тега, специальным классом или уникальным идентификатором. Также один селектор может зависеть от другого. Например, у нас есть тег <strong>. С помощью CSS можно указать, что, например, жирный текст внутри этого тега должен быть не жирным, а красным. Это реализуется вот таким образом:

body p strong {

font-weight: normal;

color: #FF0000;

}

В результате применения этого стиля все слова выделенные жирным шрифтом и помещенные в тег <P> станут красными с обычным шрифтом.

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

В теле описываются свойства и их значения. Синтаксис как вы могли заметить выглядит так:

Свойство: значение;

Например, запись color: red; задает свойству "цвет текста" значение красный.

Еще немного про селекторы:

Селектор, означающий имя тега пишется также, как и имя тега:

Например, селектор тега <a> пишется a:

a {

color: green;

}

Здесь, для текста внутри тега <a> устанавливается зеленый цвет.

Селектор-класс должен начинаться с точки:

.myclass {

font-size: 14pt;

color: #fff;

}

В этом примере мы создали свой класс с белым цветом шрифта и размером в 14 пунктов.

Для указания какому-либо экземпляру тега, что он должен использовать определенный класс для отображения своего содержимого, нужно в атрибутах тега прописать class="myclass":

<p class="myclass> здесь будет белый текст с размером шрифта в 14 пунктов</p>

Кроме классов существуют еще id, уникальные идентификаторы. В любом документе может быть только один тег, использующий данный id. Чтобы указать тегу, что он должен для отображения использовать стиль с таким-то id надо прописать в атрибут тега id="myid". Любой id в css начинается с #:

#myid {

background: grey; //установка фона в серый цвет.

}

Хорошим стилем считается использование свойства class вместо id. Так как id используется программистами и должны быть уникальными для правильной работы скриптов.

<div id="myid">

Текст с примененным стилем myid. Этот текст встроенный в страницу будет на сером фоне

</div>