КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ (CSS)

Опубликовал: admin Sunday, June 17, 2024 в категории PHP | Пока нет комментариев

3.1.  Основные определения

CSS (Cascading Style Sheets – каскадные таблицы стилей) – одна из базовых технологий в современном Интернете. Сегодня уже редко можно встретить сайт, свёрстанный без применения CSS.

CSS-код – это список инструкций для обозревателя Интернет, опи-

сывающих, как и где визуализировать элементы HTML-документа.

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

В случае с сайтами это не так. Содержимое страницы благодаря логическому форматированию текста почти не связано с его экран- ным отображением. Обновив всего одну строку в css-стилях, ди- зайнер может радикально изменить оформление многих тысяч страниц сайта, придав шрифту всех заголовков, скажем, зелёный цвет, переместив блок новостей в другой угол или сменив фон страниц.

В декабре 1996 г. W3C стандартизовал первый уровень каскад- ных таблиц стилей (CSS1), который определил правила описания стилей визуального отображения элементов HTML-документов. В мае 1998-го консорциумом был принят стандарт второго уровня таблиц стилей (CSS2), который существенно расширил возможно- сти таблиц стилей. Основные особенности CSS2:

•      стили возможно применить к любым структурирован- ным документам. На сегодня таковыми являются HTML-документы и XML-приложения;

•      стало возможно дифференцировать стили для разных устройств: для принтеров, синтезаторов речи и др.

Вид CSS-инструкции

Все CSS-инструкции состоят из селектора и блока объявлений (заключённого в фигурные скобки). Внутри блока объявлений (в фигурных скобках) может находиться одно или несколько объ- явлений, разделённых точкой с запятой. Объявление – это строка,

составленная из css-свойства, и его значения, разделенные двоето-

чием. CSS не различает регистр символов.

Рис. 3.1. Схема CSS-инструкции

Пример CSS-инструкции:

p {

text-align: justify; /* форматирование по ширине */ text-indent: 10px;

}

Конструкция /* что-то */ позволяет вставлять комментарии в CSS-инструкции, которые никак не обрабатываются обозревате- лем.

Также необходимо учитывать, как происходит определение ин- струкций по умолчанию (когда инструкции не заданы). Обозрева- тель выстраивает дерево тегов в соответствии с учетом вложений тегов друг в друга и на основании структуры данного дерева производит наследование инструкций определенных уров- нем выше (у предков). Если на уровне выше нет явного объявления свойства, то обозреватель поднимается до самого верха, пока не найдет предка, у которого свойство объявлено, либо возьмет на- стройки, заданные пользователем в настройках обозревателя, если свойство нигде не определено.

Селекторы

Селектор – это часть CSS-инструкции, которая указывает, к ка- ким элементам его применять. Рассмотрим три основных вида се- лекторов (элемента, класса и идентификатора) и способы их со- вмещения.

Селектор элемента совпадает с названием тега данного элемен-

та:

div {color:red;} /* применяется ко всем элементам div в доку-

менте */

Селектор класса позволяет настроить визуализацию для всех те-

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

.a li gnleft {text-align: left;} /* рекомендуется называть класс так, чтобы было понятно, как изменится визуализация тега */

Селектор идентификатора позволяет настроить визуализацию для одного конкретного тега, для которого определен идентифика- тор через атрибут id. Описание селектора класса начинается с диеза (#), после которого идет имя идентификатора:

#leftmenu {margin:0;}

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

p. a li g n left {text-align: left;} /* определяет параметры визуали-

зации только элементов p класса alignleft */

h1#leftmenu {margin:0;} /* определяет параметры визуализа- ции только в том случае, если идентификатор leftmenu присвоен тегу h1*/

td em {color:green} /* применяется ко всем элементам td и em в документе */

Приоритеты способов визуализации

На рис. 3.3 изображена схема определения важности параметров визуализации. То есть, если для тега задан атрибут style, указанные в нем свойствам будут иметь максимальный приоритет при визуа- лизации. Если данный атрибут не определен, то приоритет перехо- дит к свойствам, описанным для идентификатора и т.д.

Рис. 3.3. Приоритет подчиненности свойств при визуализации элемента

Оптимизация объявлений

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

Например, есть общее свойство margin, которое позволяет за-

дать крайнюю границу блока. Если мы пишем

p {margin:0}

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

p {margin:0 0}

p {margin:0 0 0 0}

Перед нами типичный пример задания более компактного оформления. Причем пример с двумя нулями также является при- мером компактного написания. Но в данном случае первая цифра обозначает отступы сверху и снизу, а вторая – слева и справа.

Однако существуют и составные свойства: p {margin-top:50px}

Составные свойства позволяют сделать инструкции более чи-

таемыми. Вышеуказанный код эквивалентен записи: p { margin:50px 0 0 0}

В этом случае надо вспоминать, что обозначает первое значение свойства, когда понадобится что-либо изменить. Хотя общее пра- вило достаточно простое. Первое значение отступ сверху, а далее по часовой стрелке, т.е. отступ справа, отступ снизу и, наконец, отступ слева.

Составные свойства содержат в себе (не всегда)наименование общего свойства, а далее, через дефис, перечисляются детализи- рующие понимание части свойства.

Размеры

Размеры указывают на вертикальную или горизонтальную вели- чину чего-либо. Размер задается как число, за которым следует единица измерения. Если размер равен 0, то единицу измерения можно не указывать.

Единицы измерения подразделяются на абсолютные и относи- тельные. Абсолютные единицы измерения задают точный физиче- ский размер, а относительные – указывают размер относительно другого размера. Их описания сведены в табл. 3.1 и 3.2.

Абсолютные единицы измерения

Таблица 3.1

Окончание табл. 3.1

Относительные единицы измерения

Таблица 3.2

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

Единицы em и ex основываются на размере шрифта того эле- мента, к которому относится данная декларация. При этом em зада- ет размер шрифта, т. е. размер его наибольшей буквы (обычно это буква ‘M’, отсюда аббревиатура em), а ex – высоту строчных букв шрифта (обычно это высота буквы ‘x’, отсюда английское название x-height и аббревиатура ex). С другой стороны, единица px основа- на на размере пикселя устройства отображения (обычно это дис- плей). Пиксель – точка дисплея и ее размер зависит как от физиче- ских размеров экрана, так и его разрешения: пиксель на экране с разрешением 640×480 будет больше, чем на экране с разрешением 1280×1024. Примеры задания размеров:

h1 {margin: 0.5em } h1 {text-indent: 1ex } h3 {font-size: 12px } h1 {margin: 0.5in }

h2 {line-height: 3cm }

h3 {word-spacing: 4mm }

h4 {font-size: 12pt } h4 {font-size: 1pc }

Источник: Филиппов С.А. Основы современного веб-программирования: Учебное пособие. М.: НИЯУ МИФИ, 2011. – 160 с.

Похожие посты:

• Что такое селекторы и как их правильно использовать (0)
• Выделение текста на странице (0)
• Изменение высоты строки (межстрочного интервала) в тексте (0)
• Изменение стиля горизонтальной линии (0)
• Вывод текста заглавными буквами с помощью CSS (0)
• Как изменить способ размножения фонового изображения (0)
• Выбор единиц измерения размера шрифтов:пикселы, пункты, пики или что-то другое (0)