Построй свой домик в Интернете!

Спецвыпуск 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

загрузка...
Cпец Хакер #075Cпец Хакер #074Cпец Хакер #073Cпец Хакер #072Cпец Хакер #071Cпец Хакер #070Cпец Хакер #069Cпец Хакер #068Cпец Хакер #067Cпец Хакер #066Cпец Хакер #065Cпец Хакер #064Cпец Хакер #063Cпец Хакер #062Cпец Хакер #061Cпец Хакер #060Cпец Хакер #059Cпец Хакер #058Cпец Хакер #057Cпец Хакер #056Cпец Хакер #055Cпец Хакер #054Cпец Хакер #053Cпец Хакер #052Cпец Хакер #051Cпец Хакер #050Cпец Хакер #049Cпец Хакер #048Cпец Хакер #047Cпец Хакер #046Cпец Хакер #045Cпец Хакер #044Cпец Хакер #043Cпец Хакер #042Cпец Хакер #041Cпец Хакер #040Cпец Хакер #039Cпец Хакер #038Cпец Хакер #037Cпец Хакер #036Cпец Хакер #035Cпец Хакер #034Cпец Хакер #033Cпец Хакер #032Cпец Хакер #031Cпец Хакер #030Cпец Хакер #029Cпец Хакер #028Cпец Хакер #027Cпец Хакер #026Cпец Хакер #025Cпец Хакер #024Cпец Хакер #023Cпец Хакер #022Cпец Хакер #021Cпец Хакер #020Cпец Хакер #019Cпец Хакер #018Cпец Хакер #017Cпец Хакер #016Cпец Хакер #015Cпец Хакер #014Cпец Хакер #013Cпец Хакер #012Cпец Хакер #011Cпец Хакер #010Cпец Хакер #009Cпец Хакер #008Cпец Хакер #007Cпец Хакер #006Cпец Хакер #005Cпец Хакер #004Cпец Хакер #003Cпец Хакер #002Cпец Хакер #001