- •Синтаксис таблиц стилей
- •Внутренние стили тегов.
- •Стили уровня документа.
- •6.2 Общие классы.
- •6.3 Псевдоклассы стилей
- •7. Наследование классов
- •7.1 Наследование свойств.
- •8. Свойства стилей
- •8.2 Обрамление элементов
- •8.4 Свойства шрифта текста.
- •8.5 Свойства текстов.
- •8.6 Свойства полосы прокрутки.
Каскадные таблицы стилей.
Таблицы стилей используются профессиональными полиграфистами для управления общим видом публикаций – фоном, шрифтом, цветом и тд.
В 1996г WWW Consortium разработал проект предложений по определению каскадных таблиц стилей CSS (cascading style sheet level 1). Сейчас этот проект стал стандартом для коммерческих разработчиков браузеров. В таблицах указывают следующие основные функции:
изменение расстояний между строками, словами и символами;
установка левого, правого, верхнего, нижнего полей элемента;
установка отступов элементов;
изменение размера, стиля, цвета и других атрибутов шрифтов;
изменение рамок;
включение фонового изображения и фонового цвета;
изменения формы, цвета и других атрибутов курсора и линеек прокрутки;
Каскад
Существует три способа присоединения стиля к тегу: внутренние стили, стили уровня документа и внешние таблицы стилей. В документах допускается использование одного или нескольких видов стилей. Стили из этих разных источников применяются к документу, соединяют и определяют свойства стилей, начиная с внешних таблиц через локальные стили документа и заканчивая внутренними стилями. Такое применение называется каскадом. Браузер определяет последовательность использования и разрешает конфликты между стилями.
Конфликты стилей разрешаются следующим образом:
Стили автора страницы важнее таблицы стилей читателя, которая в свою очередь важнее установок по умолчанию
Старшинство таблиц стилей в документе в порядке убывания: текущее задание стиля, встраиваемое в документ, связанные с документом внешние таблицы стилей.
Синтаксис таблиц стилей
Каждое определение называется правилом для тегов. Правила содержат селектор, за которым следует декларация(определение стиля). Декларация заключается в фигурные скобки. Каждая декларация имеет две части: название свойства и присваиваемое ему значение, разделенные двоеточием. Можно определять несколько значений в таком случае они разделяются точкой с запятой.
Если мы хотим определить один и тот же стиль для нескольких тегов можно перечислить их по отдельности.
P {font-size;12pt}
Ul { font-size;12pt}
Li { font-size;12pt}
HTML позволяет сделать тоже самое в более компактном виде разделяя селекторы запятой.
P,UL,Li { font-size;12pt}
Обычно понимающие стили браузеры применяют стили ко всем тегам без учета контекста. Однако стандарт CSS определяет возможность применения тегов только в определенном контексте документа когда он вложен в другие теги. Для создания контекстного селектора перечислите теги в том порядке в котором они должны быть вложены в вашем документе, начиная с самого внешнего не разделяя их запятыми:
OL Li {list-style:upper-alpha} прописные буквы
OL OL Li {list-style:upper-roman} большие римские цифры
OL OL OL Li {list-style:lower-alpha} строчные буквы.
Внутренние стили тегов.
Внутренний стиль является простейшим способом прикрепления стиля к тегу: нужно просто включить в тег атрибут STYLE со списком свойств и их значений. Браузер использует свойства стиля при выводе содержимого только этого тега.
<H1 style=”color:dark-lime;font-style:bold;font-size:14”> Text text text</H1>
Если указанное в теге противоречит указанным стилям всего документа, то стили всего документа для этого тега игнорируются. Диапазон действия стиля охватывает только этот тег и не захватывает остальные. Поскольку внутренние стили оказываются разбросанными по всему документу их отладка и поддержка может быть затруднительной. Используйте атрибут style экономно и только в тех случаях, когда по-другому нельзя достичь того же эффекта.
Стили уровня документа.
Реальная помощь таблиц стилей проявляется при помещении списка правил представления в заголовок документа. Теги <STYLE></STYLE>должны присутствовать между тегами <HEAD>. Все что находится между тегами представляет из себя правила стиля, которые должны применяться к документу.
<head>
<style type=text/css>
H1 {color:aqua;font-style:italic}
</style>
</head>
Важным атрибутом style является type. Атрибут type определяет тип текста или язык обработки событий. Таблицы стилей указывается как text/css (язык сценариев JavaScript, будет определен text/ JavaScript). Этот атрибут можно опустить так как браузер сам может определить язык стиля, но лучше его использовать чтобы исключить ошибки.
5. Внешние таблицы стилей
Существует возможность поместить определения стиля в отдельный файл с расширением .CSS.
Загрузить внешние таблицы стилей в документ можно двумя разными способами: с помощью тега LINK или команды импортирования @import style.
5.1. ссылки на внешний файл.
Ссылки осуществляются через LINK
<head>
<link rel=stylesheet type=text/css href=asdf.css>
</head>
Тег <link> создает связь между текущим документом и документом с таблицами стилей. Этот тег указывается в заголовке документа.
5.2 импорт внешних таблиц
Команда импорта записывается в заголовок документа и помещается в тег style. @import style принимает URL файла с таблицами стилей. Команда должна записываться перед обычными правилами, в противном случае все определения отменяются.
<head>
<style>
@import url (qwert.css);
Body {background:url(zxc.jpg)}
</style>
</head>
6. Классы стилей.
Классы позволяют создавать на уровне документа или во внешней таблице для одного тега несколько разных стилей, имеющих разные имена класса. Для применения класса стиля укажите его название в качестве значения атрибута class нужного тега. Классы бывают обычные, общие и псевдоклассы.
6.1 Обычные классы.
Определение класса состоит в добавлении через точку имени класса в качестве суффикса к имени тега, являющемуся селектором в правиле стиля. Именем класса может быть любая последовательность букв, цифр и дефисов, начинающаяся с буквы. Классы, как и селекторы, можно перечислять вместе с другими селекторами через запятую. Ограничением является запрещение вложенности классов (P.ewq.dsa)
<style>
P.ewq {font-style:italic;font-size:8;font-color:olive}
P.dsa {font-family:symbol;text-align;center}
H1,P.cxz {font-family:Arial;text-align:right}
</style>
Для того чтобы использовать некоторый класс, нужно добавить к тегу атрибут class.
<P class=ewq>Текст мелкий, курсивный, оливкового цвета</P>
<P class=dsa>Это разные символы выровненные по-центру</P>
<H1 class=cxz>Текст набранный шрифтом Arial и выравненный вправо</H1>