Источник: www.orc.net.ru
Автор: RomZes
.:: About Css ::.
Так что это такое - Сss? Cascading Style Sheets (
Таблицы Каскадных Стилей ). Css - это
язык содержащий набор свойств для
определения внешнего вида
документа. С его помощью дизайнер
имеет полный контроль над стилем и
расположением каждого элемента веб
страницы. Это гораздо проще
использования обычного набора HTML
тегов. Приведу пример: Вам нужно
создать жирный красный
подчеркнутый текст.
Например:
<font
color="red"><strong><u>Hello
World</u></strong></font>
А если подобный стиль нужно
использовать несколько раз? Хорошо
если раз 5, а если 10-20? Вот тут нам и
поможет Сss.
Существует три вида таблиц стилей:
-
Внутренние таблицы
стилей
-
Глобальные таблицы
стилей
-
Связанные таблицы стилей.
Внутрение таблицы стилей
( Inline Style Sheets ) мало чем отличаются от
HTML тегов. Глобальные ( Global Style Sheets
) определяют стиль элементов во всем
документе. Связанные ( Linked Style
Sheets ) могут быть использованы для
нескольких документов и хранятся во
внешнем файле. Подробнее об этом
написано ниже.
.:: Структура и правила ::.
Селекторы (Selectors)s: Любой элемент
HTML может иметь CSS селектор. Селектор
определяет стиль элемента, для
которого он создан.
Например
H1 {color:red;size:20pt;}
Все элементы H1 в документе будут
красного цвета, размером в 20 точек (pt
, point).
Классовые селекторы (Class Selectors):
CLASS -- класс стилей в css. Для его
определения в css используется знак
"."+ имя. Все селекторы могут
иметь разные классы. Это позволяет
одинаковым элементам иметь
различные стили.
Например
H1.blue {color:blue;size:20pt;}
Все элементы H1 с атрибутом
CLASS="blue" стануть синими. Классы
могут быть также описаны без
привязывания их к определенным
элементам.
Например
.green {color:green;}
В данном случае все элементы с
указанным атрибутом CLASS="green"
станут зелеными. ID селекторы (ID
Selectors):
ID-- индивидуально именованный
стиль. C его помощью можно создавать
стилистические исключения cреди
элементов одного класса. Для
определения в css используется знак
"#"+ имя. Индификаторы
используются в основном для
придания одному или нескольким
элементам одного класса
индивидуальных свойств. Скажем Вы
создали класс blue -- синий курсив. Но
вам понадобился жирный,
подчеркнутый текст синим курсивом.
Конечно, можно создать новый класс,
но зачем? Проще описать ID. Например
"boldunderline". И все элементы класса
blue с значением ID "boldunderline"
станут жирным подчеркнутым синим
курсивом. Произойдет как бы синтез
свойств класса blue и идификатора
boldunderline.
Например
<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):
Контекстные селекторы - это
сочетания нескольких обыкновенных
селекторов. Стиль задается только
элеметнам в заданной
последовательности в зависимости
от каскадного порядка.
Например
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 (ссылки)
будут синими. При нажатии ( в
активном состоянии ) поменяют цвет
на красный. И при подведении курсора
мышки исчезнет подчеркивание. Очень
эффектный прием)))))