|
(таблицы каскадных стилей) |
|
Так что это такое - Сss?
Cascading Style Sheets ( Таблицы Каскадных Стилей ). Css - это язык
содержащий набор свойств для определения внешнего вида документа. С
его помощью дизайнер имеет полный контроль над стилем и
расположением каждого элемента веб страницы. Это гораздо проще
использования обычного набора HTML тегов. Приведу пример: Вам нужно
создать жирный красный подчеркнутый текст. Селекторы (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 - Эти псевдоклассы элемента , обозначающего ссылки. Псевдоклассы этого элемента -- 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: <font style="color:blue;font-size:12pt;font-family:Arial">Hello World</font> RESULT: 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" станут жирными. <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 II >> CSS Properties 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 • 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% • 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: 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% [ Вверх... ] • 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 • 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: margin: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 • font-style Possible Values: *Applies to : Описание: EXAMPLE: • font-style Possible Values: *Applies to : Описание: EXAMPLE: • font-style Possible Values: *Applies to : Описание: EXAMPLE: • font-style Possible Values: *Applies to : Описание: EXAMPLE: • font-style Possible Values: *Applies to : Описание: EXAMPLE: • font-style Possible Values: *Applies to : Описание: EXAMPLE: |
© SerJik\SerGray
2002 _ Design by
SerGray & Co.
| На главную |
