CSS — внешние таблицы стилей
Представьте, что вы создаете сайт, в котором десяток страниц и каждая страница должна иметь таблицу стилей, задающую её оформление. Как правило, все страницы сайта выглядят одинаково, а значит, для их оформления применяются подобные таблицы стилей. Поэтому, чтобы не дублировать их в каждом html-документе, таблицу стилей можно поместить в отдельный файл — style.css (это обычный текстовый файл с правилами CSS). Имя файла может быть любым, а расширение — обязательно css. Затем необходимо связать html-документы с файломstyle.css: поместить в связываемом html-документе между командами <head> и </head> следующую строку:
<link rel=stylesheet href="style.css" type="text/css">
Такие таблицы стилей называются внешними.
Преимущество внешних таблиц стилей — удобство редактирования таких страниц, т.к. в этом случае достаточно исправить стиль оформления команды в одном месте — в файле, содержащем таблицу стилей, и на всех веб-страницах, использующих эти стили, внешний вид команд изменится.
Группирование элементов (SPAN и DIV)
В языке HTML все элементы можно разделить на два типа: строчные и блочные.
Строчные элементы, как ясно из их названия, выводятся линейной строкой, например: <I>, <B> и <SPAN>.
Элемент <SPAN> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <SPAN>может использоваться для визуальных эффектов применимо к отдельным блокам текста.
Пример — народная мудрость:
<p>Научить нельзя, можно только научиться.</p>
Скажем, мы хотим, чтобы слово «научиться» было выделено курсивом и красным цветом. Для этого в таблице стилей можно описать селектор по классу, который затем будет использован в команде <SPAN>:
<p>Научить нельзя, можно только <SPAN class="prim"> научиться. </SPAN></p>
В CSS:
SPAN.prim { font-style: italic; color: red; }
Демонстрация примера
Блочные элементы создают визуально самостоятельную структурную единицу — блок, например: <H1>–<H6>, <P> и <DIV>.
Основное отличие <DIV> от команды абзаца <P> в том, что по умолчанию перед и после абзаца всегда добавляется пустая строка, а у <DIV> — нет.
Элемент <DIV> в сочетании с CSS позволяет задавать целый комплекс свойств блока.
Селектор по идентификатору
Помимо селектора по классу, позволяющего задать свойства однотипных элементов, в CSS есть возможность выделить некий элемент, стиль оформления которого должен существенно отличаться от всех других на веб-странице. Это делается с помощью селектора по идентификатору.
Например, пусть требуется, чтобы на каждой странице сайта самый первый заголовок отличался ото всех остальных. С помощью атрибута id=присвоим заголовку Н1 уникальный идентификатор:
<H1 id="firstheader"> Первый заголовок на странице </H1>
Чтобы записать CSS-правило для определения стиля этого заголовка, используется такой же прием, как и для селекторов по классу, но в качестве разделителя используется не точка, а символ решетки (#).
H1#firstheader { color: red; font-size: 15pt } /* стиль первого заголовка */
H1 { color: blue; font-size: 13pt } /* стиль всех остальных заголовков */
Внимание! В одном html-документе не может быть двух элементов с одинаковым значением атрибута id.
По аналогии с унифицированным селектором по классу можно создать унифицированный селектор по идентификатору (имя элемента при этом не указывается):
#menu { text-align: right; color: blue }
<DIV id="menu"> Блок с пунктами меню сайта </DIV>
Блоковая модель
Блоковая модель в CSS имеет детальные опции для определения полей, рамок, заполнения и содержимого каждого элемента. На рисунке показано, как построена блоковая модель:
Каждый блок в CSS обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется контентом (content) или содержимым.
Вокруг области контента могут быть пустые области, называемые отступами (padding). С точки зрения дизайна отступы обеспечивают для содержимого блока эстетически более привлекательный вид.
Непосредственно за отступами проходит граница (border), которая может иметь определенную толщину и стиль линий.
Также блок может иметь поля (margin), это дополнительное свободное пространство вне границ блока.
Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.
Все поля, границы и отступы делятся соответственно на верхние, нижние, левые и правые. Для каждого из них можно задать значения независимо от других.
Поля (margin)
Поля — это расстояние от каждой стороны блока до соседних элементов (или краёв документа). Регулируя величину полей, можно управлять расстоянием между блоками. Значения могут задаваться в любых единицах длины, а также в процентах. Процентное соотношение в этом случае вычисляется относительно контейнера, породившего блок.
По умолчанию в любом браузере поля веб-страницы имеют определенное ненулевое значение. Если для целей дизайна их требуется устранить, следует записать такое правило:
BODY {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
Или в сокращенном виде, если все поля одного размера:
BODY { margin: 5px }
Если для страницы требуется установить поля по 10 % от ширины страницы справа и слева, а поля сверху и снизу пусть останутся по умолчанию, то правило будет выглядеть так:
BODY {
margin-right: 10%;
margin-left: 10%;
}
Допустимы также отрицательные значения полей. Использование селекторов по классу для задания полей позволяет сделать наложение текста друг на друга как это сделано в следующем примере.
<html>
<head>
<title>Style Sheets</title>
<style>
.t1 { margin-left: 10pt;
color: darkmagenta;
font-size: 30pt;
font-weight: bold;
font-family: Courier New }
.t2 { margin-top: -37pt; /* блок будет сдвинут вверх на 37 пунктов */
margin-left: 8pt;
color: magenta;
font-size: 30pt;
font-weight: bold;
font-family: Courier New }
</style>
</head>
<body bgcolor=#FFFFFF>
<div class="t1">Объявление</div>
<div class="t2">Объявление</div>
<p>А теперь применение классов t1 и t2 по отдельности:
<div class="t1">Объявление</div>
<p>
<div class="t2">Объявление</div>
Демонстрация примера
Границы (border)
Границы блоков делятся на четыре сегмента: верхний, правый, нижний, левый. Каждый отдельный сегмент блока может иметь свои характеристики: цвет, толщину, тип линий.
Свойство width
Толщину границы можно задать как в виде ключевых слов:
· thin — тонкая граница;
· medium — граница средней толщины;
· thick — толстая граница,
так и в единицах измерения:
P {
border-top-width: 1px;
border-right-width: medium;
border-bottom-width: 2px;
border-left-width: thin;
}
Недопустимо задание величины границы в процентах и отрицательных значекний.
Свойство border-color
Цвет границы также возможно задать для каждой из четырех сторон блока по отдельности:
· border-top-color — цвет верхнего сегмента границы;
· border-right-color — цвет правого сегмента границы;
· border-bottom-color — цвет нижнего сегмента границы;
· border-left-color — цвет левого сегмента границы;
Свойство border-style
Это свойство задает тип линий, которыми будут отображаться границы блока:
· border-top-style — тип линии верхнего сегмента границы;
· border-right-style — тип линии правого сегмента границы;
· border-bottom-style — тип линии нижнего сегмента границы;
· border-left-style — тип линии левого сегмента границы;
Тип границы может быть следующим:
· none — граница отсутствует (используется по умолчанию);
· dotted — линия из точек;
· dashed — пунктирная линия;
· solid — сплошная линия;
· double — двойная сплошная линия;
· groove — граница отображается «вдавленной» линией с имитацией объема;
· ridge — противоположно значению groove;
· inset — имитация нажатой кнопки;
· outset — противоположно значению inset.
С помощью этого свойства можно, например, обвести рамкой отдельное слово:
.ramka { border: solid 1px red } /* это сокращенная запись */
<P>В этом абзаце вокруг слова <SPAN class="ramka">рамка</SPAN> будет граница со всех четырех сторон в виде сплошной линии толщиной в 1 пиксель, красного цвета.
Пример задания разных цветов и типов границы блока:
h1 {
border-top-width: thin;
border-top-style: dotted;
border-top-color: red;
border-bottom-width: medium;
border-bottom-style: dashed;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: double;
border-left-color: orange;
}
Демонстрация примера
Фон (background)
Свойство background-color
Это свойство позволяет задавать цвет фона страницы или любого другого элемента (заголовка, абзаца).
BODY { background-color: aqua }
P { background-color: blue }
Свойство background-image
Это свойство задает изображение в качестве фона любого элемента:
DIV { background-image: URL(picture.gif) }
<DIV style="width:300px;height:222px">Ёжик в тумане</DIV>
Здесь в атрибуте style= указаны значения ширины и высоты изображения, чтобы оно отобразилось полностью на экране.
Демонстрация примера
Совет. При использовании свойства background-image рекомендуется задавать и значение свойства background-color. Оно будет использоваться в том случае, если фоновое изображение по тем или иным причинам будет недоступно.
Свойство background-repeat
В случае, когда задано фоновое изображение, это свойство определяет, будет ли оно повторяться по горизонтали и вертикали. Допустимы следующие значения:
· repeat — изображение повторяется и по вертикали и по горизонтали;
· repeat-x — изображение повторяется только по горизонтали (по оси x);
· repeat-y — изображение повторяется только по вертикали (по оси y);
· no-repeat — изображение не повторяется, остается только одна копия изображения.
Пример:
DIV { background-image: URL(picture.gif);
background-repeat: repeat-x}
Текст внутри этого контейнера будет располагаться поверх фонового изображения, которое будет повторяться по горизонтали.
Отступы (padding)
Как уже было сказано, отступы задают расстояние от границы до содержимого блока. Чтобы понять чем отступы (padding) отличаются от полей (margin) рассмотрим такой пример.
Создадим два класса:
.p_mar { background-color: #CCCCFF;
margin: 2em }
.p_pad { background-color: yellow;
padding: 2em }
Оформим два различных абзаца при помощи этих классов:
<P>Для этого абзаца не задано ничего, т.е. используются значения по умолчанию.</P>
<P class="p_mar">Для этого абзаца заданы поля (margin) размером 2 em.</P>
<P class="p_pad">Для этого абзаца заданы отступы (padding) размером 2 em.</P>
Демонстрация примера
Внимание! Если размеры полей могут иметь отрицательные значения, то размеры отступов могут быть только положительными.
Контейнер блока
Формирование веб-страницы при помощи средств CSS сводится к следующему:
· создается блок и задаются его параметры;
· вновь созданный блок размещается (позиционируется) на странице.
Контентная часть блока может быть не только текстом, изображением, таблицей. Внутри блока могут располагаться и другие блоки. В этом случае первый блок будет являться контейнером для вложенных в него блоков. Для некоторых элементов контейнером служит непосредственно окно браузера.
Важно понимать, что общая ширина контейнера складывается из собственно ширины блока, ширины левых и правых полей, толщины левой и правой границ, а также левого и правого отступов.
Ширина контентной части блока задается при помощи свойства width, высота — при помощи свойства height.
Если ширина блока задается в процентах, то она вычисляется относительно ширины контейнера блока.
Пример блока, который будет служить контейнером для абзаца:
#main_block {
color: red;
background-color: #FFFFCC;
border: 2px solid red;
margin: 2em;
padding: 1em;
width: 200px }
P {
width: 50%;
border: 2px dotted blue; }
<DIV id="main_block">
Содержимое главного блока #main_block
<P>Абзац шириной 50 % своего контейнера</P>
</DIV>
Итак, у основного блока граница задана сплошной линией красного цвета, а у вложенного блока — синей пунктирной линией.
Демонстрация примера