Принципы функционирования сетей Интернет

Курсовая
Контрольная
Типовики
Карта

Понятие стиля и таблицы стилей

Существует три вида таблиц стилей: внутренние таблицы стилей, глобальные таблицы стилей и связанные таблицы стилей. Внутренние таблицы стилей (Inline Style Sheets) при помощи специального атрибута помещаются прямо в HTML теги. Глобальные таблицы (Global Style Sheets) определяют стиль элементов во всем документе. Связанные (Linked Style Sheets) могут быть использованы для нескольких документов сразу (скажем, для всего сайте) и хранятся во внешнем файле с расширением CSS.

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

Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.

Как уже было сказано, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, разместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега <LINK>, располагающегося внутри тега <BODY> ваших страниц:

<LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css">

Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить браузеру, что на этой страничке будет использоваться CSS. Третий параметр HREF указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL в случае, если файл стилей находится на другом сервере.

Пример

CSS-файл styles.css описывает стиль с именем wrong (обратите внимание, что описание стиля начинается с точки):

.wrong

 {text-decoration: line-through;

 color:green;

 }

HTML-файл содержит ссылку на CSS-файл и стиль wrong применен к абзацу:

<html><body>

<LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css">

<p class="wrong">errors</p>

</body>

</html>

При втором варианте описание стилей располагается в коде Web-страницы, внутри тега <BODY>, в теге

<STYLE type="text/css">

...

</STYLE>

В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css" является обязательным и служит для указания браузеру использовать CSS.

Пример:

<html><body>

<STYLE type="text/css">

.wrong

 {text-decoration: line-through;

 color:green;

 }

</STYLE>

<p class="wrong">errors</p>

</body>

</html>

В примере описан стиль с именем wrong (зеленый перечеркнутый текст). Далее этот стиль применен к абзацу при помощи параметра CLASS.

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

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

НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;},

Где НАЗВАНИЕ_ЭЛЕМЕНТА – это имя HTML ­тега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Пример:

H1 {font-size: 30pt; color: blue;}

В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.

Элементы страниц, созданные с использованием CSS, используют механизм наследования (поэтому таблицы стилей и названы каскадными). Например, если вы располагаете изображение внутри тега <P>...</P>, оформленного с помощью CSS, с отступами, так, чтобы параграф занимал только определенную часть ширины страницы, изображение также унаследует значения отступов, указанные для этого параграфа.

CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = "имя класса" или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы.

Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных). Описание стиля для класса с именем b-с:

.b-с {font-weight: bold; text-align: center}

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

1)абзацу присвоен стиль класса b-с:

<P CLASS="b-с">Текст абзаца</P>

2)ячейке таблицы присвоен стиль класса b-c:

<TD CLASS="b-c">текст</TD>

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

Присвоение стилей с помощью идентификаторов (параметр ID) применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс.

Свойства элементов, управляемых с помощью CSS

Язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Рассмотрим самые основные их них (Табл. 8.1).

Табл. 8.1. Основные команды языка CSS

СВОЙСТВА ШРИФТА

font-family

Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
P {font-family: Times New Roman, sans-serif;}

font-weight

Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolder
B {font-weight: bolder;}

font-size

Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты pt, пикселы px, сантиметры cm)

H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}

ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА

color

Определяет цвет элемента
H1 {color: yellow;}

background-color

Устанавливает цвет фона для элемента – именно для элемента, а не для странички.

<H1 style=”background-color: teal; color: white;”>Cascading

</H1>
<H1 style=”background-color: navy; color: yellow;”>Style

</H1>
<H1 style=”background-color: gold; color: brown;”>Sheets

</H1>
В этом примере каждому из элементов <H1> были присвоены собственные значения цвета фона и цвета символов.

СВОЙСТВА ТЕКСТА

text-decoration

Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст

H4{text-decoration: underline;}
A{text-decoration: none;}
.wrong {text-decoration: line-through;}

text-align

Определяет выравнивание элемента.

P {text-align: justify}
H1 {text-align: center}

text-indent

Устанавливает отступ первой строки текста в пунктах.

P {text-indent: 50pt;}

line-height

Управляет интервалами между строками текста в % от высоты строки или в пунктах.

P {line-height: 50 %}

СВОЙСТВА ГРАНИЦ

margin-left

margin-right
margin-bottom
margin-top

Устанавливают значения отступов вокруг элемента.

IMG { margin-right: 20pt}
P { margin-left: 2cm}

ЕДИНИЦЫ ИЗМЕРЕНИЯ

px

Пикселы

cm

Сантиметры

mm

Миллиметры

pt

Пункты

%

Проценты

Описание свойств элементов в CSS состоит из названия свойства с последующим присвоением ему определенного значения. Название свойства и его значение разделены двоеточием. Описание завершается точкой с запятой.

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

Еще один из интересных вариантов применения CSS скрывается за простой возможностью: можно указывать значения отступов вокруг объектов как отрицательные величины! Это позволяет накладывать один слой текста на другой и получать весьма интересные и привлекательные результаты.

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

Создадим описание стилей для трех объектов:

<HEAD> <STYLE type="text/css">

BODY

{font-family: Verdana; font-size: 70pt; font-weight: bold;}

.z1 { color: silver; margin-top: 100px; margin-left: 70px;}

.z2 {color: navy; margin-top: -118px; margin-left: 68px;}

</STYLE> </HEAD>

В этом описании мы присвоили тегу <BODY> (впрочем, это мог быть практически любой другой тег) размер, шрифт и начертание – в таком стиле будут отображаться все элементы страницы. Далее мы описываем два стиля, которые отличаются цветом и размером отступов вокруг них: нижний слой описывается стилем z1, а верхний – z2. Используя отрицательные значения отступов и подбирая нужное значение, мы добиваемся того, что верхний слой как бы наползает на предыдущий (Рис. 8.1):

<BODY bgcolor=white>

<DIV class="z1">Кафедра АСС</DIV>

<DIV class="z2"> Кафедра АСС </DIV> </BODY>

Рис. 8.1. Использование отрицательных отступов.

На главную