- •Методические указания
- •Севастополь
- •1 Цель работы 4
- •2 Основные теоретические сведения 4
- •3 Порядок выполнения работы 9
- •1 Цель работы
- •2 Основные теоретические сведения
- •2.1 Таблицы стилей
- •2.3 Создание файлов таблиц стилей
- •2.4 Ссылка на файл таблицы стилей
- •2.5 Стили в документе html
- •2.6 Стили в операторах html
- •3 Порядок выполнения работы
2.5 Стили в документе html
Вы можете встроить таблицу стилей непосредственно в документ HTML, для чего нужно использовать оператор <STYLE>. Этот оператор применяется в паре с закрывающим оператором </STYLE>. Между операторами <STYLE> и </STYLE> находится таблица стилей.
В следующем листинге приведен пример документа HTML, в который встроена таблица стилей:
<HTML>
<HEAD>
<TITLE>Каскадные таблицы стилей (CSS)</TITLE>
<STYLE TYPE="text/css">
<!--
H1 { font-size: 30;
color: red;
margin-left: 25px }
H2 { font-size: 24;
color: blue;
font-style: italic;
font-family: Courier }
P.italic { font-style: italic }
P.green { color: green }
P.bold { font-weight: bold }
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>Заголовок первого уровня</H1>
<H2>Заголовок второго уровня</H2>
<p>Обычный текст
<P CLASS="italic">Текст с наклоном,
<P CLASS="green">Текст зеленого цвета,
<P CLASS="bold">Полужирный шрифт.
</BODY>
</HTML>
Внешний вид этого документа при просмотре в навигаторе Microsoft Internet Explorer аналогичен показанному на рис. 2.1 (текст изменен).
Обратите внимание на использование оператора комментария <!-- -->. Когда документ просматривается навигатором, не распознающим стилевое оформление, то такой навигатор проигнорирует как оператор <STYLE>, так и таблицу стилей. Если убрать оператор комментария, таблица стилей появится в окне навигатора.
2.6 Стили в операторах html
Указывая в операторах оформления текста параметр CLASS, вы можете непосредственно задавать параметры стилевого оформления. Соответствующий пример документа HTML приведен в следующем листинге:
<HTML>
<HEAD>
<TITLE>Встроенные стили</TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF”>
<H1 STYLE="font-size: 24; color: red; margin-left: 25px">Заголовок первого уровня</H1>
<P>Обычный текст
<H2 STYLE="font-size: 20; color: black; font-family: Courier">
Заголовок второго уровня</H2>
<P STYLE="font-style: italic">Наклонный текст
<P STYLE="color: red">Текст красного цвета
</BODY>
</HTML>
Здесь мы определяем те же самые параметры стилевого оформления, что и в двух предыдущих случаях. Однако эти параметры указываются не в файле таблицы стилей и не в таблице стилей, расположенной в заголовке документа, а непосредственно в месте их “употребления” - в операторах оформления текста.
3 Порядок выполнения работы
1. Изучить вопросы создания HTML документов с использованием каскадных таблиц стилей.
2. Создать копии документов, разработанных в предыдущей лабораторной работе, применив к ним каскадные таблицы стилей тремя вариантами.
3. Редактируя файл таблицы стилей, проверить изменения в отображаемых файлах.
ПРИЛОЖЕНИЕ А – Пример файла *.css
STYLE STRONG { COLOR: #ff0066 }
H1 { BACKGROUND-COLOR: #000099; COLOR: #ffffff; FONT: bold 130% "Arial Cyr"; TEXT-ALIGN: center}
H2 { COLOR: aqua; FONT: bold 125% "Arial Cyr" }
H3 { COLOR: #0088bb; FONT: bold 110% "Arial Cyr" }
A:link { COLOR: #0044ff; FONT-FAMILY: Arial; FONT-SIZE: 100%; FONT-WEIGHT: bold; TEXT-DECORATION: none }
A:visited { COLOR: #0088ee; FONT-FAMILY: Arial; FONT-SIZE: 100%; FONT-WEIGHT: bold; TEXT-DECORATION: none }
A:active { COLOR: aqua; FONT-FAMILY: Arial; FONT-SIZE: 100%; FONT-WEIGHT: bold; TEXT-DECORATION: none }
A:hover { COLOR: #000088; FONT-FAMILY: Arial; FONT-SIZE: 100%; FONT-WEIGHT: bold; TEXT-DECORATION: none }
P { BACKGROUND-COLOR: #f7ffff; TEXT-INDENT: 0.5in }
STRONG { COLOR: #ff0066 }
UL { BACKGROUND-COLOR: #f7ffff }
OL { BACKGROUND-COLOR: #f7ffff }
DL { BACKGROUND-COLOR: #f7ffff }
MENU { BACKGROUND-COLOR: #f7ffff }
DIR { BACKGROUND-COLOR: #f7ffff }
LI { COLOR: #000099; FONT-FAMILY: "Arial Cyr"; FONT-SIZE: 100%; FONT-WEIGHT: normal }
TABLE.color { COLOR: #000099; FONT-FAMILY: "Arial Cyr"; FONT-SIZE: 82%; FONT-WEIGHT: normal }
TABLE.symb TR { TEXT-ALIGN: center }
BODY { COLOR: #000099; FONT-FAMILY: "Arial Cyr"; FONT-SIZE: 100%; FONT-WEIGHT: normal }
FORM { BACKGROUND-COLOR: #f7ffff }
INPUT { BORDER-BOTTOM: #0088bb 1pt solid; BORDER-LEFT: #0088bb 1pt solid; BORDER-RIGHT: #0088bb 1pt solid; BORDER-TOP: #0088bb 1pt solid; COLOR: #0088bb; LETTER-SPACING: 0pt; MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; TEXT-INDENT: 0pt }
SELECT { BORDER-BOTTOM: #0088bb 0pt solid; BORDER-LEFT: #0088bb 0pt solid; BORDER-RIGHT: #0088bb 0pt solid; BORDER-TOP: #0088bb 0pt solid; FONT-FAMILY: Arial; FONT-SIZE: x-small; MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px }
OPTION { BORDER-BOTTOM: medium none; BORDER-LEFT: 0px; MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px }
TEXTAREA { BORDER-BOTTOM: #0088bb 1pt solid; BORDER-LEFT: #0088bb 1pt solid; BORDER-RIGHT: #0088bb 1pt solid; BORDER-TOP: #0088bb 1pt solid; COLOR: #0088bb; LETTER-SPACING: 0pt; MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; TEXT-INDENT: 0pt }
BUTTON { BACKGROUND-COLOR: #000099; BORDER-BOTTOM: #ffffff 1pt solid; BORDER-LEFT: #ffffff 1pt solid; BORDER-RIGHT: #ffffff 1pt solid; BORDER-TOP: #ffffff 1pt solid; COLOR: #ffffff; FONT-FAMILY: "Arial Cyr"; FONT-SIZE: 100% }