Викиучебник

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

Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
уточнение перевода и викификация
Нет описания правки
Строка 1:
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-документа выглядит следующим образом:
Источник — https://ru.wikibooks.org/wiki/CSS/Применение_CSS_для_HTML_и_XHTML