|
||
|
aranea.ru || Занятия по "Каскадным стилевым таблицам" | Заключение
ЗаключениеЭти примеры, конечно, очень короткие, но, я надеюсь, они дадут начинающему основное представление о каскадных стилевых таблицах. Теперь вы можете прочитать спецификацию CSS2 и потренироваться с различными свойствами и их значениями. В заключении, мы придадим нашему документу более приличный вид. ПРИМЕР 18HTML-документ
<HTML>
<HEAD>
<TITLE>Документ</TITLE>
<LINK href="mystyle.css" rel="stylesheet" type="text/css">
<HEAD>
<BODY>
<DIV id='co_name1'>Название компании</DIV>
<DIV id='co_name2'>Название компании</DIV>
<!-- таблица для меню -->
<TABLE width="100%" class='menutable'>
<TR>
<TD class='mntd'>
<A href="#">О компании</A>
</TD>
<TD class='mntd'>
<A href="#">Продукция | услуги</A>
</TD>
<TD class='mntd'>
<A href="#">Контактная информация</A>
</TD>
</TR>
</TABLE>
<H1>Заголовок 1-о уровня</H1>
<H2>Заголовок 2-о уровня </H2>
<P>Практически все животные, даже очень ядовитые змеи, съедобны,
или, по крайней мере, безопасны для употребления в пищу человеком.
</P>
<P>Некоторые африканские антилопы со спиралевидными рогами (антилопа
канна) довольно близки к домашнему скоту и достигают очень больших
размеров. Так называемые пастбищные антилопы (24 вида) живут в
основном в Африке, и некоторые – в Аравии. В эту группу входят:
тростниковый козел, водяной козел, коровья антилопа, антилопа гну,
антилопа пала и другие.
</P>
Текст, не включенный в элементы, т.е. "анонимный" блок. <BR>
<H3>Заголовок 3-о уровня</H3>
<H4>Заголовок 4-о уровня </H4>
<P>Броненосец. Этих животных, покрытых тяжелой броней, используют в пищу
в Южной и Центральной Америках, а также изредка едят в Мексике и самых
южных районах США. В Техасе их в шутку называют «опоссум в раковине».
Консистенция и вкус мяса считаются достаточно хорошими. Хотя Чарльз
Дарвин сообщал, что его вкус напоминает утятину, всё же его часто
сравнивают с мясом опоссума, свиньи и морских свинок.
</P>
<P>Эскимосы также едят большое количество яиц различных гагарок, и одно
время даже запасали их на зиму. Желтки упаковывались, подобно
сосискам, в длинные трубки, сделанные из тюленьего кишечника. Затем
они вывешивались в тень для медленного высыхания.
</P>
<H5>Заголовок 5-о уровня</H5>
<H6>Заголовок 6-о уровня </H6>
<P> Летучие мыши. За исключением полярных районов, высоких гор и
некоторых отдаленных островов, летучие мыши различных видов живут
везде в очень большом количестве. Не смотря на уменьшение популяций в
настоящее время, одна четверть от подсчитанного числа млекопитающих –
это летучие мыши.
</P>
<TABLE width="50%">
<CAPTION>Заголовок второй таблицы</CAPTION>
<TR>
<TH>Номер</TH>
<TH>Продукция</TH>
<TH>Цена</TH>
</TR>
<TR>
<TD>1</TD>
<TD>Рыба</TD>
<TD>100</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Мясо</TD>
<TD>200</TD>
</TR>
<TR>
<TD>3</TD>
<TD>Напитки</TD>
<TD>50</TD>
</TR>
</TABLE>
<HR>
<!-- списки -->
<OL>
<LI>Пункт 1. Нумерованный список. </LI>
<LI>Пункт 2. Нумерованный список. </LI>
<LI>Пункт 3. Нумерованный список. </LI>
</OL>
<UL>
<LI>Пункт 1. Ненумерованный список. </LI>
<LI>Пункт 2. Ненумерованный список. </LI>
<LI>Пункт 3. Ненумерованный список. </LI>
<LI>Пункт 4. Ненумерованный список. </LI>
</UL>
<HR>
© 2007 Компания
</BODY>
</HTML>
Стилевая таблица
BODY {color:black;
font-family:arial;
font-size: 11pt;}
#co_name1 {position: relative;
font-size: 50px;
font-weight: bold;
color: navy;
z-index:2}
#co_name2 {position: relative;
font-size: 50px;
font-weight: bold;
color: silver;
top: -49;
left:9;
z-index: 1}
H1,H2,H3,H4,H5,H6 {color:blue;
font-family:verdana;
text-align:center;}
P {text-align:justify;
text-indent:2em;
margin: 10px;
border-style: dotted;
border-width: 1px;
border-color: blue;}
P:first-letter {font-size:1.2em;
font-weight:bold;}
TABLE.menutable {border-top-style: solid;
border-bottom-style: solid;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-color: green;
border-bottom-color:navy;}
TABLE {border-style:solid;
border-width: 1px;
border-color: black;}
CAPTION {color:brown;}
TH {background: navy;
color:white;}
TD {border-style:solid;
border-width: 1px;
border-color: black;}
TD.mntd {border-right-style: dotted;
border-right-width: 1px;
border-right-color: blue;
text-align: center;}
HR {color: blue}
A:link {color: navy;
text-decoration: underline;}
A:hover {color: white;
background:red;}
OL LI {font-style:italic;
font-weight: 600;
list-style-type: upper-roman;}
UL LI {font-style:normal;
color: blue;
list-style-type: square;
}
|
