Категории:
АстрономияБиология
География
Другие языки
Интернет
Информатика
История
Культура
Литература
Логика
Математика
Медицина
Механика
Охрана труда
Педагогика
Политика
Право
Психология
Религия
Риторика
Социология
Спорт
Строительство
Технология
Транспорт
Физика
Философия
Финансы
Химия
Экология
Экономика
Электроника
Устаревшие элементы форматирования
До появления таблиц стилей использовались специальные элементы модификации текста и выравнивания других элементов. В настоящее время их использование ЗАПРЕЩЕНО, однако они могут встретиться в существующей разметке и продолжают поддерживаться браузерами.
Таблица 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 каждое свойство находится на отдельной строке. Во втором случае легче отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объем данных за счёт активного использования пробелов и переносов строк. Так что в любом случае способ оформления стилевых параметров зависит от разработчика.