close

Вход

Забыли?

вход по аккаунту

?

ЯРД09-Таблицы стилей CSS

код для вставкиСкачать
Таблицы стилей CSS.
Основы dynamic HTML
Таблицы стилей CSS
• Cascading Style Sheets (CSS) - каскадные таблицы стилей.
• Цель CSS - отделить дизайн web-страницы от ее структуры и
содержания.
• В классическом HTML структура и дизайн были вперемешку:
рядом с текстовым абзацем его цвет, размер шрифта, тип
шрифта и т.п. При попытке изменить такой простой параметр,
как размер шрифта на своем сайте - придется переписывать все
странички.
• CSS позволяет назначить всем объектам стиль, описание
которого может храниться как в самом HTML-документе, так и
в отдельном файле. Используя CSS, можно изменить размер
шрифта во всех страницах сайта, исправив только один файл с
описанием стилей.
Таблицы стилей CSS
• Основным понятием CSS является стиль – набор правил
оформления и форматирования, который может быть
применен к различным элементам страницы.
• Другое важное понятие каскад.
Стандарт CSS определяет приоритеты, в порядке которых
применяются правила стилей, если для какого-то
элемента подходят свойства нескольких правил
одновременно (или, в редких случаях, в одном правиле
есть одноименные свойства). Это называется «каскадом»,
в котором для свойств рассчитываются приоритеты или
«веса», что делает результаты предсказуемыми.
Более частные определения имеют больший приоритет.
История CSS
• Термин «каскадные таблицы стилей» был предложен Хокон
Виум Ли в 1994 году. Совместно с Бертом Босом он стал
развивать CSS.
• 17 декабря 1996 года была издана рекомендация CSS1.
• Параметры шрифтов. Возможности по заданию
гарнитуры и размера шрифта, а также его стиля —
обычного, курсивного или полужирного.
• Цвета. Спецификация позволяет определять цвета текста,
фона, рамок и других элементов страницы.
• Атрибуты текста. Возможность задавать межсимвольный
интервал, расстояние между словами и высоту строки (то
есть межстрочные отступы)
• Выравнивание для текста, изображений, таблиц и других
элементов.
История CSS
• 12 мая 1998 года принята CSS2. Построена на CSS1 с сохранением
обратной совместимости. Добавление к функциональности:
• Блочная вёрстка. Появились относительное, абсолютное и
фиксированное позиционирование. Позволяет управлять
размещением элементов по странице без табличной вёрстки.
• Типы носителей. Позволяет устанавливать разные стили для
разных носителей (например монитор, принтер, КПК).
• Звуковые таблицы стилей. Определяет голос, громкость и т. д.
для звуковых носителей (например для слепых посетителей
сайта).
• Страничные носители. Позволяет, например, установить разные
стили для элементов на чётных и нечётных страницах при
печати.
• Расширенный механизм селекторов.
• Указатели.
Включение CSS в HTML
Существует целых четыре способа включения в HTMLдокумент таблицы стилей:
• Внедрение - позволяет задавать все правила таблицы
стилей непосредственно в самом документе
• Встраивание в теги документа - позволяет изменять
форматирование конкретных элементов страницы
• Импортирование - позволяет встраивать в документ
таблицу стилей, расположенную на сервере
• Связывание - позволяет использовать одну таблицу
стилей для форматирования многих страниц HTML
Включение CSS в HTML. Внедрение
• Описание стилей располагается в коде Web-странички,
внутри тега <STYLE type="text/css">... </STYLE>.
• Тег <STYLE> размещается внутри контейнера HEAD.
• Параметр type="text/css" является рекомендованным и
служит для указания браузеру использовать CSS.
• В этом случае описанные стили можно использовать для
элементов, располагающихся в пределах странички.
Включение CSS в HTML. Встраивание
• Описание стиля располагается непосредственно внутри
тега элемента, который описывается
• Это делается с помощью параметра STYLE, используемого
при применении CSS с большинством стандартных тегов
HTML.
<tag STYLE="..." >
• Этот метод нежелателен, он приводит к потере одного из
основных преимуществ CSS – возможности отделения
информации от описания оформления информации. Но
если необходимо описать лишь один элемент, этот
вариант расположения описания стилей также вполне
применим.
Включение CSS в HTML.
Импортирование
• Информация о стилях может располагаться в отдельном
файле. Расположение описания стилей в отдельном файле
имеет смысл в случае, если планируется применять эти
стили к большему, чем одна, количеству страниц.
• Создается обычный текстовый файл. Чаще с расширением
CSS (mystyles.css) . C помощью языка CSS в нем
описываются необходимые стили. Этот файл размещается
на Web-сервере.
Включение CSS в HTML.
Импортирование
• В теге <STYLE> с помощью свойства @import можно
импортировать внешнюю таблицу стилей в текущую
стилевую таблицу.
<style type="text/css">
@import url("имя файла") [типы носителей];
@import "имя файла" [типы носителей];
</style>
Включение CSS в HTML.
Импортирование
В качестве типа носителя выступают различные устройства:
• all - Все типы. Это значение используется по умолчанию.
• screen - Экран монитора.
• print - Печатающие устройства вроде принтера.
• aural - Речевые синтезаторы, а также программы для
воспроизведения текста вслух. Сюда, например, можно отнести
речевые браузеры.
• braille - Устройства, основанные на системе Брайля,
предназначенные для слепых людей.
• handheld - Наладонные компьютеры и аналогичные им
аппараты.
• projection - Проектор.
• tv - Телевизор.
Включение CSS в HTML.
Импортирование
• Т.к. происходит импортирование внешней таблицы стилей
в текущую стилевую таблицу, то чтобы не нарушались
правила каскада свойство @import следует задавать в
начале стилевого блока или связываемой таблицы стилей
перед заданием остальных правил.
Включение CSS в HTML. Связывание
• Связывание также используется для включения таблицы
стилей описанных во внешнем файле.
• Делается это с помощью тега LINK, располагающегося
внутри контейнера HEAD ваших страниц:
<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">
Первые два параметра этого тега являются
зарезервированными именами, требующимися для того,
чтобы сообщить браузеру, что на этой страничке будет
использоваться CSS.
Третий параметр – HREF= «URL» – указывает на файл,
который содержит описания стилей.
Тег LINK
• Располагается внутри контейнера <HEAD> .
• Не имеет конечного тега.
• Описывает взаимосвязь документа с другим
документом на сайте (внешним файлом ),
указывая его место в иерархической структуре
сайта.
• Допускается использовать несколько элементов
<LINK>.
Тег LINK
Атрибуты:
href
определяет URL внешнего объекта.
type
определяет MIME-тип для объекта, указанного в атрибуте
HREF.
rel
определяет тип взаимосвязи текущего документа с
подключаемым объектом, определенным атрибутом
HREF.
rev
Этот атрибут описывает обратную связь между текущим
документом и якорем, определённым атрибутом HREF.
Тег LINK
Возможные значения атрибутов REL и REV:
• home - указывает на заглавную страницу вашего сайта
• index - указывает на файл, содержащий информацию для
индексного поиска по текущему документу.
• toc, contents - указывают на файл, содержащий оглавление
данного документа.
• up, parent - указывает на "родительскую" страницу (документ,
стоящий на ступеньку выше в иерархической структуре вашего
сайта).
• child - указывает на "дочернюю" страницу (документ, стоящий
на ступеньку ниже в иерархической структуре вашего сайта).
Тег LINK
Возможные значения атрибутов REL и REV:
• next - указывает на следующую страницу в последовательности
документов (напр. следующую страницу электронного каталога,
документации или словаря).
• previous - указывает на предыдущую страницу в
последовательности документов.
• last, end - указывает на последнюю страницу в
последовательности документов.
• first - указывает на первую страницу в последовательности
документов.
Тег LINK
Возможные значения атрибутов REL и REV:
• glossary - указывает на файл, содержащий перечень терминов,
относящихся к текущему документу.
• copyright - указывает на страницу сайта, в которой говорится о
его создателях, авторских правах и т.п.
• help - указывает на страницу с подсказкой (напр. по навигации
по вашему сайту).
• stylesheet - указывает на файл, содержащий таблицу стилей
(CSS) для текущего документа. Браузер загрузит css-файл с
указанного в атрибуте HREF адреса и применит его к текущему
документу
Тег LINK
• Элемент LINK, к сожалению, используется web-мастерами
довольно редко.
• Почти все браузеры игнорируют информацию о положении
документа в структуре сайта - эта информация интересна
только индексирующим роботам поисковых систем.
• чаще используется для внедрения CSS из отдельного файла.
<LINK rel="stylesheet" type="text/css" href="style.css">
Синтаксис CSS
селектор { свойство: значение;}
селектор - элементы сообщают браузеру, где применить стиль.
Это могут быть имена HTML-тегов, идентификаторы элементов,
авторские классы, псевдоклассы, псевдообъекты и др.
свойство – свойство стиля . Свойства шрифта, цвета, текста, таблицы,
позиционирование и т.д.
body { color: blue; }
#form3 {color:red; background-color: blue}
Синтаксис CSS. Селекторы
• Правила каскадных таблиц стилей, в которых в качестве
селектора используются теги HTML, влияют на
отображение всех элементов заданного типа в документе.
< STYLE TYPE="text/css">
<!-A {text-decoration: none; }
p {color: red; }
-->
</STYLE>
Синтаксис CSS. Селекторы
• Если некоторые экземпляры нужно отобразить по-другому, CSS
реализует возможность присваивать стили не всем одинаковым
элементам страницы, а избирательно – для этого описывается класс.
• Для присвоения класса используется параметр CLASS = "имя класса».
< STYLE TYPE="text/css">
p.blue {color: blue }
.green {color: green;}
</STYLE>
…
<p class=“blue”> Синий абзац</p>
<h1 class=“blue”> А вот заголовок синим не стал</h1>
<h1 class=“green ”> А зеленым , пожалуйста. И абзац тоже может стать
зеленым. </h1>
Синтаксис CSS. Селекторы
• Присвоение стилей с помощью идентификаторов применяется
в случае, если данному идентификатору соответствует только
один элемент на странице. Если элементов, которым необходимо
присвоить такой стиль, несколько – это уже класс.
• Параметр ID задаёт уникальное имя элемента, которое
используется для ссылок на него в сценариях и таблицах
стилей. Параметр ID можно применять к любому элементу
документа.
< STYLE TYPE="text/css">
#myID {letter-spacing: 1em; }
</STYLE>
…
<P ID=myID> Разрежённые слова в абзаце</P>
Синтаксис CSS. Группирование
• Несколько селекторов можно группировать вместе, отделив их
друг от друга запятыми:
h1, p, h2{font-size: 12px}
• Вместо селекторов можно использовать маску *, заменяющую
собой все теги в текущем документе.
* { font-size: 14pt}
• Другим символом маски является знак >. Таким образом,
браузеру дается указание искать дочерние селекторы в
пределах определенного родительского. В данном примере
стиль применяется только к элементам LI спискам OL:
ol > li {list-style-type: decimal}
#news p { color: blue; }
Синтаксис CSS. Псевдоклассы
• Псевдокласы являются особой группой, позволяющей
объединять несколько стилей для какого-либо объекта.
• Например, вы можете задать свойства для первой буквы
параграфа. Для этого вы назначаете для тега P
псевдокласс :first-letter, в котором устанавливаете
различные стили:
p:first-letter { float: right; font-size: 2em; color: red;}
Синтаксис CSS. Псевдоклассы
В CSS2 определяются следующие псевдоклассы:
:link - еще не посещенные ссылки;
:visited - посещенные ссылки;
:hover - элемент, над которым в настоящее время находится
курсор;
:first-line - первая формированная строка абзаца;
:first-letter - первая буква абзаца;
Синтаксис CSS. Псевдоклассы
В CSS2 определяются следующие псевдоклассы:
:first-child -первый дочерний элемент другого элемента;
:active - активный в данный момент элемент ;
:focus - элемент, имеющий фокус ввода;
:lang - этот псевдокласс определяет текущий язык;
:before - определяет содержимое перед элементом;
:after - определяет содержимое после элемента.
Синтаксис CSS. Наследование
• В HTML некоторые элементы могут содержать другие. В
этих случаях вложенный элемент наследует правила
форматирования элемента-родителя.
• Некоторые свойства не наследуются вложенными
элементами от своих родителей, например свойство
background, но по умолчанию вложенные элементы будут
отображаться с фоном родительского элемента.
Синтаксис CSS. Наследование
• Наследование полезно при задании значений свойств,
применяемых к документу по умолчанию. Для этого
достаточно задать все свойства для элемента,
порождающего все остальные элементы страницы HTML.
Таким элементом является тело документа, определяемое
тегом BODY:
BODY {
font-family: "Times New Roman";
background: url(picture.gif) white;
}
Автор
loverett
Документ
Категория
Техническая документация
Просмотров
66
Размер файла
84 Кб
Теги
css
1/--страниц
Пожаловаться на содержимое документа