Html css

Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о ее существовании. Для этого ее необходимо связать с HTML-документом. Существует четыре способа связывания документа и таблицы стилей:

1. Связывание - позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.

2. Внедрение - позволяет задавать все правила таблицы стилей непосредственно в самом документе.

3. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.

4. Встраивание в тэги документа - позволяет изменять форматирование конкретных элементов страницы.

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>:

Эта строка может быть указана в любом 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, которые будут дополнять или корректировать правила, заданные в импортируемой таблице - внедренные правила.

Браузер расставляет приоритеты таблиц стилей следующим образом:

1. встроенные (inline-) стили (встроенные с помощью атрибута style непосредственно в теги документа) - наивысший приоритет. Будут применены браузером в любом случае, даже если возникает конфликт с внедренными или внешними стилями;

2. внедренные стили (перечисленные в теге-контейнере <style> в заголовке документа) - чуть меньший приоритет, будут применяться во всех случаях, кроме случаев возникновения конфликта с inline-стилями (при возникновении такого конфликта будут применены inline-стили);

3. импортированные стили (стили внешнего файла .css, связанные с документом с помощью свойства @import в теге-контейнере <style>) - будут применяться в тех случаях, когда отсутствуют аналогичные правила CSS среди встроенных и внедренных стилей;

4. связанные стили (стили, присоединенные к html-файлу посредством тега <link>) -наименьший приоритет, будут применены только после того, как браузер убедится в отсутствии аналогичных правил во всех остальных типах стилей.

Правила каскадных таблиц стилей состоят из селектора и определения. Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделенных запятыми, если для них задается одно правило. Например, следующие правила:

hi {font-family: Arial) h2 {font-family: Arial) h3 {font-family: Arial)

можно сгруппировать и задать в виде одного правила со списком селекторов:

hi,h2,h3 {font-family: Arial)

Аналогично группируются определения, только в списке они разделяются точками с запятой (;). Следующие правила форматирования заголовка первого уровня:

hi {font-weight: bold) hi {font-size: 14pt) hi {font-family: Arial)

можно задать в виде одного правила, сгруппировав определения:

hi {font-weight: bold; font-size: i4pt; font-family: Arial)

Некоторые свойства имеют собственный синтаксис группирования, связанный с заданием значений нескольких свойств в одном. Например, предыдущий пример при использовании свойства font запишется так:

hi {font: bold i4pt Arial)

При задании таблицы стилей можно свободно комбинировать все три правила группирования для уменьшения ее размеров.

В HTML некоторые элементы могут содержать другие. Рассмотрим элемент, расположенный внутри другого элемента страницы, если для последнего задано правило форматирования, а для вложенного элемента нет.

Например, пусть цвет шрифта абзаца определен как синий (p {color:blue}). Рассмотрим выделенный элемент текста, задаваемый тэгом <em>, если для него не определено правило форматирования.

В подобных случаях вложенный элемент наследует правила форматирования элемента-родителя.

Наследование полезно при задании значений свойств, применяемых к документу по умолчанию. Для этого достаточно задать все свойства для элемента, порождающего все остальные элементы страницы HTML. Таким элементом является тело документа, определяемое тэгом <body>:

body {

color: black;

font-family: "Times New Roman"; background: url (texture.gif) white;

}

Правила каскадных таблиц стилей, в которых в качестве селектора используются тэги HTML, влияют на отображение всех элементов заданного типа в документе. Следующее правило отображает без подчеркивания все ссылки (тэг <a>) в документе:

<!- a { text-decoration: none; }

-- >

</style> Если необходимо некоторые ссылки отобразить по-другому, то можно задать для них правило форматирования непосредственно в тэге, а можно применить параметр class, добавленный в HTML 4.0 в качестве стандарта для всех тэгов. Значением параметра class является ссылка на класс, задаваемый в таблице стилей.

⇐Css | Введение в технологии создания Интернет-узлов | Class⇒