CSS/Применение CSS для HTML и XHTML: различия между версиями
Содержимое удалено Содержимое добавлено
Oleg4280 (обсуждение | вклад) Нет описания правки |
Oleg4280 (обсуждение | вклад) Нет описания правки |
||
Строка 14:
CSS хранятся в отдельном файле. Для ссылки на этот файл с HTML-страницы используется тег <nowiki> <link> </nowiki> между тегами <nowiki> <head> </nowiki>, как показано в следующем примере, который предполагает, что таблица стилей хранится в файле с именем "style.css".
<source lang="html4strict">
<head>
Строка 20 ⟶ 21 :
</head>
</source>
<code>link</code> элемент в примере состоит из трех атрибутов. Первый, <code>rel</code>, сообщает браузеру тип и цель ссылки. Второй, <code>type</code>, сообщает браузеру, какой тип стилей. И третий, <code>href</code>, сообщает браузеру URL, чтобы найти таблицу стилей. В этом примере URL является относительным, но он также может быть абсолютным.
"style.css" с одним правилом содержит только текст следующего содержания:
<source lang="css">
p {
Строка 28 ⟶ 31 :
}
</source>
Это говорит браузеру, что текст в параграфе (<code>р</code>) должен быть показан как полужирный.
Пример рендеринга:
{{CSS:rendered|1=<p style="font-weight:bold;">Текст, который будет отформатирован.</p>}}
Исходный код для полного HTML-документа выглядит следующим образом:
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
Строка 53 ⟶ 59 :
Внедрёнными CSS являются CSS, которые находятся в заголовке HTML-документа, который требует стилизации. Например, мы хотели бы, чтобы текст в этом HTML-документе был выделен полужирным шрифтом.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Строка 68 ⟶ 75 :
CSS должен быть помещён в раздел заголовка документа:
<source lang="html4strict">
<head>
Строка 78 ⟶ 86 :
</head>
</source>
CSS содержится в <code>style</code> элементе. Установка элемента <code>type<code> атрибут <code>text/css</code> сообщает браузеру, что внедрённый стиль написан на CSS и должен быть использован для форматирования страницы. Если атрибут <code>type<code> отсутствует или установлен в неправильное значение, CSS не будет применён к странице.
Немного CSS в этом примере указывает браузеру, чтобы сделать весь текст находящийся в любом пункте (<code>p</code>) элемента жирным. Текст на странице будет выглядеть следующим образом:
{{CSS:rendered|1=<p style="font-weight:bold" title="This text is bold">Текст, который будет отформатирован.</p>}}
Вот полный текст документа, включающий CSS.
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Строка 110 ⟶ 121 :
Например:
<source lang="html4strict">
<div style="font-weight:bold; color:blue;">Полужирный шрифт</div>
Строка 115 ⟶ 127 :
будет выглядеть так:
{{CSS:rendered|1=<div style="font-weight: bold; color: blue;">Полужирный шрифт</div>}}
Как уже упоминалось, предпочтительнее использовать связанный (внешний) CSS.
{{BookCat}}
[[en:Cascading Style Sheets/Applying CSS to HTML and XHTML]]
| |||