CSS - Cascading Style Sheets
What is Css
- About Css
- Structure&Rules
- Inline Style Sheets
- Global Style Sheets
- Linked Style Sheets
Css Properties
- Font Properties
- Text Properties
- Color and Background Properties
- Classification
- Box Properties
Units
- Length Units
- Percentage Units
- Color Units
- URLs
Chapter I >> What Is Css
[1] About Css
Так что это такое - Сss? Cascading Style Sheets ( Таблицы Каскадных Стилей ).
Css - это язык содержащий набор свойств для определения внешнего вида документа.
С его помощью дизайнер имеет полный контроль над стилем и расположением каждого
элемента веб страницы. Это гораздо проще использования обычного набора HTML
тегов. Приведу пример: Вам нужно создать жирный красный подчеркнутый
текст.
HTML EXAMPLE: <font color="red"><strong><u>Hello
World</u></strong></font>
А если подобный стиль нужно использовать несколько раз? Хорошо если раз 5, а
если 10-20? Вот тут нам и поможет Сss. Существует три вида таблиц стилей:
Внутренние таблицы стилей, Глобальные таблицы стилей и Связанные таблицы стилей.
Внутриние таблицы стилей ( Inline Style Sheets ) мало чем отличаются от HTML
тегов. Глобальные ( Global Style Sheets ) определяют стиль элементов во всем
документе. Связанные ( Linked Style Sheets ) могут быть использованы для
нескольких документов и хранятся во внешнем файле. Подробнее об этом написано
ниже.
[ Вверх...
]
Chapter I >> What Is Css
[2] Structure&Rules
Селекторы (Selectors):
Любой элемент HTML может иметь
CSS селектор. Селектор определяет стиль элемента, для которого он
создан.
EXAMPLE: H1 {color:red;size:20pt;}
Все
элементы H1 в документе будут красного цвета, размером в 20 точек (pt ,
point).
Классовые селекторы (Class Selectors):
CLASS --
класс стилей в css. Для его определения в css используется знак "."+
имя.
Все селекторы могут иметь разные классы. Это позволяет одинаковым
элементам иметь различные стили.
EXAMPLE: H1.blue
{color:blue;size:20pt;}
Все элементы H1 с атрибутом CLASS="blue"
стануть синими.
Классы могут быть также описаны без привязывания их к
определенным элементам.
EXAMPLE: .green {color:green;}
В данном случае все элементы с указанным атрибутом CLASS="green" станут
зелеными.
ID селекторы (ID Selectors):
ID -- индивидуально
именованный стиль. C его помощью можно создавать стилистические исключения cреди
элементов одного класса. Для определения в css используется знак "#"+
имя.
Индификаторы используются в основном для придания одному или нескольким
элементам одного класса индивидуальных свойств. Скажем Вы создали класс blue --
синий курсив. Но вам понадобился жирный, подчеркнутый текст синим курсивом.
Конечно, можно создать новый класс, но зачем? Проще описать ID. Например
"boldunderline". И все элементы класса blue с значением ID "boldunderline"
станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств
класса blue и идификатора boldunderline.
EXAMPLE:
<html>
<head>
<title> Example
</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):
Контекстные селекторы - это сочетания нескольких обыкновенных
селекторов. Стиль задается только элеметнам в заданной последовательности в
зависимости от каскадного порядка.
EXAMPLE: 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 (ссылки) будут синими. При
нажатии ( в активном состоянии ) поменяют цвет на красный. И при подведении
курсора мышки исчезнет подчеркивание. Очень эффектный прием :-)
[ Вверх... ]
Chapter I >> What Is Css
[3] Inline Style Sheets
Как уже говорилось, использование Внутрених стилей мало чем отличается от
использования обычных HTML тегов. Они задают стиль только одному элементу
документа при помоши атрибута style в HTML теге.
HTML EXAMPLE: <font color="blue" size="3" face="Arial">Hello
World!</font>
RESULT:Hello
World!
INLINE STYLE SHEET EXAMPLE:<font
style="color:blue;font-size:12pt;font-family:Arial">Hello
World</font>
RESULT:Hello
World!
Как можно заметить, код Inline Style Sheet Example получился больше чем HTML
Example. Поэтому иногда разумнее использовать обычные HTML теги
. [ Вверх... ]
Chapter I >> What Is Css
[4] Global Style Sheets
Глобальные стили задают вид элементов всего документа. Для этого используется
тег <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" станут жирными.
[ Вверх... ]
Chapter I >> What Is Css
[5] Linked Style Sheets
Связанные таблицы стилей используются для придания
нескольким документам одного стиля. Хронятся они в отдельном файле. Пример (файл
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="путь до
файла">
EXAMPLE:
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>
На этом я заканчиваю
Chapter I и перехожу к Chapter II.
[ Вверх... ]
Chapter II >> Css Properties
[1] Font Properties
• font-family
Possible
Values: Любой шрифт
*Applies to : All elements
Описание:
Это свойство определяет используемый элементом шрифт. Если указать УРЛ, то шрифт
автоматически установится на компьютер пользователя
EXAMPLE:font-family:Arial Black URL('arialblack.ttf')
• font-style
Possible Values:
[1] normal - без
изменений
[2] italic - курсив
*Applies to : All
elements
Описание: Стиль элемента. Курсивный или обычный
EXAMPLE:font-style:italic
• font-variant
Possible Values:
[1] normal - без
изменений
[2] small-caps - заменяет все буквы на большие
*Applies
to : All elements
Описание: Netscape вообще не поддерживает это
свойство.
EXAMPLE:font-variant:small-caps
• font-weight
Possible Values:
[1] normal - без
изменений
[2] bold - жирный
[3] bolder - очень жирный ( в MSIE не
отличается от bold, в Нетскейпе от нормал )
[4] lighter - тонкий ( не
отличается от normal )
[5] любое значение от 100 до 900
*Applies
to : All elements
Описание: Выделение ( жирность )
элемента
EXAMPLE:font-weight:bold
• font-size
Possible Values:
[1] размер (+)
[2] xx-small,
x-small, small, medium, large, x-large, xx-large - любое из этих значений
[3]
smaller, larger - любое из этих значений
*Applies to : All
elements
Описание: Размер шрифта
EXAMPLE:font-size:30pt
• font
Possible
Values:
*Applies to : All elements
Описание: Обобщает
все вышеперечисленные свойства
EXAMPLE:font: italic bolder Arial
12pt
[
Вверх... ]
Chapter II >> Css Properties
[2] Text Properties
• word-spacing
Possible
Values:
[1] длина (+)
[2] normal -
без изменений
*Applies to : All elements
Описание:
Расстояние между cловами. Не работает ни в Нетскейпе, ни в MSIE
EXAMPLE:word-spacing:0.4em
• text-decoration
Possible Values:
[1] none - нет
[2]
underline - подчеркнутый
[3] overline - надчеркнутый ( не поддерживается в
Нетскейпе )
[4] line-through - перечеркнутый
[5] blink - мигающий ( не
поддерживается в IE )
*Applies to : All elements
Описание:
"Украшение" текста
EXAMPLE:text-decoration:line-through
• letter-spacing
Possible Values:
[1] длина (+)
[2] normal -
без изменений
*Applies to : All elements
Описание:
Расстояние между буквами. Не работает в Нетскейпе
EXAMPLE:letter-spacing:100
• vertical-align
Possible Values:
[1] baseline
[2]
sub
[3] super
[4] top-text
[5] top
[6] middle
[7] bottom
[8] bottom-text
[9] процент
*Applies to : Inline
elements
Описание: Позиционирование элементов по отношению к другим
элементам стоящих в одном ряду. Не работает в Нетскейпе
EXAMPLE:vertical-align:top-text
• text-transform
Possible Values:
[1] none - нет
[2]
Capitalize - каждое слово начинается с большой буквы
[3] UPPERCASE - каждая
буква текста становится заглавной
[4] lowercase - каждая буква текста
становится маленькой
*Applies to : Inline elements
Описание:
Изменение текста. Не работает в Нетскейпе
EXAMPLE:text-transform:Capitalize
• text-align
Possible Values:
[1] left - текст
слева
[2] right - текст справа
[3] center - текст по центру
[3] justify
- текст "растянут"
*Applies to : Block-level
elements
Описание: Положение текста
EXAMPLE:text-align:right
• text-indent
Possible
Values:
[1] длина (+)
[2] процент (+)
*Applies
to : Block-level elements
Описание: Отступ
EXAMPLE:text-indent:30 em
• line-height
Possible
Values:
[1] normal - без изменений
[2] длина (+)
[3]
процент
*Applies to : All elements
Описание: Отступ
сверху
EXAMPLE:line-height:100%
[ Вверх... ]
Chapter II >> Css Properties
[3] Color and Background Properties
• color
Possible Values:
[1] цвет (+)
*Applies
to : All elements
Описание: Цвет
EXAMPLE:color:#f00000
• backgroung-color
Possible Values:
[1] цвет (+)
*Applies
to : All elements
Описание: Цвет фона элемента
EXAMPLE:background-color:#f00000
• background-image
Possible Values:
[1] none - нет
[2]
URL (+)
*Applies to : All elements
Описание: Фоновое
изображение
EXAMPLE:background-image:URL(cool.gif)
• background-repeat
Possible Values:
[1] repeat -
размножает фоновое изображение во всех направлениях
[2] repeat-x - размножает
фоновое изображение горизонтально
[3] repeat-y - размножает фоновое
изображение вертикально
[4] no-repeat - не повторяющиеся
изображение
*Applies to : All elements
Описание: Повторения
фонового изображения
EXAMPLE:background-repeat:no-repeat
• background-attachment
Possible Values:
[1] scroll -
фоновое изображение скроллится всесте с содержанием документа
[2] fixed - не
скроллится. Фиксируется в одном месте
*Applies to : All
elements
Описание: Возможность прокрутки фонового
изображения
EXAMPLE:background-attachment:fixed
• background-position
Possible Values:
[1] процент от
длинны + процент от высоты (+)
[2] top,
middle, bottom - одно из значений
[3] left, center, right - одно из начений
[4] расстояние от левого края + расстояние от вершины
*Applies to
: Block-level and replaced elements
Описание: Положение фонового
изображения ( работает с background-repeat равным repeat-x или repeat-y
)
EXAMPLE:background-position:50%0%
• background
Possible Values:
*Applies to : All
elements
Описание: Обобщает все вышеперечисленные
свойства
EXAMPLE:background:no-repeat black fixed
50%0%
[
Вверх... ]
Chapter II >> Css Properties
[4] Classification
• display
Possible
Values:
[1] none - не отображается
[2] block - разбивает линию ( =
строку ) до и после элемента.
[3] inline - не разбивает линию ( = строку ).
Т.е. элемент можен находится на одной линии с другими элементами.
[4]
list-item - разбивает линию ( = строку ) до и после элемента + добавляет маркер
как у list-item элементов
*Applies to : All
elements
Описание: Определяет как будет отображаться
элемент.
EXAMPLE:display:none
• white-space
Possible Values:
[1] normal - "сжимает"
несколько подряд идущих пробелов в один
[2] pre - допускает отображение
несколькольких подряд идущих пробелов
[3] nowrap - не допускает перенос
строки без тага <BR>
*Applies to : Block-level
elements
Описание: Оприделяет как будут отображаться пробелы между
элементами
EXAMPLE:white-space:nowrap
• list-style-type
Possible Values:
[1] disc, circle,
square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha
[2]
none - никакой
*Applies to : Elements with display value
list-item
Описание: Определяет вид list-item маркера. Если значение
list-style-image равно none или не уточнено
EXAMPLE:list-style-type:lower-alpha
• list-style-image
Possible Values:
[1] none - нет
[2]
URL (+)
*Applies to : Elements with display value
list-item
Описание: Задает вид list-item маркера в виде
картинки
EXAMPLE:list-style-image:URL(cool.gif)
• list-style-position
Possible Values:
[1] inside - при
переносе следующие строки будут отображаться без отступа
[2] outside - по
умолчанию
*Applies to : Elements with display value
list-item
Описание: Определяет положение маркера в зависимости от list
item элемента
EXAMPLE:list-style-position:inside
[ Вверх... ]
Chapter II >> Css Properties
[5] Box Properties
• margin-top
Possible
Values:
[1] длина (+)
[2] процент
(+)
[3] auto -
автоматически
*Applies to : All elements
Описание:
Определяет отступ сверху
EXAMPLE:margin-top:100
• margin-right
Possible Values:
[1] длина (+)
[2] процент
(+)
[3] auto -
автоматически
*Applies to : All elements
Описание:
Определяет отступ справа
EXAMPLE:margin-right:100%
• margin-bottom
Possible Values:
[1] длина (+)
[2] процент
(+)
[3] auto -
автоматически
*Applies to : All elements
Описание:
Определяет отступ снизу
EXAMPLE:margin-bottom:100em
•
margin-left
Possible Values:
[1] длина (+)
[2] процент
(+)
[3] auto -
автоматически
*Applies to : All elements
Описание:
Определяет отступ слева
EXAMPLE:margin-left:100pt
•
margin
Possible Values: ^
*Applies to :
All elements
Описание: Обобщает все вышеперечисленные
свойства
EXAMPLE:background:100pt
• padding-top
Possible Values:
[1] длина (+)
[2] процент
(+)
*Applies to : All elements
Описание: Отступ от верхнего
border'а
EXAMPLE:padding-top:100pt
• padding-right
Possible Values:
[1] длина (+)
[2] процент
(+)
*Applies to : All elements
Описание: Отступ от правого
border'а
EXAMPLE:padding-right:100%
• padding-bottom
Possible Values:
[1] длина (+)
[2] процент
(+)
*Applies to : All elements
Описание: Отступ от нижнего
border'а
EXAMPLE:padding-bottom:100em
• padding-left
Possible Values:
[1] длина (+)
[2] процент
(+)
*Applies to : All elements
Описание: Отступ от левого
border'а
EXAMPLE:padding-top:100
• padding
Possible Values: ^
*Applies to : All
elements
Описание: Обобщает все вышеперечисленные
свойства
EXAMPLE:padding:100px
• border-top-width
Possible Values:
[1] длина (+)
[2] thin,
medium или thick
*Applies to : All elements
Описание:
толщина верхнего border'а
EXAMPLE:border-top-width:100pt
• border-right-width
Possible Values:
[1] длина (+)
[2] thin,
medium или thick
*Applies to : All elements
Описание:
толщина правого border'а
EXAMPLE:border-right-width:thick
• border-bottom-width
Possible Values:
[1] длина (+)
[2] thin,
medium или thick
*Applies to : All elements
Описание:
толщина нижнего border'а
EXAMPLE:border-bottom-width:100em
• border-left-width
Possible Values:
[1] длина (+)
[2] thin,
medium или thick
*Applies to : All elements
Описание:
толщина левого border'а
EXAMPLE:border-left-width:medium
• border-color
Possible Values: color
Описание:
Цвет border'а (+)
*Applies to : All elements
EXAMPLE:border-color:green
• width
Possible
Values:
[1] длина (+)
[2] процент
(+)
*Applies to : Block-level and replased elements
Описание:
ширина элемента
EXAMPLE:width:10%
• height
Possible Values:
[1] длина (+)
[2] процент
(+)
*Applies to : Block-level and replaced elements
Описание:
высота элемента
EXAMPLE:height:100pt
• float
Possible Values:
[1] left - слева
[2] right -
справа
[3] none - по умолчанию
*Applies to : All
elements
Описание: расположение элемента
EXAMPLE:float:right
• clear
Possible
Values:
[1] left - слева
[2] right - справа
[3] both - c двух
сторон
[4] none - по умолчанию
*Applies to : All
elements
Описание: расположение других элементов вокруг
данного
EXAMPLE:clear:both
[ Вверх... ]
Chapter III >> Units
[1] Length Units
Syntax : "+" или "-" затем [число] плюс
[единица измерения] ( без пропусков )
Example :
-566pt
Единицы длинны :
em - ems , высота используемого
элементом шрифта
ex - x-height, ширина буквы "x" используемого
элементом шрифта
px - pixels, пикселы
in - inches,
дюймы
cm - centimeters, сантиметры
mm - millimeters,
миллиметры
pt - points, точка ( 1pt = 1/72in )
pc - picas (
1pc = 12pt )
[
Вверх... ]
Chapter III >> Units
[2] Percentage Units
Syntax : "+" или "-" затем [число]
плюс "%" ( без пропусков )
Example : -566%
[ Вверх... ]
Chapter III >> Units
[3] Color Units
Syntax : [color]
Example : 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% )
Все примеры
отображают один и тот же цвет
[ Вверх... ]
Chapter III >> Units
[4] URLs
Syntax : "URL" , потом в скобках приводится ссылка.Ссылку также можно,
помимо скобок, заключить в одинарные или двойные кавычки ( без пропусков
)
Example : URL('cool.gif')
[ Вверх... ]
Other >> От
Автора
Примечание:
Возможно наличие ошибок и опечаток в этой статье. Все мы люди и не застрахованы от неожиданостей.
Под MSIE ( просто IE или Интернет Эксплорер ) и Нетскейпом
подразумивается Microsoft Internet Explorer 4.0+ и Netscape Navigator 4.0+
соответственно.