Викиучебник

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

Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
Нет описания правки
Нет описания правки
Строка 39:
Это говорит браузеру, что текст в параграфе (<code><nowiki><р></nowiki></code>) должен быть показан как полужирный.
 
== Встраивание ==▼
Пример встраивания правила напрямую к тегу:
 
<b>
Жирный текст.
Text that will be formatted. ▼
</b>
 
Строка 48 ⟶ 49 :
 
<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>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p style="font-weight: bold; ">▼
<p>Text that will be formatted.</p>
Жирный текст
</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}}
Источник — https://ru.wikibooks.org/wiki/CSS/Применение_CSS_для_HTML_и_XHTML