Каскадные стилевые страницы - Cascading Style Sheets

Таблицы стилей являются вспомогательным средством для описания отображения веб-страницы на экране. 
Также CSS может задавать внешний вид странице при выведении ее на принтер или другое устройство периферии. 
Аналогично расширению стандарта разметки ( XML ), в  CSS введено дополнительное расширение 
XSL ( Extensible Style Language ), которое добавило новые возможности.
С помощью специализированного приложения CSS возможно изменение стиля оформления для всей web-страницы 
целиком или только для ее определенных частей.
11.Способ применения CSS и стандарты
Приложение записывается в заголовке web-страницы или содержится в отдельном файле формата  .css

<link href="tabliza.css" rel="stylesheet" type="text/css">

Встроенный между <head> и </head> этот тэг применит к странице правила стилевого оформления, 
заключающиеся в тексте файла  tabliza.css

Либо можно вписать правила в саму страницу между тэгами :

<style type="text/css">  </style>

Рекомендуется все стилевые правила между тэгами <style> </style>  оформлять в виде комментариев 
языка HTML. Делается это для того, чтобы браузер и не пытался бы их выполнить при невозможности,  
во избежание ошибок.

<style type="text/css"><!--

//--> </style>

Правило оформления выглядит конструкцией :
селектор { свойство : значение }
Или иначе: 
наименование элемента страницы { правило его оформления }

Правило оформления каким-либо из своих возможных свойств и значений задает способ, каким элемент 
( объект или объекты ) будет отображен.

Если в качестве селектора ( наименования элемента ) использовать имя тэга, то стиль оформления будет 
использоваться для всех объектов, созданных такими тэгами.

Вот конструкция, располагающаяся между <head> и </head> , которая своим правилом задает всем 
текстовым заголовкам h3 ( находящимся на странице между <h3> и </h3> ) фоном зеленый цвет.

