Каскадные таблицы стилей
CSS – Cascading Style Sheets (каскадные таблицы стилей) – это средство, позволяющее отделить содержание гипертекстовых страниц от формы их представления их на экране. Достоинства CSS:
  • CSS позволяют сократить объём HTML-файла за счёт исключения из кода страницы тэгов и атрибутов, ответственных за визуальное представление элементов на экране;
  • CSS предлагает гораздо больше средств для управления внешним видом элемента, чем обычные тэги и атрибуты HTML;
  • разработчик получает возможность менять вид множества гипертекстовых страниц, внося изменения только в один файл с описаниями стилевых свойств.
Применяются три способа внедрения стилей в HTML-документы:
  • указания в отдельном тэге;
  • указания в заголовке HTML-файла;
  • указания в отдельном CSS-файле.

Стиль для отдельного тэга
Стиль отдельного тэга задаётся параметром STYLE, значением которого является перечисление стилевых определений в виде указаний следующего формата:
свойство : значение;
Указания отделяются друг от друга символом «;».
Например:<P style="font-size:14pt;text-align:center">. В этом примере для абзаца определяется размер шрифта и выравнивание по ширине.

Основные свойства CSS
Шрифт и цвет
font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
"font-family: Times New Roman, sans-serif"
font-style Задает способ начертания шрифта:
normal - нормальный (по умолчанию), italic - курсив, oblique - наклонный.
font-variant Задает варианты начертания шрифта: normal - Нормальный (по умолчанию), small-caps - Все буквы заглавные).
"font-variant: small-caps"
font-weight Определяет степень жирности шрифта с помощью параметров: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
"font-weight: bolder"
font-size Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пиксели, сантиметры)
"font-size: 150px"
font Значения <font-style><font-variant><font-weigth> <font-size>/<font-heigth><font-family>
Это свойство позволяет установить сразу несколько характеристик шрифта. Разделитель значений - пробел. Порядок значений важен, но любое значение может быть опущено, кроме <font-size> и <font-family>. См. Пример 22.
color Определяет цвет элемента
"color:green"
background-color Устанавливает цвет фона для элемента – именно для элемента, а не для странички. Разные браузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator – лишь ширину, занимаемую этим элементом.
"background-color: yellow"
background-image Устанавливает или получает фоновый рисунок для элемента Может принимать значения none - По умолчанию. Используется цвет родительского объекта.
"background-image:url(<адрес>)"
background-attachment Устанавливает или получает поведение фонового рисунка для элемента Может принимать значения
scroll - По умолчанию. Фоновый рисунок прокручивается вместе с элементом
fixed - Фоновый рисунок не прокручивается вместе с элементом
background-position Определяет начальное положение фоновой картинки (или фоновой заливки) с помощью двух значений (сначала по горизонтали, потом по вертикали) или при помощи двух ключевых слов из возможных: top, center, bottom, left, right. По умолчанию top, left.
background-repeat Значения: repeat, repeat-x, repeat-y, no-repeat. Определяет повторяется ли фоновая картинка. Если используется значение repeat-x или repeat-y, то картинка повторяется только по одному направлению. По умолчанию repeat.

Пример 19. Стилевые свойства шрифта и фона
Пример HTML кода <P STYLE="font-family:;
font-size:;font-variant:;
font-style:; font-weight:;
background-color:; color:;
background-image:;
background-position:;
background-repeat:">
Отображение в браузере

Образование - это то, что остается, когда все выученное забыто.
Б.Ф. Скиннер
Человек образованный - тот, кто знает, где найти то, чего он не знает.
Георг Зиммель

Основные свойства CSS
Текст
letter-spacing Определяет добавочное расстояние между буквами. Значения normal или <расстояние>.
line-height Управляет интервалами между строками текста.
text-align Определяет выравнивание элемента. Возможные значения: left, right, center, justify
text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст. Значения: underline - подчеркивание, none - стандартный текст line-through - зачеркивание,overline - надчеркивание.
text-indent Устанавливает отступ первой строки текста.
text-transform Задает преобразование регистра текста при отображении. Значения:
capitalize - первая буква каждого слова преобразуется в заглавную,
uppercase - все буквы преобразуются в заглавные,
lowercase - все буквы преобразуются в строчные,
none - отменяет установленные преобразования.
vertical-align Устанавливает вертикальное положение элемента. Может принимать следующие значения:
baseline - выравнивание по образцу родительского элемента
sub - перевод в нижние индексы,
super - перевод в верхние индексы,
middle text-top text-bottom top bottom

