| Olegan | Дата: Понедельник, 02.04.2012, 15:41 | Сообщение # 1 |
|
| Так что это такое - Сss? Cascading Style Sheets ( Таблицы Каскадных Стилей ). Css - это язык содержащий набор свойств для определения внешнего вида документа. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы. Это гораздо проще использования обычного набора HTML тегов. Приведу пример: Вам нужно создать жирный красный подчеркнутый текст.
HTML пример:
Hello World
А если подобный стиль нужно использовать несколько раз? Хорошо если раз 5, а если 10-20? Вот тут нам и поможет Сss. Существует три вида таблиц стилей: Внутренние таблицы стилей, Глобальные таблицы стилей и Связанные таблицы стилей. Внутриние таблицы стилей ( Inline Style Sheets ) мало чем отличаются от HTML тегов. Глобальные ( Global Style Sheets ) определяют стиль элементов во всем документе. Связанные ( Linked Style Sheets ) могут быть использованы для нескольких документов и хранятся во внешнем файле. Подробнее об этом написано ниже.
Структура и правила
Селекторы (Selectors):
Любой элемент 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.
Пример:
Пример
Hello! Welcome To My Homepage!
Will Be Soon
Under Construction
Как видно из примера, 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 -- Эти псевдоклассы элемента , обозначающего ссылки. Псевдоклассы этого элемента -- 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 (ссылки) будут синими. При нажатии ( в активном состоянии ) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание. Очень эффектный прием.
Внутри таблиц стиля
Как уже говорилось, использование Внутрених стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помоши атрибута style в HTML теге.
HTML пример:
Hello World!
Результат:
Hello World!
Пример использования стиля внутри тэга:
Hello World
Результат:
Hello World!
Как можно заметить, код Inline Style Sheet Example получился больше чем HTML Example. Поэтому иногда разумнее использовать обычные HTML теги
Глобальные таблицы стилей
Глобальные стили задают вид элементов всего документа. Для этого используется тег
Этот заголовок написан крупным красным курсивом
Вот это слово - синие, a это -- жирное!!!
| |
