Тема: Каскадные таблицы стилей CSS. Использование свойств шрифта и цветовой гаммы.

Цель: Научить применять свойства шрифта и использовать цветовую гамму.

 

Краткие теоретические сведения

Применение CSS

Каскадные таблицы стилей или CSS (Cascading Style Sheets) были революцией, потрясшей WWW. Если до этого Web-дизайнер не знал, как будет выглядеть его творение в разных программах Web-обозревателей, то теперь он может контролировать все: от начертания шрифта до положения картинки на странице.

Предположим, вам нужно изменить цвет текста в HTML-документе с черного на синий. Вы помещаете его в пару тегов <FONT> и </FONT> следующего вида:

<P><FONT color="blue">Это синий текст</FONT></P>

А теперь представим, что вы внесли определение внешнего вида текста в другое место документа:

P.bluetext { color: blue }

Эта строка обозначает, что мы определили для текста, находящегося внутри тега <P> и помеченного стилевым классом bluetext, синий цвет шрифта. Такая конструкция HTML называется определением стиля или просто стилем.

В результате в HTML-тексте у нас останутся только теги логического форматирования текста:

<P class="bluetext">Это синий текст</P>

Здесь мы пометили нужный текст с помощью атрибута class, присвоив ему значение bluetext. Атрибут class задает имя стилевого класса для тега, и его поддерживают все теги.

Вы можете переназначить цвета текста для всех тегов <P>. В этом случае мы не задаем имя стилевого класса:

P { color: blue }

Или вы можете задать форматирование для стилевого класса, не привязанного ни к какому тегу:

.bluetext{ color: blue }

И теперь вы можете присваивать стилевой класс тексту, заключенному в любые теги:

<H1 class="bluetext">Это синий цвет</H1>

<CENTER class="bluetext">Это синий цвет</CENTER>

Это <B class="bluetext">жирный синий</B> текст

Вы можете дать специальное форматирование тегу только в том случае, если он заключен внутрь другого тега:

H7 B { color: blue }

И теперь:

<H7><B>Этот</B> текст будет синим</H7>

<P>А <B>этот</B> - не будет!</P>

Более того, вы можете встроить определение стиля прямо в тег: <P style="color: blue">Это синий текст</P>

Это достигается при помощи атрибута style, который также поддерживают все теги HTML.

И еще один способ привязать стиль к какому-либо тегу - использовать атрибут id, задающий уникальное имя элемента HTML. #headerofdocument { font-size: 20pt }

Здесь мы задали размер шрифта 20 пунктов.

<H1 id="headerofdocument">Это заголовок документа</H1>

Вы можете задавать несколько атрибутов в определении стиля. В этом случае они разделяются точкой с запятой:

P { color: blue; font-size: 9ptl; text-align: center }

Определение стилей, вынесенные в заголовок HTML-документа, составляют таблицу стилей. Таблица стилей заключается в теги <STYLE> и </STYLE>:

<Style [type="text/css"]>

...

</STYLE>

Тег <STYLE> может содержать необязательный атрибут type, содержащий обязательное значение text/css.

Таблицу стилей можно вынести в отдельный файл и использовать сразу в нескольких документах. В этом случае в заголовке HTML-документа необходимо разместить тег <LINK>, указывающий на эту таблицу стилей:

<LINK rel="stylesheet" href="{Адрес файла таблицы стилей}">

Свойства шрифта

font - задает параметры шрифта элемента страницы.

Заменяет атрибуты font-family, font-height, font-size, font-style, font-variant и font-weight. Значения этих атрибутов могут располагаться в любом порядке.

font: { font-family } [{ font-height }] [{ font-size }] [{ font-style }] [{ font-variant }] [{ font-weight }];

Значение по умолчанию - normal normal normal medium normal "Times New Roman".

Альтернативный формат:

font: caption|icon|menu|message-box|small-caption|status-bar;

В этом случае доступны шесть предопределенных значений, задающие один из стандартных шрифтов, используемых в элементах интерфейса Windows:

font: caption; - шрифт заголовка кнопок, текстовых меток и т.п.;

font: icon; - шрифт подписей под пиктограммами;

font: menu; - шрифт пунктов меню;

font: message-box; - шрифт содержимого стандартных окон-предупреждений;

font: small-caption; - мелкий шрифт заголовков;

font: status-bar; - шрифт содержимого строки состояния.

Поддерживается IE начиная с 4.0

font-family - указывает имя или семейство шрифта.

font-family: {Имя шрифта}|serif|san-serif|fantasy|monospace;

В качестве значения этого атрибута задается либо непосредственно имя нужного шрифта, либо одно из пяти предопределенных значений, задающих имя шрифтового семейства. Можно задавать одновременно несколько шрифтов, разделив их имена запятыми; в этом случае Web-обозреватель сможет выбрать из них тот, который установлен на компьютере клиента. Если имя шрифта содержит пробелы, его следует взять в кавычки.

