На главную

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

Rambler's Top100

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

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

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

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

И снова основы 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

Автор: Виталий Авдеев aka RAVEN
www.ard.h1.ru

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100