Составитель Дмитрий Артемович Кудрец

ISBN 978-5-4496-2174-0

Создано в интеллектуальной издательской системе Ridero

Каскадные таблицы стилей

При оформлении HTML-документов приходится по нескольку раз прописывать однотипные теги. Использование каскадных таблиц стилей (CSS) позволяет значительно упростить эту работу. Поддержка стандарта каскадных таблиц стилей и их программируемых элементов появилась, начиная с версии 4.0 и Netscape, и Internet Explorer.

Существует три основных варианта использования таблиц стилей.

Вариант первый

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

<P STYLE=«font-size: 12 рt»> Добро пожаловать на мой сайт. </Р>

Если нужно задать сразу несколько свойств, их разделяют точкой с запятой:

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

Вариант второй

Если необходимо многократное применение заданного стиля, его описание таблиц стилей размещается в разделе <HEAD> в теге <STYLE TYPE=«text/css»> … </STYLE>. Параметр TYPE=«text/css» является обязательным и служит для указания броузеру использовать CSS.

<STYLE TYPE=«text/css»>

Р ( FONT-STYLE: SMALL-CAPS )

</STYLE>

Выбранный элемент (в данном случае <Р>) в терминах CSS называется селектором, а все, что располагается между фигурными скобками, – определением. Все вместе называется правилом.

Селекторы это те буквы, из которых состоят определения элементов HTML: P, H1, UL и т. д. При создании правила вы сопоставляете выбранному элементу определение стиля. Например, UL ( List-Style: Disc )

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

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

Одно и то же определение можно применить сразу к нескольким элементам. Для этого надо написать несколько селекторов подряд, разделяя их запятыми.

Такой подход позволяет сделать элементы выглядящими однородно.

Вариант третий

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

Для подключения файла CSS к HTML-документу используется элемент <LINK>, который должен быть помещен в заголовок между <HEAD> и </HEAD>.

<HEAD>

<TITLЕ> Главная страница </TITLЕ>

<LINK REL=«STYLESHEET» TYPE=«TEXT/CSS» HREF=«1.CSS»>

</HEAD>

Файл CSS может содержать различные комментарии, поясняющие назначение тех или иных участков кода. Комментарии в стандарте CSS заключаются в последовательность символов «/» и «*» следующим образом: /* текст комментария */

Создание специальных классов

Таблицы стилей позволяют не только задавать свойства отдельных элементов, но и создавать целые классы.

В данном примере используется селектор H1.krasota вместо обычного H1. Указанный стиль будет применяться к H1 только там, где вы укажете атрибут CLASS.

Таким образом можно определять разные классы для одного и того же элемента.

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

Элемент <SPAN>

При работе с таблицами стилей также широко используется элемент <SPAN>. Используя его, можно применять стиль вообще к чему угодно. Иначе говоря, <SPAN> — это такой контейнер, в котором определяется стиль и который действует вплоть до своего закрывающего тега.

Например, <SPAN STYLE=«FONT-VARIANT: SMALL-CAPS»> Текст </SPAN>,

или

<STYLE>

SPAN ( FONT-FAMILY: arial, helvetica: FONT-SIZE: 12 pt )

</STYLE>

<SPAN> можно использовать в качестве специфического элемента, к которому можно применить определенное форматирование.

На основе элемента <SPAN> можно создать класс.

Элемент <SPAN> можно использовать с определенными заранее независимыми классами.

Написав <SPAN CLASS=«dr»>, можно применить указанный стиль к тексту. Точно так же универсальные классы можно применять и в любых других контейнерах.

С помощью элемента STYLE тега <SPAN> … </SPAN> можно задавать выделение текста любым цветом:

Элемент <DIV>

<DIV> – еще один элемент, который имеет отношение к стилям и применяется для разделения всего HTML-документа на секции. По своей значимости и области действия он сопоставим с <BODY> или <HEAD>.

Элемент <DIV> может использоваться примерно так же, как <SPAN>. Для него могут быть определены правила таблиц стилей, он может иметь атрибут CLASS.

Элемент <DIV> может включать в себя совершенно разные типы контейнеров, например, такие, как <Р> и <UL>. Именно для этого он и предназначен – для разделения страницы на секции, выполненные в едином стиле.

Стилевое оформление страницы

Также параметры элемента <BODY> можно задавать в стиле.

Например,

<STYLE TYPE=«text/css»>

<! —

BODY

(

BACKGROUND-ATTACHMENT: fixed;

BACKGROUND-REPEAT: no-repeat;

BACKGROUND-POSITION: 13px 13px;

BACKGROUND-COLOR: #FFFF00

)

– >

</STYLE>

BACKGROUND-COLOR: #ffff00; – определяет цвет фона всего документа в шестнадцатеричном виде или названиями цветов.

BACKGROUND-ATTACHMENT: FIXED; – определяет неподвижность фонового изображения при прокрутке страницы. Параметр SCROLL – заставляет фоновое изображение двигаться при прокрутке документа.

BACKGROUND-REPEAT: NO-REPEAT; – данный параметр запрещает размножать изображение, убрав его, изображение будет размножено по всей странице. Параметр REPEAT позволяет повторять изображение во всех направлениях; REPEAT-X – только по горизонтали; REPEAT-Y – только по вертикали.

BACKGROUND-POSITION: 13px 13px; – определяет позицию фонового изображения: от верхнего края и от левого края. В качестве значения этого свойства расстояние от левой и верхней границы видимой части экрана до изображения можно указать в пикселях, миллиметрах или сантиметрах.

Конец ознакомительного фрагмента

Текст предоставлен ООО «ЛитРес».

Прочитайте эту книгу целиком, на ЛитРес.

Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.

Читать фрагменты других книг