И снова основы CSS. Библиотека I2R. Рассматриваются основные моменты, структуры и правила 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

Все элементы H1 в документе будут красного цвета, размером в 20 точек (pt , point).

Классовые селекторы (Class Selectors):
CLASS -- класс стилей в css. Для его определения в css используется знак "."+ имя.
Все селекторы могут иметь разные классы. Это позволяет одинаковым элементам иметь различные стили.


EXAMPLE: H1.blue

Все элементы H1 с атрибутом CLASS="blue" стануть синими.

Классы могут быть также описаны без привязывания их к определенным элементам.


EXAMPLE: .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 

#boldunderline 

</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

В данном примере все элементы EM внутри элементов P будут иметь заданный стиль.

Придание нескольким элементам одинаковых свойств:
Скажем Вам нужно придать нескольким элементам Вашей веб страницы одинаковых свойств. В этом случае при определении элементоы перечисляутся через запятую.
h1,h2,h3,p,strong
Все элементы 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 

a:active 
a:hover

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

Перейти к следующему материалу - Chapter I

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

И снова основы CSS

[1] Про CSS

[2] Структуры и правила