|
Построй свой домик в Интернете!
Спецвыпуск Xakep, номер #015, стр. 015-010-9
Что такое CSS?
При создании своей странички ты уткнешься в некоторые ограничения: не сможешь делать сложное форматирование (например, не сможешь изменить интервал между символами, не сможешь даже поставить два пробела подряд - они автоматически преобразуются в один), не сможешь сделать страничку так, чтобы она одинаково отображалась в разных браузерах или в одинаковых браузерах, но на машинах с разной конфигурацией. Почему? Потому что html изначально не предназначен для этого, он только определяет структуру странички. Умные челы придумали CSS (Cascade Style Sheet) - каскадная таблица стилей, которая позволяет управлять стилями и внешним видом паги. При этом твое творение будет одинаково выглядеть в любом браузере и с любой конфигурацией на тачке.
Определение стилей помещается между тэгами <style type="text/css"> и </style> в заголовке документа (между тэгами <head> и </head>) или непосредственно в любом тэге. Для удобства определение таблицы стилей иногда выносят в отдельный файл, тогда в заголовок нужно добавить ссылку на этот файл в виде <link rel=stylesheet type="text/css" href="style.css"> (в этом примере подключается файл таблицы стилей style.css). Все для чего? А для того, чтобы один раз прописать нужный тебе вид и дальше забыть об этом - все будет подставляться автоматически. Приведу несколько примеров определения таблицы стилей в заголовке и непосредственно в тэге:
<h1 style="color: blue">Получится синий заголовок (определение непосредственно в тэге)</h1>
А вот то же самое, но уже в "голове" страницы:
<style type="text/css">
h1 {color: blue}
</style>
Более сложный пример, определяющий всем заголовкам на странице синий шрифт, курсивное начертание и выравнивание по центру:
<style type="text/css">
h1, h2, h3, h4, h5, h6 {color: blue; font-style: italic; text-align: center}
</style>
Как видно из примеров, все достаточно просто. А теперь я перечислю свойства каскадных таблиц стилей, которые ты можешь использовать, чтобы определить различные параметры текста, фона, шрифтов, границ и полей.
Выравнивание текста
letter-spacing - определяет расстояние между символами (поддерживает только Internet Explorer);
text-decoration - позволяет создавать линии над, под и поверх текста и создавать мерцающий текст;
vertical-align - позволяет перемещать элемент вверх и вниз, выравнивания его относительно других элементов по вертикали;
text-align - определяет выравнивание текста по правому краю, по левому краю, по центру или по ширине;
text-transform - изменяет регистр символов (прописные или строчные);
text-indent - определяет отступ абзацев и других элементов;
line-heigth - определяет расстояние между строками текста.
Изменение цвета и рисунка фона
color - определяет цвет текста элемента;
background-color - определяет фоновый цвет элемента;
background-image - позволяет использовать рисунок в формате *.gif в качестве фонового изображения элемента;
background-repeat - определяет тип заполнения элемента рисунком фона: повторение по вертикали или горизонтали (поддерживает только Internet Explorer);
Назад на стр. 015-010-8 Содержание Вперед на стр. 015-010-10
|
