Каскадные таблицы стилей |
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.
|
Основные свойства 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
|
Основные свойства 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 |
Определяет расстояние между содержимым и рамкой элемента.
|
Стиль для отдельного HTML-файла
|
Можно задавать стиль для тэга или группы тэгов так, чтобы
определение работало на протяжении всего HTML-документа. Для этого достаточно написать
определение в головной части документа. Стилевые определения располагаются внутри блока
<STYLE.../STYLE>, обрамляя HTML-комментариями (для браузеров не поддерживающих CSS).
Стилевое определение имеет вид:
Имя тэга (или имена тэгов через запятые)
{ свойство:значение; ... свойство:значение; }
Например:
<STYLE type="text.css"> <!-- BODY { font-family: Aryal, sans-serif;
font-size:14pt; line-hieght:10pt } --> </STYLE> Стилевые
определения можно описывать без указания тэга. В этом случае каждому определению
присваивается имя, которое можно использовать для сопоставления заданного стиля конкретному
тэгу. Такие стилевые определения называются классами. Класс записывается
следующим образом:
.имя { свойство:значение; ... свойство:значение;
}
|
Стиль для нескольких HTML-документов
|
Для применения стилевых свойств к нескольким документам их необходимо описать в
отдельном файле и схранить с расширением ccs . Для подключения этих указаний к HTML-файлу необходимо в
разделе <HEAD>...</HEAD> этого документа поместить ссылку
<LINK rel=stylesheet type="text/css" href
=...> , где вместо многоточия указывается имя файла стилевой таблицы.
|
- Выполните Тест 10
- Отредактировать страницу work3.html, используя стилевые описания в виде отдельного файла.
редусмотреть указание свойств:
- заголовков;
- списка;
- нумерованный список - список учащихся Вашего класса;
- основного текста;
- фрагментов текста.
- Сохраните страницу в рабочей папке c именем 10.html.
|