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

Зарегистрируйтесь, чтобы просмотреть полный документ!

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

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

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

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

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

Включение 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; } #form 3 {color: red; background-color: blue}

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

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

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

Синтаксис CSS. Группирование • Несколько селекторов можно группировать вместе, отделив их друг от друга запятыми: h 1, p, h 2{font-size: 12 px} • Вместо селекторов можно использовать маску *, заменяющую собой все теги в текущем документе. * { font-size: 14 pt} • Другим символом маски является знак >. Таким образом, браузеру дается указание искать дочерние селекторы в пределах определенного родительского. В данном примере стиль применяется только к элементам LI спискам OL: ol > li {list-style-type: decimal} #news p { color: blue; }

Синтаксис CSS. Псевдоклассы • Псевдокласы являются особой группой, позволяющей объединять несколько стилей для какого-либо объекта. • Например, вы можете задать свойства для первой буквы параграфа. Для этого вы назначаете для тега P псевдокласс : first-letter, в котором устанавливаете различные стили: p: first-letter { float: right; font-size: 2 em; color: red; }

Синтаксис CSS. Псевдоклассы В CSS 2 определяются следующие псевдоклассы: : link - еще не посещенные ссылки; : visited - посещенные ссылки; : hover - элемент, над которым в настоящее время находится курсор; : first-line - первая формированная строка абзаца; : first-letter - первая буква абзаца;

Синтаксис CSS. Псевдоклассы В CSS 2 определяются следующие псевдоклассы: : 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 2. php http: //stepbystep. htmlbook. ru/? id=44

Пример. Подключение таблицы связанных стилей <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Стили </title> <link rel="stylesheet" type="text/css" href="mysite. css"> <link rel="stylesheet" type="text/css" href="http: //www. htmlbook. ru/main. css"> < /head> <body> <h 1>Заголовок</h 1> < p>Текст</p> </body> </html>

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

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

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

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Глобальные стили </title> <style type="text/css"> H 1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336; } </style> </head> <body> <h 1>Hello, world!</h 1> </body> </html>

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

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

Пример 1. Выделение фрагмента текста цветом <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>Изменение цвета текста</title> <style>. colortext { color: red; /* Красный цвет выделения */ } </style> </head> <body> <p>Lorem ipsum dolor sit amet, <span class="colortext">consectetuer adipiscing elit</span>, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p> </body> </html>

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

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

Если графический файл находится в одной папке с HTML-документом, то в качестве пути достаточно указать только имя файла Пример 1. Добавление картинки на веб-страницу <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Мои рисунки </title> </head> <body> <p><img src="images/dzen. png" alt="Письма мастера дзен"> </p> </body> </html>

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

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

Скачать презентацию Таблицы стилей CSS Основы dynamic HTML Таблицы

1909 CSS.ppt

Количество слайдов: 44