Справочник HTML

    Оглавление:
Раздел 1.   Введение: теги, HTML документ.
Раздел 2.   Выделение текста - физические и логические стили.
Раздел 3.   Форматирование текста.
Раздел 4.   Ссылки.
Раздел 5.   Рисунки.
Раздел 6.   Цвет фона и текста. Шрифты.
Раздел 7.   Таблицы.
Раздел 8.   Списки.
Раздел 9.   Последовательности, комментарии.
Раздел 10. Изображения-карты (image maps).
Раздел 11. Звук на сайте.
Раздел 12. Каскадные таблицы стилей.
Раздел 13. Фреймы.

Раздел 12

Тема: вкратце о CSS.

Что такое 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 (отступ снизу).

Рамки. Каждый элемент может заключен в рамку. Рамка может иметь следующие свойства:

  • border-width - ширина рамки. Значение числовое (в пикселах или точках) или одно из зарезервированных слов - thin (тонкая), medium (средняя), thick (толстая).;
  • border-color - цвет рамки. Числовое или текстовое значение цвета. Также может принимать значение transparent (прозрачная);
  • border-style - стиль рамки. Может иметь следующие значения:
    ЗначениеОписаниеВид рамки (в вашем браузере!)
    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= ".......">), то к данному тэгу будет применяться второй стиль.

 следующий раздел

Hosted by uCoz