Что такое CSS и для чего это нужно? CSS - Cascading Style
Sheets, что означает дословно "каскадные таблицы стилей". Смысл -
описывается стиль всего документа или сайта в целом, либо отдельных его
элементов. Т.е. вы можете один раз определить, что, например, на всех страницах
вашего сайта все заголовки будут красного цвета, абзацы выровнены по центру, а
ссылки останутся неподчеркнутыми (то-то посетители помучаются, пока найдут
их!). И к тому же вы сможете изменить стиль вашей страницы или даже всего
сайта, подправив в тексте лишь пару строк!
Чтобы сразу
объяснить суть таблиц стилей, рассмотрим пример. Допустим, у вас есть такая
страница:
<HTML><HEAD><TITLE>Изучим таблицы стилей!</TITLE>
</HEAD><BODY><H1>Большой заголовок</H1><H2>Заголовок поменьше</H2><P>А это уже абзац - самый обычный абзац.</P></BODY></HTML>
А теперь
где-нибудь в заголовке страницы (т.е. в секции HEAD) разместим тэг
<STYLE>:
<STYLE TYPE="text/css"><!--H1 { font-size: 40px; background: red; text-align: right;font-family: helvetica, arial, sans-serif }H2 { font-size: 20px; font-style: italic; font-family: helvetica, arial, sans-serif }P { background: silver; text-align: center; font-family: courier, fixed,monospace }--></STYLE>
Можете
набрать этот пример в каком-либо текстовом редакторе и сохранить затем с
расширением htm или html (хорошая практика!), а можете сразу посмотреть этот
пример в
действии.
Теперь
разберем этот пример подробнее. Аттрибут TYPE="text/css" и информация
в комментарии (между "<!--" и "-->") как раз и
определяют стиль нашей страницы. Метки комментария здесь используются для
совместимости со старыми версиями браузеров - они просто проигнорируют
незнакомый тэг <STYLE> и содержимое комментария, и ваша страница будет
показана как самая обычная HTML-страница. Строка H1 указывает браузеру, что
всякий текст, находящийся между метками <H1> и </H1>, должен отображаться
шрифтом helvetica, arial или sans-serif высотой в 40 пикселов на красном фоне и
быть выровнен вправо. Строка H2 определяет, что шрифт в заголовках <H2>
должен быть наклонным и высотой в 20 пикселов из семейства helvetica. И,
наконец, строка P определяет поведение всех абзацев на странице: на сером фоне,
выровнены по центру, шрифт - courier, fixed или monospace.
Вот и все.
Как говорится, просто и со вкусом. Таким образом вы можете управлять
проактически всем, что появляется на вашей странице. Т.е. практически любому
тегу можно придать новые свойства. А теперь подробнее.
Font-family - шрифт,
используемый для отображения данного элемента. В идеале, конечно, было бы
неплохо, если бы у всех ваших посетителей были одинаковые наборы шрифтов. На
практике же такого не бывает. Поэтому указывайте список шрифтов. Браузер
просматривает этот список пока не встретит имеющийся в наличии шрифт. Например,
компьютер с ОС Windows как правило имеет шрифт Arial, в компьютерах Macintosh
наиболее похож на него шрифт Helvetica. В конце списка желательно иметь один из
следующих: serif, sans-serif, monospace, fantasy или cursive. Пример: "P { font-family: arial, helvetica, sans-serif }"
Font-size - размер шрифта. Может
указываться в точках (pt), пикселах (px).
Font-style:
italic
- курсив (наклонный шрифт).
Font-weight: bold - жирный шрифт. Значение
может быть также числовым, только различные браузеры реагируют на это
по-разному.
Text-transform - преобразование
текста: допустимые значения: uppercase (все буквы будут заглавные), lowercase
(все буквы будут строчные), capitalize (каждое слово будет начинаться с
заглавной буквы) и none (т.е. никаких действий).
Text-decoration - выделение текста,
допустимые значения: underline (подчеркнутый), line-through (перечеркнутый),
blink (мигающий) и none(ничего). Например, чтобы ссылки в тексте не выделялись
подчеркиванием, можно включить в заголовок документа следующий текст:
<STYLE TYPE="text/css"><!--a:link {text-decoration: none}a:visited {text-decoration: none}a:active {text-decoration: none}--></STYLE>
Color - изменение цвета
текста, линий, рамок. Скажем, в предыдущем примере мы сделали так, что ссылки
на странице не подчеркиваются. Чтобы они не выделялись еще и цветом, сделаем
одинаковым цвет ссылок и текста (для краткости здесь и далее метки STYLE
TYPE...будут опускаться):
body {color: black}a:link {color: black; text-decoration: none}a:visited {color: black; text-decoration: none}
Т.е.
цвет текста на странице - черный (1-я строчка), ссылки (обычно голубого цвета)
- неподчеркнутые черного цвета (2-я строчка), посещенные ссылки (обычно
фиолетовые) - также черного цвета и неподчеркнутые (3-я строчка).
Background-color - определяет цвет
фона для какого-либо элемента. Например:
strong
{background-color: yellow}
Текст
между метками <STRONG> и </STRONG> будет показан на желтом фоне.
Background-image - позволяет сделать
фон в виде рисунка. Пример:
blockquote {background-image:
url(../pictures/million.jpg)}
В
результате цитаты (т.е. текст между метками <BLOCKQUOTE> и
</BLOCKQUOTE>) будет размещен на фоне рисунка "million.jpg".
Примером служит данный абзац.
Text-align - выравнивание
текста. Применяется только в абзацах, заголовках и списках. А также для
выравнивания картинок на страничке (несмотря на слово "text").
Например:
IMG
{text-align: center}
Text-indent - позволяет делать отступ в первой строке
абзаца (красная строка - как мы привыкли видеть в книгах). Ширина отступа
измеряется в пикселах (px) или точках (pt). Может быть также величиной
отрицательной, тогда первая строка будет выступать влево от остального текста.
Пример (он же и применен к этому абзацу):
p
{text-indent: 10pt}
Margin - устанавливает
отступ текста. Пример использования:
body {margin-left: 10pt; margin-right:
15pt}
В
результате текст на странице будет отступать слева на 10 точек от края
страницы, справа - на 15 точек. Также возможны варианты: margin-top (отступ
сверху) и margin-bottom (отступ снизу).
Рамки. Каждый элемент может
заключен в рамку. Рамка может иметь следующие свойства:
|
Значение |
Описание |
Вид рамки (в вашем браузере!) |
|
dashed |
пунктирная - в виде черточек |
dashed |
|
dotted |
пунктирная - в виде точек |
dotted |
|
double |
двойная линия |
double |
|
inset |
с эффектом вдавленности |
inset |
|
outset |
с эффектом выпуклости |
outset |
|
ridge |
выпуклая рамка |
ridge |
|
groove |
врезанная рамка |
groove |
|
solid |
непрерывная линия |
solid |
Можно
определить каждую сторону рамки отдельно. Для ширины рамки это выглядит так:
border-top-width (ширина верхней стороны), border-right-width (правая сторона),
border-bottom-width (нижняя сторона) и border-left-width (левая сторона). Для
определения цвета и стиля достаточно просто перечислить свойства в таком
порядке: верх-право-низ-лево. Пример:
blockquote
{border-top-width: 3px; border-right-width: 5px; border-bottom-width: 3px;
border-left-width: 5px; border-color: red green navy green; border-style:
double double solid double }
Здесь определена рамка со следующими границами: верхняя - красная двойная в 3
пиксела шириной, правая и левая - зеленые двойные в 5 пикселов шириной, нижняя
- синяя сплошная шириной в 3 пиксела.
А что, если
захочется изменить стиль только одного абзаца? Или каждому абзацу определить
свой стиль? Можно! В таком случае надо использовать аттрибут STYLE с
необходимыми свойствами. Например:
<P STYLE="text-indent: 15pt;
color: red; background-color: white">
или
<H3 STYLE="background-color: silver; border-width: 3px; border-style:
groove;
border-color: #F0F0F0; text-align: center">
Теперь
представим такую ситуацию: у вас на странице 25 абзацев, из них 15 вы хотите
выдержать в каком-то определенном стиле. Чтобы не писать аттрибут STYLE каждый
раз, можно поступить следующим образом: определить в заголовке документа в тэге
STYLE необходимый стиль и дать ему название, например:
<style type="text/css"><!-- .krasota {text-indent: 20px; background-color: aqua; color: purple;}--></style>
Точку
перед названием надо ставить обязательно! В примере я назвал стиль
"krasota", вы же, естественно, можете обозвать его как угодно, хоть
"vasja" или "MySuperStyle". Теперь в тексте достаточно
указать название своего стиля (уже без точки), и он будет применен:
<P
CLASS="krasota">
И
напоследок. Можно определить стиль для всего сайта! Для этого создается
текстовый документ, где перечисляются все стили, используемые на страницах
сайта (заголовки и т.п. не требуются) и сохраняется с расширением .css
(например, "stili.css"). Потом достаточно с каждой страницы сайта,
где используются эти стили, сделать ссылку на этот файл. Ссылка размещается в
заголовке страницы (в секции HEAD) и имеет такой вид:
<LINK REL=stylesheet
HREF="stili.css" TYPE="text/css">
Теперь
достаточно сделать изменения в одном файле - в "stili.css" (или как
вы там его назовете) - чтобы изменился стиль всего сайта, пусть даже он состоит
из 200 или 300 страниц!
Если на
какой-то странице сайта определены свои стили, которые перекрывают стили,
описанные в .css файле, то на ней будут применены ее стили (т.е. определенные в
заголовке этой страницы). В свою очередь, если на странице в заголовке
определены какие-то стили, и существует стиль, указанный в тэге (например,
<P STYLE= ".......">), то к данному тэгу будет применяться
второй стиль.
[Предыдущий урок] [Следующий урок] [В начало]