- •Справочный материал к теме «Основы языка html»
- •Основные теги html
- •Теги физического форматирования текста
- •Теги логического форматирования текста
- •Специальные символы html
- •Названия и коды цветов для html
- •Создание гиперссылок
- •Протокол://Домен/Путь/Файл#Метка
- •Создание фреймовой структуры
- •Каскадные таблицы стилей css
- •Способы определения стилей
- •Применение правил таблицы стилей:
- •Определение правил
- •Свойства для таблиц стилей
Каскадные таблицы стилей css
CSS (Cascading Style Sheets)– эффективное средство автоматизации стилевого оформленияHTML-документов (цвет, шрифт, отступы, интервалы, размеры элементов и т.д.). Стиль – это набор значений атрибутов, определяющих оформление электронного документа, его представление на экране. Применение стилей для оформленияWeb-страниц позволяет осуществить единообразное оформление однотипных элементов текста, упрощает изменение внешнего вида документа в целом и отдельных его элементов.
Определение стиля может быть:
Собственным для каждого элемента документа, например, абзаца, заголовка;
Локальным для всего документа;
Глобальным (внешним) для нескольких документов.
Стиль задаётся с помощью таблицы стилей. Любая таблица стилей состоит из набора правил. Правило состоит из двух частей: селектора и определения:
p { color:red } ,
где p– селектор, а текст в скобках { } – определение.
Способы определения стилей
Собственный стиль для конкретного элемента документа определяется атрибутом styleэтого элемента и называется встраивание таблицы стилей:
<p style="font-size:12pt; color:black">Текст абзаца</p>
Локальное определение стиля задаётся тегом style, который помещается в тегhead, и действует в пределах этого документа. В тегstyleпомещаются правила таблицы стилей. Такое определение стиля называется внедрение таблицы стилей:
<head>
........
<style type="text/css">
/ * Здесь можно вставлять такой комментарий!
Вложенные комментарии не допускаются. * /
body{ background-color:gray;
font-size:14pt } /* Первое правило*/
h1{ background-color:white;
color:blue } /* Второе правило*/
</style>
</head>
<body>
<h1>Синий заголовок на белом фоне</h1>
<p>А это абзац на сером фоне, размер символов – 14pt, цвет символов – по умолчанию (чёрный)</p>
</body>
</html>
Локальное определение стиля также можно выполнить с помощью команды @import, которая позволяет импортировать элементы стиля из внешнего файла *.css(импорт таблицы стилей), команда помещается в тегstyleраньше других правил таблицы стилей. Внешний файл *.cssсодержит набор правил таблицы стилей:
my.css :
body{ background-color:gray; font-size:14pt }
p{ font-size:11pt; font-face:Arial }
my.htm:
<head>
........
<style type="text/css">
@import url(my.css) ; /* импорт таблицы стилей */
h1{background-color:white; color:blue} /* внедрённое правило */
</style>
Можно импортировать несколько таблиц в одном документе.
Глобальное (внешнее) определение стиля помещается в отдельный файл *.css, который содержит набор правил таблицы стилей и подключается тегомlinkв тегеheadнескольких документов, которые должны иметь общие правила оформления, такой способ задания стиля называется связывание:
<head>
......
<link rel="stylesheet" type="text/css" href="my.css">
</head>
Применение правил таблицы стилей:
<html>
<head>
.......
</head>
<body>
<h1>Синий заголовок на белом фоне</h1>
<p>А это абзац на сером фоне, размер символов – 14pt, цвет символов – по умолчанию (чёрный)</p>
</body>
</html>
Приоритеты таблиц стилей, начиная с наивысшего: встроенная, внедрённая, импортированная, связанная, по умолчанию (настройки браузера).
Виды селекторов
Селектортипа элемента– переопределяет атрибуты любого тега:
h2 { color:blue }
p {font-size:16pt }
Применение:
<h2>Заголовок</h2>
<p>Абзац</p>
Селектор класса – позволяет для одного и того же тега определить несколько вариантов оформления:
h2.red {color:red }
h2.green {color:green }
Применение:
<h2 class="red">Это красный заголовок</h2>
<h2 class="green">А это зелёный заголовок</h2>
Также селектор класса позволяет создать стиль, который можно применить для различных тегов:
.style1 {color:blue; font-size:22pt}
.style2 {color:lime; background-color:gray}
Применение:
<p class="style1">Большие синие буквы, фон – по умолчанию</p>
<p class="style2">Зелёные буквы, фон – серый, размер букв - по умолчанию</p>
<h1 class="style1">Заголовок - большие синие буквы, фон – по умолчанию</h1>
<h1 class="style2">Заголовок - зелёные буквы, фон – серый, размер букв - по умолчанию</h1>
Имя класса чувствительно к регистру символов!