Читайте также:
|
Как видно из ранее изложенного, к документу может быть применено сразу несколько стилевых таблиц. Возникает вопрос: что же произойдёт, если установки стилей перекроют друг друга? Пусть имеется следующий HTML-документ:
<html>
<head>
<link href="mysite.css" rel="stylesheet" type="text/css">
<style type="text/css">
h1 {color:yellow}
</style>
</head>
<body>
<h1 style="color:green; font-family:Arial">О слонах</h1>
<p>На этой странице нашего сайта речь пойдёт в основном о слонах.
Слоны (см. фото) – большие и добрые животные.</p>
</body>
</html>
и подключённая к нему стилевая таблица в файле mysite.css:
h1 {color:red}
p {color:purple}
Здесь стиль для тэга <h1> задан всеми тремя способами. Какого цвета окажется надпись «О слонах», когда страница будет отображена в браузере: красного (как указано во внешней стилевой таблице, подключённой с помощью тэга <link>), жёлтого (как указано во внутренней стилевой таблице, заключённой в тэг <style>) или зелёного (стиль указан внутри тэга <h1>)? Правильный ответ – зелёного (и шрифтом Arial). Браузер, считывая такую страницу, находит сначала тэг <link>, затем <style>, затем определение внутри тэга. Более позднее правило имеет приоритет. Последующий текст «На этой странице…», заключённый в тэг <p>, будет отображаться фиолетовым цветом, как задано во внешней стилевой таблице, поскольку правило для него не перекрыто правилами в тэге <style> и внутри тэга <p>. Таким образом, самым высоким приоритетом обладает стиль, указанный внутри тэга, за ним следует <style> и самый низкий приоритет – у <link>. Если никаких стилей нет, то используются настройки браузера по умолчанию. Эти стили в порядке их приоритета образуют как бы многоступенчатый каскад, отсюда название таблиц стилей – «каскадные».
Классы в стилевых таблицах
В предыдущих примерах правила стилей назначались для определённого тэга (селектора). Для большей гибкости при оформлении страниц можно создать свои собственные классы и задать для них стили. Для создания класса ему нужно дать имя. Имена классов можно давать любые, но лучше осмысленные.
Рассмотрим два примера.
1. Создание произвольного класса, который можно присваивать любому тэгу на странице.
.redarial {color: darkred; font-family: Arial}
.bluecourier {color: darkblue; font-family: Courier}
Здесь redarial и bluecourier – названия классов. Обратите внимание на синтаксис (перед названием класса ставится точка). Чтобы оформить текст на странице, используя созданные классы, добавим атрибут class:
<h1 class="redarial">Заголовок красным шрифтом Arial</h1>
<h2 class="redarial">Подзаголовок красным шрифтом Arial</h2>
<p class="redarial">Простой текст красным шрифтом Arial</p>
<h1 class="bluecourier">Заголовок синим шрифтом Courier</h1>
<h2 class="bluecourier">Подзаголовок синим шрифтом Courier</h2>
<p class="bluecourier">Простой текст синим шрифтом Courier</p>
2. Привязка класса к определенному тэгу. В этом случае в стилевой таблице записывается селектор (имя тэга) и затем через точку – имя класса. В качестве примера рассмотрим текст в виде «часто задаваемых вопросов и ответов», который часто встречается в технической (и не только) литературе.
p.question {font-weight: bold}
p.answer {font-style: italic; color: gray}
Эти классы можно использовать так:
<p class="question">Что такое HTML?</p>
<p class="answer">HyperText Markup Language – язык разметки гипертекстовых документов. Документы в формате HTML могут включать гипертекстовые ссылки, позволяющие пользователю перейти к другому HTML- документу.</p>
<p class="question">Что такое CSS?</p>
<p class="answer">Стилевые таблицы – набор правил оформления и форматирования, которые могут быть применены к различным элементам веб-страницы.</p>
Комментарии в стилевых таблицах
Комментарии в стилевых таблицах заключаются в символы /* … */. Как и комментарии в HTML, они могут быть использованы для временного исключения одной или нескольких строк из стилевой таблицы. Вложенные комментарии в CSS, как и в HTML, не допускаются.
Дата добавления: 2015-07-26; просмотров: 76 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Синтаксис таблиц стилей | | | Свободно позиционируемые элементы |