| Каскадные Таблицы Стилей |
Изменение размера шрифта | ||
| + | - | Вернуться на страницу учебника по HTML и CSS | |
Каскадные таблицы стилей (Cascade Style Sheets -CSS) - это набор шаблонов (стилей), управляющих форматированием ТЕГов в HTML документе. Концепция CSS близка к концепции стилевых файлов редактора Microsoft WORD. Именно в каскадных таблицах стилей, как и в стилевых файлах редактора WORD содержится Внешний вид документа определяется набор правил оформления и форматирования документа, который просматривается WWW-браузером или редактором WORD.
В стандартном языке HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходится каждый раз описывать эти свойства. Если на одной странице должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого, то нужно десять или сто десять раз вставить один и тот же HTMLкод в страницу, увеличивая размер файла и время загрузки HTML страницы.
CSS действует другим, более удобным и экономичным способом. Для присвоения какому-либо элементу определенных характеристик следует один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который нужно оформить соответствующим образом, должен принять свойства этого стиля.
Описание стиля можно сохранить не в тексте каждой отдельной страницы, а в отдельном файле – это позволит использовать описание стиля при оформлении любого количества Web-страниц. Есть еще одно, связанное с этим, преимущество – возможность изменить оформление любого количества страниц, исправив лишь описание стиля в одном файле.
Кроме того, CSS позволяет работать со шрифтовым оформлением страниц на гораздо более высоком уровне, чем стандартный HTML, избегая излишнего утяжеления страниц графикой.
Информация о стилях может
располагаться либо в отдельном файле, либо непосредственно в коде
Web-страницы. Расположение описания стилей в отдельном файле имеет смысл
в случае, если планируется применений этих стилей к большему, чем одна,
количеству страниц. Для этого нужно создать обычный текстовый файл,
описать с помощью языка CSS необходимые стили, разместить этот файл на
Web-сервере, а в коде Web-страниц, которые будут использовать стили из
этого файла, нужно будет сделать ссылку на него.
Делается это с помощью
тега <LINK>, располагающегося внутри тега <BODY>:
<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">
Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить браузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= <URL> – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный адрес URL (<http://...>) в случае, если файл стилей находится на другом сервере.
Описание стилей может располагаться прямо в коде Web-страницы, внутри тега <BODY>, в теге <STYLE type="text/css">... </STYLE>. В этом случае можно использовать эти стили для элементов, располагающихся в пределах данной страницы. Параметр type="text/css" является обязательным и служит для указания броузеру использовать CSS.
Описание стиля может также располагаться непосредственно внутри тега элемента, который описывается. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот способ не рекомендуется, так как он приводит к потере одного из основных преимуществ CSS – возможности отделения текста или графики от его (ее) оформления. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.
Самый простой случай присвоения какому-либо элементу определенного стиля выглядит так:
НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;},НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML-тега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений.
Пример:
H1 {font-size: 30pt; color: blue;}
В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.
Элементы страниц, созданные с использованием CSS, используют механизм наследования: если, например, внутри тега <P>...</P>, оформленного с помощью CSS с заданием синего цвета текста всего абзаца находится выделенное курсивом слово или предложение, то оно унаследует синий цвет текста.
В CSS реализуется возможность присваивать стили не всем
одинаковым элементам страницы, а избирательно – для этого используется
параметр CLASS = "имя класса" или
идентификатор
ID="имя элемента",
присваивающиеся любому элементу страницы. Рассмотрим эти возможности
подробнее.
Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных).
Пример:
.bс {font-weight: bold; text-align: center}
– описание стиля для класса bс
Все элементы класса bс будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).
<P CLASS="bс">
Текст параграфа</P>
– параграфу присвоен стиль класса bс .
<TD CLASS="b-c">текст</TD>
– ячейке таблицы присвоен стиль класса bc.
Содержащийся в ячейке текст будет отображаться согласно описанию класса.
Таким образом, вы можете присвоить описанный класс любым текстовым элементам страниц. При написании названия классов необходимо соблюдать регистр символов, согласно названию класса в описании стиля!
Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс.
В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Но из-за того, что этот стандарт еще очень молод, в полном объеме его пока не поддерживают наиболее популярные броузеры (Netscape Navigator и Microsoft Internet Explorer). Последние версии этих броузеров могут работать с большим количеством команд CSS.
Более того, поскольку разработчики из этих компаний никак не могут договориться между собой, последние версии броузеров поддерживают неодинаковый набор свойств CSS.
| ||||||||||||||||||||||||||||||||||||||||||||
Описание свойств элементов в CSS состоит из названия свойства с последующим присвоением ему определенного значения. Название свойства и его значение разделены двоеточием.
При указании абсолютных, а не относительных размеров шрифтов, теряется возможность увеличивать или уменьшать размер шрифтов с помощью специальной кнопки в браузере в соответствии с разрешением дисплея. Шрифты будут отображаться только такого размера, который указан при написании странички.
Поэтому, если использование абсолютных размеров шрифтов не обусловлено художественным замыслом или умыслом, рекомендуется использовать для этих целей указание размеров в процентах. В этом случае размер шрифта будет меньше (больше) на указанное количество процентов, чем при оформлении его с помощью стандартного HTML-тега.
Есть еще одна небольшая, но очень полезная хитрость – это способ скрыть от устаревших броузеров описания стилей, располагающихся в теге <STYLE>, внутри раздела<HEAD>. Поскольку броузер был написан несколько лет назад, когда никакого CSS еще и в планах не было, он просто не поймет, что написано внутри <STYLE>…</STYLE>, и выдаст все описания стилей на страничку, как обычный текст. Для того чтобы предотвратить это, необходимо заключить описания стилей в тег комментариев. Делается это очень просто.
<HEAD>
<STYLE type="text/css">
<!-- описания стилей -- >
</STYLE>
</HEAD>
где <!-- – тег, открывающий комментарий, а
> – закрывающий.
Устаревшие браузеры посчитают все заключенное между тегами комментариев информацией неотображенной, а новые определят, что это — описание стилей, и задействуют их.
Еще один из интересных вариантов применения CSS скрывается за возможностью указывать значения отступов вокруг объектов, как отрицательные величины! Это позволяет накладывать один слой текста на другой.
Добиться такого эффекта не очень сложно. Можно создать страничу с заголовком, который будет выглядеть трехмерным без использования графики.
Создадим новый html-файл с описанием стилей для трех объектов:
<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: darkblue; margin-top: -118px; margin-left: 68px;}
</STYLE>
</HEAD>
В этом описании в теге <BODY> (впрочем, это мог быть практически любой другой тег) описныы размер, шрифт и начертание – в таком стиле будут отображаться все элементы страницы. Это было сделано лишь ради стремления уменьшить размер файла странички, вместо этого можно было описать эти параметры дважды: для каждого из классов z. Далее описываются два стиля, которые отличаются цветом и размером отступов вокруг них: нижний слой описывается стилем z1, а верхний – z2. Используя отрицательные значения отступов и подбирая нужное значение, мы добиваемся того, что верхний слой как бы наползает на предыдущий...
<BODY bgcolor=white> <DIV CLASS="z1">EC-NET</DIV> <DIV CLASS="z2">EC-NET</DIV> </BODY>
В редакторе Notepad можно создать файл с названием styles.css (название файла может быть любым). Опишем в этом файле стиль параграфа <P>, который будет использоваться на всех страничах сайта:
P {
font-family: Times New Roman, serif;
color: #000000;
margin-left: 15%;
margin-right: 15%;
margin-top: 1pt;
margin-bottom: 1pt;
text-indent: 1cm;
text-align: justify;
}
Внутри описания стиля для удобства форматирования можно использовать любое количество пробелов и переносов строк – при чтении стиля броузер просто отбросит все лишние пробелы.
В этом стиле задано, что параграфы <P> на всех страничках, которые используют это описание, будут отображаться шрифтом Times New Roman или в случае, если этот шрифт на машине не установлен, другим шрифтом, но из этого семейства (serif). Цвет шрифта установлен черным, выравнивание – полное (по обеим сторонам).
Также установлены для параграфа ряд значений отступов. Это было сделано со следующей целью: по умолчанию параграф в HTML отображается равным практически 95 % страницы и с интервалами между параграфами, равными 180 % межстрочного интервала. Читать такие параграфы не очень удобно, так как интервалы между ними слишком велики, а ширина параграфа слишком большая. Посмотрите на журнал, который вы сейчас держите в руках: текст сверстан в колонки для того, чтобы его было удобнее читать. В стиле параграфа, который мы создали, установлены боковые отступы в 15 % ширины окна и вертикальные отступы в 1 пункт – так текст статьи будет гораздо читабельнее.
Так же можно создадать стиль для заголовков статей:
H2 {
font-family: Verdana, Arial Cyr, Arial;
font-weight: bold;
font-size: 14pt;
color: black;
margin-left: 20%;
margin-top: 1cm;
text-align: left;
}
Все заголовки страниц, оформленные тегом <H2>, будут отображаться жирным шрифтом Verdana или, если этот шрифт не установлен, шрифтом Arial. Размер заголовка установлен равным 14 пунктам, цвет черный, отступ слева равен 20 % ширины страницы, а отступ сверху – 1 см. Заголовок будет выравниваться относительно левого края страницы.
Благодаря тому, что боковые отступы заголовка и параграфа установлены в процентах от ширины окна броузера, при просмотре страниц на компьютерах с разным разрешением дисплея пропорции и расположение заголовка, основного текста и отступов будут сохранены.
Для того чтобы «привязать» созданные стили к HTML - страницам, во все html-файлы в разделе <HEAD> следует поместить строку со ссылкой на файл стилей с указанием об использовании CSS:
<LINK REL=STYLESHEET TYPE="text/css"
HREF="styles.css">
Поскольку файл со стилями будет находиться в том же каталоге сервера, что и остальные странички, параметр HREF="URL" будет просто именем файла стилей (styles.css).