Каскадность стилей

Таблицы стилей в отдельных файлах

Таблица стилей размещается в самом документе

Стили

Существует прием форматирования текстов и достижения внешних эффектов, который может украсить web-страницу и привлечь к ней внимание. Этот прием основан на использовании CSS (Cascading Style Sheets) – каскадных таблиц стилей. CSS -- это технология, разработанная для форматирования html-документов и придания им определенного внешнего вида при выводе на экран (определяется положение элементов на экране, цвет текста, величина отступа абзаца и многое другое). Фактически, каскадные таблицы стилей представляют собой набор правил, в соответствии с которыми происходит форматирование текста и элементов на экране. Правила хранятся либо в самом html-документе, либо в отдельном текстовом файле с расширением css. Создавать эти файлы можно в любом текстовом редакторе.

Если таблица стилей задана, то различные документы могут просто ссылаться на эту таблицу и не содерджать большое количество атрибутов в тегах форматирования (типа <h1>, <p> и т.п.).

Форматирование задается внутри тегов <style>…</style>, которые рсположены внутри тегов <head>…</head>.

<head>

<style>

ТЕГ {свойство_1: значение_1; свойство_2: значение_2; … ; свойство_n: значение_n}

</style>

</head>

Пример 1.

<html>

<head>

<title>Untitled Document</title>

<style>

h1 {font-size:48 pt; color:red}

h2 {font-size:20 pt; color:blue}

</style>

</head>

<body>

<h1>Это стиль Н1. Цвет - красный. </h1>

<h2>Это стиль Н2. Цвет - синий.</h2>

<p>Это обычный стиль по умолчанию.</p>

</body>

</html>

Внешний вид в браузере (стили Н1 и Н2 увеличились в размере и изменили цвета):

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

Пример 2.

<html>

<head>

<title>Untitled Document</title>

<style>

h1,h2 {font-size:48 pt; color:red}

</style>

</head>

<body>

<h1>Это стиль Н1. Цвет - красный. </h1>

<h2>Это стиль Н2 (такой же, как Н1).</h2>

<p>Это обычный стиль по умолчанию.</p>

</body>

</html>

Внешний вид в браузере:

Можно создать таблицы стилей, закрепив за ними имя. Это имя задается как обычное имя, но с точкой в качестве первого символа. Тогда в тегах мы можем обращаться к этой таблице по её имени, используя атрибут class="имя_стиля", где имя стиля уже используется без точки.

Пример 3.

<html>

<head>

<title>Untitled Document</title>

<style>

.mystyle {color: blue; font-family: Courier}

</style>

</head>

<body>

<h1>Это стиль Н1.</h1>

<h2 class="mystyle">Это стиль Н2 + mystyle.</h2>

<p>Это обычный стиль по умолчанию.</p>

</body>

</html>

Внешний вид в браузере:

При использовании тега <style> требуется вставлять таблицу стилей в каждый документ. Это может показаться довольно неэкономным как с точки зрения объема файлов, так и времени, необходимого на разработку страницы. Поэтому есть способ автоматического применения таблицы стилей, сохраненной в отдельном файле. Это файл должен иметь расширение *. css.

Для применения стилей, описанных в этом файле, к данному документу используется специальная инструкция, которую нужно вставить между тегами <style>…</style>:

@import URL("адрес_файла_стилей ")

Например:

@import URL("http://www.yourdoman.ru/style.css")

Другой способ использования внешних таблиц стилей основан на применении тега <LINK> внутри тега <HEAD>:

<HEAD>

<LINK REL=STYLESHEET TYPE="text/css" HREF="адрес_таблицы_стилей"

TITLE="Style">

</HEAD>

Простой пример использования каскадных таблиц стилей включает в себя html- и css-файлы, текст которых указан ниже

Содержимое файла primercss1.htm:

<html>

<head>

<title>Untitled Document</title>

<TITLE>Пример использования таблиц стилей</TITLE>

<body >

<DIV class=first>Каскадные таблицы стилей -</DIV>

<DIV class=third>круто!</DIV>

</body>

</html>

Содержимое файла style.css

body {

font-family: Arial, sans-serif;

text-align: center;

}

.first {

color: brown;

margin-top: 60px;

font-size: 40px;

}

.second {

color: green;

margin-top: -50px;

font-size: 100px;

}

.third {

color: black;

margin-top: -80px;

font-size: 120px;

font-weight: bold;

}

Внешний вид в браузере:

Рассмотрим пример: