/*http://css.narod.ru/index1.html*/ 

<!-- 1. В примере кода непосещённые ссылки - синие.  -->
/*
background: #FFFFCC ;-->
*/

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}


<!--2. Отступ первой строки <p> -->
p {
text-indent: 45px;
}

<!--3. Выравнивание текста [text-align]    50 это отступ первой строки в тексте-->

p {
text-align: justify;
text-indent: 50px  
}

<!-- 4. В примере кода непосещённые ссылки - индиго.  -->
a:link {
color: 663366;
}


<!--5. Псевдокласс :visited используется для ссылок на страницы, которые пользователь посетил. В примере кода посещённые ссылки - фиолетовые.

  -->
  
  
a:visited {
color: #660099;
}


<!--6. Псевдокласс :active используется для активных ссылок. 

В примере активные ссылки (которые нажаты и открыты) имеют сиреневый фон.

 -->
 
 a:active {
background-color: #EEAEEE;
}


<!--7. Псевдокласс :hover используется для ссылок, над которыми находится указатель мыши.

Это можно использовать для создания интересных эффектов. При включенном 8. не работает. Например, если мы хотим, чтобы ссылки становились темно-красной и курсивными при прохождении указателя над ними, то наш CSS должен выглядеть так:
-->
a:hover {
color: CC0000;
font-style: italic;
}
*/

 
 




<!-- Эффект при нахождении указателя над ссылкой. Изменится расстояние между буквами.  -->

a:hover {
letter-spacing: 1px;
font-weight:italic;
color: #660099;
}
*/

/*
<!--8.  Изменение с  нижнего на верхний регистр, фонт синий, жирный, фон 00FF00 - зеленый . Работает, но отключается 7.
font-size:18px; высота шрифта после наведения-->
*/
 a:hover {
text-transform: uppercase;
font-size:16px;
font-weight:bold;
font-color:blue;
background-color:00FF00;
}

 <!--9. Поля документа. 1 - верх, 2 - право, 3 - низ, 4 лево хорошо  отформатировало--> 

body {
margin: 10px 60px 20px 60px;
}
  /*   */
<!-- Заполнение заголовков. Определяя заполнение для заголовков, вы устанавливаете величину поля вокруг текста каждого заголовка:

--> 

 h4{
background: #CCCCFF;
padding: 1px;
}

h3{
background: #CCFF99;
padding-left: 20px 20px 20px 80px;
}

h5{
background: #FFFFCC;
padding: 1px;
}

/*http://css.narod.ru/index1.html*/ 
/* Это комментарий
 h5{
background: 90EE90;
padding-left:20px 20px 20px 80px;
}
*/  


/* Все абзацы будут по умолчанию отображаться шрифтом Arial (font-family: Arial) и размер шрифта будет 14 пикселей (font-size: 14px).  */ 
P {font-size: 14px; font-family: Arial}  

/* Это будет означать, что все элементы H1 (заголовки) в документе будут выравниваться по центру (text-align: center). Также можно указывать другие элементы HTML. 

*/ 
H1 {text-align: center} 
H2 {text-align: center} 
H3 {text-align: center} 
H4 {text-align: left} 
H5{text-align: left} 

/* В селекторах класса в качестве селектора указывается элемент или группа элементов, оформленных одним стилем. Нужно записать элемент HTML, который будет образовывать класс, поставить после него точку, после точки записать название класса (какое угодно). Например: 

H1.bluecolor {color: blue}  



Таким образом, если обозначить в заголовке H1 class=bluecolor, то он будет выглядеть также (голубого цвета), как заголовок "Селекторы класса" в этом документе. 

Если вы хотите сделать общий класс, который можно будет применять к любым HTML элементам, то просто не нужно записывать элемент HTML, а надо сразу поставить точку, после нее записать название класса, а после названия класса записать определение стилей. Например: */ 
/*Этот ниже класс делает текст в ВОРДЕ синим
.bluecolor {color: blue}  
H1, H2, H3, P {color: blue}  


У элемента, которому будет присвоен класс bluecolor, текст будет голубого цвета. Этот класс можно применить очень ко многим элементам: ссылке, абзацу, заголовку, форме и т.д. Очень важным является то, что к одному элементу можно применить сразу несколько классов. Для этого нужно записать их через пробел


H1.bluecolor {color: blue} 
H1.bluecolor {color: red}
H1.bluecolor {color: blue}

/* Группирование селекторов
Нет ничего проще. Если вы хотите, чтобы определенный стиль был применим сразу к нескольким элементам, то нужно просто записать эти элементы через запятую, а после них записать определение стиля. Например:
H1, H2, H3, P {color: blue}  
У всех заголовков H1, H2, H3 и абзацев (P) в документе текст будет голубого цвета. 
*/ 


