Одной из особенностей представления таблиц различными браузерами является отображение пустых ячеек. Согласно описанию языка все браузеры должны дополнять строки пустыми ячейками, если в какой-либо строке их количество задано меньшим, чем в остальных строках. Кроме того, в любом месте таблицы могут находиться ячейки, не содержащие данных. Существует различие между пустыми ячейками и ячейками, содержащими невидимые данные. В пустых ячейках внутри пары тэгов <td> и </td> не содержится никакой информации или один или более пробелов, которые не трактуются как данные. Ячейки, содержащие невидимые данные, к примеру, могут содержать код или код перевода строки <br>, или любой текст, цвет которого совпадает с цветом фона ячейки. Если ячейки, содержащие данные (пусть даже невидимые), отображаются всеми браузерами одинаково, то пустые ячейки будут показаны по-разному.
Если ячейка таблицы пуста, вокруг нее не рисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space — неразрывающий пробел).
Фреймы
Фреймы позволяют разбить окно просмотра браузера на несколько прямоугольных подобластей, располагающихся рядом друг с другом. В каждую из подобластей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фреймами, также как и между отдельными окнами браузера, при необходимости можно организовать взаимодействие, которое заключается в том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно браузера.
Фреймы могут быть использованы в следующих случаях:
при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти; для расположения в определенном месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других подобластей экрана; для представления информации, которую удобно расположить в нескольких смежных подобластях окна, каждая из которых может просматриваться независимо.Фреймы похожи на таблицы — и те и другие осуществляют разбиение окна просмотра браузера на прямоугольные области, в которых располагается некоторая информация. Однако при помощи фреймов можно решить не только задачу форматирования страниц документа, но организовать взаимодействие между ними. Принципиальная разница между фреймами и таблицами состоит в том, что каждому фрейму должен соответствовать отдельный HTML-документ, а содержимое всех ячеек таблицы всегда является частью одного документа. Отображаемая во фрейме страница может прокручиваться при просмотре независимо от других.
Пример:
<frameset rows="80%,20%">
<frameset cols="15%, 85%">
<frame src="LIST. htm">
<frame scrolling=auto src="empty. htm" name="pages">
</frameset>
<frame src = "toolbar. html" scrolling=noresize>
</frameset>
Фреймы определяются в структуре, называемой frameset, которая используется для страниц, содержащих фреймы, вместо раздела body обычного документа. Контейнер из тэгов <frameset> и </frameset> обрамляет каждый блок определений фрейма. Внутри контейнера <frameset> могут содержаться только тэги <frame> и вложенные тэги <frameset>. Тэг <frame> определяет одиночный фрейм и не является контейнером. Необходимо записать столько тэгов <frame>, сколько отдельных фреймов определено при задании тэга <frameset>.
Взаимодействие между фреймами заключается в возможности загрузки документов в выбранный фрейм по командам из другого фрейма. Для этой цели используется параметр target тэга <a>. Данный параметр определяет имя фрейма (задаваемого в параметре name тэга frame) или окна браузера, в которое будет загружаться документ, на который указывает данная ссылка. По умолчанию при отсутствии параметра target документ загружается в текущий фрейм.
<a href="test. htm" target="pages">
Поддержка фреймов имеется только в стандарте HTML 4.0, однако большинство современных браузеров распознавали фреймы и до появления HTML 4.0. В XHTML поддержка фреймов отсутствует.
Формы
Назначение форм
HTML-формы предназначены для пересылки данных от удаленного пользователя к Web-серверу. С их помощью можно организовать простейший диалог между пользователем и сервером, например, регистрацию пользователя на сервере или выбор нужного документа из представленного списка. Формы поддерживаются всеми популярными браузерами.
Синтаксис формы
В HTML-документе для задания формы используются тэги <form>…</form>, Документ может содержать несколько форм, но они не могут быть вложены одна в другую.
Тэг <form> имеет параметры action, method и enctype. Отдельные браузеры (Netscape, Internet Explorer) поддерживают дополнительные параметры, например, class, name, style и др.
В общем виде форма задается следующим образом:
<form action="url" method="метод_передачи" enctype="МIМЕ-тип">
содержание_формы
</form >
Параметр action является единственным обязательным. Его значением является URL-адрес CGI-программы, которая будет обрабатывать информацию, извлеченную из данной формы.
Взаимодействие между браузером и web-сервером
Взаимодействие между клиентом-браузером и Web-сервером осуществляется по правилам, заданным протоколом HTTP, и состоит из запросов клиента и ответов сервера. Запрос разбивается на три части. В первой строке запроса содержится HTTP-команда, называемая методом, URL-адрес запрашиваемого файла и номер версии протокола HTTP. Вторая часть — заголовок запроса. Третья часть — тело запроса, собственно данные, посылаемые серверу.
MIME-типы
Одним из первых применений Интернета была электронная почта, ориентированная на пересылку текстовых сообщений. Часто возникает необходимость вместе с текстом переслать данные в нетекстовом формате, например, упакованный zip-файл, рисунок в формате GIF, JPEG и т. д. Для того, чтобы переслать средствами электронной почты такие файлы без искажения, они кодируются в соответствии с некоторым стандартом. Стандарт MIME (Multipurpose Internet Mail Extensions, многоцелевые расширения электронной почты для Интернета) определяет набор MIME-типов, соответствующих различным типам данных, и правила их пересылки по электронной почте. Для обозначения MIME-типа используется запись вида тип/подтип, где тип определяет общий тип данных, например, text, image, application (тип application обозначает специфический внутренний формат данных, используемый некоторой программой), а подтип — конкретный формат внутри типа данных, например, application/zip, image/gif, text/html.
MIME-типы нашли применение в Web, где они называются также медиа-типами, для идентификации формата документов, передаваемых по протоколу HTTP. В HTML-форме параметр enctype определяет медиа-тип, который используется для кодирования и пересылки специального типа данных — содержимого формы.
Значением параметра enctype является медиа-тип, определяющий формат кодирования данных при передаче их от браузера к серверу. Браузер кодирует данные, чтобы исключить их искажение в процессе передачи. Возможны два значения этого параметра: application/x-www-form-urlencoded (по умолчанию) и multipart/form-data.
Второй метод нужен только в том случае, если к содержимому формы присоединяется локальный файл, выбранный при помощи элемента формы <input type="files">. В остальных случаях следует использовать метод кодирования по умолчанию.
URL-кодирование
Схема кодирования application/x-www-form-urlencoded одинакова для обоих методов пересылки (GET и POST) и заключается в следующем. Для каждого элемента формы, имеющего имя, заданное параметром name, формируется пара "name=value", где value — значение элемента, введенное пользователем или назначенное по умолчанию. Если значение отсутствует, соответствующая пара имеет вид "name=". Для радиокнопок и переключателей используются значения только выбранных элементов. Если элемент выбран, а значение параметра value не определено, по умолчанию используется значение "on".
Все пары объединяются в строку, в качестве разделителя служит символ "&". Так как имена и значения представляют собой обычный текст, то они могут содержать символы, недопустимые в составе URL (метод GET пересылает данные как часть URL). Такие символы заменяются последовательностью, состоящей из символа % и их шестнадцатеричного ASCII-кода. Символ пробела может заменяться не только кодом %20, но и знаком + (плюс). Признак конца строки, встречающийся в поле textarea, заменяется кодом %0D%0A. Такое кодирование называется URL-кодированием.
Методы передачи данных
Закодированная информация пересылается серверу одним из методов GET или POST. Основное отличие заключается в том, как метод передает информацию CGI-программе.
При использовании метода GET данные формы пересылаются в составе URL-запроса, к которому присоединяются после символа "?" в виде совокупности пар
переменная = значение,
разделенных символом "&". В этом случае первая строка запроса может иметь следующий вид:
GET /cgi-bin/cgi-program. pl? name=Ivan&surname=Ivanov HTTP/1.1
Часть URL после символа "?" называется строкой запроса. Web-сервер, получив запрос, присвоит переменной среды QUERY_STRING значение строки запроса и вызовет CGI-программу, обозначенную в первой части URL до символа "?".
При использовании метода POST данные формы пересылаются серверу в теле запроса, после чего передаются сервером в CGI-программу через стандартный ввод.
Методы GET и POST имеют свои достоинства и недостатки. Метод GET обеспечивает лучшую производительность при пересылке форм, состоящих из небольшого набора коротких полей. При пересылке большого объема данных следует использовать метод POST, так как браузер или сервер могут накладывать ограничения на размер данных, передаваемых в составе URL, и отбрасывать часть данных, выходящую за границу. Метод POST, к тому же, является более надежным при пересылке конфиденциальной информации.
Поля ввода формы
Форма отображается в окне браузера в виде набора стандартных элементов управления, используемых для заполнения полей формы значениями, которые затем передаются Web-серверу. Значение вводится в поле ввода пользователем или назначается по умолчанию. Для создания полей средствами языка HTML существуют специальные тэги: <input>, <select>, <textarea>, которые употребляются только внутри тэга <form>.
Тэг <input>
<input type="тип_поля_ввода" name="имя_поля_ввода" другие_параметры>
Это наиболее употребительный тэг, с помощью которого можно генерировать внутри формы поля для ввода строки текста, пароля, имени файла, различные кнопки. Он имеет два обязательных параметра: type и name. Параметр type определяет тип поля: селекторная кнопка, кнопка передачи и др. Параметр name определяет имя, присваиваемое полю. Оно не отображается браузером, а используется в качестве идентификатора значения, передаваемого Web-серверу. Остальные параметры меняются в зависимости от типа поля. Ниже приведено описание типов полей, создаваемых при помощи тэга <input>, и порождаемых ими элементов ввода.
type="text"
Создает элемент для ввода строки текста.
Дополнительные параметры:
- maxlength="n" - задает максимальное количество символов, разрешенных в текстовом поле. По умолчанию — не ограничено. size="n" - максимальное количество отображаемых символов. value = "начальное_значение". Первоначальное значение текстового поля.
type="password"
Создает элемент ввода строки текста, отличающийся от предыдущего только тем, что все вводимые символы представляются в виде символа *. Поле password не обеспечивает безопасности введенного текста, так как на сервер он передается в незашифрованном виде.
type="files"
Создает поле для ввода имени локального файла, сопровождаемое кнопкой Browse. Выбранный файл присоединяется к содержимому формы при пересылке на сервер. Имя файла можно ввести непосредственно или выбрать его из диалогового окна. Для корректной передачи присоединенного файла следует установить значения параметров формы равными enctype="multipart/form-data" и method="post". В противном случае будет передана введенная строка, то есть маршрутное имя файла, а не его содержимое. Дополнительные параметры maxlength и size имеют тот же смысл, что и для элементов типа text и password.
type="checkbox"
Создает поле для установки флажка. Элементы checkbox можно объединить в группу, установив одинаковое значение параметра name.
Дополнительные параметры:
- value="строка". Значение, которое будет передано серверу, если данная кнопка выбрана. Если кнопка не выбрана, значение не передается. Обязательный параметр. Если флажки образуют группу, то передаваемым значением является строка разделенных запятыми значений параметра value всех установленных флажков. checked. Если указан параметр checked, элемент является выбранным по умолчанию.
type="radio"
Создает элемент-переключатель, существующий только в составе группы подобных элементов, из которых может быть выбран только один. Все элементы группы должны иметь одинаковое значение параметра name.
Отображается в виде круглой кнопки. Дополнительные параметры:
- value="строка". Обязательный параметр, значение которого передается серверу при выборе данной кнопки. Должен иметь уникальное значение для каждого члена группы. checked. Устанавливает элемент выбранным по умолчанию. Один и только один элемент в группе должен иметь этот параметр.
type="submit"
Создает кнопку передачи, нажатие которой вызывает пересылку на сервер всего содержимого формы. По умолчанию отображается в виде прямоугольной кнопки с надписью Submit.
Дополнительный параметр позволяет изменить надпись на кнопке. Параметр name для данного элемента может быть опущен. В этом случае значение кнопки не включается в список параметров формы и не передается на сервер.
Если параметры name и value присутствуют, например,
<input type="submit" name="submit_button" value="ok">,
то в список параметров формы, передаваемых на сервер, включается параметр submit_button="ok". Внутри формы могут существовать несколько кнопок передачи.
type="reset"
Создает кнопку сброса, нажатие которой отменяет все сделанные изменения, восстанавливая значения полей формы на тот момент, когда она была загружена. По умолчанию отображается в виде прямоугольной кнопки с надписью Reset. Надпись можно изменить при помощи дополнительного параметра
value="название_кнопки"
Значение кнопки Reset никогда не пересылается на сервер, поэтому у нее отсутствует параметр name.
type="image"
Создает элемент в виде графического изображения, действующий аналогично кнопке Submit. Дополнительные параметры:
- src="url_изображения". Задает URL-адрес файла с графическим изображением элемента. align="тип_выравнивания". Задает тип выравнивания изображения относительно текущей строки текста.
Если на изображении элемента щелкнуть мышью, то координаты указателя мыши в виде name. x=n&name. y=m включаются браузером в список параметров формы, посылаемых на сервер.
type="hidden"
Создает скрытый элемент, не отображаемый пользователю. Информация, хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером. Скрытое поле можно использовать, например, в следующем случае. Пользователь заполняет форму и отправляет ее серверу. Сервер посылает пользователю для заполнения вторую форму, которая частично использует информацию, содержащуюся в первой форме. Сервер не хранит историю диалога с пользователем, он обрабатывает каждый запрос независимо и при получении второй формы не будет знать, как она связана с первой. Чтобы повторно не вводить уже введенную информацию, можно заставить CGI-программу, обрабатывающую первую форму, переносить необходимые данные в скрытые поля второй формы. Они не будут видимы пользователем и, в то же время, доступны серверу. Значение скрытого поля определяется параметром value.
Тэг <select>
Тэг <select> предназначен для того, чтобы организовать внутри формы выбор из нескольких вариантов без применения элементов типа checkbox и radio. С помощью тэга <select> варианты выбора более компактно представляются в окне браузера в виде элементов ниспадающего меню или списка прокрутки. Пример:
<select name="sel_name" size="2">
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
</select>
Тэг имеет следующие параметры:
name="имя_поля". Обязательный параметр. При выборе одного или нескольких элементов формируется список выбранных значений, который передается на сервер под именем name.
size="n". Устанавливает число одновременно видимых элементов выбора. Если n="1", то отображается ниспадающее меню, если n>1, то — список прокрутки с n одновременно видимыми элементами.
Элементы меню задаются внутри тэга <select> при помощи тэга <option>:
<option selected value="строка"/> содержимое_тэга
Параметр value содержит значение, которое пересылается серверу, если данный элемент выбран из меню или списка. Если значение этого параметра не задано, то по умолчанию оно устанавливается равным содержимому тэга <option>.
Тэг <textarea>
Тэг <textarea> создает внутри формы поле для ввода многострочного текста, отображаемое в окне браузера в виде прямоугольной области с горизонтальной и вертикальной полосами прокрутки. Для пересылки на сервер каждая введенная строка дополняется символами %0D%0A (ASCII-символы "Возврат каретки" и "Перевод строки" с предшествующим символом %), полученные строки объединяются в одну строку, которая и отправляется на сервер под именем, задаваемым параметром name.
<textarea name="ta_name" rows="m" cols="n">
текст
</textarea>
Параметры:
- name. Необходимый параметр, используемый для идентификации данных при пересылке на сервер. cols="n". Задает число столбцов видимого текста. rows="m". Задает число строк видимого текста.
Между тэгами <textarea> и </textarea> можно поместить текст, который будет отображаться по умолчанию.
Динамический HTML (Dynamic HTML или DHTML) не является языком разметки страниц. Это термин, применяемый для обозначения HTML-страниц с динамически изменяемым содержимым. Реализация DHTML основывается на HTML, каскадных таблицах стилей (Cascade Style Sheets — CSS) и языке сценариев (JavaScript или VBScript). Эти три компонента DHTML связаны между собой объектной моделью документа (Document Object Model — DOM), являющейся интерфейсом прикладного программирования (API).
DOM связывает воедино эти три компонента, обеспечивая для HTML-документа возможность динамического изменения своего содержимого без перезагрузки страницы.
Объектная модель документа делает все элементы страницы программируемыми объектами. С ее помощью через языки сценариев можно получить доступ и управлять всеми элементами документа. Каждый элемент HTML доступен как индивидуальный объект, следовательно, можно изменять значение любого параметра любого тэга HTML-страницы, и, как следствие, документ действительно становится динамическим. Любое действие пользователя объектной моделью документа трактуется как событие, которое может быть перехвачено и обработано процедурой сценария.
Таблицы стилей CSS
Логическое и физическое форматирование
Классический, наиболее распространенный, HTML 3.2 предоставляет средства физического форматирования документов, для чего имеются специальные теги (например, теги <font>, <b>, <i>) и множество различных атрибутов (size, color, height, width и т. п.). Особенности web-форматирования принуждают автора явно прописывать эти теги и атрибуты для каждого нового абзаца, что, сильно увеличивает размер страниц. При таком способе форматирования затруднен анализ структуры документа человеком и поисковыми машинами. Из-за сложности логического анализа такой способ форматирования называется физическим форматированием.
В спецификации HTML 4.0 используется логическое форматирование, при котором структура и оформление документа четко разделены. Этот способ форматирования рекомендован к применению Консорциумом WWW, так как предоставляет расширенные возможности поиска информации в Сети, позволяет более точно структурировать и анализировать информацию посредством поисковых машин, а также существенно уменьшает размер страниц и время их полной загрузки. Реализуется разделение структуры и оформления документа с помощью CSS. То же самое можно сказать и при XHTML.
Понятие стиля, таблицы стилей и CSS
Стиль, представляет собой набор параметров, определяющих внешний вид документа HTML при его отображении в окне браузера: шрифты и цвета заголовков разных уровней, шрифт и разрядка основного текста, задаваемого в тэге абзаца <p>, и т. д. Стиль задается по определенным правилам
Таблица стилей - набор правил отображения, применяемых в документе, к которому присоединена соответствующая таблица стилей. Таблица стилей — это шаблон, который управляет форматированием тэгов HTML в Web-документе.
CSS level 1(Cascade Style Sheets, Каскадные таблицы стилей, уровень 1) представляют собой технологию определения и присоединения стилей к документам HTML. Термин "каскадные" используется потому, что возможно использовать несколько таблиц стилей для управления форматированием одного документа HTML, а браузер по определенным правилам выстраивает приоритетность применения этих таблиц.
Правила CSS
Правило каскадных таблиц стилей состоит из двух частей: селектора и определения. Селектором может быть любой тэг HTML, для которого определение задает, каким образом необходимо его форматировать. Само определение, в свою очередь, также состоит из двух частей: свойства и его значения, разделенных знаком двоеточия (:). Пример:
h1 {color: blue; font-size: 16pt}
Назначение свойства очевидно из его названия. В приведенном правиле селектором является элемент h1, а определение, записанное в фигурных скобках, задает значения двух свойств заголовка первого уровня: цвет шрифта (свойство color) определен как синий (значение blue) и размер шрифта (свойство font-size) определен в 16 пунктов (значение 16pt). В одном правиле можно задать несколько определений, разделенных символом точка с запятой (;).
Связывание HTML с CSS
Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о ее существовании. Для этого ее необходимо связать с HTML-документом. Существует четыре способа связывания документа и таблицы стилей:
Встраивание CSS в HTML
CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу <body>. Если стиль задан для тега <body>, он наследуется всеми элементами (абзацами, заголовками и т. д.), помещенными внутри этого тега-контейнера, в случае отсутствия собственных стилей для этих элементов. Таким образом, нет необходимости прописывать теги <font> и атрибуты color, size и т. п. для каждого абзаца на странице – достаточно задать стиль для тега <body>, и все абзацы на странице будут отображены в соответствии с этим стилем.
Пример. Необходимо, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов зеленого цвета. Для этого следует указать атрибут style тега <body>, присвоив ему соответствующее значение:
<body style="font-family: 'Times New Roman'; font-size: 12pt; color: green">
В примере используется встраивание стиля непосредственно в тег документа – так называемый inline-стиль. Этот способ связывания CSS с HTML-файлом рекомендуется в единичных случаях – если данный стиль планируется применить только к одному элементу только на одной странице сайта. Если же стиль должен быть применен к нескольким элементам на одной странице или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML.
Внедрение таблицы стилей
Для применения одинакового форматирования к нескольким одинаковым элементам станицы необходимо создать в заголовке страницы (в любом месте между тегами <head> и </head>) внедренную таблицу стилей, в которой задаются требуемые правила оформления. Для этого создается тег-контейнер таблицы стилей, начинающийся открывающим тегом <style> и заканчивающийся закрывающим тегом </style>. Внутри этого тега-контейнера можно задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки.
Пример. Необходимо, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом Arial синего цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня – шрифтом Helvetica размером 14 пунктов полужирного курсивного начертания желтого цвета.
<head>
...
<style>
<!-body {
font-family: 'Times New Roman';
font-size: 12pt;
color: green;
}
h1 {
font-family: Arial;
font-size: 16pt;
color: blue;
font-weight: bold;
}
h2 {
font-family: Helvetica;
font-size: 14pt;
color: yellow;
font-weight: bold;
font-style: italic;
}
-->
</style>
...
</head>
Этот способ связывания CSS и HTML называется внедрением. Его рекомендуется применять в тех случаях, когда необходимо задать какой-либо набор правил форматирования только для одной страницы сайта, а все остальные страницы должны выглядеть по-другому.
Обычно браузеры, не поддерживающие какие-либо тэги, игнорируют их, интерпретируя, однако, их содержимое в том виде, в каком оно задано, что может приводить к ошибкам. Поэтому, как обычно, следует задавать содержимое тэгов, которые потенциально не обрабатываются старыми версиями браузеров, заключенным в тэг комментария <!--…-->.
Связывание таблицы стилей
Связывание позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью тэга <link>, задаваемого в разделе <head>:
<link rel="stylesheet" type="text/css" href="mystyles. css"/>
В этой строке указывается, что связываемый файл является таблицей стилей (rel="stylesheet"), формат этого файла – .css1 (type="text/css") и находится он в той же директории, что и файл html, либо имеет другой URL-адрес (href="mystyles. css").
Эта строка может быть указана в любом html-файле. Таким образом, единое оформление будет использовано для нескольких страниц.
При этом вся таблица стилей хранится в одном файле (расширение файла должно быть стандартным – .css).
Пример CSS-файла:
body {
font-family: 'Times New Roman';
font-size: 12pt;
color: green;
}
h1 {
font-family: Arial;
font-size: 16pt;
color: blue;
font-weight: bold;
}
h2 {
font-family: Helvetica;
font-size: 14pt;
color: yellow;
font-weight: bold;
font-style: italic;
}
Тэги <style> и </style> внутри файла таблицы стилей не используются – расширение. css явно указывает браузеру на то, что файл является таблицей стилей. Один такой файл может быть связан сразу с несколькими страницами (или импортирован сразу в несколько страниц).
Импорт таблицы стилей
Для импортирования файла таблицы стилей (в том числе с другого сервера) необходимо указать в заголовке HTML-файла между тегами <head> и </head> внутри тега-контейнера <style> следующую строку:
<head>
...
<style>
...
@import: url (my. css);
...
</style>
...
</head>
Помимо адреса импортируемой таблицы стилей, в теге-контейнере <style> можно указать любые правила CSS, которые будут дополнять или корректировать правила, заданные в импортируемой таблице – внедренные правила.
Приоритеты использования таблиц стилей
Браузер расставляет приоритеты таблиц стилей следующим образом:
встроенные (inline-) стили (встроенные с помощью атрибута style непосредственно в теги документа) – наивысший приоритет. Будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями; внедренные стили (перечисленные в теге-контейнере <style> в заголовке документа) – чуть меньший приоритет, будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили); импортированные стили (стили внешнего файла. css, связанные с документом с помощью свойства @import в теге-контейнере <style>) – будут применяться в тех случаях, когда отсутствуют аналогичные правила CSS среди встроенных и внедренных стилей; связанные стили (стили, присоединенные к html-файлу посредством тега <link>) – наименьший приоритет, будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.Группирование
Правила каскадных таблиц стилей состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделенных запятыми, если для них задается одно правило. Например, следующие правила:
h1 {font-family: Arial}
h2 {font-family: Arial}
h3 {font-family: Arial}
можно сгруппировать и задать в виде одного правила со списком селекторов:
h1,h2,h3 {font-family: Arial}
Аналогично группируются определения, только в списке они разделяются точками с запятой (;). Следующие правила форматирования заголовка первого уровня:
h1 {font-weight: bold}
h1 {font-size: 14pt}
h1 {font-family: Arial}
можно задать в виде одного правила, сгруппировав определения:
h1 {font-weight: bold; font-size: 14pt; font-family: Arial}
Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так:
h1 {font: bold 14pt Arial}
При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения ее размеров.
Наследование
В HTML некоторые элементы могут содержать другие. Рассмотрим элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет.
Например, пусть цвет шрифта абзаца определен как синий (p {color:blue}). Рассмотрим выделенный элемент текста, задаваемый тэгом <em>, если для него не определено правило форматирования.
В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя.
Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тэгом <body>:
body {
color: black;
font-family: "Times New Roman";
background: url(texture. gif) white;
}
Селекторы
Правила каскадных таблиц стилей, в которых в качестве селектора используются тэги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчеркивания все ссылки (тэг <a>) в документе:
<style type="text/css">
<!- a { text-decoration: none; }
-->
</style>
Если необходимо некоторые ссылки отобразить по-другому, то можно задать для них правило форматирования непосредственно в тэге, а можно применить параметр class, добавленный в HTML 4.0 в качестве стандарта для всех тэгов. Значением параметра class является ссылка на класс, задаваемый в таблице стилей.
Селектор class
В одной таблице стилей можно создать два и более различных класса одинаковых элементов с помощью селектора класса. К этим классам элементов можно затем будет применить различные таблицы стилей.
Пример. Необходимо создать страницу, на которой будет два вида абзацев <p>, причем оба вида будут постоянно чередоваться и часто повторяться. Типичный пример такой страницы – интервью, в котором чередуются вопросы журналиста и ответы интервьюируемого. При создании такой страницы необходимо визуально отделить вопросы и ответы друг от друга.
<head>
<title>Интервью</title>
<style>
p. ask {
font-style: italic;
font-weight: bold;
font-family: Arial, sans-serif;
font-size: 10pt;
color: gray;
margin-left: 15px
}
p. answer {
font-family: 'Times New Roman', serif;
font-size: 12 pt; color: black;
}
</style>
</head>
<body>
<p class="ask">Вопрос</p>
<p class="answer">Ответ</p>
</body>
Селектор id
Параметр id, как и параметр class, не влияет на отображение браузером элемента HTML, но он задает уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Параметр id можно применять к любому элементу документа.
Правила таблиц стилей регламентируют использование уникального идентификационного имени элемента в качестве селектора, предваряя его символом #:
<head>
<title>Демо</title>
<style type="text/css">
<!- #par24 { letter-spacing: lem; }
h1#form3 { color: red; background-color: blue}
-->
</style>
</head>
<body>
<p id="par24">Разреженные слова в абзаце</p>
<h1 id="form2">Черный шрифт</h1>
</body>
В этом примере абзац идентифицирован именем par24 в параметре id, поэтому к нему применимо правило с селектором #par24. Второе правило в таблице стилей должно применяться к заголовку первого уровня с идентификатором form3. Такого элемента в нашем фрагменте нет, и поэтому заголовок form2 отображается с применением правила по умолчанию.
Функции таблиц стилей
Таблица стилей предназначены, в первую очередь, для того, чтобы отделить содержимое web-страницы от ее оформления.
HTML 4.0 обеспечивает поддержку следующих функций таблиц стилей:
Таблица стилей, напротив, применяются к конкретным устройствам или группам устройств. Языки таблиц стилей могут включать функции описания зависимости от устройств в одной таблице.
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 |