font-family: "Times New Roman",sans-serif;

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

font-weight - задает "жирность" шрифта, используемого в элементе страницы.

font-weight: normal|bold|bolder|lighter|100..900;

"Жирность" может быть задана тремя способами. Во-первых, предопределенными значениями normal и bold, задающими обычное и жирное начертание соответственно. Во-вторых, относительными значениями bolder и lighter, делающими шрифт элемента страницы жирнее и светлее шрифта родителя. И, в-третьих, одним из девяти значений от 100 до 900; здесь нормальному начертанию соответствует значение 400, а жирному - 700.

font-weight: normal; - обычный;

font-weight: lighter; - светлее;

font-weight: bold; - жирный;

font-weight: bolder; - жирнее;

font-weight: от 100 до 900 - любое значение, кратное 100

Значение по умолчанию normal.

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых. При этом IE 4.0 и более старые версии распознавали только значения normal и bold этого атрибута.

Поддерживается NN начиная с 4.0

font-size - задает размер шрифта.

font-size: xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|{Абсолютный размер}|{Относительный размер}%;

Возможно задание либо абсолютного размера шрифта в одной из поддерживаемых CSS единиц измерения, либо как процент от размера шрифта родителя. Также доступны девять определенных значений.

font-size: 200% - относительная величина (проценты)

font-size: 150px - размер в пикселях

font-size: 300pt - размер в пунктах

font-size: {xx-small,small,medium,large,x-large,xx-large} - задают один из семи размеров шрифтов, поддерживаемых HTML

font-size: {smaller,larger} - задают размер шрифта, который на размер либо больше, либо меньше родительского шрифта соответственно

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

font-style - задает начертание шрифта.

font-style: normal|italic|oblique;

font-style: normal; - задает обычный вид шрифта (используется по умолчанию);

font-style: italic - курсивное начертание;

font-style: obligue - наклонное начертание (легкий наклон нормального шрифта) (IE отображает как курсив, а NN не поддерживает).

Поддерживается IE начиная с 3.02 для текстовых элементов и начиная с 4.0 для нетекстовых.

Поддерживается NN начиная с 4.0

font-variant - задает вид малых букв шрифта, используемого в элементе страницы.

font-variant: normal|small-caps;

font-variant: normal; - задает обычный вид малых букв шрифта (используется по умолчанию);

font-variant: small-caps; - делает их такими же, как большие буквы, только меньшего размера (капитель).

Поддерживается IE начиная с 4.0

 

Цветовая гамма

color - Определяет цвет элемента.

color: {Цвет};

Поддерживается IE начиная с 3.02 для текстовых элементов страницы и начиная с 4.0 для нетекстовых. Поддерживается NN начиная с 4.0

background - задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-position и background-repeat.

background: [{ background-color }] [{ background-image }] [{ background-repeat }] [{ background-attachment }] [{background-position}];

Значения этих свойств могут располагаться в любом порядке.

Значение по умолчанию transparent none repeat scroll 0% 0%.

Поддерживается IE начиная с 3.02; задание значений background-position и background-repeat поддерживается начиная с 4.0

background-color - задает фоновый цвет Web-страницы или ее элемента.

background-color: {Цвет}|transparent;

Предопределенное значение transparent задает "прозрачный" фон. Оно же является значением по умолчанию.

Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02

Поддерживается NN начиная с 4.0

background-image - задает фоновый рисунок Web-страницы или ее элемента.

background-image: url({Интернет-адрес файла рисунка})|none;

Предопределенное значение none отключает фоновый рисунок. Оно же является значением по умолчанию.

Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02

Поддерживается NN начиная с 4.0

background-attachment - данный атрибут позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым Web-страницы.

background-attachment: scroll|fixed;

background-attachment: scroll; - фоновое изображение прокручивается вместе с содержимым страницы (значение по умолчанию);

background-attachment: fixed; - фоновое изображение фиксируется на одном месте и не прокручивается с содержимым страницы.

Применяется только для тега <BODY>.

Поддерживается IE начиная с 4.0, в составе атрибута background - с 3.02

background-repeat - устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе.

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

background-repeat: repeat|no-repeat|repeat-x|repeat-y;

background-repeat: repeat; - размножает фоновое изображение во всех направлениях (значение по умолчанию);

background-repeat: no-repeat; - запрещает фоновому изображению повторяться;

background-repeat: repeat-x; - размножает фоновое изображение только по горизонтали;

background-repeat: repeat-y; - размножает фоновое изображение только по вертикали.

Поддерживается IE начиная с 4.0

background-position - задает местонахождение фонового рисунка. Это комбинированный атрибут, заменяющий атрибуты background-position-x и background-position-y.

background-position: [{ background-position-x }] [{ background-position-y }];

Если задана только одна координата, то она считается горизонтальной, а для вертикальной принимается значение 50%.

Значение по умолчанию 0% 0%.

Поддерживается IE начиная с 4.0

