Устаревшие элементы форматирования
До появления таблиц стилей использовались специальные элементы модификации текста и выравнивания других элементов. В настоящее время их использование ЗАПРЕЩЕНО, однако они могут встретиться в существующей разметке и продолжают поддерживаться браузерами.
Таблица 4 Устаревшие элементы разметки
| Тэг | Описание |
| <center> | Устанавливает выравнивание по центру. Применим к любым элементам |
| <font> | Определяет гарнитуру текста, размер и цвет. Пример: <font face="verdana" color="green">This is some text!</font> |
| <i> | Определяет шрифт курсив. |
| <b> | Определяет жирный шрифт. |
Основы CSS
Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями давно включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко присоединяются к любому тегу. Еще одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML.
Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Основная идея CSS в том, чтобы отделить дизайн документа от его содержимого. CSS отвечает за оформление и внешний вид, а XHTML/HTML - за содержание и логическую структуру документа.
Чтобы стало понятно, о чем идет речь, сравним рисунки 5 и 6.
Рисунок 5. Веб-страница, созданная только на HTML
Это обычная веб-страница, оформленная без стилей. Тот же самый документ, но уже с добавлением стилей приобретает совершенно другой вид (рисунок 6).
Рисунок 6. Веб-страница, созданная на HTML и CSS
Чтобы понять, в чем разница рассмотрим код документа.
<!DOCTYPE HTML>
<html>
<head>
<title>Что такое CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Что такое CSS</h1>
<p>CSS (Cascading Style Sheets — каскадные таблицы стилей) – одна из базовых технологий
в современном Интернете. Нечасто можно встретить сайт, свёрстанный без примененения CSS.
CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы,
написанный особым образом. Под «элементами» обычно подразумеваются теги XHTML/HTML
и их содержимое.</p>
</body>
</html>
Сам код HTML обычный и единственное добавление – это строка <link rel="stylesheet" href="style.css">. Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла следующее:
body {
font-family: Arial, Verdana, sans-serif; /* Семейство шрифтов */
font-size: 11pt; /* Размер основного шрифта в пунктах */
background-color: #f0f0f0; /* Цвет фона веб-страницы */
color: #333; /* Цвет основного текста */
}
h1 {
color: #a52a2a; /* Цвет заголовка */
font-size: 24pt; /* Размер шрифта в пунктах */
font-family: Georgia, Times, serif; /* Семейство шрифтов */
font-weight: normal; /* Нормальное начертание текста */
}
p {
text-align: justify; /* Выравнивание по ширине */
margin-left: 60px; /* Отступ слева в пикселах */
margin-right: 10px; /* Отступ справа в пикселах */
border-left: 1px solid #999; /* Параметры линии слева */
border-bottom: 1px solid #999; /* Параметры линии снизу */
padding-left: 10px; /* Отступ от линии слева до текста */
padding-bottom: 10px; /* Отступ от линии снизу до текста */
}
В файле style.css описаны все параметры оформления таких тегов как <body>, <h1> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.
Файл стилей можно создать в том же Блокноте, сохранив его с расширением .css. Чтобы подключить стили, надо скопировать его в папку с разрабатываемой Web-страницей.
Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.
CSS представляет собой свой собственный язык, который совпадает с HTML только некоторыми значениями, например, способом определения цвета.
Основным понятием выступает селектор - это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.
Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу <table>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.
CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.
Пример (две разновидности оформления селекторов и их правил):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Заголовки</title>
<style>
h1 { color: #a6780a; font-weight: normal; }
h2 {
color: olive;
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
</body>
</html>
В данном примере свойства селектора h1 записаны в одну строку, а для селектора h2 каждое свойство находится на отдельной строке. Во втором случае легче отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объем данных за счёт активного использования пробелов и переносов строк. Так что в любом случае способ оформления стилевых параметров зависит от разработчика.