Практическое занятие № 7. Каскадные таблицы стилей
реклама
Практическое занятие № 7.
Каскадные таблицы стилей
В документ, разработанный на 5-ом практическом занятии, добавляем связи с
таблицами стилей и разрабатываем сами таблицы.
<!doctype html>
<html lang = "ru-RU">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251">
<title> Элементы HTML </title>
<link rel = stylesheet href = "Practice5.css" type = "text/css">
<link rel = stylesheet href = "Practice5_print.css" type = "text/css" media = "print">
<link rel = stylesheet href = "Practice5_handheld.css" type = "text/css" media = "handheld">
</head>
<body>
...
</body>
</html>
1. Таблица стилей общего назначения
/* Задаём цвет фона и фоновый рисунок, который повторяется по вертикали на расстоянии 30pt от левого края. */
body { background: #fdf8f8 url("Background.gif") repeat-y fixed 30pt top }
/* Задаём шрифт, который будет служить базовым для всех вложенных элементов. */
body { font: normal 13pt Cambria, "Times New Roman", serif }
/* Для заголовков задаём другой шрифт, но устанавливаем его размер в процентах от базового для того, чтобы
шрифт заголовков менялся при изменении размера базового шрифта в таблицах стилей для других устройств. */
h1 { font: bold 350% Verdana, Arial, sans-serif; text-align: center; color: #f06508;
text-shadow: 2pt 2pt 0pt #aaaaaa; padding: 20pt }
h2 { font: bold 150% Verdana, Arial, sans-serif }
h3 { font: bold 120% Verdana, Arial, sans-serif; text-indent: 3% }
/* Задаём элементу nav постоянную ширину и делаем его плавающим. Также делаем его фиксированным.
Цвет фона задаётся для того, чтобы перекрыть фоновый рисунок. */
nav { width: 150pt; float: left; margin: 0pt 10pt; padding: 20pt; border: #f06508 solid 2pt;
border-radius: 10pt; box-shadow: 7pt 7pt 4pt #aaaaaa; position: fixed; background-color: #fdf8f8 }
/* Задаём левое поле для того, чтобы оставалось место для плавающего элемента nav. */
section.main { margin-left: 230pt }
/* Немного раздвигаем описания по высоте. */
section.element { margin: 25pt 0 }
p { text-indent: 5% }
/* Названия элементов в заголовке, а также названия атрибутов выделяем курсивом. */
h3 span.element, span.attribute { font-style: italic }
/* А названия элементов в обычном абзаце выделяем жирным шрифтом. */
p span.element, a span.element { font-weight: bold }
/* Выделяем раздел с атрибутами, изменив цвет фона для элемента div. */
div.attributes { padding: 10pt 0; background-color: #fcf0e0 }
/* В элементе pre по умолчанию сохраняются разделители и переносы строк. Но для того чтобы
не уходили за правую границу экрана, задаём свойству white-space значение pre-wrap, что
разделители и переносы строк, но позволяет браузеру добавить переносы строк для длинных
Также выделяем элемент, изменив цвет фона и добавив границу.*/
pre { border: black dashed 1pt; background-color: #eeeeee; padding: 0pt 50pt; margin: 20pt
white-space: pre-wrap }
длинные строки
требует сохранять
строк.
0pt;
/* В начало каждого элемента pre добавляем заголовок "Пример использования", форматируем его
и немного смещаем относительно стандартной позиции. */
pre:before { content: "Пример использования"; background-color: #eeeeee; padding: 0pt 5pt;
position: relative; top: -0.5em; left: -20pt; font-weight: bold }
/* Удаляем пустые элементы pre (в документе нет примера для элемента li) */
pre:empty { display: none }
/* В документе элементы a получились строковыми, однако ссылки желательно выводить по отдельности.
Можно было добавить блочные элементы в документ, но чтобы не загромождать его, используем
свойство display со значением block, что заставляет строчный элемент отображаться как блочный.
Также меняем стандартное форматирование ссылок, которое выглядит не очень хорошо (мягко говоря). */
a { display: block; font-family: Verdana, Arial, sans-serif; font-variant: small-caps; color: black;
text-decoration: none; margin: 5pt 0 }
/* Для ссылок второго уровня уменьшаем размер шрифта и задаём отступ. */
a.second { font-size: 80%; padding-left: 10% }
/* Все ссылки будут подчёркиваться при наведении на них курсора. */
a:hover { text-decoration: underline }
/* Посещённые ссылки выделяем другим цветом. */
a:visited { color: #f06508 }
/* Меняем цвет для первой буквы заголовков второго уровня. */
h2:first-letter { color: #f06508 }
/* Делаем рисунки немного прозрачными, … */
img { opacity: 0.7 }
/* …, но при наведении мыши на них снова делаем их непрозрачными. */
img:hover { opacity: 1.0 }
2. Таблица стилей для печати
/* Убираем фоновый рисунок и задаём белый цвет фона. */
body { background-color: white; background-image: none }
/* Убираем панель со ссылками, которые на бумаге работать по понятным причинам не будут. */
nav { display: none }
/* Уменьшаем отступ, чтобы заголовок размещался повыше. */
h1 { padding-top: 0pt }
/* Уменьшаем левое поле, которое было нужно для размещения панели со ссылками.
section.main { margin-left: 0pt }
*/
/* Убираем рисунки, которые использовались для отображения подсказок, и на бумаге опять-таки не нужны. */
img { display: none }
div.attributes { background-color: #f8f8f8 }
3. Таблица стилей для портативных устройств
/* Уменьшаем размер шрифта для элемента body. Поскольку размеры шрифтов остальных элементов задавались
в процентах от размера шрифта элемента body, они также пропорционально уменьшатся. */
body { font-size: 10pt }
/* Элемент nav возвращаем на обычное место, убираем отступы, поля и границу, таким образом, этот элемент
не будет виден на экране. */
nav { float: none; position: static; border: 0; width: 100%; margin: 0; padding: 0 }
/* Элементы div, находящиеся внутри элемента nav, делаем плавающими, и таким образом размещаем ссылки
в три колонки. */
div.ref { width: 26%; padding: 0 1% 0 6%; float: left; margin-bottom: 10pt }
/* Задаём свойство clear для того, чтобы элемент section располагался под плавающими элементами div. */
section.main { margin: 2%; clear: both }
a { margin: 2pt 0 }
pre { padding: 0 20pt }
/* Убираем рисунки, которые использовались для отображения подсказок, т.к. навести на них курсор
на портативном устройстве не получится. */
img { display: none }
/* В качестве подсказки выводим под элементами h2 содержимое атрибута title. */
h2:after { content: attr(title); font-style: normal; font-size: 50%; text-decoration: overline;
display: block }
Почему нельзя использовать атрибут title элемента img? С помощью псевдоклассов
before и after можно добавить что-либо к содержимому элемента, но элемент img – пустой
элемент и у него нет содержимого.
