Основы CSS

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

ISBN 978-5-4496-2174-0

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

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

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

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

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

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

<H1 STYLE=«font-family: Arial. Helvetica. San Serif»> Мой сайт </H1>

<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 Кошелек, бонусными картами или другим удобным Вам способом.