From: wtReu <wtreu@zmail.ru >
Subject: Краткое описание CSS (Cascading Style Sheets) на примерах.
CSS - Cascading Style Sheets
Copyright (c) 1999 wtReu <wtreu@zmail.ru >. All rights reserved.
------------------------------
About Css
Так что это такое - Сss? Cascading Style Sheets ( Таблицы Каскадных
Стилей ). Css - это язык содержащий набор свойств для определения
внешнего вида документа. С его помощью дизайнер имеет полный контроль
над стилем и расположением каждого элемента веб страницы. Это гораздо
проще использования обычного набора HTML тегов. Приведу пример: Вам
нужно создать жирный красный подчеркнутый текст.
HTML EXAMPLE: <font color="red"><strong>Hello World</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 (ссылки) будут синими, при
нажатии ( в активном состоянии ) меняя цвет на красный, и при
подведении курсора мышки исчезнет подчеркивание.
Как уже говорилось, использование Внутренних стилей мало чем
отличается от использования обычных HTML тегов. Они задают стиль
только одному элементу дакумента при помоши атрибута style в HTML таге.
HTML EXAMPLE:
<font color="blue" size="3" face="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 станут жирными.
Связанные таблицы стилей используются для придания нескольким
документам одного стиля. Хронятся они в отдельном файле.
Пример (файл 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="путь до файла">
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 <wtreu@zmail.ru>. All rights reserved.
Данная статья является моей интелектуальной собственностью и
защищается законом РФ об авторском праве.
Любое комерческое использование материалов данной статьи без
письменного разрешения автора запрещено.
При некомерческом использовании ссылка на автора обязательна.
Disclaimer (отмазка) : Возможно наличие ошибок и опечаток в этой
статье. Все мы люди и не застрахованы от неожиданностей. Если онные
будут Вами замечены - сообщите мне и я их обязательно исправлю. Также
можете присылать предложения и дополнения касательно этой статьи.
1019 Прочтений • [Краткое описание CSS (Cascading Style Sheets) на примерах. (web http css)] [08.05.2012] [Комментариев: 0]
Vova
