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

Содержимое удалено Содержимое добавлено

Линейный

Версия от 14:00, 8 ноября 2014

CSS может быть применён к HTML или XHTML с использованием трёх методов: связывание (linking), внедрение (embedding) и встраивание (inlining).

В связанном методе таблица стилей создаётся и хранится в отдельном файле с расширением .css . Это связанные (или внешние) стили.

Во внедрённом методе CSS хранится как часть HTML-страницы в теге <style> между тегами <head>. Это внедрённые (или внутренние) стили.

Во встроенном методе CSS хранится непосредственно в атрибуте стиля HTML тега, пример: <div style="font-weight: bold">Bold Font</div> Это встроенные стили.

Предпочтительнее использовать первый метод, но остальные методы тоже подходят и не требуют создания отдельного файла для стилей.

Связывание

CSS хранятся в отдельном файле. Для ссылки на этот файл с HTML-страницы используется тег <link> между тегами <head> , как показано в следующем примере, который предполагает, что таблица стилей хранится в файле с именем «style.css».

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>
         Example Web Page
      </title>
      <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
</html>

link элемент в примере состоит из трёх атрибутов. Первый, rel, сообщает браузеру тип и цель ссылки. Второй, type, сообщает браузеру, какой MIME-тип файла, который мы подключаем. И наконец, третий, href, сообщает браузеру URL, чтобы найти файл. В этом примере URL является относительным, но он также может быть абсолютным.

«style.css» с одним правилом содержит только текст следующего содержания:

p {
   font-weight: bold; 
}

Это говорит браузеру, что текст в параграфе (<р>) должен быть показан как полужирный.

Пример встраивания правила напрямую к тегу:

Text that will be formatted.

Исходный код для полного HTML-документа выглядит следующим образом:

<!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>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>Text that will be formatted.</p>
  </body>
</html>

Внедрение

В динамически генерируемых страницах возможно придётся использовать внедрённые (внутренние) CSS, но это должно быть сведено к минимуму. Даже в динамических страницах любой CSS является общим для нескольких страниц и как правило должнен быть перемещён в связанный (внешний) стиль.

Внедрёнными CSS являются стили, которые находятся в заголовке HTML-документа, который требует стилизации. Например, мы хотели бы, чтобы текст в этом HTML-документе был выделен полужирным шрифтом.

 <!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>
  </head>
  <body>
   <p>
    Text that will be formatted.
   </p>
  </body>
 </html>

CSS должен быть помещён в раздел заголовка документа:

  <head>
   <title>Example Web Page</title>
   <style type="text/css">
    p {
     font-weight:bold;
    }
   </style>
  </head>

CSS содержится в style элементе. Установка элемента type атрибут text/css сообщает браузеру, что внедрённый стиль написан на CSS и должен быть использован для форматирования страницы. Если атрибут type отсутствует или установлен в неправильное значение, CSS не будет применён к странице.

В этом примере стилевое правило p{font-weight:bold;} указывает браузеру сделать весь текст в любом параграфе полужирным. Текст на странице будет выглядеть следующим образом:

Текст, который будет отформатирован.

Вот полный текст документа, включающий CSS:

 <!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>

Помните, что вы должны использовать связывание стилей вместо внедрённой (внутренней) таблицы стилей когда это возможно; это позволяет наиболее легче заменить общую информацию стиля без того, чтобы отслеживать стили в различных документах и файлах.

Встраивание

Встроенная таблица стилей добавляет стилевую разметку в отдельные теги с помощью атрибута style.
Например:

 <div style="font-weight:bold; color:blue;">Полужирный шрифт</div>

будет выглядеть так:

Полужирный шрифт

Как уже упоминалось, предпочтительнее использовать связанный (внешний) CSS.

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