Каскадные стилевые страницы - 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
А значит текст будет отображаться зеленым шрифтом, несмотря на то, что после -
другим правилом ( причем правилом, имеющим наибольший приоритет ) тому же тексту устанавливается красный.
При отсутствии ключевого слова текст отображался бы красным.