DHTML-конструирование
Урок 1. CSS в HTML-коде

Стиль для отдельного тега

CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющие задавать различные свойства HTML-тегам. Например, можно указать как должен выглядеть конкретный абзац P:

К этому абзацу применено стилевое определение.

Вот что написано для этого абзаца в HTML-кодах: 

<P style="font-size:1.5cm; color:green">
   К этому абзацу применено стилевое определение.

Стиль задается атрибутом style. Браузеру дано указание вывести абзац зелеными буквами размером в 1.5 сантиметра. Стилевые определения задаются при помощи указаний 

характеристика:величина;

Указания отделяются друг от друга символом “;”.

Атрибут style можно использовать практически в каждом теге, задавая его специфические свойства. Посмотрите еще один пример внедрения стилей в теги HTML-программы.

Стиль для отдельного HTML-файла

Можно задавать стиль для тега или группы тегов так, чтобы определение работало на протяжении всего HTML-документа. Например, можно указать вид всех заголовков. Для этого достаточно написать определение в головной части документа:

Браузер отображает заголовки в этом документе рубленым шрифтом цвета “maroon” и выравнивает их по правому краю экрана. Такое поведение браузера соответствует инструкции:

Стилевые определения (селекторы) располагаются внутри тегов <STYLE>...</STYLE> “запакованные” в HTML-комментарии (для браузеров, которые не поддерживают CSS).

Cтилевое определение имеет вид: 

Имя тега (или имена тегов через запятые)
{
 характеристика: величина;
 ...
 характеристика: величина;
}

В приведенном выше примере использованы три характеристики:

text-align:right;
задает выравнивание по левому краю
color:maroon;
задает цвет “maroon”
font-family:"Arial Cyr",Geneva,Helvetica,sans-serif;
задает рубленный шрифт

Заголовки будут выводиться шрифтом “Arial Cyr”, если, конечно, этот шрифт есть на компьютере пользователя. Если шрифта нет, браузер последовательно ищет шрифты “Geneva”, “Helvetica” или, в конце концов, какой-нибудь рубленый шрифт (указание “sans-serif”). В случае полной неудачи браузер выведет текст шрифтом по-умолчанию, то есть, как правило, шрифтом “Times New Roman”.

Стиль для нескольких HTML-файлов

Обычной практикой является указание стилей в отдельном файле. Для таких файлов используют расширение css. Например, можно в файле style.css записать: 

BODY { margin-left: 40px; }

H1,H2,H3,H4,H5,H6
{
 text-align:right;
 color:maroon;
 font-family:"Arial Cyr",Geneva,Helvetica,sans-serif;
}

Для подключения этих указаний в разделе <HEAD>...<HEAD> HTML-файла нужно поместить ссылку: 

<LINK rel=stylesheet type="text/css" href=style.css>

Понятно, что такой способ расположения стилевых определений очень удобен. На один и тот же стилевой файл могут ссылаться много HTML-документов. Изменения в этом единственном файле скажутся на внешнем виде десятка (а то и сотни) документов.

Обратите внимание на стилевое указание BODY {margin-left:40px;}. Оно задает отступ слева в 40 пикселов для всего документа в целом. В силу такого определения визуальные элементы страницы не будут “наползать” на вертикальную полосу слева страницы. Как видите, для задания страничного отступа можно обойтись без таблиц и “распорок” о которых говорилось в книге “HTML-конструирование-1”.

Комбинирование стилей

Было показано три способа внедрения стилевых указаний в HTML-коды:

А что если начать комбинировать эти способы? Какой из них окажется самым “сильным” для конкретного тега?

Проделайте серию опытов.

Документ без CSS-указаний
CSS-указания в отдельном теге
CSS-указания в HEAD
CSS-указания в css-файле

Файл prim.css: 

H1,H2,H3
{
 color:green;
}

Файл htm:

CSS-указания в css-файле

Файл prim.css: 

H1,H2,H3
{
 color:green;
}

Файл htm:

 

Задания

  1. После внимательного изучения исходных текстов приведенных выше примеров ответьте на следующие вопросы:

  2. Используя стили, постройте документ в котором:

За что мы любим CSS

Используя CSS можно:

Оцените возможности CSS, поработав со следующими приложениями:

DHTML-конструирование RU 2000/2001 © А.А.Дуванов

оглавление урок 2 письмо автору об авторах