Ключевые слова:web, http, css, (найти похожие документы)
From: wtReu <[email protected] >
Subject: Краткое описание CSS (Cascading Style Sheets) на примерах.
CSS - Cascading Style Sheets
Copyright (c) 1999 wtReu <[email protected] >. All rights reserved.
------------------------------
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 ) могут быть использованы для нескольких
документов и хранятся во внешем файле. Подробней об этом написано ниже.
------------------------------
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 Constraction</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 (ссылки) будут синими, при
нажатии ( в активном состоянии ) меняя цвет на красный, и при
подведении курсора мышки исчезнет подчеркивание.
------------------------------
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
Global Style Sheets
Глобальные стили задают вид элементов всего документа. Для этого
используется тег <STYLE>. Он размещается в заголовке документа.
Пример:
<html>
<head> <title> Example Of Global Style Sheets </title>
</head>
<style>
h1 {color:red;font-style:italic;font-size:35;}
.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 станут жирными.
------------------------------
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>
------------------------------
Font Properties
font-family
Possible Values: Любой шрифт
Applies to : All elements
Описание: Это свойство определяет используемый элементом шрифт. Если
указать УРЛ - то шрифт автоматически установится на компьютер пользователя
EXAMPLE: font-family: Arial Black URL('arialblack.tff')
font-style
Possible Values:
normal - без изменений
italic - курсив
Applies to : All elements
Описание: Стиль элемента. Курсивный или обычный
EXAMPLE: font-style:italic
font-variant
Possible Values:
normal - без изменений
smallcaps - заменяет все буквы на маленькие
Applies to : All elements
Описание: К сожалению не работает т.к. IE не отличает маленькие буквы
от больших, а Netscape вообще не поддерживает это свойство.
EXAMPLE: font-variant:smallcaps
font-weight
Possible Values:
normal - без изменений
bold - жирный
bolder - очень жирный ( не отличается от bold )
lighter - тонкий ( не отличается от normal )
любое значение от 100 до 900
Applies to : All elements
Описание: Выделение ( жирность ) элемента
EXAMPLE: font-weight:bold
font-size
Possible Values:
размер
xx-small, x-small, small, medium, large, x-large, xx-large - любое из этих значений
smaller, larger - любое из этих значений
Applies to : All elements
Описание: Размер шрифта
EXAMPLE: font-size:30pt
font
Possible Values:
Applies to : All elements
Описание: Обобщает все вышеперечисленные свойства
EXAMPLE: font: italic bolder Arial 12pt
------------------------------
Text Properties
letter-spacing
Possible Values:
длинна
normal - без изменений
Applies to : All elements
Описание: Расстояние между буквами. Не работает в Нетскейпе
EXAMPLE: letter-spacing:100
text-decoration
Possible Values:
none - нет
underline - подчеркнутый
overline - надчеркнутый
line-through - перечеркнутый
blink - мигающий ( не поддерживается в IE )
Applies to : All elements
Описание: "Украшение" текста
EXAMPLE: text-decoration:line-through
word-spacing
Possible Values:
длинна
normal - без изменений
Applies to : All elements
Описание: Расстояние между буквами. Не работает в Нетскейпе
EXAMPLE: letter-spacing:100
vertical-align
Possible Values:
baseline
sub
super
top-text
top
middle
bottom
bottom-text
процент
Applies to : Inline elements
Описание: Позиционирование элементов по отношению к другим элементам
стоящих в одном ряду.
EXAMPLE:vertical-align:top-text
text-transform
Possible Values:
none - нет
Capitalize - каждое слово начинается с большой буквы
UPPERCASE - каждая буква текста становится заглавной
lowercase - каждая буква текста становится маленькой
Applies to : Inline elements
Описание: Изменение текста
EXAMPLE: text-transform:Capitalize
text-align
Possible Values:
left - текст слева
right - текст справа
center - текст по центру
justify - текст "растянут" ( не работает в Нетскейпе )
Applies to : Block-level elements
Описание: Положение текста
EXAMPLE: text-align:right
text-indent
Possible Values:
длинна
процент
Applies to : Block-level elements
Описание: Отступ ( не работает в IE )
EXAMPLE: text-indent:30 em
line-height
Possible Values:
normal - без изменений
длинна
процент
Applies to : All elements
Описание: Отступ сверху
EXAMPLE: line-height:100%
------------------------------
Color and Background Properties
color
Possible Values:
цвет
Applies to : All elements
Описание: Цвет
EXAMPLE: color:#f00000
backgroung-color
Possible Values:
цвет
Applies to : All elements
Описание: Цвет фона элемента
EXAMPLE: background-color:#f00000
background-image
Possible Values:
none - нет
URL
Applies to : All elements
Описание: Фоновое изображение
EXAMPLE: background-image:URL(cool.gif)
background-repeat
Possible Values:
repeat - размножает фоновое изображение во всех направлениях
repeat-x - размножает фоновое изображение вертикально
repeat-y - размножает фоновое изображение горизонтально
no-repeat - не повторяющиеся изображение
Applies to : All elements
Описание: Повторения фонового изображения
EXAMPLE: background-repeat:no-repeat
background-attachment
Possible Values:
scroll - фоновое изображение скроллится всесте с содержанием
документа
fixed - не скроллится. Фиксируется в одном месте
Applies to : All elements
Описание: Возможность прокрутки фонового изображения
EXAMPLE: background-attachment:fixed
background-position
Possible Values:
процент от длинны + процент от высоты
top, middle, bottom - одно из значений
left, center, right - одно из начений
расстояние от левого края + расстояние от вершины
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%
------------------------------
Classification
display
Possible Values:
none - не отображается
block - разбивает линию ( = строку ) до и после элемента.
inline - не разбивает линию ( = строку ). Т.е. элемент можен
находится на одной линии с другими элементами.
list-item - разбивает линию ( = строку ) до и после элемента +
добавляет маркер как у list-item элементов
Applies to : All elements
Описание: Определяет как будет отображатся элемент.
EXAMPLE: display:none
white-space
Possible Values:
normal - "сжимает" несколько подряд идущих пробелов в один
pre - допускает отображение несколькольких подряд идущих пробелов
nowrap - не допускает перенос строки без тага <BR>
Applies to : Block-level elements
Описание: Оприделяет как будут отображатся пробелы между элементами
EXAMPLE: white-space:nowrap
list-style-type
Possible Values:
disc, circle, square, decimal, lower-roman, upper-roman,
lower-alpha или upper-alpha
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:
none - нет
URL
Applies to : Elements with display value list-item
Описание: Задает вид list-item маркера в виде картинки
EXAMPLE: list-style-image:URL(cool.gif)
list-style-position
Possible Values:
inside - при переносе следующие строки будут отображатся без
отступа
outside - по умолчанию
Applies to : Elements with display value list-item
Описание: Определяет положение маркера в зависимости от list item
элемента
EXAMPLE: list-style-position:inside
------------------------------
Box Properties
margin-top
Possible Values:
длинна
процент
auto - автоматически
Applies to : All elements
Описание: Определяет отступ сверху
EXAMPLE: margin-top:100
margin-right
Possible Values:
длинна
процент
auto - автоматически
Applies to : All elements
Описание: Определяет отступ справа
EXAMPLE: margin-right:100%
margin-bottom
Possible Values:
длинна
процент
auto - автоматически
Applies to : All elements
Описание: Определяет отступ снизу
EXAMPLE: margin-bottom:100em
margin-left
Possible Values:
длинна
процент
auto - автоматически
Applies to : All elements
Описание: Определяет отступ слева
EXAMPLE: margin-left:100pt
margin
Possible Values: ^
Applies to : All elements
Описание: Обобщает все вышеперечисленные свойства
EXAMPLE: background:100pt
padding-top
Possible Values:
длинна
процент
Applies to : All elements
Описание: Отступ от верхнего border'а
EXAMPLE: padding-top:100pt
padding-right
Possible Values:
длинна
процент
Applies to : All elements
Описание: Отступ от правого border'а
EXAMPLE: padding-right:100%
padding-bottom
Possible Values:
длинна
процент
Applies to : All elements
Описание: Отступ от нижнего border'а
EXAMPLE: padding-bottom:100em
padding-left
Possible Values:
длинна
процент
Applies to : All elements
Описание: Отступ от левого border'а
EXAMPLE: padding-top:100
padding
Possible Values: ^
Applies to : All elements
Описание: Обобщает все вышеперечисленные свойства
EXAMPLE: padding:100px
border-top-width
Possible Values:
длинна
thin, medium или thick
Applies to : All elements
Описание: толщина верхнего border'а
EXAMPLE: border-top-width:100pt
border-right-width
Possible Values:
длинна
thin, medium или thick
Applies to : All elements
Описание: толщина правого border'а
EXAMPLE: border-right-width:thick
border-bottom-width
Possible Values:
длинна
thin, medium или thick
Applies to : All elements
Описание: толщина нижнего border'а
EXAMPLE: border-bottom-width:100em
border-left-width
Possible Values:
длинна
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:
длинна
процент
Applies to : Block-level and replased elements
Описание: ширина элемента
EXAMPLE: width:10%
height
Possible Values:
длинна
процент
Applies to : Block-level and replaced elements
Описание: высота элемента
EXAMPLE: height:100pt
float
Possible Values:
left - слева
right - справа
none - по умолчанию
Applies to : All elements
Описание: расположение элемента
EXAMPLE: float:right
clear
Possible Values:
left - слева
right - справа
both - c двух сторон
none - по умолчанию
Applies to : All elements
Описание: расположение других элементов вокруг данного
EXAMPLE: clear:both
------------------------------
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 )
------------------------------
Percentage Units
Syntax : "+" или "-" затем [число] плюс "%" ( без пропусков )
Example : -566%
------------------------------
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%)
Все примеры отображают один и тот же цвет
------------------------------
URLs
Syntax : "URL" потом в скобках приводится ссылка.Ссылку также можно
помимо скобок заключить в одинарные или двойные кавычки ( без пропусков )
Example : URL('cool.gif')
Copyright (c) 1999 wtReu <[email protected]>. All rights reserved.
Данная статья является моей интелектуальной собственностью и
защищается законом РФ об авторском праве.
Любое комерческое использование материалов данной статьи без
письменного разрешения автора запрещено.
При некомерческом использовании ссылка на автора обязательна.
Disclaimer (отмазка) : Возможно наличие ошибок и опечаток в этой
статье. Все мы люди и не застрахованы от неожиданностей. Если онные
будут Вами замечены - сообщите мне и я их обязательно исправлю. Также
можете присылать предложения и дополнения касательно этой статьи.
