 |
 |
 |
|
|
||
 |
|
|
|
|
|
||
|
Более чем вероятно, что Вы хоть один раз в своей жизни использовали для своей работы серьезный текстовый редактор, типа Microsoft Word или Open Office Writer. И наверное, вы использовали там т.н. "Стили" - набор форматирований, собранных в один пакет. Например, в Microsoft Word есть стандартный стиль - шрифт Arial, размер шрифта 12, цвет черный, выравнивание текста по обоим краям. Выделив текст, можно применить к нему стиль. Потом, если необходимо, например, изменить размер шрифта во всех измененных отрезках текста, достаточно изменить настройки стиля.
В мире Web таблицы стилей выполняют точно такую же функцию - показывают набор форматирований для различных тегов, или т.н. классов - набор форматирований для любого тега, отрезка текста и т.п. В мире Web таблицы стилей называют сокращенно CSS (Cascading Style Sheet - каскадные таблицы стилей).
 | CSS (Cascading Style Sheet - Каскадные таблицы стилей) - специальный язык, применяемый вместе с языком HTML для применения к любым объектам наборам форматирований. |
Начнем мы изучать стили с не совсем обычного примера. Откройте ваш документ, в любое место между тегами <head> и </head> впишите:
<style>
p{text-indent:20px}
</style>
Откройте вашу страницу в браузере. Если все правильно, в каждом параграфе появится отступ первой строки, равный 20 пикселям.
Есть 3 вида таблиц стилей - внутритекстовые, постраничные и вынесенные.
Внутритекстовые таблицы стилей применяются только к одному тегу в качестве атрибута.
|
| Атрибут - свойство HTML тега, имеющее определенное значение или набор значений. В данном случае это атрибут style. |
Например:
<span style="font-family:arial">arial</span>
span - тег, style - его атрибут, имеющий набор (в данном примере из одного форматирования) форматирований.
А что означает тег <span>?
Как мы написали выше, атрибут style можно применять только к тегам. Но, тег <p> и тег <div>, который мы изучим в одном из следующих уроков разделяют текст пустыми строками. Тег <span> позволяет выделить отрезок текста внутри тега <p>(<div>) и применить к нему любой стиль или скрипт.
 |
<span> - выделяет произвольный отрезок текста, позволяя применить к нему любой стиль или скрипт. |
Постраничные таблицы стилей - это уже описанные нами теги <style> и </style>, помещаемые в заголовок страницы (теги <head>).
В них вы можете настроить неограниченное количество тегов, классов. После каждого тега ставятся скобки {}, между которыми помещается набор стилей.
Один и тот же набор может относиться к нескольким тегам, классам. Тогда их перечисляют через запятую. Например:
h1,h2{text-align:center}
Эта запись означает, что заголовки 1 и 2 уровня во всем документе должны быть выровнены по центру. Если один или несколько заголовков
этого же уровня должны отличаться от остальных, можно использовать внутритекстовые стили.
|
<style> и </style> - постраничной таблицы стилей. |
Последний тип CSS - вынесенный. Для этого создается отдельный текстовый файл с расширением css. Например, у вас есть страница (несколько страниц). В папку со страницей вы помещаете ваш css файл. После этого на этот файл можно ссылаться с неограниченного количества страниц. При разработке сайтов этот метод самый эффективный и самый распространенный. Иногда используется внутритекстовый стиль. Постраничный стиль практически не используется.
Вынесенная таблица стилей загружается на страницу таким тегом: <link type="text/css" rel="stylesheet" href="путьКФайлу" />. Этот тег пишется в головной части страницы (между <head> и </head>). В вынесеной таблице(файл.css) никогда не пишутся теги <style>.
Если Вам нужно один тег сделать с другим оформлением, вы можете использовать внутритекстовый стиль. Однако, открывая страницу, Вы не видите улучшение. Браузер посчитал, что вынесенные стили важнее. Нужно указать ему, что один или несколько стилей внутри текста важнее. Для этого применяется податрибут !important
Например:
Содержание css таблицы:
p{text-align:left};
Текст:
<p style="text-align:center!important">
Обратите внимание на то, что нет пробела между значением стиля и !important.
И наконец, то, о чем мы так долго говорим - классы! Класс - стиль, применимый к любому тегу, не зависящий от настроек самого тега. (Однако некоторые форматирования не поддерживаются разными тегами. В этом случае они не будут применены.) Например, мы создадим таблицу стилей, где укажем отображаться заголовки 1 уровня 24 шрифтом. Но самый первый заголовок в каждой странице, также первого уровня, должен быть больше и другого цвета. В таблице стилей напишем .вашКласс (Например: .heading(в таблице стилей обязательно с точкой)). Теперь пишем: <h1 class="heading">Заголовок</h1>(Имя класса без точки в документе). Первый заголовок отобразится не так, как обычные заголовки 1 уровня, а так, как ему указывает класс. Это происходит из-за приоритетов стилей.
Приоритет таблицы стилей всегда выше, чем приоритет атрибутов тега. Но, в самих таблицах наименьший приоритет имеют теги, затем классы, после селекторы, и наконец стили с меткой !important.
Мы упомянули селекторы. Что это?
Когда мы будем изучать JavaScript, для доступа к различным объектам, например изображениям, полям форм и т.п. мы будем использовать селекторы - метки объекта с уникальным названием каждого объекта. Это значит, что если одни и те же классы мы можем использовать сколько угодно, для любого количества объектов, каждый селектор относится только к одному объекту (изображению, полю формы и т.п.).
Селектор - это атрибут id тегов разметки (кроме body), <a>, <img />, полей форм или самой формы.
Значение селектора - уникальное имя (придуманное Вами) для каждого объекта. В таблицах стилей селектор пишется так:
#имяСелектора {команды оформления}
Поскольку каждый селектор отвечает только за один тег, то и команды должны быть соответствующими для этого тега.
Каждый тег, кроме тега <body>, окружен родительским тегом. Если Вы пишите CSS свойство родительскому тегу, то теги, заключенные в нем, если они не определены классом или селектором, унаследуют CSS свойство тега родителя. Например, если вы напишите в теге <p> несколько тегов <span>(<em>, <strong>, <img /> и т.д.), то любое свойство тега <p>, определенное CSS, будет передано и на теги <span>.
Что если Вам нужно изменить все списки, но не в теге body, а только в определенных тегах div? Можно использовать многоуровневые стили. Например, назначив блоку класс .blockwithol, можно изменять все списки ol(ul, dl и что угодно) такой коммандой:
.blockwithol ol
В многоуровневых стилях родительский тег стоит слева, а справа - наследующий. Количество наследующих тегов может быть любым, причем их можно перечислять через запятую.
.par div ol,dl
Эта запись означает, что данный стиль унаследуют только теги ol и dl, расположенные в любых блоках, чей родительский блок имеет класс par.
Позади лишь самое легкое. Впереди нас ждут сами команды языка CSS! Начнем с оформления текста!
uroki.webservis.ru