About Css
Так что это такое - Сss? Cascading Style Sheets ( Таблицы Каскадных Стилей ).
Css - это язык содержащий набор свойств для определения внешнего вида документа.
С его помощью дизайнер имеет полный контроль над стилем и расположением каждого
элемента веб страницы. Это гораздо проще использования обычного набора HTML
тегов. Приведу пример: Вам нужно создать жирный красный подчеркнутый
текст.
HTML EXAMPLE: <font color="red"><strong><u>Hello
World</u></strong></font>
А если подобный стиль нужно использовать несколько раз? Хорошо если раз 5, а если 10-20? Вот тут нам и поможет Сss. Существует три вида таблиц стилей: Внутренние таблицы стилей, Глобальные таблицы стилей и Связанные таблицы стилей. Внутриние таблицы стилей ( Inline Style Sheets ) мало чем отличаются от HTML тегов. Глобальные ( Global Style Sheets ) определяют стиль элементов во всем документе. Связанные ( Linked Style Sheets ) могут быть использованы для нескольких документов и хранятся во внешнем файле. Подробнее об этом написано ниже.
Structure&Rules
Селекторы (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.
Как видно из примера, 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 --
Эти псевдоклассы элемента <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 (ссылки) будут синими. При нажатии ( в активном состоянии ) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание. Очень эффектный прием.
Inline Style Sheets
Как уже говорилось, использование Внутрених стилей мало чем отличается от
использования обычных 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 теги
Global Style Sheets
Глобальные стили задают вид элементов всего документа. Для этого используется
тег <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" станут жирными.
Linked Style Sheets
Связанные таблицы стилей используются для придания нескольким документам одного стиля. Хронятся они в отдельном файле. Пример (файл styles.css):
Как видите, это очень похоже на 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>