Таблицы стилей CSS. Основы dynamic HTML

Таблицы стилей CSS Cascading Style Sheets (CSS) - каскадные таблицы стилей. Цель CSS - отделить дизайн web-страницы от ее структуры и содержания. В классическом HTML структура и дизайн были вперемешку: рядом с текстовым абзацем его цвет, размер шрифта, тип шрифта и т.п. При попытке изменить такой простой параметр, как размер шрифта на своем сайте - придется переписывать все странички. CSS позволяет назначить всем объектам стиль, описание которого может храниться как в самом HTML-документе, так и в отдельном файле. Используя CSS, можно изменить размер шрифта во всех страницах сайта, исправив только один файл с описанием стилей.

Таблицы стилей CSS Основным понятием CSS является стиль – набор правил оформления и форматирования, который может быть применен к различным элементам страницы. Другое важное понятие каскад. Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят свойства нескольких правил одновременно (или, в редких случаях, в одном правиле есть одноименные свойства). Это называется «каскадом», в котором для свойств рассчитываются приоритеты или «веса», что делает результаты предсказуемыми. Более частные определения имеют больший приоритет.

История CSS Термин «каскадные таблицы стилей» был предложен Хокон Виум Ли в 1994 году. Совместно с Бертом Босом он стал развивать CSS. 17 декабря 1996 года была издана рекомендация CSS1. Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля — обычного, курсивного или полужирного. Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы. Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы) Выравнивание для текста, изображений, таблиц и других элементов. Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки.

История CSS 12 мая 1998 года принята CSS2. Построена на CSS1 с сохранением обратной совместимости. Добавление к функциональности: Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки. Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК). Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта). Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати. Расширенный механизм селекторов. Указатели. Генерируемое содержание. Позволяет установить текст или картинку, который будет отображаться до или после нужного элемента

Включение CSS в HTML Существует целых четыре способа включения в HTML-документ таблицы стилей: Внедрение - позволяет задавать все правила таблицы стилей непосредственно в самом документе Встраивание в теги документа - позволяет изменять форматирование конкретных элементов страницы Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере Связывание - позволяет использовать одну таблицу стилей для форматирования многих страниц HTML

Включение CSS в HTML. Внедрение Описание стилей располагается в коде Web-странички, внутри тега . Тег

Включение CSS в HTML. Импортирование В качестве типа носителя выступают различные устройства: all - Все типы. Это значение используется по умолчанию. screen - Экран монитора. print - Печатающие устройства вроде принтера. aural - Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры. braille - Устройства, основанные на системе Брайля, предназначенные для слепых людей. handheld - Наладонные компьютеры и аналогичные им аппараты. projection - Проектор. tv - Телевизор.

Включение CSS в HTML. Импортирование Т.к. происходит импортирование внешней таблицы стилей в текущую стилевую таблицу, то чтобы не нарушались правила каскада свойство @import следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил.

Включение CSS в HTML. Связывание Связывание также используется для включения таблицы стилей описанных во внешнем файле. Делается это с помощью тега LINK, располагающегося внутри контейнера HEAD ваших страниц: Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить браузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей.

Тег 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 из отдельного файла.

Синтаксис CSS селектор { свойство: значение;} селектор - элементы сообщают браузеру, где применить стиль. Это могут быть имена HTML-тегов, идентификаторы элементов, авторские классы, псевдоклассы, псевдообъекты и др. свойство – свойство стиля . Свойства шрифта, цвета, текста, таблицы, позиционирование и т.д. body { color: blue; } #form3 {color:red; background-color: blue}

Синтаксис CSS. Селекторы Правила каскадных таблиц стилей, в которых в качестве селектора используются теги HTML, влияют на отображение всех элементов заданного типа в документе. < STYLE TYPE="text/css">

Синтаксис CSS. Селекторы Если некоторые экземпляры нужно отобразить по-другому, CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого описывается класс. Для присвоения класса используется параметр CLASS = "имя класса». < STYLE TYPE="text/css"> p.blue {color: blue } .green {color: green;} …

Синий абзац

А вот заголовок синим не стал

А зеленым , пожалуйста. И абзац тоже может стать зеленым.

Синтаксис CSS. Селекторы Присвоение стилей с помощью идентификаторов применяется в случае, если данному идентификатору соответствует только один элемент на странице. Если элементов, которым необходимо присвоить такой стиль, несколько – это уже класс. Параметр ID задаёт уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр ID можно применять к любому элементу документа. < STYLE TYPE="text/css"> #myID {letter-spacing: 1em; } …

Разрежённые слова в абзаце

Синтаксис 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; }

Подключение CSS http://site-do.ru/css/css2.php http://stepbystep.htmlbook.ru/?id=44

Пример . Подключение таблицы связанных стилей < /head>

Заголовок

Подключение CSS Значения параметров тега rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. Содержимое файла mysite.css подключаемого посредством тега приведено в примере lfktt

Файл со стилем H1 { color: navy; font-size: 200%; font-family: Arial, Verdana, sans-serif; text-align: center; } P { padding-left: 20px; }

Как видно из данного примера, файл со стиле не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т.е. таким способом в полной мере реализуется принцип разделения содержимого и оформления сайта. Поэтому использование таблицы связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.

Таблица глобальных стилей При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера

Hello, world!

Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.

ПРИМЕРЫ ИЗ http://htmlbook.ru/ Задача Изменить цвет произвольного фрагмента текста на желаемый. Решение Создайте новый класс (например, colortext) и установите для него стилевое свойство color с желаемым значением цвета. После чего выделение фрагмента текста происходит с помощью тега , класс которого совпадает с именем класса, созданным выше.

Рис. 1. Текст, у которого фрагмент выделен с помощью цвета Класс colortext, созданный в данном примере, можно использовать неоднократно, выделяяцветом текст в нужных местах документа. Если требуется использовать несколько цветов, тогда следует создать несколько классов и добавлять их по необходимости.

ПРИМЕРЫ ИЗ http://htmlbook.ru/ Задача Вставить изображение на веб-страницу. Решение Для добавления изображения в документ применяется тег , его атрибут src определяет путь к графическому файлу, который должен быть в формате GIF, PNG или JPEG. Также для тега необходимо указать обязательный атрибут alt, он описывает альтернативный текст видимый в процессе загрузки изображения или при отключении картинок в браузере. В HTML4, HTML5

Если графический файл находится в одной папке с HTML-документом, то в качестве пути достаточно указать только имя файла Пример 1. Добавление картинки на веб-страницу

Как сделать, чтобы картинка менялась при наведении на нее курсора мыши? Задача Заенить одну картинку на другую при наведении на неё курсора мыши. Решение Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.

Как сделать, чтобы картинка менялась при наведении на нее курсора мыши? Псевдокласс :hover Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover, он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background.