CSS (Cascading Style Sheets) - язык для управления стилем Web-страниц.
Применение CSS позволяет значительно сократить объем HTML-документов, особенно если у вас имеется множество страниц с однотипным стилем и, в то же время, упростить работу по созданию и добавлению новых документов. Сохранив описание различных стилей в отдельных файлах, вы сможете с легкостью манипулировать стилями.
Описание CSS Файлы стилей - обычные текстовые файлы, содержащие описание стиля на языке CSS, и располагающиеся на Web-сервере. Для того, чтобы Web-страница, видела стиль,внутри тэга <BODY> делается ссылка на файл стиля, как показано в примере:
Файл style.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>
Файл index.htm
<html>
<head>
<title> Пример </title>
</head>
<LINK rel="stylesheet" type="text/css" href="style.css">
<body>
Содержание Документа
</body>
</html>
Если файл стилей находится на другом сервере, необходимо указать его полный URL
href="("http://...")" Можно описать стили и в коде Web-страницы, внутри тэга <BODY>, как показано в следующем примере:
Файл index.htm
<html>
<head> <title> Пример Глобальных Таблиц Стилей </title>
</head>
<STYLE type="text/css">
h1,h2,p{color:red; font-style:italic; font-size:32px}
.blue{color:blue}
#bold{font-weight:bold}
</STYLE>
<body>
</body>
<html>
В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах WEB-страницы. То есть все текстовые элементы, находящиеся внутри тэгов <H1></H1>, <H2></H2> и <P></P> на этой странице будут отображаться красным курсивом, с размером символа в 32 пикселя.
И последний вариант - описание стиля находится непосредственно внутри тэга элемента к которому применяется этот стиль, например:
<font style="color:blue; font-size:12pt; font-family:Arial"> Данный стиль применяется только к этой надписи </font>
Этот вариант не самый лучший, так как приводит к увеличению размера кода страницы и потере разделения отдельно стилей и отдельно данных страницы.
Теперь рассмотрим случай, когда необходимо присвоить стили не всем одинаковым элементам страницы, а только некоторым - для этого используется параметр CLASS = "имя класса" или идентификатор ID="имя элемента", которое может быть присвоено любому элементу страницы (параграф, таблица и т.д.).
Параметр CLASS применяется в случае, если необходимо создать одинаковый стиль для нескольких, но не всех элементов страницы (одинаковых или разных).
Например, указав в описании стиля:
.bold_italic {font-weight: bold; font-style:italic}
Можно сделать так, что только некоторые ячейки таблицы будут отображаться жирным курсивом. Для этого присвоим им стиль класса bi:
<TD CLASS="bold_italic">текст</TD>
Внимание! Названия классов чувствительны к регистру.
Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько - это уже класс.
Псевдоклассы и псевдоэлементы:
Псевдоклассы и псевдоэлементы - это особые классы и элементы, присущие CSS и автоматически определяемые поддерживеющими CSS браузерами.
Псевдоклассы различают разные типы одного элемента, создавая при определении собственные стили для каждого из них.
Псевдоэлементы являются частями других элементов, задавая этим частям отличный от элемента в целом стиль.
Синтаксис:
селектор:псевдокласс { свойства }
селектор.класс:псевдокласс { свойства }
селектор:псевдоэлемент { свойства }
селектор.класс:псевдоэлемент { свойства }
Список псевдоклассов и псевдоэлементов :
Псеводоклассы ссылок - эти псевдоклассы элемента <a href=" ">, обозначающего ссылку.
active (активная ссылка)
visited (посещенный ранее URL)
hover (псевдокласс, возникающий при поднесении курсора к ссылке, не работает в NN).
Псевдоэлементы первой строки. Может быть использован с block-level элементами (p, h1 и т.д.).Изменяет стиль первой строки этих элементов.
Псевдоэлементы первой буквы. Влияет не на всю строку, а только на первый символ.
ПРИМЕР :
a:link,a:visited {color:blue}
a:active {color:red}
a:hover {text-decoration:none}
В данном примере все ссылки будут синими. При нажатии (в активном состоянии) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание.
Краткое описание языка CSS
Свойства шрифта
• font-family
это свойство определяет используемый элементом шрифт. Если указать URL, то шрифт автоматически установится на компьютер пользователя
ПРИМЕР:font-family:Arial Black URL('arialblack.ttf')
• font-style
(normal, italic) Стиль элемента. Курсивный или обычный
ПРИМЕР:font-style:italic
• font-variant
(normal-нормальный, small-caps-заменяет все строчные буквы на заглавные)Варианты отображения шрифта. Нетскейп не поддерживает это свойство
ПРИМЕР:font-variant:small-caps
• font-weight
(normal-нормальный, bold-жирный, bolder-очень жирный, lighter-тонкий, 100-900-точная установка)Выделение (жирность) элемента
ПРИМЕР:font-weight:bold
• font-size
(XX%, XXpt, XXpx)Размер шрифта
ПРИМЕР:font-size:30pt
• font
(family, style, variant, weight, size) Объединяет все вышеизложенные свойства.
ПРИМЕР:font: italic bolder Arial 12pt
Свойства текста.
• text-decoration
(none, underline-подчеркнутый, overline-надчеркнутый, line-through-перечеркнутый, blink-мигающий)Стиль текста
ПРИМЕР:text-decoration:line-through
• letter-spacing
(XX-число)Расстояние между буквами
ПРИМЕР:letter-spacing:100
• vertical-align
(baseline, sub, super, top-text, top, middle, bottom, bottom-text, процент)Расположение элементов по отношению к другим элементам стоящих в одном ряду.
ПРИМЕР:vertical-align:top-text
• text-transform
(Capitalize-каждое слово начинается с большой буквы, UPPERCASE - каждая буква текста становится заглавной, lowercase - каждая буква текста становится маленькой.
ПРИМЕР:text-transform:Capitalize
• text-align
(left, right, center, justify)Выравнивание текста.
ПРИМЕР:text-align:right
• text-indent
(ед.длины или процент)Отступ текста.
ПРИМЕР:text-indent:30 em
• line-height
(ед.длины или процент)Отступ сверху
ПРИМЕР:line-height:100%
Свойства цвета.
• color
(#RRGGBB)Цвет элемента
ПРИМЕР:color:#f00000
• backgroung-color
(#RRGGBB)Цвет фона элемента
ПРИМЕР:background-color:#f00000
• background-image
(URL)Фоновое изображение
ПРИМЕР:background-image:URL("img.gif")
• background-repeat
(repeat - размножает фоновое изображение во всех направлениях, repeat-x - размножает фоновое изображение горизонтально, repeat-y - размножает фоновое изображение вертикально, no-repeat - не повторяющиеся изображение)Повтор фонового изображения
ПРИМЕР:background-repeat:no-repeat
• background-attachment
(scroll-скроллинг фонового изображения вместе с документом, fixed-фиксация фонового изображения)Режим прокрутки фонового изображения.
ПРИМЕР:background-attachment:fixed
• background-position
(%от ширины+%от высоты; top, middle, bottom; left, center, right; расстояние от левого края+расстояние от верхнего края)Положение фонового изображения
ПРИМЕР:background-position:50%0%
• background
(color, image, position, attachment, repeat)Объединяет все вышеизложенные свойства.
ПРИМЕР:background:no-repeat black fixed 50%0%
Свойства границ.
• margin-top
(длина, процент, auto)Отступ сверху
ПРИМЕР:margin-top:100
• margin-right
(длина, процент, auto)Отступ справа
ПРИМЕР:margin-right:100%
• margin-bottom
(длина, процент, auto)Отступ снизу
ПРИМЕР:margin-bottom:100em
• margin-left
(длина, процент, auto)Отступ слева
ПРИМЕР:margin-left:100pt
• margin
(top, right, left, bottom) Объединяет все вышеизложенные свойства.
ПРИМЕР:background:100pt
• padding-top
(длина, процент)Отступ от верхнего border'а
ПРИМЕР:padding-top:100pt
• padding-right
(длина, процент)Отступ от правого border'а
ПРИМЕР:padding-right:100%
• padding-bottom
(длина, процент)Отступ от нижнего border'а
ПРИМЕР:padding-bottom:100em
• padding-left
(длина, процент)Отступ от левого border'а
ПРИМЕР:padding-top:100
• padding
(left, right, top, bottom) Объединяет все вышеизложенные свойства. Можно задать несколько значений одновременно (до четырех) для разных сторон. Если установлено одно значение - задается единый отступ для всех сторон, если два - то задаются различные отступы для прилежащих сторон, а если четыре - то задаются индивидуальные отступы для всех сторон.
ПРИМЕР:padding:100px
• border-top-width
(длина, thin, medium, thick)толщина верхнего border'а
ПРИМЕР:border-top-width:100pt
• border-right-width
(длина, thin, medium, thick)толщина правого border'а
ПРИМЕР:border-right-width:thick
• border-bottom-width
(длина, thin, medium, thick)толщина нижнего border'а
ПРИМЕР:border-bottom-width:100em
• border-left-width
(длина, thin, medium, thick)толщина левого border'а
ПРИМЕР:border-left-width:medium
• border-width
(top-width, right-width, left-width, bottom-width) Объединяет все вышеизложенные свойства. Можно задать несколько значений одновременно (до четырех) для разных border'ов. Если установлено одно значение - задается единая толщина для всех сторон, если два - то задаются различная толщина для прилежащих сторон, а если четыре - то задаются индивидуальная толщина для всех сторон
ПРИМЕР:border-width: 15pt
• border-color
(цвет)Цвет border'а.
ПРИМЕР:border-color:green
• border-style
Стиль border'ов. Можно задать несколько значений одновременно (до четырех) для разных border'ов. Если установлено одно значение - задается единый стиль для всех сторон, если два - то задаются различные стили для прилежащих сторон, а если четыре - то задаются индивидуальные стили для всех сторон
ПРИМЕР:border-style: dotted groove
• border-top
(width, style, color) Объединяет все вышеизложенные свойства для верхнего border'а.
ПРИМЕР:border-top: 100em red groove
• border-right
(width, style, color) Объединяет все вышеизложенные свойства для правого border'а.
ПРИМЕР:border-right: 5pt magenta solid
• border-left
(width, style, color) Объединяет все вышеизложенные свойства для левого border'а.
ПРИМЕР:border-left: 15pc coral inset
• border-bottom
(width, style, color) Объединяет все вышеизложенные свойства для левого border'а.
ПРИМЕР:border-bottom: 30 orange outset
• border
(width, style, color) Объединяет все вышеизложенные свойства.
ПРИМЕР:border: thik black double
• width
(длина, процент)Ширина элемента
ПРИМЕР:width:10%
• height
(длина, процент)Высота элемента
ПРИМЕР:height:100pt
• float
(left, right)Расположение элемента
ПРИМЕР:float:right
• clear
(left, right, both)Расположение других элементов вокруг данного
ПРИМЕР:clear:both
Классификация.
• display
(none-не отображается, block-разбивает строку до и после элемента, inline-не разбивает строку , list-item-разбивает линию строку до и после элемента + добавляет маркер как у элементов списка)Определяет, как будет отображаться элемент списка
ПРИМЕР:display:none
• white-space
(normal - "сжимает" несколько подряд идущих пробелов в один, pre - допускает отображение несколькольких подряд идущих пробелов, nowrap - не допускает перенос строки без тега <BR>)Оприделяет, как будут отображаться пробелы между элементами
ПРИМЕР:white-space:nowrap
• list-style-type
(disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha)определяет вид маркера элемента списка.
ПРИМЕР:list-style-type:lower-alpha
• list-style-image
(URL)задает вид маркера элемента списка в виде картинки
ПРИМЕР:list-style-image:URL(cool.gif)
• list-style-position
(inside, outside)Определяет положение маркера в зависимости от элемента списка
ПРИМЕР:list-style-position:inside
• list-style
(type, position, image) Объединяет все вышеизложенные свойства.
ПРИМЕР:list-style:inside
Дополнения
Меры длины (Синтаксис: "+"/"-"XX ед.изм)
ПРИМЕР : -566pt
em - ems
высота используемого элементом шрифта
ex - x-height
ширина буквы "x" используемого элементом шрифта
px
пикселы
in
дюймы
cm
сантиметры
mm
миллиметры
pt
точки (1pt = 1/72in)
pc
picas (1pc = 12pt)
Процентные меры
ПРИМЕР : -566%
-/+%XX
Уменьшение/увеличение в процентах.
Цвета
Название цвета
ПРИМЕР : magenta
• #rrggbb
Цвет в RGB, где rr,gg,bb - шестнадцатиричное число.
ПРИМЕР : #00cc00
• rgb(x,x,x)
Цвет в RGB, где "х" десятичное число от 0 до 255.
ПРИМЕР : rgb(0,204,0)
• #rgb
Цвет в RGB, где r,g,b - шестнадцатиричное число.
ПРИМЕР : #0c0
• rgb (x%,x%,x%)
Цвет в RGB, где где "х%" число от 0.0 до 100.0.
ПРИМЕР : rgb(0%,80%,0%)
Некоторые хитрости управления стилями
# Указывайте относительные а не абсолютные размеры шрифтов.
Указывая абсолютные размеры шрифтов, вы лишаете людей, просматривающих ваши странички, возможности увеличивать или уменьшать размер шрифтов с помощью специальной кнопочки в броузере в соответствии с разрешением их дисплея и зрением. Шрифты будут отображаться только такого размера, который вы указали при написании странички.
Поэтому, желательно использовать для этих целей указание размеров в процентах. В этом случае размер шрифта будет меньше (больше) на указанное вами количество процентов, чем при оформлении его с помощью стандартного HTML-тега.
# Заключайте описания стилей в тэг комментариев
Это делается для того, чтобы устаревшие браузеры, не понимающие тэг <STYLE>, не выводили описания стилей на страничку как обычный текст.
Делается это очень просто.
<HEAD>
<STYLE type="text/css">
<!--
описания стилей
-- >
</STYLE>
</HEAD>
# Можно указать значения отступов вокруг объектов, как отрицательные величины.
Этот трюк позволяет накладывать один слой текста на другой и получать очень интересные и необычные результаты.
Следующий код создает заголовок, который выглядит трехмерным без использования графики.
<HEAD>
<STYLE type="text/css">
.text1 {
font-size: 80pt; font-weight: bold;
color: gray; margin-top: 100px; margin-left: 70px;}
.text2 {
font-size: 80pt; font-weight: bold;
color: black; margin-top: -140px; margin-left: 70px;}
</STYLE>
</HEAD>
<BODY bgcolor=white>
<DIV class="text1">Text</DIV>
<DIV class="text2">Text</DIV>
</BODY>
# Отступ в первой строке абзаца.
Укажите в описании стилей
P {
text-indent: 1cm;
}
Теперь первые строки каждого нового абзаца будут выводиться с "красной" строки.
