CSS(кстати этот текст - элемент CSS)


Источник: 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 (ссылки) будут синими. При нажатии ( в активном состоянии ) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание. Очень эффектный прием)))))


   Перепечатка материалов разрешается, только после письменного разрешения автора (e-mail). При перепечатке любого материала с журнала видимая ссылка на источник www.wmaster.ru и все имена, ссылки авторов обязательны.
© Copyright Wmaster Design Group  2002. © Все права защищены. Designed by WWW.DESIGN.ST/udio