Связанные Таблицы Стилей
Связанные таблицы стилей используются для придания нескольким документам одного стиля и xранятся в отдельном файле. Это очень привлекательно, когда нужно выдержать сайт в одном стиле, не утруждая себя составлением таблиц для каждого документа.
Пример:
Файл styles.css
<style type="text/css">
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>
В самих же HTML-документах делается ссылка на этот файл при помощи тега <link> и выглядит это так:
<link rel="stylesheet" type="text/css" href="путь к файлу">
Пример.
<html>
<head>
<title> Просто еще один пример </title>
</head>
<link rel="stylesheet" type="text/css" href="styles.css">
<body>
Содержание документа
</body>
</html>
Например, следующая таблица стилей CSS (хранящаяся в файле "special.css") устанавливает зеленый цвет текста абзаца и окружает его сплошной красной рамкой:
p.special {color : green; border: solid red; }
Авторы могут связывать таблицы стилей с исходным документом HTML с помощью элемента link:
<!DOCTYPE html public "-//w3c//dtd html 4.0//en"
"http://www.w3.org/tr/rec-htm40">
<html>
<head>
<link href="special.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="special">в этом абзаце текст должен быть зеленым.
</body>
</html>
Свойства CSS.
Свойства Font
Font-family
Возможные значения:
[1] любой шрифт
*Применимо для: всех элементов
Описание: это свойство определяет используемый элементом шрифт. Если указать URL, то
шрифт автоматически установится на компьютер пользователя
ПРИМЕР:
font-family:Arial Black URL('arialblack.ttf’) font-style
Возможные значения:
[1] normaJ - без изменений
[2] italic - курсив
*Применимо для: всех элементов
Описание: стиль элемента Курсивный или обычный
ПРИМЕР:
font-style: italic font-variant
Возможные значения:
[1] normal - без изменений
[2] small-caps - заменяет все маленькие буквы на большие
*Применимо для: всех элементов
Описание: варианты отображения шрифта. Нетскейп не поддерживает это свойство
ПРИМЕР:
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-smail, x-email, small, medium, large, x-large, xx-large - любое из этих значений
[3] smaller, larger - любое из этих значений
*Применимо для: всех элементов
Описание: размер шрифта
ПРИМЕР:
font-size: 3 Opt
Font
Возможные значения:
[1] font-family
[2] font-style
[3] font-variant
[4] font-weight
[5] font-size
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства
ПРИМЕР:
font: italic bolder Arial 12pt
Свойства Text
Word-spacing
Возможные значения:
[1] длина (+)
[2] normal - без изменений
*Применимо для: всех элементов
Описание: расстояние между словами. Не работает ни в Нетскейпе, ни в 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] процент
*Применимо для: inline элементов
Описание: позиционирование элементов по отношению к другим элементам, стоящим в
одном ряду. Не работает в Нетскейпе
ПРИМЕР:
vertical-align: top-text
Text-transform
Возможные значения:
[1] none - нет
[2] Capitalize - каждое слово начинается с большой буквы
[3] UPPERCASE - каждая буква текста становится заглавной
[4] lowercase - каждая буква текста становится маленькой
*Применимо для: inline элементов
Описание: изменение текста. Не работает в Нетскейпе
ПРИМЕР:
text-transform:Capitalize
Text-align
Возможные значения:
[1] left –текст слева
[2] right -текст справа
[3] center - текст по центру
[3] justify - текст "растянут"
*Применимо для: block-level элементов
Описание: положение текста
ПРИМЕР:
text-align:right
Text-indent
Возможные значения:
[1]длина(+)
[2] процент (+)
*Применимо для: block-level элементов
Описание: отступ
ПРИМЕР:
text-indent:30 em
Line-height
Возможные значения :
[1] normal - без изменений
[2] длина(+)
[3] процент
*Применимо для: всех элементов
Описание: отступ сверху
ПРИМЕР:
Hne-height:100%
Свойства Color и Background
Color
Возможные значения:
[1] цвет (+)
"Применимо для: всех элементов
Описание: цвет
ПРИМЕР:
color:#f00000
Backgroung-color
Возможные значения:
[1] цвет (+)
*Применимо для: всех элементов
Описание: цвет фона элемента
ПРИМЕР:
background-color:#f00000
Backgurond image
Возможные значения:
[1] none - нет
[2]URL(+)
*Применимо для: всех элементов
Описание: фоновое изображение
ПРИМЕР:
background-image;URL(cooi.gif)
Background-repeat
Возможные значения:
[1] repeat -размножает фоновое изображение во всех направлениях
[2] repeat-x - размножает фоновое изображение горизонтально
[3] гереat-у - размножает фоновое изображение вертикально
[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] расстояние от левого края + расстояние от вершины
*Применимо для: block-level и replaced элементов
Описание: положение фонового изображения (работает с background-repeat равным repeat-x, repeat-y или no-repeat)
ПРИМЕР:
background-position :50%0%
Background
Возможные значения:
[1] background-color
[2] background-image
[3] background-position
[4] background-attachment
[5] background-repeat
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства
ПРИМЕР:
background:no-repeat black fixed 50%0%
Свойства Box
Margin-top
Возможные значения:
[1] длина (+)
[2] процент (+)
[3] auto – автоматически
*Применимо для: всех элементов
Описание: определяет отступ сверху
ПРИМЕР:
margin-top: 100
Margin-right
Возможные значения:
[1] длина (4)
[2] процент (+)
[3] auto – автоматически
"Применимо для: всех элементов
Описание: определяет отступ справа
ПРИМЕР:
margin-right 100%
Margin -bottom
Возможные значения:
[1] длина (+)
[2] процент (+)
[3] auto - автоматически
"Применимо для: всех элементов
Описание: определяет отступ снизу
ПРИМЕР:
margin-bottom: l00em
Margin-left
Возможные значения:
[1] длина (+)
[2] процент (+)
[3] auto - автоматически
*Прнменимо для: всех элементов
Описание: определяет отступ слева
ПРИМЕР:
margin-left: l00pt
Margin
Возможные значения:
[1] margin-top
[2] margin-right
[3] margin-left
[4] margin-bottom
*Применило для: всех элементов
Описание: обобщает все вышеперечисленные свойства
ПРИМЕР:
background: l00pt
Padding-top
Возможные значения:
[1] длина(+)
[2] процент (+)
*Применимо для: осех элементов
Описание: отступ от верхнего border'a
ПРИМЕР:
padding-top: l00pt
Padding-right
Возможные значения:
[1] длина(+)
[2] процент (+)
*Применимо для: всех элементов
Описание: отступ от правого border'a
ПРИМЕР:
padding-right:100%
border-top-widthЛ
Возможные значения:
[1] длина (+)
[2] thin, medium или thick
"Применимо для: всех элементов
Описание: толщина верхнего border'a
ПРИМЕР:
border-top-width: l00pt
Border-right-width
Возможные значения:
[1] длина (+)
[2] thin, medium или thick
*Применимо для: всех элементов
Описание: толщина правого border'a
ПРИМЕР:
border-right-width:thick
Border-bottom -width
Возможные значения:
[1] длина (+)
[2] thin, medium или thick
*Применимо для: всех элементов
Описание: толщина нижнего border'a
ПРИМЕР:
border-bottom -width: l00em
Border-left-width
Возможные значения:
[1] длина (,+)
[2] thin, medium или thick
•Применимо для: всех элементов
Описание: толщина левого border'a
ПРИМЕР:
border-left-width:medium
Border-width
Возможные значения:
[1] border-top-width
[2] border-right-width
[3] border-left-width
[4] border-bottom-width
*Применимо для: всех элементов
Описание: толщина border'ов. Можно задать несколько значений одновременно (до четырех)
для разных border'oв. Если установлено одно значение - задается единая толщина для всех
сторон, если два - то задаются различная толщина для прилежащих сторон, а если четыре -
то задаются индивидуальная толщина для всех сторон
ПРИМЕР:
border-width: 15pt
Border-color
Возможные значения:' [1]цвет(+)
*Применимо для: всех элементов
Описание: цвет border'a. Не работает в Нетскейпе
ПРИМЕР:
border-color: green
Border-style
Возможные значения:
[1] none
[2] dotted, dashed, solid, double, groove, ridge, inset, outset
*Применимо для: всех элементов .
Описание: стиль border'oв. Можно задать несколько значений одновременно (до четырех) для разных border'oв. Если установлено одно значение - задается единый стиль для всех сторон, если два - то задаются различные стили для прилежащих сторон, а если четыре -то задаются индивидуальные стили для всех сторон
ПРИМЕР-
border-style: dotted groove border-top
Возможные значения:
[1] border-top-width
[2] border-style [3] border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для верхнего border'a
ПРИМЕР:
border-top: l00em red groove
Border-right
Возможные значения:
[1] border-right-width
[2] border-style border-color
*Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для правого border’а
ПРИМЕР:
border-right: 5pt magenta solid
Border-left
Возможные значения:
[1] border-left-width
[2] border-style
[3] border-color
* Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для левого border'a
ПРИМЕР:
border-left: 15pc coral inset border-bottom
Возможные значения:
[1] border-bottom-width
[2] border-style
[3] border-color
"Применимо для: всех элементов
Описание: обобщает вышеперечисленные свойства для нижнего border'a
Пример:
border-bottom: 30 orange outset
border
Возможные значения:
[1] border-width
[2] border-style
[3] border-color
*Прнменнмо для: всех элементов
Описание: обобщает вышеперечисленные свойства
ПРИМЕР:
border: thik black double
Width
Возможные значения:
[1] длина (+)
[2] процент (+)
*Применимо для: block-level и replaced элементов
Описание: ширина элемента
ПРИМЕР:
width:.10%
height
Возможные значения:
[1] длина (+)
[2] процент (+)
"Применимо для: block-level и replaced элементов
Описание: высота элемента
ПРИМЕР:
height :100pt
Float
Возможные значения:
[1] left -слева
[2] right - справа
[3] none - по умолчанию
*Применимо для: всех элементов
Описание: расположение элемента
ПРИМЕР:
float:right
Clear
Возможные значения:
[1] left -слева
[2] right - справа
[3] both - с двух сторон
[4] попе - по умолчанию
*Применимо для: всех элементов
Описание: расположение других элементов вокруг данного
ПРИМЕР:
сlear:both
Классификация
Display
Возможные значения:
[1] попе - не отображается
[2] block - разбивает строку до и после элемента (т.е. элемент не может находиться на однойлинии с другими элементами)
[3] inline - не разбивает строку
[4] list-item - разбивает линию строку до н после элемента + добавляет маркер как у list-item элементов
*Применимо для: всех элементов
Описание: определяет, как будет отображаться элемент
ПРИМЕР:
display :none
White-space
Возможные значения:
[1] normaJ - "сжимает" несколько подряд идущих пробелов в один
[2] рге - допускает отображение нескольких подряд идущих пробелов
[3] nowrap - не допускает перенос строки без тera<BR>
"Применимо для: block-level элементов
Описание: определяет, как будут отображаться пробелы между элементами
ПРИМЕР:
white-space :поwrap
List-style-type
Возможные значения:
[1] disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha
[2] none - никакой
*Применимо для: элементов со значением display равным list-item
Описание: определяет вид list-item маркера. Если значение list-style-image равно попе или не
уточнено
ПРИМЕР:
list-style-type:lower-alpha
List-style-image
Возможные значения:
[1] none - нет
[2]URL(+)
*Применимо для: элементов со значением display равным list-item
Описание: задает вид list-item маркера в виде картинки
ПРИМЕР:
list-sty le-image:URL(cool.gif)
List-style-position
Возможные значения:
[1] inside - при переносе следующие строки будут отображаться без отступа
[2] outside - по умолчанию
*Применимо для: элементов со значением display равным list-item
Описание: определяет положение маркера в зависимости от list item элемента
ПРИМЕР:
list-sty le-position:inside
List-style
Возможные значения:
[1] list-style-type
[2] list-style-position
[3] list-style-image
*Применимо для: элементов со значением display равным list-item
Описание: обобщает вышеперечисленные свойства
ПРИМЕР:
list-style:inside
Практическое задание.