/*Чтобы образовать внутренний лист стиля, нужно перед закрывающимся тегом заголовка документа (</head>) вставить контейнер <style></style> Он имеет вид: 

<style type="text/css">
<!-- здесь идет описание листа стилей -->
</style>  
Ну а дальше, все проще простого. Вы записываете набор селекторов и определения стилей к ним. Применяются все правила, которые описывались в предыдущих уроках. 
<style type="text/css">
H1 {color: blue}
P {font-weight: bold}
</style>  
Не тяжело догадаться, что если поместить этот пример (немного выше) в заголовочную часть кода вашего HTML документа, то все заголовки H1 будут голубого цвета, а во всех абзацах текст будет жирным.
*/ 


/*
<LINK rel="stylesheet" type="text/css" href="адрес_файла_с_листом_стилей">  
Возможно даже сразу подключать несколько внешних листов стилей к одному документу. Для этого нужно просто записать несколько элементов LINK по очереди. 
*/

/*
Прежде чем приступить к изучению свойств, давайте узнаем, какие значения они могут принимать. Значения свойств приведены в таблице ниже. 

Условное обозначение Наименование единицы 
измерения Пример 

Абсолютные единицы 
 
in  дюйм  width:               2in  
cm  сантиметр                  height: 1.5cm  
mm  миллиметр                  margin-left: 10mm  
pt  пункт (1pt = 1/72in)       font-size: 15pt  
pc  пик (1pc = 12pt)           line-height: 2pc  

Относительные единицы 
 
px  пиксел                     font-size: 10px  
em  ширина буквы m             letter-spacing: 0.3em  
ex  высота буквы x             font-size: 2ex  
%  процент                     width:    50%  
*/

/*  Нужно вставлять в 3-й
letter-spacing

Устанавливает межсимвольный интервал (расстояние между буквами). Может пригодиться. Расстояние можно указывать в абсолютных величинах. 

letter-spacing: 2px  


word-spacing

Можете сами догадаться. Это расстояние между словами. Указывается в абсолютных величинах (вполне логично). 

word-spacing: 6px  


text-indent

Задает отступ первой строки абзаца. По умолчанию равно нулю. Если задать отрицательное значение, то первая строка будет выступать. Не увидел как работает
text-indent: 1px  

*/



/*
text-align

Задает горизонтальное выравнивание. Может принимать значения: center (по центру), left (влево), right (вправо), justify (по ширине). По умолчанию текст выравнивается по левому краю. 

text-align: justify  
/*

vertical-align

Устанавливает расположение содержимого документа по вертикали. Может принимать значения: baseline (по базовой линии) -- по умолчанию, sub (по линии нижнего индекса), super (по линии верхнего индекса). 

vertical-align: super  


line-height

Межстрочный интервал. Значение можно задать в абсолютных единицах, в процентах, количеством строк (например, 3; 2.5) 

line-height: 0.3  
*/

/*полоса прокрутки*/
#s3 {
  SCROLLBAR-FACE-COLOR: 99FFFF; 
  SCROLLBAR-HIGHLIGHT-COLOR: #00ff00; 
  SCROLLBAR-SHADOW-COLOR: #00ff00; 
  SCROLLBAR-3DLIGHT-COLOR: 99FFFF; 
  SCROLLBAR-ARROW-COLOR: #000f00; 
  SCROLLBAR-TRACK-COLOR: #ffff00; 
  SCROLLBAR-DARKSHADOW-COLOR: #00ff00; 
  }