|
CSS Cascading Style Sheets
 Имеются две версии: CSS1 и более продвинутая CSS2 Все подробности можно узнать (по английский разумеется) здесь http://www.w3.org/Style/CSS/.
Назначение стилей отдельным элементам
CSS позволяют назначить стиль визуального представления любому тэгу HTML, в том числе и тэгу <body>. Если стиль задан для тэга <body>, он будет наследоваться всеми остальными дочерними элементами: абзацами, заголовками, помещенными внутри этого родительского тэга-контейнера <body>, если для них не были прописаны собственные стили. Таким образом, не нужно прописывать тэги <font> и многочисленные атрибуты, для каждого абзаца на странице - достаточно задать всего один стиль для тэга <body>. Ну и как же это сделать?
Назначаем стиль для BODY (Inline-стили)
Предположим, нам нужно, чтобы все абзацы отображались шрифтом Verdana, размером 14 пунктов, темно-синего цвета, жирного начертания. Пропишем атрибут style тэга <body>, дав ему соответствующие значения.
Синтаксис выглядит так:
<body style="font-family: Verdana; font-size: 14pt; color: #000099; font-weight: bold;">
Таким образом, и все абзацы на странице отображены как на хочется, и код не засорен тегами <font> и их атрибутами, что дает значительную экономию в размере файла, особенно когда на странице много текста! В данном примере используется встраивание стиля непосредственно в тэг - inline-стиль. Такой способ связывания CSS с HTML-файлом рекомендован в единичных случаях - если стиль нужно применить только к одному элементу и только на одной странице. Если же стиль необходимо применить к нескольким элементам на одной странице или к всем страницам сразу, рекомендованы другие способы связывания CSS и HTML, о коих поговорим чуть позже.
Внедрение
Назначим стили нескольким элементам одной страницы - т.е. создадим внедренную таблицу стилей. В предидущем примере мы создали стиль только для одного элемента, а теперь попробуем создать именно таблицу стилей. В любом месте контейнера HEAD (между тэгами <head> и </head>) создаем внедренную таблицу стилей, в которой пропишем сразу несколько правил для тэга: <body> и тэгов заголовков <h1> <h2>
Синтаксис:
<head>
<style type="text/css">
<!--
body {
font-family: Verdana;
font-size: 14pt;
color: #000099;
}
h1 {
font-family: Arial;
font-size: 20px;
color: #FF0000;
font-weight: bold;
}
h2 {
font-family: Tahoma;
font-size: 18px;
color: #666666;
font-weight: bold;
font-style: italic;
}
//-->
</style>
</head>
Связывание и Импорт
Помимо встраивания и внедрения используются способы импортирования и связывания таблиц стилей. Это наилучшие способы для единого стилевого оформления нескольких или даже всех страниц сайта. При этом вся таблица стилей хранится в одном файле со стандартным расширением - .css Создаем в Блокноте файл и сохраняем как..., но не как текстовый, а назовем его style.css
Синтаксис будет такой-же как и в предидущем примере:
body {
background: url(bg_1.gif) #000080;
font-family: Verdana;
font-size: 14pt;
color: #000099;
}
h1 {
font-family: Arial;
font-size: 20px;
color: #FF0000;
font-weight: bold;
}
h2 {
font-family: Tahoma;
font-size: 18px;
color: #666666;
font-weight: bold;
font-style: italic;
}
В любом месте контейнера HEAD (между тэгами <head> и </head>), на нашей HTML странице прописываем тэг ссылки на внешний CSS файл.
Пример:
<link href="style.css" rel="stylesheet" type="text/css">
Вот и все! Как Вы наверно уже заметили вот эти теги: <style type="text/css"> в файле style.css мы не пишем, так как броузер и так прекрасно поймет, что это таблица стилей по расширению файла - .css
Импорт
Для импортирования файла таблицы стилей (в том числе с другого сервера) мы должны прописать в любом месте между тэгами <head> и </head> внутри тэга-контейнера <style> такую строку:
<head>
<style type="text/css">
<!--
@import: url (style.css);
//-->
</style>
</head>
Помимо адреса импортируемой таблицы стилей можно прописать в тэге-контейнере <style> любые правила CSS, которые могут корректировать правила, заданные в импортируемой таблице. Эти правила (внедренные) описаны выше. Внедренные правила приоритетнее импортированных при анализе страницы броузером, именно поэтому они могут корректировать стили, импортированные извне.
Приоритеты таблиц стилей
- Inline-стили встроенные с помощью атрибута style непосредственно в тэги документа - наивысший приоритет, будут применены броузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями
- внедренные стили в тэге-контейнере <style> в "шапке" страницы - меньший приоритет, будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями.
- импортированные стили внешнего файла .css, связанные с документом с помощью свойства: @import в тэге-контейнере <style> - приоритет еще меньше, применяются когда отсутствуют аналогичные правила CSS встроенных и внедренных стилей.
- связанные стили, присоединенные к html-файлу посредством тэга <link> - наименьший приоритет.
Таким образом, зная последовательность анализа броузером таблиц стилей, мы можем создать одну общую связанную таблицу для всех страниц сайта и при этом гибко управлять стилями отдельных страниц и отдельных элементов на странице. Именно с этой особенностью и связано слово "каскадные" в названии CSS ( Cascading Style Sheets ) - несколько таблиц стилей, присоединенных к html-файлу, анализируются броузерем "каскадом" в порядке приоритетности.
Селекторы CSS
Правила каскадных таблиц стилей, в которых в качестве селектора используются тэги HTML (о них мы уже поговорили), влияют на отображение всех элементов данного типа в документе. Следующее правило отображает без подчёркивания все ссылки.
<style type="text/css">
<!--
a { text-decoration:none; }
//-->
</style>
CSS дает возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – используя параметр class="имя класса" или идентификатор ID="имя элемента", присваивающиеся любому элементу страницы.
Селектор class
В файле style.css пишем такой пример:
.style1 { color: black; }
.style2 { color:blue; background-color: green; }
Заметим что все селекторы class в отличии от селекторов тэгов начинаются с точки например .style1
Для отображение нужных нам элементов в соответствии с созданными правилами используем на странице HTML следующий код:
<h1 class=style1>Заголовок будет черный как и закзали</h1>
<p class=style2>Абзац будет синим на зеленом фоне</p1>
<td class=style2>Текст в ячейке таблицы будет синим на зеленом фоне</td>
<div class=style2>Текст будет синим на зеленом фоне</div>
Поясню, что <div></div> - это универсальный элемент на уровне блока-контейнера. Есть еще inline - встраиваемый тэг <span></span> с помощью которого применяя CSS можно переопределять отдельные элементы. Синтаксис для использовния с селекторами class такой-же как и для остальных элементов - <span class=style2>Текст будет синим на зеленом фоне</span>
Селектор id
Параметр ID задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу HTML-документа. Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:
#styleID { color:red; background-color: blue; }
В HTML-файле используем следующий код:
<p ID=styleID>Абзац красного цвета на синем фоне</p>
Псевдо-элементы
Псевдо-элементы являются особой группой, позволяющих объединять несколько стилей для какого-либо объекта. Например можно задать свойства для первой буквы параграфа. Назначаем для тэга P псевдо-элемент first-letter, в котором устанавливаем различные стили: p:first-letter { float:right; font-size:12pt; color: #FF0000; }
- :first-letter - определяет стили для первой буквы объекта.
- :first-line - определяет стили для первой строки объекта.
- :hover - определяет стили для элемента, когда курсор мыши подходит к ссылке, часто используется вместе с псевдоклассами :active, :link и :visited
На этом пока и остановимся...
Честно говоря, о CSS да и о HTML можно еще ой как много чего написать, но я и задачу такую перед собой не ставил - написать обо всем на свете! Если тема Вам любопытна, то скачав справочник по HTML - Zip 124Kb можно узнать подробнее о всех HTML тэгах, а также о многом другом. Да и на странице полезные ресурсы, есть инфо о других источниках знаний.
|
ICQ 310319647
