ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  aranea.ru || Занятия по "Каскадным стилевым таблицам" | Заключение

Заключение

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

В заключении, мы придадим нашему документу более приличный вид.

ПРИМЕР 18

HTML-документ

<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;
       }

← Назад |
Copyright ©  aranea.ru