Перейти к содержанию

CSS/Применение CSS для HTML и XHTML

Материал из Викиучебника — открытых книг для открытого мира
< CSS

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; 
}

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

Встраивание

[править]

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

Жирный текст

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

<!DOCTYPE html>
<html>
   <head>
      <title>
         Example Web Page
      </title>
      <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
      <p style="font-weight: bold; ">
         Жирный текст
      </p>
   </body>
</html>

Внедрение

[править]

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

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <style type="text/css">

         p {
            font-weight: bold; 
         }
</style>

      <title>
         Example Web Page
      </title>
   </head>
   <body>
      <p>
         Text that will be formatted.
      </p>
    </body>
</html>

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

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

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

Источник — https://ru.wikibooks.org/w/index.php?title=CSS/Применение_CSS_для_HTML_и_XHTML&oldid=163492