CSS: основы основ
Каскадные таблицы стилей… Звучит несколько устрашающе. Такое название способно вызвать в воображении нагромождение таинствен- ных символов кода, едва ли доступных для понимания новичку. Одна- ко на самом деле CSS – один из самых простых и удобных в использо- вании инструментов, имеющихся в распоряжении веб-разработчиков. В первой главе, отличающейся по формату от последующих частей, мы познакомимся с основами CSS и использованием этой технологии для облегчения задачи управления единообразно оформленным сайтом. Если у вас уже есть некоторый опыт работы с CSS для форматирования текста на веб-страницах, можете пропустить данную главу и присту- пить к чтению второй главы, где мы начнем рассмотрение практиче- ских решений.
Определение стиля с помощью CSS
CSS используется главным образом для создания описаний (или декла- раций) стилей (к примеру, шрифта, размера или цвета) и их примене- ния к выбранным частям HTML-кода посредством селекторов – ссылок на элемент или группу элементов, по отношению к которым нужно при- менить указанный стиль.
Решение
Рассмотрим данный основополагающий механизм на примере следую- щего HTML-документа:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>A Simple Page</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8” />
</head>
<body>
<h1>First Title</h1>
<p>A paragraph of interesting content.</p>
<h2>Second Title</h2>
<p>A paragraph of interesting content.</p>
<h2>Third title</h2>
<p>A paragraph of interesting content.</p>
</body>
</html>
Он содержит три заголовка (выделенных жирным шрифтом), создан- ных с помощью тегов <h1> и <h2>. Если разработчик не определил соб- ственные стили, заголовки будут оформлены в соответствии со стан- дартной таблицей стилей броузера, т. е. заголовок h1 будет отображать- ся крупным шрифтом, h2 – мельче, чем h1, но крупнее обычного текста абзаца. Документ, оформленный стилями по умолчанию, будет впол- не читаемым, если он достаточно прост. Для изменения внешнего вида этих элементов будет достаточно добавить несколько строчек CSS-кода:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>A Simple Page</title>
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8” />
<style type=”text/css”>
h1, h2 {
font-family: sans-serif;
color: #3366CC;
}
</style>
</head>
<body>
<h1>First Title</h1>
<p>A paragraph of interesting content.</p>
<h2>Second Title</h2>
<p>A paragraph of interesting content.</p>
<h2>Third title</h2>
<p>A paragraph of interesting content.</p>
</body>
</html>
Все преобразования разместились между тегами <style>, расположен- ными в заголовке страницы (элемент head). Мы определили, что заго-
ловки h1 и h2 должны отображаться шрифтом sans-serif светло-голубого цвета. Особенности синтаксиса мы рассмотрим чуть позднее. Нам ниче- го не потребуется менять в разметке страницы – изменения в описании стиля, размещенного в верхней части страницы, распространяются на все три имеющихся на странице заголовка и будут также применены ко всем заголовкам, добавленным позднее с помощью тегов <h1> или <h2>.
HTML или XHTML? На протяжении всей книги при упоминании веб-страниц, разметки и примеров кода я буду использовать термин HTML. Это можно ин- терпретировать как HTML и/или XHTML, если специально не оговорено иначе.
селекторы блок описаний
Рис. 1.1. Составные части правила CSS: список селекторов и блок описаний
Декларация свойства определяет значения параметров шрифта, цветов и других настроек, которые будут присвоены элементу после примене- ния стиля. Предлагаемые в данной книге решения в большинстве сво- ем основаны на сочетании различных свойств и их значений.
На рис. 1.1 также видно, что правило стиля можно записать в одну строчку. Одни разработчики предпочитают переносить каждое новое
свойство на следующую строку – такой код легче читать; другие пишут правила в одну строчку, чтобы сэкономить место. Ниже приведены два варианта записи одного и того же стиля:
h1, h2 {
font-family: sans-serif;
color: #3366CC;
}
h1, h2 { font-family: sans-serif; color: #3366CC; }
Форматирование не влияет на интерпретацию стилей, поэтому вы мо- жете выбрать более близкий вам способ.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Индексирование содержимого (0)
- Базовый анализ поисковых запросов (0)
- Структурирование схемы контента (0)
- Указание поисковой системе Google на связи между блоками (0)
- Демонстрация поисковой системе Google целой страницы (0)
- Информирование поисковой системы Google о подборках страниц (0)
- Как избежать неинформативности (0)