Каскадные таблицы стилей CSS
В то время как HTML структурирует документ и сообщает веб-браузеру, какую функцию имеет определенный элемент, CSS выдает браузеру инструкции о том, как отобразить определенный элемент - оформление, размещение пробелов и позиционирование.
CSS - одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название "стандарты Web ".
Уровень 1 (CSS1)
Эта рекомендация W3C была принята в 1996 году и откорректирована в 1999 году. Основные возможности, предоставляемых этой рекомендацией:
- Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля - обычного, курсивного или полужирного.
- Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
- Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)
- Выравнивание для текста, изображений, таблиц и других элементов.
- Свойства блоков, такие как высота, ширина, внутренние ( padding ) и внешние ( margin ) отступы и рамки. Также в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.
Уровень 2 (CSS2)
Эта рекомендация W3C была принята в 1998 году. Она построена на CSS1 с сохранением обратной совместимости. Среди новых возможностей можно назвать следующие:
- Блочная верстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной верстки.
- Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).
- Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
- Страничные носители. Позволяет, например, установить разные стили для элементов на четных и нечетных страницах при печати.
- Расширенный механизм селекторов.
- Указатели.
- Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента.
Уровень 2.1 ( CSS 2.1 )
Рабочая версия W3C от 8 сентября 2009 года. Построена на CSS2, в ней исправлен ряд ошибок.
CSS-верстка
До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счет этого нововведения стало возможным легкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.
Использование CSS дает следующие преимущества:
- Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
- Уменьшение времени загрузки страниц сайта за счет переноса правил представления данных в отдельный CSS -файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и кешируется.
- Простота последующего изменения дизайна. Не нужно править каждую страницу, а лишь изменить CSS -файл.
- Дополнительные возможности оформления. Например, с помощью CSS -верстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.
Известны также и недостатки:
- Различное отображение верстки в различных браузерах (особенно устаревших), которые по разному интерпретируют одни и те же данные CSS.
- Часто встречающаяся необходимость на практике исправлять не только один CSS -файл, но и теги HTML и код PHP, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно удлиняет время редактирования и тестирования.
Отображение элементов реализуется с помощью системы правил, которые определяют, какие элементы HTML должны быть дополнительно оформлены, и в каждом правиле перечислятся свойства (например, цвет, размер, шрифт, и т.д.) этих элементов HTML, которыми они будут манипулировать, какие значения будут для них заданы.
Таким образом, CSS не является ни языком программирования, ни языком разметки.
Определение правил стилей
Базовой конструкцией в CSS является правило следующего вида:
селектор { свойство1: значение; свойство2: значение; свойство3: значение; }
Селектор определяет элементы HTML, к которым будет применяться правило, определяемые реальным названием элемента, например, body, или другими средствами, такими как значения атрибута class.
Фигурные скобки {} содержат пары свойство/значение, которые разделяются между собой точкой с запятой; свойства отделяются от своих соответствующих значений двоеточием.
Свойства определяют, что вы хотите сделать с выделенными элементами. Они могут задавать, например, цвет элемента, цвет фона, позицию, поля, заполнение, тип шрифта, и многое другое.
Значения являются теми конкретными характеристиками, которые вы хотите задать каждому свойству выделенных элементов. Эти значения зависят от свойства.
Свойства, которые влияют на положение, поля, ширину, высоту и т.д. могут измеряться в пикселях, em, процентах, сантиметрах или других аналогичных единицах измерения.
Рассмотрим конкретный пример:
p { margin: 10px; font-family: Times New Roman; color: green; }
Это правило выбирает HTML элемент p, и для каждого элемента p в документах HTML, которые используют этот код CSS, будет применяться это правило, если только не будут существовать применяемые к ним более конкретные правила, которые будут переопределять это правило. Данное правило влияет на свойства, которые определяют поля вокруг параграфа ( margin ), шрифт текста в параграфе ( font-family ), и цвет этого текста ( color ). Поля задаются размером в 10 пикселей, шрифт задается как Times New Roman, а цвет текста задается как green.
Все множество подобных правил совместно формируют таблицу стилей. Кроме таких правил в CSS существуют и другие конструкции, например комментарии CSS, селекторы объединения в группу.
Комментарии CSS
Комментарии добавляют, помещая их между символами /* и */. Комментарии могут охватывать несколько строк, и в этом случае браузер будет игнорировать эти строки:
Селекторы объединения в группу
Можно также объединить в группу различные селекторы. Предположим, что вы хотите применить одинаковое оформление к h2 и p, тогда можно было бы написать следующий CSS:
h2 {color: red} p {color: red}
Однако, можно сократить код CSS, группируя селекторы вместе с помощью запятой - правила в скобках применяются к обоим селекторам:
h2, p {color: red}
Существует несколько различных селекторов, каждый из которых соответствуют различным частям разметки. Тремя наиболее общими селекторами, которые встречаются чаще всего, являются следующие:
Синтаксис | Селектор | Описание |
---|---|---|
p {} | селектор элемента | соответствует всем элементам на странице с указанным названием (элементам p, в приведенном выше случае) |
example{} | селектор класса | соответствует всем элементам, которые имеют атрибут class с указанным значением, так что пример выше будет соответствовать <p class="example">, <li class="example"> или <div class="example">, или любому другому элементу со значением class = "example". |
#example{} | селектор id | соответствует всем элементам, которые имеют атрибут id с указанным значением, так что пример выше будет соответствовать <p id="example">, <li id="example"> или <div id="example"> , или любому другому элементу со значением id = "example". Селекторы id не проверяют название никакого элемента, и можно иметь только один селектор для каждого id в документе HTML - они являются уникальными для каждой страницы. |