Викиучебник

CSS/Применение CSS для HTML и XHTML: различия между версиями

Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
м Robot: Interwiki standardization
Нет описания правки
Строка 1:
CSS может быть примененприменён к HTML или XHTML с использованием трехтрёх методов: связывание между собой, встроенныевнедрение и встраивание. В связанном методе, таблица стилей создаются и хранятся в отдельном файле с расширением css. В встроенном методе, CSS хранятся непосредственно в атрибуте стиля HTML тега, пример: <code><nowiki><div style="font-weight:bold">Bold Font</div></nowiki></code>
 
В связанном методе таблица стилей создаётся и хранится в отдельном файле с расширением css. Это связанные (или внешние) стили.
==Связывание==▼
 
С связаном CSS, CSS как правило хранятся в отдельном файле. Для ссылки на этот файл с HTML-страницы, добавлять ссылки элемента (и его закрытие элемента в XHTML) на головной элемент, как показано в следующем примере, который предполагют, что таблица стилей хранится в файле с именем "style.css".▼
Во внедрённом методе CSS хранится как часть HTML-страницы в теге <nowiki> <style> </nowiki> между тегами <nowiki> <head> </nowiki>.
Это внедрённые (или внутренние) стили.
 
Во встроенном методе CSS хранится непосредственно в атрибуте стиля HTML тега, пример: <code><nowiki><div style="font-weight:bold">Bold Font</div></nowiki></code>
Это встроенные стили.
 
Предпочтительнее использовать первый метод, но остальные методы тоже подходят и не требуют создания отдельного файла для стилей.
 
▲== Связывание ==
 
▲С связаном CSS, CSS как правило хранятся в отдельном файле. Для ссылки на этот файл с HTML-страницы, добавлятьиспользуется ссылкитег элемента<nowiki> (и<link> его</nowiki> закрытиемежду элементатегами в XHTML) на<nowiki> головной<head> элемент</nowiki>, как показано в следующем примере, который предполагютпредполагает, что таблица стилей хранится в файле с именем "style.css".
<source lang="html4strict">
<head>
Строка 9 ⟶ 20 :
</head>
</source>
<code>link</code> элемент в примере состоит из трех атрибутов. Первый, <code>rel</code>, сообщает браузеру тип и цель ссылки. Второй, <code>type</code>, сообщает браузеру, какой тип стилей. И третьетретий, <code>href</code>, сообщает браузеру URL, чтобы найти таблицу стилей. В этом примере URL является относительным, но он также может быть абсолютным.
 
"style.css" с одним правилом содержит только текст следующего содержания:
Строка 17 ⟶ 28 :
}
</source>
Это говорит браузеру, что текст в пунктепараграфе (<code>р</code>) элемент должен быть показан как полужирный.
 
Пример рендеринга:
Строка 37 ⟶ 48 :
</source>
 
== Внедрение ==
===Встроенные===
В динамически генерируемых страницах возможно придется использовать встроенные CSS, но это должно быть сведено к минимуму. Даже в динамических страницах любой CSS, является общим для нескольких страниц и как правило должны быть перемещены в связанный стиль.▼
 
▲В динамически генерируемых страницах возможно придетсяпридётся использовать встроенныевнедрённые (внутренние) CSS, но это должно быть сведено к минимуму. Даже в динамических страницах любой CSS, является общим для нескольких страниц и как правило должныдолжнен быть перемещеныперемещён в связанный (внешний) стиль.
Встроенные CSS являются CSS, которые находятся в заголовке HTML-документа, который требует укладки. Например, мы хотели бы, чтобы текст в этом HTML-документе был выделен полужирным шрифтом.▼
 
▲ВстроенныеВнедрёнными CSS являются CSS, которые находятся в заголовке HTML-документа, который требует укладкистилизации. Например, мы хотели бы, чтобы текст в этом HTML-документе был выделен полужирным шрифтом.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Строка 55 ⟶ 67 :
</source>
 
CSS должен быть помещенпомещён в раздел заголовка документа:
<source lang="html4strict">
<head>
Строка 66 ⟶ 78 :
</head>
</source>
CSS содержится в <code>style</code> элементе. Установка элемента <code>type<code> атрибут <code>text/css</code> сообщает браузеру, что заключеновнедрённый sheetstyleстиль написаногонаписан на CSS и должнодолжен быть использованоиспользован для форматирования страницы. Если атрибут <code>type<code> отсутствует или установлен в непризнанномнеправильное значение, CSS не будет примененприменён к странице.
 
Немного CSS в этом примере указывает браузеру, чтобы сделать весь текст находящийся в любом пункте (<code>p</code>) элемента выделенжирным. Текст на странице будет выглядеть следующим образом:
{{CSS:rendered|1=<p style="font-weight:bold" title="This text is bold">Текст, который будет отформатирован.</p>}}
 
Строка 91 ⟶ 103 :
</source>
 
Помните, что вы должны использовать [[#СвязываниеCSS/Применение CSS для HTML и XHTML|связывание]] стилей предпочтенее по сравнениювместо свнедрённой встроенной(внутренней) таблицейтаблицы стилей когда это возможно; это позволяет наиболее легче заменить общую информацию стиля без того, чтобы отслеживать стили в различных документах и файлах.
 
== Встраивание ==▼
 
Встроенная таблица стилей добавляет стилевую разметку в отдельные теги с помощью атрибута style.
▲==Встраивание==
Если таблица создана лишь для некоторого конкретного html-файла, то её располагают в этом же файле с помощью контейнера <code>style</code>. Такую таблицу стилей называют внутренней или встроенной.
 
Например:
например:
<source lang="html4strict">
<div style="font-weight:bold; color:blue;">Полужирный шрифт</div>
Строка 104 ⟶ 117 :
{{CSS:rendered|1=<div style="font-weight: bold; color: blue;">Полужирный шрифт</div>}}
 
Как уже упоминалось, вы должны предпочтительнопредпочтительнее использовать связанный CSS для встроенных(внешний) CSS.
 
[[Категория:CSS]]
Источник — https://ru.wikibooks.org/wiki/CSS/Применение_CSS_для_HTML_и_XHTML