- •Введение
- •Основные элементы языка html
- •Каскадные таблицы стилей (Cascading Style Sheets css)
- •Специализация селекторов.
- •Способы встраивания стилей в html – документ
- •Применение нескольких таблиц стилей
- •Использование стилей для форматирования текста
- •Стили шрифтов
- •Стили оформления текста (цвет, фон)
- •Стили табулирования текста
- •Расположение элемента
- •Неупорядоченные списки.
- •Упорядоченные списки
- •Списки определений
- •Формы Для чего нужны формы?
- •Как устроена форма
- •Простейшая форма
- •Как форма собирает данные
- •Маленькие хитрости Как отправить форму почтой
- •Комментарии
Способы встраивания стилей в html – документ
Существует три различные возможности встраивания таблиц стилей. Самый простой и не эффективный способ – встраивание непосредственно в элемент в качестве атрибута style. Такое встраивание называют внутри текста (inline). Этот подход сильно увеличивает размер кода страницы и, соответственно, загрузка странички становится медленнее. <элемент style = “параметр: значение; параметр: значение ”>
Пример:
<h1 style = “color : blue; font-size : 24 pt”>
Второй способ – вставка в заголовок <head>, Такие стили называются внутренними или внедренными (internal или embedded). Они относятся только к тому документу, в котором находятся. Используется элемент <style> </style> в заголовке Head.
Атрибуты:
type – определяет язык таблиц стилей для каскадных таблиц «text/css»
media – определяет целевое устройство для информации о стиле отображения(экран, печать, телевизор, сотовые телефоны).
screen – экран (по умолчанию)
tty – телетайп, др. устройства с ограниченными возможностями отображения фиксируемая сетка для отображения символов (калькулятор).
tv – телевизор (низкое расширение ограниченных возможностей прокрутки).
handheld - для карманных устройств (маленький экран, монохромный режим)
print – страничные документы, просматриваемые на экране в режиме предварительного просмотра печати
aural – для синтезаторов речи
all – для всех
Пример: 1) <head>
<style>
h1 {border – width: 1; border: solid; text – align: center }
</style>
</head>
Описанный стиль определяет ширину рамки вокруг элемента; стиль рамки – сплошная линия; выравнивание текста по центру.
2) <head>
<style type = «text/css»>
h1.myclass {border– width: 1; border: solid; text – align: center}
</style>
</head>
<body>
< h1 class = “myclass” > Заголовок под влиянием стиля</h1>
< h1 > А на этот заголовок стиль не влияет </h1>
</body>
3)<head>
<style>
# myid { . . . }
</style>
</head>
<body>
< h1 id = “myid” > Заголовок под влиянием стиля </h1>
< h1 class = “myclass” > На этот заголовок стиль не влияет </h1>
< h1 > На этот заголовок стиль тоже не влияет </h1>
</body>
Наиболее удобный способ встраивания стиля – использование внешних (external) таблиц стилей (файл.css). Связывание документа с внешней таблицей осуществляется с помощью тега <link> (рассматриваемого на предыдущей лекции) конечный тег запрещен: <link rel = stylesheet type = text/css href = “url-адрес таблицы стилей”>. Адрес может быть абсолютным и относительным (“mystyle.css” или “http:/www. mystyle.ru/xyz/mystyle.css”). Применение одного и того же файла ко многим документам html существенно уменьшает время загрузка каждого.
Применение нескольких таблиц стилей
В документе обычно используется несколько разных стилей. Конфликты между ними разрешаются при помощи понятия каскадности (cascade) и наследования (inheritance). Наследование основывается на том, что элементы html вложены один в другой и соотносятся как предок и потомок. Те параметры, которые не указаны у потомка наследуются им от родителя. Приоритеты (от высшего к низшему):
Таблицы пользователя
Таблицы автора документа
Таблицы браузера по умолчанию
Если использовать несколько таблиц автора, то приоритет расставляется следующим образом:
Правило задается как значение атрибута style
Правило задается как значение id
Правило определяется с помощью атрибута class
Правило для параметров элементов в таблице связанной с документом тегом <link> зависит от того в какой последовательности включены элементы link и style. Больший приоритет имеет последний записанный элемент.
Правило определяет параметры элементов по умолчанию браузера
Наследование наоборот от 5 к 1.
Пример:
Файл mystyle.css содержит строку: h1 { color : blue; font-size : 26 pt; font-style : italic}
Документ:
<HTML>
<HEAD>
<link rel=” stylesheet” type = “text/css” href = “mystyle.css”>
<style>
h1 { color : red; font-size : 40 pt}
</style>
</HEAD>
<BODY>
<h1 style = “color : yellow”> Заголовок </h1>
</BODY>
</HTML>
При открытии этого документа в браузере, заголовок будет отображаться желтым курсивом размером 40 pt. Если поменять местами link и style, то заголовок отобразиться желтым курсивом, размер – 26 pt.