Чертёж девятый CSS или каскадные таблицы стилей, половина первая

Работа, которой мы займёмся сегодня, значительно отличается от всего, что мы делали до сих пор. Можешь считать, что мы переходим на иной уровень, где нам доступно то, чего раньше мы не могли сделать. Например, красная строка. Попробуй-ка создать её средствами HTML – вставить несколько пробелов подряд в начале строки не получится, браузер все пробелы объединит в один. Единственный способ – использовать символ, называемый неразрывным пробелом и обозначаемый & nbsp;. Красиво? Удобно?

Использование CSS (Cascading Style Sheet) позволяет просто и быстро решить эту и другие проблемы с оформлением странички, создать свой стиль.

Другая проблема, с которой легко справляются CSS – расположение объектов в окне браузера. Мы не можем, используя стандартные средства HTML, накладывать текст или рисунки друг на друга. А с помощью CSS можно сделать страничку многослойной…

Короче говоря, CSS сейчас стремительно входят в моду, от которой мы отставать не желаем, поэтому запасаемся терпением и вперёд!

1. В файле glav.htm в раздел < HEAD> допиши выделенные строки:

< HEAD>

< TITLE> Моя домашняя страничка< /TITLE>

< STYLE type=text/css>

H2{ text-align: center;

color: #ff0088;

font-style: italic;

font-family: arial, sans-serif;

letter-spacing: 0.3em;

}

P{ text-indent: 3em;

text-align: justify;

font-size: 110%;

}

< /STYLE>

< /HEAD>

Тег < STYLE> < /STYLE> содержит описание стилей, его атрибут type указывает, что мы имеем дело с CSS.

Строчка вида H2{ что-то там записано } задаёт описание стиля заголовков H2. В фигурных скобках задаются значения параметров. Это очень похоже на атрибуты тегов, только вместо знака «=» используется «:» и разделителем служит не пробел, а «;».

Как же мы оформили заголовок H2?

text-align: center; – выравнивание абзаца по центру (а ещё могут быть значения left, right, justify);

color: #ff0088; – цвет шрифта. В CSS цвет можно задавать и десятичными числами rgb(255, 0, 136), и даже в процентах rgb(100%, 0%, 53%);

font-style: italic; – курсивное начертание (значение normal отменяет курсив);

font-family: arial, sans-serif; – гарнитура шрифта – довольно опасный параметр, ведь на компьютере посетителя может не оказаться такого шрифта, и тогда он увидит какую-нибудь абракадабру. Поэтому в этом параметре обычно выводят список из нескольких шрифтов через запятую. Браузер, не найдя первого, будет искать второй, третий… Вместо или вместе с гарнитурой можно указать тип шрифта: serif – с засечками, sans-serif – без засечек, monospace – моноширинный, cursive – рукописный, fantasy – фантазийный;

letter-spacing: 0.3em; – разрядка шрифта, которую можно задавать в миллиметрах (mm), сантиметрах (cm), дюймах (in), пикселах (px), но самая удобная единица em – ширина буквы m данного шрифта.

Для оформления тега < P> мы тоже задаём несколько параметров:

text-indent: 3em; – это и есть красная строка величиной в 3 буквы m;

font-size: 110%; – размер шрифта (можно задавать в mm, cm, in, px, pt, а можно и словесно: medium – базовый, large – крупнее базового, x-large – ещё крупнее, xx-large – совсем крупный, small – мельче базового, x-small – ещё мельче, xx-small – самый мелкий).

2. Мы задали стиль оформления текста в тегах < H2> и < P>, поэтому теперь за ненадобностью уберём теги и атрибуты, которыми мы оформляли заголовок:

< H2 align=center > < font color=#ff0088> Здравствуйте! Меня зовут Вася! < /font> < /H2>

< P> < font size=+1> Я учусь в 9 классе одиннадцатой школы