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

Нет описания правки
Это говорит браузеру, что текст в параграфе (<code><nowiki><р></nowiki></code>) должен быть показан как полужирный.
 
== Встраивание ==
Пример встраивания правила напрямую к тегу:
 
<b>
Жирный текст.
Text that will be formatted.
</b>
 
 
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"html>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<html lang="en">
<headtitle>
<title> Example Web Page</title>
</ptitle>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body/head>
<body>
<p>Text that will be formatted.</p>
<p style="font-weight: bold; ">
</body>
Жирный текст
</p>
</body>
</html>
</source>
 
== Внедрение ==
В динамически генерируемых страницах возможно придётся использовать внедрённые (внутренние) CSS, но это должно быть сведено к минимуму. Даже в динамических страницах любой CSS является общим для нескольких страниц и как правило должнендолжен быть перемещён в связанный (внешний) стиль.
 
Внедрёнными CSS являются стили, которые находятся в заголовке HTML-документа, который требует стилизации. Например, мы хотели бы, чтобы текст в этом HTML-документе был выделен полужирным шрифтом.
В динамически генерируемых страницах возможно придётся использовать внедрённые (внутренние) CSS, но это должно быть сведено к минимуму. Даже в динамических страницах любой CSS является общим для нескольких страниц и как правило должнен быть перемещён в связанный (внешний) стиль.
 
<source lang="html4stricthtml5">
Внедрёнными CSS являются стили, которые находятся в заголовке HTML-документа, который требует стилизации. Например, мы хотели бы, чтобы текст в этом HTML-документе был выделен полужирным шрифтом.
<!DOCTYPE html>
 
</html>
<source lang="html4strict">
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<htmlmeta langcharset="enutf-8">
<style type="text/css">
<head>
<title>Example Web Page</title>
</head>
<body>
<p>
Text that will be formatted.
</p>
</body>
</html>
</source>
<htmlsource lang="encss">
 
p {
CSS должен быть помещён в раздел заголовка документа:
font-weight: bold;
 
}
<source lang="html4strict">
</source>
<head>
<source lang="html4stricthtml5">
<title>Example Web Page</title>
<title>
<style type="text/css">
<title> Example Web Page</title>
p {
font-weight:bold; </title>
}</head>
</stylebody>
</headp>
Text that will be formatted.
</p>
</body>
</html>
</source>
 
CSS содержится в элементе <code><nowiki><style></nowiki></code> элементе. Установка элементаатрибута <code>type<code> атрибут <code>="text/css"</code> сообщает браузеру, что внедрённый стиль написан на CSS и должен быть использован для форматирования страницы., Еслихотя атрибутв <code>type<code>HTML5 отсутствуетон илине установленобязателен, влучше неправильноеего значениеписать, CSSнапример не будет применёндля кстарых страницебраузеров.
 
В этом примере стилевое правило <code>p {font-weight: bold; }</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">
<html lang="en">
<head>
<title>Example Web Page</title>
<style type="text/css">
p {
font-weight:bold;
}
</style>
</head>
<body>
<p>
Текст, который будет отформатирован.
</p>
</body>
</html>
</source>
 
Помните, что вы должны использовать [[CSS/Применение CSS для HTML и XHTML|связывание]] стилей вместо внедрённой (внутренней) таблицы стилей когда это возможно; это позволяет наиболее легче заменить общую информацию стиля без того, чтобы отслеживать стили в различных документах и файлах.
 
== Встраивание ==
 
Встроенная таблица стилей добавляет стилевую разметку в отдельные теги с помощью атрибута style.
 
Например:
 
<source lang="html4strict">
<div style="font-weight:bold; color:blue;">Полужирный шрифт</div>
</source>
 
будет выглядеть так:
 
{{CSS:rendered|1=<div style="font-weight: bold; color: blue;">Полужирный шрифт</div>}}
 
Как уже упоминалось, предпочтительнее использовать связанный (внешний) CSS.
 
{{BookCat}}
92

правки