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

  aranea.ru || Занятия по "Каскадным стилевым таблицам" | Шаблон каскадной стилевой таблицы и HTML-документ

Шаблон каскадной стилевой таблицы и HTML-документ

Единственный способ чему-то научиться – это сразу приступить к работе. Мы создадим HTML-документ, который будет содержать основные элементы разметки (BODY, P, A, TABLE, TH, TD, PRE, OL, UL, LI, DIV, SPAN, H1, H2, H3, H4, H5, H6 и т.д.). Если будет необходимо, мы изменим разметку нашего документа (добавим необходимые элементы).

Пример 6. HTML-документ
(mydocument.html)
<HTML>
  <HEAD>
    <TITLE>Документ</TITLE>
   <LINK href="mystyle.css" rel="stylesheet" type="text/css">
  <HEAD>

  <BODY>

    Название компании<BR>

<!-- таблица для меню -->

    <TABLE width="100%">
     <TR>
      <TD>
        <A href="#">О компании</A>
      </TD>
      <TD>
        <A href="#">Продукция | услуги</A>
      </TD>
      <TD>
        <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>

Укажем в файле mystyle.css все элементы нашего документа, содержание которых может визуализироваться в обозревателе:

BODY {   }

H1 {   }
H2 {   }
H3 {   }
H4 {   }
H5 {   }
H6 {   }

P {   }

TABLE {   }
CAPTION {   }
TH {   }
TD {   }

HR {   }

A {   }

LI {   }

Впишем первые правила в фигурные скобки каждого элемента (элементы в файле mystyle.css являются селекторами). Каждое правило состоит из свойства и его значения. Как писать правила смотрите в разделе 4.1. Синтаксис. Изменим цвет текста (свойство - color) и цвет фона (свойство - background).

Посмотрите разделы 14.1. Цвет фона: свойство 'color'. и 14.2. Фон. .

Пример 7
BODY {color: navy;
      background: silver;}

H1 {color: #8B0000;}
H2 {color: #DC143C;}
H3 {color: #FF69B4;}
H4 {color: #CD5C5C;}
H5 {color: #C71585;}
H6 {color: #FF4500;}

P {color: black;
   background: white;}

TABLE {color: #4B0082;
       background: #F0E68C;}
CAPTION {color: #1E90FF;}
TH {color: #008080;}
TD {color: #8B4513;}

HR {color: #FFA500;}

A {color: green;}

LI {color: #DAA520;}

← Назад | Вперед →
Copyright ©  aranea.ru