background-position-x - задает горизонтальную координату фонового рисунка.

background-position-x: {X}|{X}%|left|center|right;

Координата может быть задана целым числом (абсолютная координата), процентом от соответствующего размера фонового рисунка (относительная координата) или предопределенным значением. Доступны три предопределенных значения: left, center, right, которые задают выравнивание фонового рисунка на странице по левому краю, по центру и по правому краю соответственно.

Значение по умолчанию 0%.

Поддерживается IE начиная с 4.0

background-position-y - задает вертикальную координату фонового рисунка.

background-position-y: {Y}|{Y}%|top|center|bottom;

Координата может быть задана целым числом (абсолютная координата), процентом от соответствующего размера фонового рисунка (относительная координата) или предопределенным значением. Доступны три предопределенных значения: top, center, bottom, которые задают выравнивание фонового рисунка на странице по верху, по центру и по низу страницы соответственно.

Значение по умолчанию 0%.

Поддерживается IE начиная с 4.0

scrollbar-3dlight-color - задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок.

scrollbar-3dlight-color: { Цвет };

Поддерживается IE начиная с 5.5

scrollbar-arrow-color - задает цвет стрелок на кнопках полосы прокрутки.

scrollbar-arrow-color: { Цвет };

Поддерживается IE начиная с 5.5

scrollbar-base-color - задает цвет бегунка и кнопок-стрелок полосы прокрутки.

scrollbar-base-color: { Цвет };

Поддерживается IE начиная с 5.5

scrollbar-darkshadow-color - задает цвет "тени", отбрасываемой бегунком и кнопками прокрутки полосы прокрутки (цвет правых и нижних гранией).

scrollbar-darkshadow-color: { Цвет };

Поддерживается IE начиная с 5.5

scrollbar-face-color - задает цвет бегунка и кнопок прокрутки полосы прокрутки.

scrollbar-face-color: { Цвет };

Поддерживается IE начиная с 5.5

scrollbar-highlight-color - задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней).

scrollbar-highlight-color: { Цвет };

Поддерживается IE начиная с 5.5

scrollbar-shadow-color - задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом "тени", задаваемым атрибутом scroll-darkshadow-color.

scrollbar-shadow-color: { Цвет };

Поддерживается IE начиная с 5.5

scrollbar-track-color - задает цвет рабочей части полосы прокрутки, т.е. той ее части, по которой перемещается бегунок.

scrollbar-track-color: { Цвет };

Практическое задание.

1.Создать HTML-страницу с использованием CSS.

2.Определить для тега <P> синий цвет шрифта, семейство шрифта, размер шрифта (на своё усмотрение).

3.Определить универсальный стиль, в котором переопределить цвет текста, размер шрифта, семейство шрифта (на своё усмотрение).

4.Переопределите тег <body>: цвет фона, размер шрифта, цвет шрифта, семейство шрифта (на своё усмотрение).

Контрольные вопросы.

1.Для чего были разработаны каскадные таблицы стилей?

2.Свойства шрифта и его атрибуты.

3.Цветовая гамма и его атрибуты.

Подготовка отчета по практическому заданию.

Отчет должен состоять из следующих пунктов:

1. Краткие теоретические сведения.

2. Индивидуальное практическое задание, метод его выполнения, текст кода программы и полученные результаты.

3. Краткое заключение.

Пример выполнения 5-го практического задания: Каскадные таблицы стилей CSS. Использование свойств шрифта и цветовой гаммы.

HTML код:

Index.htm

<HTML>

<HEAD>

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

<TITLE>Практическое задание №5.CSS. Использование свойств шрифта и цветовой гаммы.</title></head>

<BODY>

<TABLE BORDER="1" WIDTH="95%" HEIGHT="80%" ALIGN="CENTER" VALIGN="CENTER">

<CAPTION><H1>Практическое задание №5</h1></caption>

<TR>

<TD colspan="2">

Переопределённый тег &ltBODY&gt:<BR>

BODY {COLOR: black; background-color: c5c5c5; font-family: sans-serif; font-size: 200%;}

</td>

</tr>

<TR>

<TD WIDTH="50%">

После переопределения тега &ltP&gt в P {COLOR: blue; font-family: Courier; font-size: 20px;} текст выглядит следующим образом:

<P>Переопределённый текст</p>

</td>

<TD WIDTH="50%">

А это универсальный стиль.universal {COLOR: purple; font-size: 30px; font-family: Comic;}

<H1 class="universal">Вот так выглядит текст переопределённый универсальным стилем</h1>

</td>

</tr>

</table><BR>

</body></html>

Main.css

 

P {COLOR: blue; font-family: Courier; font-size: 20px;}

.universal {COLOR: purple; font-size: 30px; font-family: Comic;}

BODY {COLOR: black; background-color: c5c5c5; font-family: sans-serif; font-size: 200%;}

 

Рис. 5. Результат выполнения 5-го практического задания.