И снова основы CSS
[1] Про 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 ) могут
быть использованы для нескольких документов и хранятся во внешнем файле.
Подробнее об этом написано ниже.
[2] Структуры и правила
Селекторы (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.
EXAMPLE:
<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):
Контекстные селекторы - это сочетания нескольких обыкновенных
селекторов. Стиль задается только элеметнам в заданной последовательности
в зависимости от каскадного порядка.
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, только влияет не на всю строку, а только на первый
символ.
EXAMPLE: a:link,a:visited
{color:blue}
a:active {color:red}
a:hover
{text-decoration:none}
В данном примере все элементы Anchor (ссылки) будут синими. При нажатии
( в активном состоянии ) поменяют цвет на красный. И при подведении
курсора мышки исчезнет подчеркивание. Очень эффектный прием :-)
Автор: Виталий Авдеев aka RAVEN
http://www.ard.h1.ru/studies.htm |