Немного о CSS
Так что это такое - СSS? Cascading Style Sheets (Таблицы Каскадных Стилей) - этоязык, содержащий набор свойств для описания внешнего вида любых HTML документов.
С его помощью дизайнер имеет полный контроль над стилем и расположением каждого
элемента веб страницы, что проще и гораздо функциональнее использования обычного
набора HTML тегов. Приведу пример: Вам нужно создать жирный красный подчеркнутый
текст.
ПРИМЕР HTML:
Какой-то текст А если подобный стиль нужно использовать несколько раз?
Хорошо если раз 5, а
если 10-20? Вот тут нам и поможет СSS. Существует три вида таблиц стилей:
Внутренние таблицы стилей, Глобальные таблицы стилей и Связанные таблицы стилей.
Внутренние таблицы стилей (Inline Style Sheets) при помощи специального атрибута
помещаются прямо в HTML теги. Глобальные (Global Style Sheets) определяют стиль
элементов во всем документе. Связанные (Linked Style Sheets) могут быть
использованы для нескольких документов сразу и хранятся во внешнем файле.
Подробнее обо всем этом написано ниже.
Структура и правила
Селекторы (Selectors):
Синтаксисис:
селектор {свойства}
Любой элемент HTML - это возможный CSS селектор. Свойства селектора определяют
стиль элемента, для которого он определен.
ПРИМЕР:
H1 {color:red; size:20pt;}Все элементы H1 в документе будут красного цвета, размером в 20 точек (pt,
point).
Классовые селекторы (Class Selectors):
Синтаксис:
селектор.класс {cвойства}
CLASS - атрибут элемента в HTML, определяющий его класс. В CSS можно описать
собственные стили для различных классов одних и тех же элементов.
ПРИМЕР:
H1.blue {color:blue; size:20pt;}Все элементы H1 с атрибутом CLASS="blue" станут синими.
Классы могут так же быть описаны без явного привязывания их к определенным
элементам.
Синтаксис:
.класс {свойства}
ПРИМЕР:
.green {color:green;}В данном случае все элементы с атрибутом CLASS="green" станут зелеными.
ID селекторы (ID Selectors):
Cинтакс:
#id {свойства}
ID - индивидуально именованный стиль. C его помощью можно создавать
стилистические исключения cреди элементов одного класса.
Индификаторы используются в основном для придания одному или нескольким
элементам одного класса индивидуальных свойств. Скажем, Вы создали класс blue -
синий курсив. Но Вам понадобился жирный подчеркнутый текст синим курсивом.
Конечно, можно создать новый класс, но зачем? Проще описать ID. Например
"boldunderline". И все элементы класса blue с значением ID "boldunderline"
станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств
класса blue и идентификатора boldunderline.
ПРИМЕР:
Здравствуйте, это моя домашняя страница.
"boldunderline"> Пока еще в стадии разработки ...
... Но скоро откроется
Как видно из
примера, атрибут ID может быть использован без указания класса
(последний параграф примера. Тогда параграф будет обладать только свойствами ID
"boldunderline" (в примере - жирный, подчеркнутый текст). Контекстуальные селекторы (Contextual Selectors): Контекстные
селекторы - это сочетания нескольких обыкновенных селекторов. Стиль задается только элеметнам в заданной последовательности в
зависимости от каскадного порядка. ПРИМЕР: P EM {color:silver;}В данном примере все элементы EM внутри элементов P будут иметь
заданный стиль. Придание нескольким элементам одинаковых свойств: Скажем Вам нужно придать нескольким элементам Вашей веб страницы
одинаковых свойств. В этом случае при определении селекторы перечисляутся через запятую перед блоком свойств. ПРИМЕР:
h1,h2,h3,p,strong {color:green; font-style:italic;}Все элементы h1, h2, h3, p и strong будут зелеными. Псевдоклассы и псевдоэлементы :
Синтаксис: селектор:псевдокласс { свойства } селектор.класс:псевдокласс { свойства } селектор:псевдоэлемент { свойства }
селектор.класс:псевдоэлемент { свойства } Псевдоклассы и псевдоэлементы - это особые классы и элементы, присущие CSS и автоматически
определяемые поддерживеющими CSS браузерами. Псевдоклассы различают разные типы одного элемента, создавая при определении
собственные стили для каждого из них. Псевдоэлементы являются частями других элементов, задавая этим частям отличный от элемента
вцелом стиль. Список псевдоклассов и псевдоэлементов : Anchor Pseudo Classes - эти псевдоклассы элемента , обозначающего ссылку.
Псевдоклассы этого элемента: (ссылка), 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: Вперед в будущее ПРИМЕР INLINE STYLE SHEET: Вперед в будущее Как можно
заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать только если необходимо задать
определенному элементу свой индивидуальный стиль, существующий в классификации CSS и нереализованный в HTML. Или же при необходимости
абсолютно позиционировть данный элемент. Глобальные Таблицы Стилей Глобальные стили задают вид элементов всего документа. Для
этого используется тег
Этот заголовок написан крупным красным курсивом
Вот это слово - синие, a это - жирное.В данном примере все элементы H1 будут написаны крупным красным курсивым, все элементы с
указанным классом BLUE будут синими , а все элементы с идентификатором ID="Bold" станут жирными. Для простоты вместо В самих же
HTML документах делается ссылка на этот файл при помощи тега . Выглядит это так: ПРИМЕР: Файл Index.html Содержание ДокументаНа
этом я заканчиваю первую часть руководства и перехожу ко второй части. Часть Il. Cвойства CSS Свойства Font font-family
Возможные значения: [1] любой шрифт *Применимо для: всех элементов Описание: это свойство определяет используемый элементом
шрифт. Если указать URL, то шрифт автоматически установится на компьютер пользователя ПРИМЕР: font-family:Arial Black
URL('arialblack.ttf')font-style Возможные значения: [1] normal - без изменений [2] italic - курсив *Применимо для: всех элементов
Описание: стиль элемента. Курсивный или обычный ПРИМЕР: font-style:italicfont-variant Возможные значения: [1] normal - без изменений
[2] small-caps - заменяет все маленькие буквы на большие *Применимо для: всех элементов Описание: варианты отображения шрифта.
Нетскейп не поддерживает это свойство ПРИМЕР: font-variant:small-capsfont-weight Возможные значения: [1] normal - без изменений
[2] bold - жирный [3] bolder - очень жирный (в MSIE не отличается от bold, в Нетскейпе от нормал) [4] lighter - тонкий (не
отличается от normal) [5] любое значение от 100 до 900 *Применимо для: всех элементов Описание: выделение (жирность) элемента ПРИМЕР:
font-weight:boldfont-size Возможные значения: [1] размер (+) [2] xx-small, x-small, small, medium, large, x-large, xx-large - л
юбое из этих значений [3] smaller, larger - любое из этих
значений *Применимо для: всех элементов Описание: размер шрифта ПРИМЕР: font-size:30ptfont Возможные значения: [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 - без изменений
*Применимо для: всех элементов Описание: расстояние между cловами. Не работает ни в Нетскейпе, ни в MSIE ПРИМЕР:
word-spacing:0.4em
[2] right - справа
[3] both - c двух сторон
[4] none - по умолчанию
*Применимо для: всех элементов
Описание: расположение других элементов вокруг данного
ПРИМЕР:
clear:bothКлассификация
display
Возможные значения:
[1] none - не отображается
[2] block - разбивает строку до и после элемента (т.е. элемент не может
находится на одной линии с другими элементами)
[3] inline - не разбивает строку
[4] list-item - разбивает линию строку до и после элемента + добавляет маркер
как у list-item элементов
*Применимо для: всех элементов
Описание: определяет, как будет отображаться элемент
ПРИМЕР:
display:nonewhite-space
Возможные значения:
[1] normal - "сжимает" несколько подряд идущих пробелов в один
[2] pre - допускает отображение несколькольких подряд идущих пробелов
[3] nowrap - не допускает перенос строки без тега
*Применимо для: block-level элементов
Описание: оприделяет, как будут отображаться пробелы между элементами
ПРИМЕР:
white-space:nowraplist-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 равно
none или не уточнено
ПРИМЕР:
list-style-type:lower-alphalist-style-image
Возможные значения:
[1] none - нет
[2] URL (+)
*Применимо для: элементов со значением display равным list-item
Описание: задает вид list-item маркера в виде картинки
ПРИМЕР:
list-style-image:URL(cool.gif)list-style-position
Возможные значения:
[1] inside - при переносе следующие строки будут отображаться без отступа
[2] outside - по умолчанию
*Применимо для: элементов со значением display равным list-item
Описание: определяет положение маркера в зависимости от list item элемента
ПРИМЕР:
list-style-position:insidelist-style
Возможные значения:
[1] list-style-type
[2] list-style-position
[3] list-style-image
*Применимо для: элементов со значением display равным list-item Описание: обобщает вышеперечисленные свойства
ПРИМЕР:
list-style:insideЧасть III. Дополнения
Меры длины
Синтаксис: "+" (можно опустить) или "-" затем [число] плюс [единица измерения]
(без пропусков)
ПРИМЕР:
-566ptЕдиницы длинны : ex - x-height, ширина буквы "x" используемого элементом шрифта
px - pixels, пикселы
in - inches, дюймы
cm - centimeters, сантиметры
mm - millimeters, миллиметры
pt - points, точка (1pt = 1/72in)
pc - picas (1pc = 12pt)
Процентные меры
Синтаксис : "+" или "-" затем [число] плюс "%" (без пропусков)
ПРИМЕР :
-566%Цвета
Синтаксис: [color]
ПРИМЕР :
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%)
Все примеры отображают один и тот же цвет
Ссылки
Синтаксис: "URL" , потом в скобках приводится ссылка.Ссылку также можно, помимо
скобок, заключить в одинарные или двойные кавычки (без пропусков)
