Так что это такое - Сss? Cascading Style Sheets ( Таблицы Каскадных Стилей ).
Css - это язык содержащий набор свойств для определения внешнего вида документа.
С его помощью дизайнер имеет полный контроль над стилем и расположением каждого
элемента веб страницы. Это гораздо проще использования обычного набора HTML
тегов. Приведу пример: Вам нужно создать жирный красный подчеркнутый
текст.
HTML пример: <font color="red"><strong><u>Hello
World</u></strong></font>
А если подобный стиль нужно использовать несколько раз? Хорошо если раз 5, а
если 10-20? Вот тут нам и поможет Сss. Существует три вида таблиц стилей:
Внутренние таблицы стилей, Глобальные таблицы стилей и Связанные таблицы стилей.
Внутриние таблицы стилей ( Inline Style Sheets ) мало чем отличаются от HTML
тегов. Глобальные ( Global Style Sheets ) определяют стиль элементов во всем
документе. Связанные ( Linked Style Sheets ) могут быть использованы для
нескольких документов и хранятся во внешнем файле. Подробнее об этом написано
ниже.
Структура и правила
Селекторы (Selectors):
Любой элемент HTML может иметь
CSS селектор. Селектор определяет стиль элемента, для которого он
создан.
Пример: H1 {color:red;size:20pt;} Все
элементы H1 в документе будут красного цвета, размером в 20 точек (pt ,
point).
Классовые селекторы (Class Selectors):
CLASS --
класс стилей в css. Для его определения в css используется знак "."+
имя. Все селекторы могут иметь разные классы. Это позволяет одинаковым
элементам иметь различные стили. Пример: H1.blue
{color:blue;size:20pt;} Все элементы H1 с атрибутом CLASS="blue"
стануть синими.
Классы могут быть также описаны без привязывания их к
определенным элементам. Пример: .green {color:green;} В данном случае все элементы с указанным атрибутом CLASS="green" станут
зелеными.
ID селекторы (ID Selectors):
ID -- индивидуально
именованный стиль. C его помощью можно создавать стилистические исключения cреди
элементов одного класса. Для определения в css используется знак "#"+
имя. Индификаторы используются в основном для придания одному или нескольким
элементам одного класса индивидуальных свойств. Скажем Вы создали класс blue --
синий курсив. Но вам понадобился жирный, подчеркнутый текст синим курсивом.
Конечно, можно создать новый класс, но зачем? Проще описать ID. Например
"boldunderline". И все элементы класса blue с значением ID "boldunderline"
станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств
класса blue и идификатора boldunderline.
Пример: <html>
<head>
<title>Пример
</title>
</head>
<style>
.blue
{color:blue;font-style:italic}
#boldunderline
{text-decoration:underline;font-weight:bold}
</style>
<body>
<p
class="blue"> Hello! Welcome To My Homepage!</p>
<p class="blue"
id="boldunderline">Will Be Soon</p>
<p
id="boldunderline">Under
Construction</p>
</body>
</html>
Как видно из примера, ID может быть использован без указания
класса ( последний параграф примера ). Тогда параграф будет обладать только
свойствами ID ( в примере - жирный, подчеркнутый текст ).
Контекстуальные селекторы (Contextual Selectors):
Контекстные селекторы - это сочетания нескольких обыкновенных
селекторов. Стиль задается только элеметнам в заданной последовательности в
зависимости от каскадного порядка.
Пример: P EM {color:silver;}
В данном примере все элементы EM внутри элементов P будут иметь
заданный стиль. Придание нескольким элементам одинаковых свойств: Скажем
Вам нужно придать нескольким элементам Вашей веб страницы одинаковых свойств. В
этом случае при определении элементоы перечисляутся через
запятую. h1,h2,h3,p,strong {color:green} Все элементы h1, h2, h3, p и
strong будут зелеными.
Псевдоклассы и псевдоэлементы : Псевдокласс состоит из
элементов одного типа, отвечаюшему определенному критерию. Псевдоклассы и
псевдоэлементы при определении отделяются знаком ":" . Список
псевдоклассов и псевдоэлементов : - Anchor Pseudo Classes --
Эти псевдоклассы элемента <a>, обозначающего ссылки. Псевдоклассы этого
элемента -- link ( линк ), active ( активная ссылка ), visited ( посещенный
ранее URL ), hover ( при поднесении курсора, не работает в Нетскейпе ). -
First Line Pseudo-element -- first-line. Этот псевдоэлемент может быть
использован с block-level элементами ( p, h1 и т.д. ). Он изменяет стиль первой
строки этих элементов. - First Letter Pseudo-element -- first-letter.
То же самое что и first-line, только влияет не на всю строку, а только на первый
символ.
Пример : a:link,a:visited
{color:blue}
a:active {color:red}
a:hover
{text-decoration:none}
В данном примере все элементы Anchor (ссылки) будут синими. При
нажатии ( в активном состоянии ) поменяют цвет на красный. И при подведении
курсора мышки исчезнет подчеркивание. Очень эффектный прием.
Внутри таблиц стиля
Как уже говорилось, использование Внутрених стилей мало чем отличается от
использования обычных HTML тегов. Они задают стиль только одному элементу
документа при помоши атрибута style в HTML теге.
HTML пример: <font color="blue" size="3" face="Arial">Hello
World!</font> Результат: Hello
World!
Пример использования стиля внутри тэга: <font
style="color:blue;font-size:12pt;font-family:Arial">Hello
World</font>
Результат: Hello
World!
Как можно заметить, код Inline Style Sheet Example получился больше чем HTML
Example. Поэтому иногда разумнее использовать обычные HTML теги
Глобальные таблицы стилей
Глобальные стили задают вид элементов всего документа. Для этого используется
тег <STYLE>. Он размещается в заголовке документа. Пример:
<html>
<head> <title> Example Of Global Style
Sheets
</title>
</head>
<style>
h1{color:red;font-style:italic;font-size:32px}
.blue{color:blue}
#bold{font-weight:bold}
</style>
<body>
<h1>
Этот заголовок написан крупным красным курсивом </h1>
Вот <font
class="blue"> это </font> слово - синие, a <font id="bold">
это</font> -- жирное!!!
</body>
</html>
В данном примере все элементы H1 будут написаны крупным красным курсивым, все
элементы с указанным классом BLUE будут синими , а а все элементы с
индификатором ID="Bold" станут жирными.
Таблица стилей ссылок
Связанные таблицы стилей используются для придания
нескольким документам одного стиля. Хронятся они в отдельном файле. Пример (файл
styles.css):
<style>
body
{background:black;font-size:9pt;color:red;font-family:Arial
Black}
.base{color:blue;font-style:italic}
h1 {color:white}
#bold
{font-weight:bold}
</style>
Как видите, это очень похоже на Global Styles Sheets. Так оно и есть. Все
что относилось к Глобальным стилям справедливо и здесь. В самих же документах
делается ссылка на этот файл при помощи тега <link>. Выглядит это так:
<link REL="STYLESHEET" TYPE="text/css" HREF="путь до
файла">
Пример:
File [ styles.css ]
<style>
body
{background:black;color:red;font-size:9pt}
h1
{color:white}
a:link,a:visited,a:active {color:green}
a:hover
{font-weight:bild}
</style>
File [ Index.html ]
<html>
<head>
<title> Example
&glt;/title>
</head>
<link rel="stylesheet"
type="text/css" href="styles.css">
<body>
[ Содержание Документа
]
</body>
</html>
Свойства шрифтов• font-family Параметры: Любой шрифт
*Применение : ко всем элементам Описание:
Это свойство определяет используемый элементом шрифт. Если указать УРЛ, то шрифт
автоматически установится на компьютер пользователя
Пример: font-family:Arial Black URL('arialblack.ttf')
• font-style Параметры:
[1] normal - без
изменений
[2] italic - курсив
*Применение: Все элементы
Описание: Стиль элемента. Курсивный или обычный
Пример: font-style:italic
• font-variant Параметры:
[1] normal - без
изменений [2] small-caps - заменяет все буквы на большие
*Применение : Все элементы Описание: Netscape вообще не поддерживает это
свойство.
Пример: font-variant:small-caps
• font-weight Параметры:
[1] normal - без
изменений [2] bold - жирный
[3] bolder - очень жирный ( в MSIE не
отличается от bold, в Нетскейпе от нормал ) [4] lighter - тонкий ( не
отличается от normal )
[5] любое значение от 100 до 900 *Применение : Все элементы
Описание: Выделение ( жирность )
элемента Пример: font-weight:bold
• font-size Параметры:
[1] размер [2] xx-small, x-small,
small, medium, large, x-large, xx-large - любое из этих значений
[3] smaller,
larger - любое из этих значений *Применение : Все элементы
Описание: Размер шрифта Пример: font-size:30pt
• font Параметры:
*Применение: Все элементы Описание: Обобщает
все вышеперечисленные свойства
Пример: font: italic bolder Arial
12pt
Свойства текста• word-spacing
Параметры: [1] длина
[2] normal - без
изменений *Использование: Все элементы
Описание: Расстояние
между cловами. Не работает ни в Нетскейпе, ни в MSIE
Пример: word-spacing:0.4em
• text-decoration Параметры:
[1] none - нет [2]
underline - подчеркнутый
[3] overline - надчеркнутый ( не поддерживается в
Нетскейпе ) [4] line-through - перечеркнутый
[5] blink - мигающий ( не
поддерживается в IE ) *Применение : Все элементы
Описание:
"Украшение" текста Пример: text-decoration:line-through
• letter-spacing Параметры:
[1] длина
[2] normal - без
изменений
*Применение : Все элементы
Описание: Расстояние
между буквами. Не работает в Нетскейпе
Пример: letter-spacing:100
• vertical-align
Параметры:
[1] baseline
[2]
sub
[3] super
[4] top-text
[5] top
[6] middle
[7] bottom
[8] bottom-text
[9] процент
*Применение: Элементы в строке
Описание: Позиционирование элементов по отношению к другим
элементам стоящих в одном ряду. Не работает в Нетскейпе
Пример: vertical-align:top-text
• text-transform
Параметры:
[1] none - нет
[2]
Capitalize - каждое слово начинается с большой буквы
[3] UPPERCASE - каждая
буква текста становится заглавной
[4] lowercase - каждая буква текста
становится маленькой
*Применение: элементы в строке
Описание:
Изменение текста. Не работает в Нетскейпе
Пример: text-transform:Capitalize
• text-align
Параметры:
[1] left - текст
слева
[2] right - текст справа
[3] center - текст по центру
[3] justify
- текст "растянут"
*Применение : Блоковые элементы
Описание: Положение текста
Пример: text-align:right
• text-indent
Параметры:
[1] длина
[2] процент
*Применение:
Блоковые элементы
Описание: Отступ
Параметры: text-indent:30 em
• line-height
Параметры:
[1] normal - без изменений
[2] длина
[3]
процент
*Применение: Все элементы
Описание: Отступ
сверху
Пример: line-height:100%
• color
Параметры:
[1] цвет
*Применение :
Все элементы
Описание: Цвет
Пример: color:#f00000
• backgroung-color
Параметры:
[1] цвет (+)
*Применение:
Все элементы
Описание: Цвет фона элемента
Пример: background-color:#f00000
• background-image
Параметры:
[1] none - нет
[2]
URL
*Применение: Все элементы
Описание: Фоновое изображение
Пример: background-image:URL(cool.gif)
• background-repeat
Параметры:
[1] repeat -
размножает фоновое изображение во всех направлениях
[2] repeat-x - размножает
фоновое изображение горизонтально
[3] repeat-y - размножает фоновое
изображение вертикально
[4] no-repeat - не повторяющиеся
изображение
*Применение: Все элементы
Описание: Повторения
фонового изображения
Пример: background-repeat:no-repeat
• background-attachment
Параметры:
[1] scroll -
фоновое изображение скроллится всесте с содержанием документа
[2] fixed - не
скроллится. Фиксируется в одном месте
*Применение: Все элементы
Описание: Возможность прокрутки фонового
изображения
Пример: background-attachment:fixed
• background-position
Параметры:
[1] процент от
длинны + процент от высоты
[2] top, middle,
bottom - одно из значений
[3] left, center, right - одно из начений
[4]
расстояние от левого края + расстояние от вершины
*Применение :
Блоковые и фоновые элементы
Описание: Положение фонового
изображения ( работает с background-repeat равным repeat-x или repeat-y
)
Пример: background-position:50%0%
• background
Параметры:
*Применение: Все элементы
Описание: Обобщает все вышеперечисленные
свойства
Пример: background:no-repeat black fixed
50%0%
Классификация• display
Параметры:
[1] none - не отображается
[2] block - разбивает линию ( =
строку ) до и после элемента.
[3] inline - не разбивает линию ( = строку ).
Т.е. элемент можен находится на одной линии с другими элементами.
[4]
list-item - разбивает линию ( = строку ) до и после элемента + добавляет маркер
как у list-item элементов
*Применение: Все элементы
Описание: Определяет как будет отображаться
элемент.
Пример: display:none
• white-space
Параметры:
[1] normal - "сжимает"
несколько подряд идущих пробелов в один
[2] pre - допускает отображение
несколькольких подряд идущих пробелов
[3] nowrap - не допускает перенос
строки без тага <BR>
*Применение : Блоковые элементы
Описание: Оприделяет как будут отображаться пробелы между
элементами
Пример: white-space:nowrap
• list-style-type
Параметры:
[1] disc, circle,
square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha
[2]
none - никакой
*Применение : Вместе с элементом списка
Описание: Определяет вид list-item маркера. Если значение
list-style-image равно none или не уточнено
Пример: list-style-type:lower-alpha
• list-style-image
Параметры:
[1] none - нет
[2]
URL
*Applies
to :Вместе с элементом списка
Описание: Задает вид
list-item маркера в виде картинки
Пример: list-style-image:URL(cool.gif)
• list-style-position
Параметры:
[1] inside - при
переносе следующие строки будут отображаться без отступа
[2] outside - по
умолчанию
*Применение :Вместе с элементом списка
Описание: Определяет положение маркера в зависимости от list
item элемента
Пример: list-style-position:inside
• margin-top
Параметры:
[1] длина
[2] процент
[3] auto -
автоматически
*Применение :Все элементы
Описание:
Определяет отступ сверху
Пример: margin-top:100
• margin-right
Параметры:
[1] длина
[2] процент
[3] auto -
автоматически
*Применение :Все элементы
Описание:
Определяет отступ справа
Пример: margin-right:100%
• margin-bottom
Параметры:
[1] длина
[2] процент
[3] auto -
автоматически
*Применение :Все элементы
Описание:
Определяет отступ снизу
Пример: margin-bottom:100em
•
margin-left
Параметры:
[1] длина
[2] процент
[3] auto -
автоматически
*Применение :Все элементы
Описание:
Определяет отступ слева
Пример: margin-left:100pt
•
margin
Параметры:
*Применение :Все элементы
Описание: Обобщает все вышеперечисленные
свойства
Пример: background:100pt
• padding-top
Параметры:
[1] длина
[2] процент
*Применение :Все элементы
Описание: Отступ от верхнего border'а
Пример: padding-top:100pt
• padding-right
Параметры:
[1] длина
[2] процент
*Применение :Все элементы
Описание: Отступ от правого border'а
Пример: padding-right:100%
• padding-bottom
Параметры:
[1] длина
[2] процент
*Применение :Все элементы
Описание: Отступ от нижнего border'а
Пример: padding-bottom:100em
• padding-left
Параметры:
[1] длина
[2] процент
*Применение :Все элементы
Описание: Отступ от левого border'а
Пример: padding-top:100
• padding
Possible
Values:
*Применение:Все элементы
Описание: Обобщает
все вышеперечисленные свойства
Пример: padding:100px
• border-top-width
Параметры:
[1] длина
[2] thin, medium или
thick
*Применение :Все элементы
Описание: толщина верхнего
border'а
Пример: border-top-width:100pt
• border-right-width
Параметры:
[1] длина
[2] thin, medium или
thick
*Применение :Все элементы
Описание: толщина правого
border'а
Пример: border-right-width:thick
• border-bottom-width
Параметры:
[1] длина
[2] thin, medium или
thick
*Применение:Все элементы
Описание: толщина нижнего
border'а
Пример: border-bottom-width:100em
• border-left-width
Параметры:
[1] длина
[2] thin, medium или
thick
*Применение:Все элементы
Описание: толщина левого
border'а
Пример: border-left-width:medium
• border-color
Параметры: color
Описание:
Цвет border'а
*Применение:Все элементы
Пример: border-color:green
• width
Параметры:
[1] длина
[2] процент
*Применение:
Блоковые, фоновые элементы
Описание: ширина
элемента
Пример: width:10%
• height
Параметры:
[1] длина
[2] процент
*Применение:
Блоковые, фоновые элементы
Описание: высота
элемента
Пример: height:100pt
• float
Параметры:
[1] left - слева
[2] right -
справа
[3] none - по умолчанию
*Применение:Все элементы
Описание: расположение элемента
Пример: float:right
• clear
Параметры:
[1] left - слева
[2] right - справа
[3] both - c двух
сторон
[4] none - по умолчанию
*Применение:Все элементы
Описание: расположение других элементов вокруг
данного
Пример: clear:both
Числовые единицыСинтаксис : "+" или "-" затем [число] плюс
[единица измерения] ( без пропусков )
Пример :
-566pt
Единицы длинны :
em - ems , высота используемого
элементом шрифта
ex - x-height, ширина буквы "x" используемого
элементом шрифта
px - pixels, пикселы
in - inches,
дюймы
cm - centimeters, сантиметры
mm - millimeters,
миллиметры
pt - points, точка ( 1pt = 1/72in )
pc - picas (
1pc = 12pt )
Процентные единицыСинтаксис : "+" или "-" затем [число]
плюс "%" ( без пропусков )
Пример : -566%
Цветовые единицыСинтаксис : [color]
Пример : magenta
Значением цвета может быть его название ( red ,
lightgreen, coral и т.д. ) или RGB значение
Способы выразить цвет в
RGB ( red green blue ) :
• #rrggbb ( например, #00cc00
)
• rgb(x,x,x) -- где "х" число от 0 до 255 ( например, rgb(0,204,0
) )
• #rgb ( например, #0c0 )
• rgb (x%,x%,x%) --
где "х%" число от 0.0 до 100.0 ( например, 0%,80%,0% )
Все примеры
отображают один и тот же цвет
Синтаксис : "URL" , потом в скобках приводится ссылка.Ссылку также можно,
помимо скобок, заключить в одинарные или двойные кавычки ( без пропусков
)
Пример : URL('cool.gif')
| 
