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

Нет описания правки
(уточнение перевода и викификация)
CSS может быть применён к HTML или XHTML с использованием трёх методов: связывание (linking), внедрение (embedding) и встраивание (inlining).
 
В связанном методе таблица стилей создаётся и хранится в отдельном файле с расширением .css . Это связанные (или внешние) стили.
 
Во внедрённом методе CSS хранится как часть HTML-страницы в теге <code><nowiki> <style> </nowiki></code> между тегами <nowiki> <head> </nowiki>.
Это внедрённые (или внутренние) стили.
 
Во встроенном методе CSS хранится непосредственно в атрибуте стиля HTML тега, пример: <code><nowiki><div style="font-weight: bold">Bold Font</div></nowiki></code>
Это встроенные стили.
 
Предпочтительнее использовать первый метод, но остальные методы тоже подходят и не требуют создания отдельного файла для стилей.
 
== Связывание ==
 
CSS хранятся в отдельном файле. Для ссылки на этот файл с HTML-страницы используется тег <nowiki> <link> </nowiki> между тегами <nowiki> <head> </nowiki>, как показано в следующем примере, который предполагает, что таблица стилей хранится в файле с именем «style.css».
 
<source lang="html4stricthtml5">
<!DOCTYPE html>
<head>
<html>
<title>Example Web Page</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<title>
<title> Example Web Page</title>
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
</html>
</source>
 
<code>link</code> элемент в примере состоит из трёх атрибутов. Первый, <code>rel</code>, сообщает браузеру тип и цель ссылки. Второй, <code>type</code>, сообщает браузеру, какой MIME-тип стилейфайла, который мы подключаем. И наконец, третий, <code>href</code>, сообщает браузеру URL, чтобы найти таблицу стилейфайл. В этом примере URL является относительным, но он также может быть абсолютным.
 
«style.css» с одним правилом содержит только текст следующего содержания:
 
<source lang="css">
p {
font-weight: bold;
}
</source>
 
Это говорит браузеру, что текст в параграфе (<code><nowiki><р></nowiki></code>) должен быть показан как полужирный.
 
Пример встраивания правила напрямую к тегу:
Пример рендеринга:
 
<b>
{{CSS:rendered|1=<p style="font-weight:bold;">Текст, который будет отформатирован.</p>}}
Text that will be formatted.
</b>
 
Исходный код для полного HTML-документа выглядит следующим образом:
92

правки