Пример 20. Стилевые свойства текста
Пример HTML кода <P STYLE="letter-spacing:; line-height:;
text-align:;text-decoration:;
text-indent:">
Отображение в браузере

Образование - это то, что остается, когда все выученное забыто.
Б.Ф. Скиннер
Человек образованный - тот, кто знает, где найти то, чего он не знает.
Георг Зиммель


Основные свойства CSS
Поля и рамки
border-color
border-top-color
border-bottom-color
border-left-color
border-right-color
Определяет цвет четырёх сторон рамки. Свойство работает, если задано свойство border-style. Значения <цвет>
border-style
border-top-style
border-bottom-style
border-left-style
border-right-style
Определяет стиль четырёх сторон рамки. Значения: none, solid, double, groove, ridge, inset, outset
border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
Определяет ширину четырёх сторон рамки. Значения:
thin - тонкая
medium - средняя
thick - толстая
или значение в пикселях.
margin
margin-top
margin-bottom
margin-left
margin-right
Определяет размер отступов данного элемента.
padding
padding-top
padding-bottom
padding-left
padding-right
Определяет расстояние между содержимым и рамкой элемента.

Пример 21. Стилевые свойства рамок и полей
Пример HTML кода <P STYLE="border-style:; border-color:;
border-width:;margin:;padding:">
Отображение в браузере

Образование - это то, что остается, когда все выученное забыто.
Б.Ф. Скиннер
Человек образованный - тот, кто знает, где найти то, чего он не знает.
Георг Зиммель


Стиль для отдельного HTML-файла
Можно задавать стиль для тэга или группы тэгов так, чтобы определение работало на протяжении всего HTML-документа. Для этого достаточно написать определение в головной части документа. Стилевые определения располагаются внутри блока <STYLE.../STYLE>, обрамляя HTML-комментариями (для браузеров не поддерживающих CSS).
Стилевое определение имеет вид:
Имя тэга (или имена тэгов через запятые)
{
свойство:значение;
...
свойство:значение;
}
Например:
<STYLE type="text.css">
<!--
BODY
{
font-family: Aryal, sans-serif;
font-size:14pt;
line-hieght:10pt
}
-->
</STYLE>

Стилевые определения можно описывать без указания тэга. В этом случае каждому определению присваивается имя, которое можно использовать для сопоставления заданного стиля конкретному тэгу. Такие стилевые определения называются классами. Класс записывается следующим образом:
.имя
{
свойство:значение;
...
свойство:значение;
}

Пример 22. Стиль для отдельного HTML-файла
Пример HTML кода <HEAD> ... <STYLE> <!-- .text1 { font:bold 12pt Arial; border:groove thick #FFFF00; } .text2 { font:lighter 10pt Bookman Old Style; background-color:00FF00; padding:20px; } //--> </STYLE> </HEAD>
<P class=>
Отображение в браузере

Стиль для нескольких HTML-документов
Для применения стилевых свойств к нескольким документам их необходимо описать в отдельном файле и схранить с расширением ccs. Для подключения этих указаний к HTML-файлу необходимо в разделе <HEAD>...</HEAD> этого документа поместить ссылку
<LINK rel=stylesheet type="text/css" href =...>, где вместо многоточия указывается имя файла стилевой таблицы.

  1. Выполните Тест 10
  2. Отредактировать страницу work3.html, используя стилевые описания в виде отдельного файла. редусмотреть указание свойств:
    • заголовков;
    • списка;
    • нумерованный список - список учащихся Вашего класса;
    • основного текста;
    • фрагментов текста.
  3. Сохраните страницу в рабочей папке c именем 10.html.
© Смирнов Е.А. 2004 г.