<style type="text/css"><!--
h3{background-color:#00FF00}
//--></style>

И она же в HTML тексте страницы как показательный пример:

<html><head>
<style type="text/css"><!--
 	h3{background-color:#00FF00}
//--></style></head>
<body text="#000000">
<h3>Таким заголовкам задано стилевое правило</h3>
<h2>Очень хороший, а главное большой заголовок!</h2>
</body></html>
11.1.Единицы измерения CSS
Основные стандартные единицы измерения  CSS - Абсолютные :
 px ( пиксел ), % ( проценты ), mm ( миллиметры ), cm ( сантиметры ), in ( дюймы );  pc ( пики )
А также   pt ( пункты ) - для шрифтов.
Относительные:  ширина  и высота строчных букв m и  x   -    em  и  ex .
11.2.Универсальный Идентификатор ресурса URI
В   CSS для задания адреса объекта используется не URL , а его более полное значение 
URI ( Uniform Resourse Identifier - универсальный идентификатор ресурса ). URL же является одним 
из подклассов URI , наряду с URN ( Universal Resourse Name - универсальное имя ресурса )
Запись адреса ресурса в виде URI  имеет вид:
url("значение URL")

Комментарии в CSS заключаются между символами  /*  и  */
/*     Вот вам комментарий CSS    */ 


Если одному элементу задано несколько правил оформления - то они  отделяются друг от друга с помощью 
точки с запятой ;
Если свойству правила оформления элемента присваивается  значение inherit , то значит , что отображен 
он будет так , как отображался бы по умолчанию. 
Основные правила
Ниже приведены самые общеиспользуемые свойства и в скобках значения, которые они могут принимать.
12.Стили отображения текста 
Свойство: 
text-transform: ( Значения  capitalize, uppercase, lowercase, none, inherit ) - может отобразить 
первые буквы слов как заглавные, либо все буквы слов как заглавные или строчные.
А вот вам и пример страницы, использующей это свойство :

<html><head>
<title>У меня нет слов!</title>
<style type="text/css"><!--
h1{text-transform:uppercase}
//--></style></head>
<body bgcolor="#371CA0" text="#FEFE02">
<h1>Что-бы тут такое написать?...</h1>
</body></html>

Не смотря на то, что в тексте программы фраза написана не заглавными буквами - в веб-странице 
она будет выглядеть написанной БОЛЬШИМИ буквами!

text-align: ( left, center, right, justify, inherit ) - установит правила выравнивания или растяжения 
текста по горизонтали. ( подобно атрибуту HTML  align=" " )
text-decoration: ( underline, overline, line-through, none, inherit ) - установит или уберет 
декоративные эффекты текстового отображения. Подчеркивание, зачеркивание, надчеркивание. 
Для того, чтобы гиперссылки не подчеркивались можно использовать правило:
a{text-decoration:none}

text-indent: ( величина в % или px, inherit ) - задаст отступ для первого слова обзаца.
letter-spacing: ( величина в единицах, normal, inherit ) - задаст промежуток между буквами.
13.Управление фоном в CSS
background-color: ( значение цвета, inherit ) -  устанавливает фоновый цвет
background-image: ( URI либо none, inherit ) - устанавливает фоновое изображение
background-repeat: ( repeat, repeat-x, repeat-y, no-repeat, inherit ) - управляет повторяемостью 
фонового изображения, если площадь фона - больше чем площадь рисунка.(  Будет повторятся, повторяться 
по горизонтали, повторятся по вертикали, или не будет повторятся )
background-attachment: ( scroll, fixed, inherit ) - управляет приложением фонового изображения к 
полосе прокрутки. Фон может прокручиваться вместе с содержимым или всегда фиксированно находиться в окне.
background-position: ( 2 координаты в % , px ... через пробел; либо литеральное значение  
 top,  center,  bottom  - укажет позицию по вертикали, а  left,  center, right  - по горизонтали; 
 inherit ) - устанавливает позицию фонового рисунка в окне просмотра.
table {background-position: 10% 25%}
В объединенном правиле  background:  можно отделяя пробелами перечислить все эти значения.
body {background: url("myphoto.jpg") center 25% no-repeat fixed}

<html><title>Управление фоном</title>
<head><style type="text/css"><!--
body{background-repeat:no-repeat; background-attachment:fixed;
background-position:center} 
//--></style></head>
<body background="myphoto.jpg">
</body>
</html> 

14.Параметры обрамляющих границ
border-width: (значение толщины границы - числовое, либо thin,medium,thick ) - задаст толщину 
всех обрамляющих границ.
border-color: (значение цвета, transparent, inherit ) - задаст цвет обрамляющим границам.
border-style: ( none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit ) - 
задаст стиль внешнего вида обрамляющих границ.

В едином свойстве  border:   можно через пробелы задать значения толщины, стиля и цвета обрамляющим 
границам объекта.
img{border:5 groove  #C0FADE }
Значения конкретно верхней, нижней, левой, правой границ задаются с добавлением параметр-слов  -top,  
-bottom,  -left   , -right  соответственно.
img{border-right-width:2; border-left:7 solid}
15.Полосы прокрутки
<style type="text/css"><!--
body{
scrollbar-face-color:white;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#00A1EF;
scrollbar-shadow-color:#000080;
scrollbar-highlight-color:#BFBF00}
   	//--> </style>

Данная конструкция задает цветовую гамму полосе прокрутки страницы.
Если этот пример у вас не работает - значит ваш браузер не обладает возможностью изменять полосы 
прокрутки. Некоторые другие возможности также могут не распознаваться всеми браузерами. 

scrollbar-shadow-color:          -      цвет тени;  
scrollbar-highlight-color:       -      цвет подсветки;
scrollbar-arrow-color:            -      цвет стрелок;
scrollbar-track-color:             -       цвет фона полосы прокрутки; 
scrollbar-face-color:               -       ползунка-бегунка полосы прокрутки; 
 
Разумеется, можно задавать цвет только каким-либо конкретным элементам полосы прокрутки, а не всем сразу.
16.Управление шрифтами FONT
font-style: ( normal, italic, oblique, inherit ) - задаст стиль отображения шрифта.
( подобно тэгам   <i> </i>  )
font-weight: ( lighter, bolder или light, normal, bold, inherit, толщина шрифта числом кратным 100 - 500,
 600, 700, 900 ) - задаст толщину символов.
( подобно тэгам  <b> </b>  )
font-variant: ( small-caps, none, inherit ) - преобразует все строчные в заглавные значением small-caps.

font-size: (  xxx-small, x-small, small, medium, large, x-large, xx-large,  либо larger, smaller, 
inherit  либо размер в  pt ) - задаст размер шрифту. Значение в пунктах ( pt ) задает абсолютный размер 
шрифта - всегда одинаковый по количеству пикселей не смотря на установки системы на увеличение размера 
шрифта.

<html>
<head><style type="text/css"><!--
p{font-size: 22pt }
//--></style></head>
<body>
<p>Я очень люблю веб-серфинг!</p>
</body></html>
                      
Будет отображать шрифт текста постоянной величиной 12 пунктов ( а не относительной ). 

Все эти подсвойства объединяет единое правило  font: Значения записываются через пробелы. Единое 
литеральное значение  caption, icon, menu, message-box, small-caption, status-bar    - задаст шрифт, 
эквивалентный соответственным шрифтам в системе. То есть - каким шрифтом к примеру отображается строка 
состояния  ( status-bar ) - таким шрифтом и отобразится текст. 

font-family: ( имя шрифта, имя семейства шрифтов либо serif, sans-serif, cursive, fantasy, monospace ) - 
применит к объекту конкретный шрифт, шрифт заданного семейства, либо шрифт, относящийся к перечисленным 
группам шрифтов. Возможно задать несколько значений через запятую, тогда в случае невозможности применения 
первоочередного значения шрифта - используется последующее.
Пример:                       
h2{font-family: "Tahoma" arial  serif}
17.Позиционирование в CSS
Объекты располагаются на странице по порядку сверху-вниз согласно с порядком упоминания в html тексте. 
Но можно также и смещать их относительно их текущих позиций, либо задавать им точные координаты, считая 
от угла окна.
     
position: ( static, relative, absolute, inherit ) - задает способ позиционирования элементу.
static - элемент будет отображаться точно в том месте страницы, которое задано ему в HTML тексте программы.
relative -  позиционирование будет выполняться относительно текущих координат элемента.
absolute - положение элемента будет определяться абсолютными координатами.

Сперва задается способ позиционирования элемента, а затем уже его координаты. Для системы абсолютного 
позиционирования элементов координаты задаются с помощью:
top: ( координата в % или px,cm,mm, auto, inherit ) - задает позицию верхней границе элемента.
left: - левой;
За точку с координатами  top:0 ; left:0   берется верхний левый угол.

<html><head>
<style type="text/css"><!--
h2{position:absolute; left:100px; top:200px}
//--></style></head>
<body>
<h2>Тут быть тексту!</h2>
</body></html>

Напишите эту страничку и посмотрите, где очутился текст… Совсем не там, где он должен был быть.

bottom:  - задает координату нижней границе элемента;
right:  - правой; 
В этом случае точкой с координатами  bottom:0 ; right:0   считают нижний правый угол первоначальной 
видимой части окна просмотра. Если изменять размеры окна, то изменяется и видимая часть окна просмотра 
и изображение также соответственно перемещается.      
Для системы позиционирования  relative  таким же образом задаются смещения от первоначального положения 
на странице.
Часть объекта, выходящая за рамки окна становится недоступной для просмотра с помощью полос прокрутки.

width: (значение в % или px, auto, inherit ) - задаст ширину элементу страницы.
height:  -  высоту
Для того, чтобы просто сдвинуть объект влево либо вправо по горизонтали можно использовать   
float: ( left, right, none, inherit )
18.Другие интересные возможности
direction:  Это правило одним из своих возможных значений, указанным после двоеточия, задаст начало 
направления размещения объектов по умолчанию с левой стороны страницы или с правой. Возможные значения  
ltr,  rtl,  inherit. Если задано значение ltr - то объекты  будут распологатся от левой стороны страницы 
к правой, а если rtl - то от правой стороны страницы к левой. Значение inherit укажет, что объект 
расположится так, как располагался бы обычно - значение будет унаследовано от содержания страницы. 

<html>
<head><title>Направление</title>
<style type="text/css"><!--
h2{direction:rtl}
//--></style></head>
<body>
<h1>Очень важно не сделать в HTML тексте ошибку</h1>
<h2>текст, который пишется с правого края страницы!!!</h2>
<p>Greetings from Russia</p>
</body>
</html>

В этом примере к тексту заголовка h2 применено правило direction:rtl  - а значит он  будет отображен 
начиная с правой стороны страницы. Другому же заголовку h1 и тексту p правило не задано - а значит 
отображаться они будут как обычно.
Если использовать это правило для body , то вертикальная полоса прокрутки должна так же отобразится с 
противоположной стороны, как и все содержимое страницы.

visibility: ( visible, hidden, inherit ) - придает элементу видимость или невидимость ( значением hidden ).
 
z-index: ( число, auto, inherit ) - значением целого числа задает приоритет отображения одного элемента 
над другими - каскадность отображения объектов, если они находятся  в одном месте страницы. Число может 
быть положительное или отрицательное. По умолчанию  значением z-index  является 0. Если в одном и том же 
месте странички должны отобразится несколько объектов, то видимым будет тот объект, у которого значением 
z-index является большее число - он будет иметь приоритет по отношению к остальным. Обычно, при одинаковых 
значениях z-index ,  приоритет имеют объекты, упоминающиеся в HTML тексте последними либо объекты, позиция 
которым задается координатами.
Допустим, если к примеру в одном месте страницы должно находится сразу 2 рисунка, то полностью будет виден 
тот рисунок, который имеет больший приоритет - он будет как-бы накрывать другой сверху. 

cursor: ( auto, crosshair, default, move, pointer, e-resize, ne-resize, nw-resize, n-resize, s-resize, 
se-resize, sw-resize, w-resize, text, wait, help, inherit ) - задаст внешний вид курсору.
p{ cursor: wait }

При наведении на текст курсор будет отображаться  как системный курсор при ожидании. 
В следующем примере используются различные правила оформления для текстового содержимого. При наведении 
курсора на ссылку он примет вид зарезервированный в системе под значением help . Заголовки h4 в этой 
страничке не отображаются. Они скрыты ( hidden ) .

<html><head>
<style type="text/css"><!--
p{letter-spacing:15; font:bolder x-large }
h4{visibility:hidden}
h2{text-decoration:overline; font-family:"Verdana" "Tahoma"}
body{cursor:crosshair}
a{text-decoration:none; cursor:help}
h3{text-indent:50px; text-transform:uppercase}
//--></style></head>
<body bgcolor="#58A0A5" text="#CDCD24" link="maroon">
<p>Большой пример с различными элементами</p><br>
<h2>Напишите тут то, что Вам подскажет фантазия</h2>
<h4>Эта строчка в страничке есть, но она невидима</h4>
<a href="http://amouralizee.narod.ru"><p>Сайт Ализе</p></a>
<h3>Последний абзац!</h3>
</body></html>
19.Фильтры
Можно создать какие-то "фото" эффекты отображения наложив на объект фильтр.
filter: ( fliph, flipv, xray, invert, grayscale ...    )

invert - цвета меняются на противоположные.
xray   - эффект рентгеновского излучения.
gray   - объект отобразится цветами серой цветовой гаммы.

flipv  - вертикальное отображение ( переворот ) объекта.
fliph  - горизонтальное отображение.
20.Работа с различными элементами в CSS
До сих пор правила оформления рассматривались в применении к каким-либо тэгам.  
Однако существуют различные другие элементы страницы к которым можно применить правила стилевого оформления.
Для того, чтобы правило или правила выполнялось только для каких-либо определенных объектов страницы 
им задается имя класса. Делается это с помощью атрибута class=" " , значением которого является имя, 
которым мы назовем класс. Значением селектора будет это имя с находящейся перед ним точкой.                            
В примере будет отображен фоном белый цвет для элементов, которым присвоен класс  stblor   :

<html>
<head>
<style type="text/css"><!--
.stblor{background-color: white }   
//--></style> </head>
<body bgcolor="#00AE00" text="#000000">
<h4 class="stblor"> Текст с фоном </h4>
<h4>Этому тексту класс не присвоен</h4>
<p class="stblor">А этому присвоен</p>
</body>
</html>

Если некоторым объектам присвоен один и тот же класс, а отображаться они должны по- разному, то можно 
совместить в селекторе наименование тэга и класса:
        
<html><head>
<style type="text/css"><!--
h2.sowo{color: blue}
p.sowo{color:red}             
//--></style> </head>
<body bgcolor="#A5A5A5" text="#000000">
<center>
<h2 class="sowo">Акт второй</h2>
<p class="sowo">сцена первая</p></center>
<p>Просто текст</p>
</body></html>

Отобразит "сцена первая" красным цветом, а заголовок "Акт второй" - синим.

Имеется возможность использовать стиль оформления для каких-либо объектов, определенных идентификаторами. 
В следующем примере каждому изображению задано идентифицирующее его имя. Также он является показательным 
примером применения абсолютного позиционирования и наложения фильтров. 

<html><head><title>Стиль и каскадность!</title>
<style type="text/css"><!--
#secw{position:absolute; top:100px; left:500px; z-index:2; filter:xray}
#er{position:absolute; left:220px; filter:invert}
#vipp{position:absolute; top:240px; left:100px; filter:flipv}
//--></style></head>
<body background="myphoto.jpg">
<img src="zamok.jpg" id="secw">
<img src="zamok.jpg" id="er">
<img src="zamok.jpg" id="vipp">
</body></html>


Обратите внимание, что фотографии с идентифицирующем именем secw задано значение  z-index: 2  которое 
больше значения по умолчанию. Поэтому она и отображена над другими фотографиями. В значении селектора 
заданному идентифицирующему имени предшествует знак # 

Еще можно было совместить имя тэга img и идентифицирующее имя vipp для того, чтобы указать конкретно на 
объект.
                      
<style type="text/css"><!--
img#vipp{border-width:5; border-style:dotted;}
//--></style>

Правила оформления можно задать и просто для тэга, вписав их в атрибут  style=" "  :

<html>
<head></head>
<body>
<p style="letter-spacing:11">текст с пробелами между буквами</p>
</body></html>

Если необходимо чтобы заданное правило выполнялось только в случае, когда какие либо тэги находятся 
в сфере влияния других тэгов ( одни тэги вложены в другие ) - то это можно задать одним правилом.
             
<html>
<head>
<style type="text/css"><!--
table p{color:9ACD32}      
//--></style> </head>
<body bgcolor="#A52536" text="#000000">
<p>Купи слона!!!</p>
<table border="1"><tr><td><p>no nosence</p></td>
</tr></table></body></html>

В данном случае, если тэги текста p находятся между тэгами table , то они отображаются желто-зеленым 
цветом 9ACD32. В виде селектора выступают два тэга отделенные пробелом.

Если вместо селектора указать знак  *  , то тогда правило оформления применится ко всем элементам страницы.
<style type="text/css"><!--
*{background-color:#777777}         //--></style>
21.Динамические  подклассы ссылок
Позволяют присваивать правила отображения ссылкам в момент какого-либо события. Для этого к имени 
тэга ссылок a в селекторе добавляется конструкция :
       
:link  - цвет отображаемой ссылки.
:hover - при указании мышкой ( при наведении курсором ).
:active - при активизации ( при щелчке ).
:visited - для уже посещенных ссылок.                    Пример: 
        
<html>
<head><title>Указание курсором на ссылку</title>
<style type="text/css"><!--
a:hover{background-color:#FFFFEF}  
//--> </style> </head> 
<body bgcolor="#000045" link="#FA0000">
<h1><a href="http://amouralizee.narod.ru/mylene/">
Мой сайт Милен Фармер </a></h1>
</body></html>

Заставит отображать фон у текста ссылки, при указании на нее курсором.
22.Приоритет выполнения правил
Если одному и тому же тэгу присвоены аналогичные, но разные правила отображения, то приоритет имеют 
те правила, которые упомянуты в тексте программы позднее. Эти правила и применяются. Не взирая 
на порядок упоминания наибольший приоритет имеют правила для элементов, обозначенных идентификатором. 
Наименьший - для элементов, которым присвоен класс. Для того, чтобы присвоить приоритет какому-либо правилу 
вне зависимости от совпадений используют ключевое слово   ! important

<html>
<head>
<style type="text/css"><!--
p{color:green ! important }
#err{color:red; font-size:18pt; font-family:serif }
//--></style>
</head>
<body>
<p id="err">Спасибо Вам!</p>
</body></html>

Правилу, задающему отображение шрифта зеленым цветом задан приоритет с помощью  ! important
А значит текст будет отображаться зеленым шрифтом, несмотря на то, что после - 
другим правилом ( причем правилом, имеющим наибольший приоритет ) тому же тексту устанавливается красный. 
При отсутствии ключевого слова текст отображался бы красным.


в начало: изучаем HTML