Назад CSS

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология задания свойств объектов гипертекстового документа.

Свойства объектов в HTML можно задавать атрибутами в тегах. Таким образом, с помощью HTML можно решить две задачи:

  1. Разметить структуру документа (указать деление на главы, параграфы, абзацы …; задать цитаты, списки, таблицы, иллюстрации …).
  2. Объяснить браузеру, как отображать объекты на экране.

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

Стилевое определение задаётся следующим образом: 

  
Элемент
{
 свойство:значение;
 ...
 свойство:значение;
}

Пример:
CSS-определение HTML-код Вид на экране Пояснение 
  
P
{
 font-size:large;
 color:red;
}
Текст абзаца. Задано стилевое определение для элемента P. Все абзацы будут теперь выводиться крупным шрифтом красного цвета.

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

Определение класса записывается следующим образом: 

  
.Имя
{
 свойство:значение;
 ...
 свойство:значение;
}

Сопоставлять стилевой класс с тегом можно при помощи атрибута class.

Пример:
CSS-определение HTML-код Вид на экране Пояснение 
  
.def
{
 font-size:large;
 color:red;
}

Текст первого абзаца.

Текст второго абзаца.

Задано стилевое правило def. В HTML-коде оно связывается только с первым из двух абзацев.

Обычной практикой является размещение таблицы стилей в отдельном файле. Такой способ расположения стилевых определений очень удобен. На один и тот же стилевой файл могут ссылаться много HTML-документов. Изменения в этом единственном файле скажутся на внешнем виде десятка (а то и сотни) документов.

Использование CSS позволяет:

Кроме того, CSS предлагает гораздо больше свойств и значений, чем атрибуты HTML.

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

Назад