Преимущества CSS

Больший контроль над шрифтовым оформлением и раскладкой страницы

Можно применять традиционные возможности шрифтового оформления, которые недоступны для традиционного HTML.

Меньше работы

Вы не только можете отформатировать все сходные элементы в документе при помощи одного стилевого правила. Внешние таблицы стилей позволяют изменять внешний вид всего сайта сразу путем редактирования одной таблицы стилей.

Потенциальное уменьшение размера документов

Избыточные теги font и вложенные таблицы делают документы громоздкими. Удаление из документа стилевого HTML позволяет уменьшить размер файла.

Потенциальное увеличение доступности документа

Хорошо структурированные и семантически наполненные документы доступны для более широкого диапазона устройств и людей. Методы, основанные на использовании стилевого (X)HTML, например применение элемента font для форматирования заголовков и разбиение материала при помощи сложных вложенных таблиц нарушают целостность исходного документа.

Стилевой HTML выходит из употребления

Консорциум W3C в спецификациях HTML и XHTML объявил устаревшими все элементы и атрибуты уровня представления. Наступит день, когда их поддержка браузерами станет необязательной.

 

CSS хорошо поддерживается

Почти каждый современный браузер поддерживает практически все компоненты спецификации CSS 1. Большинство также поддерживает большую часть требований рекомендаций версии 2 и 2.1. Существует ряд тормозящих развитие задержек, связанных с недостаточной поддержкой CSS в браузерах, которые требуют создания обходных путей.

Задание стиля обеспечивается с помощью и тега < STYLE> и атрибута STYLE. < /STYLE>

Используя стили, можно позиционировать элементы страницы (например, тексты и графику), указав координаты их положения. И это, пожалуй, самое важное, что дают стили. Кроме того, таблицы стилей часто применяются при создании динамических страниц.

Теги < STYLE> и < /STYLE> используются внутри тегов заголовка файла < HEAD> и < /HEAD>, а атрибут STYLE – в теге заголовка раздела (< H1>, < H2>, …, H6>), а также в теге < BODY>, в теге выделения фрагмента < DIV> и многих других.

Применение тега < STYLE>:

< HEAD> < STYLE>

Тег {свойство1: значение1; свойство2: значение2; …, свойствоN: значениеN}

< /STYLE>

< /HEAD>

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

Как видим, задание правила состоит из 2-х частей : селектора и определения.

Селектор – имя любого тега HTML, класса, или идентификатор.

Определение – задают свойства селектора.

Внешний вид списка стиля:

Селектор {свойство: значение;

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

Селектор –это часть стилевого правила, в котором определяется элемент (или элементы), к которому применяются инструкции представления. Например, если вы хотите, чтобы все заголовки h1 в документе отображались зеленым цветом, напишите стилевое правило, указав h1 в качестве селектора. В CSS существуют следующие типы селекторов, обеспечивающие гибкость и эффективность при создании таблиц стилей:

• селекторы типов (элементов);

• контекстные селекторы (потомки, дочерние элементы и элементы-братья);

• селекторы классов и селекторы идентификаторов (ID);

• селекторы атрибутов;

• псевдоклассы;

• псевдоэлементы.

Не все эти селекторы, созданные в расчете на будущее, поддерживаются современными браузерами.

Cелектор типа, который ссылается на элемент по имени. В следующем примере определяются стили заголовков первого и второго уровней путем использования тега STYLE:

< HTML> < HEAD>

< STYLE>

H1 {Font-size: 48pt: Color: RED}

H2 {Font-size: 20pt: Color: BLUE}

< /STYLE>

< /HEAD>

< BODY>

< H1> Это стиль H1. Цвет – красный< /H1>

< H2> Это стиль H2. Цвет – синий< /H2>

< P> Это – обычный стиль по умолчанию < /P>

< /BODY>

< /HTML>

Мы изменили стили H1 и H2, принятые по умолчанию: назначили размеры (48 и 30 точек) и цвета (красный и синий) для всех текстов, которые окажутся внутри этих тегов.

Обратите внимание на то, что внутри тега < STYLE> указываются определения стилей тегов, которые записываются без угловых скобок.

В CSS 2 появился универсальный селектор элементов (*), который соответствует любому элементу. Стилевое правило * {color: gray} делает все элементы документа серыми. Универсальный селектор приводит к проблемам с элементами управления форм в некоторых браузерах. Если ваша страница содержит поля ввода на форме, то безопаснее будет не использовать универсальный селектор.