Style

Внешняя таблица стилей

Внешняя таблица стилей хранится в отдельном файле с расширением CSS. Это самый эффективный способ, т. к. он полностью отделяет правила форматирования от ваших HTML-страниц. Он также позволяет легко применять одни и те же правила ко многим страницам. Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью тега <link>. Это одинарный тег, который располагается внутри элемента <head>. Элемент должен использовать три следующих атрибута. В атрибуте href указывается абсолютный или относительный URL-адрес файла CSS. Атрибут rel определяет отношение между НТМL-страницей и связанным файлом. При создании ссылки на файл CSS он должен иметь значение stylesheet, показывающее, что присоединяемый таким образом документ содержит таблицу стилей. Атрибут type определяет тип документа, на который указывает ссылка. В нем должно быть указано значение text/css.

CSS, как и HTML, не является языком программирования. Это язык каскадных таблиц стилей, то есть он позволяет выборочно применять нужные стили к элементам в HTML-документах. Например, чтобы выбрать все элементы <p>, т.е. параграфы на HTML-странице и окрасить их текст в красный цвет, вы должны написать на CSS следующее:


Давайте поместим эти три строки CSS в новый файл в любом текстовом редакторе (например Notepad++), а затем сохраним файл как style.css в папке styles.

Чтобы применять CSS к нашему HTML-документу, вставьте следующую строку в шапку, то есть между тегами <head> и </head>:

Attributes

This element includes the global attributes.

This attribute defines the styling language as a MIME type (charset should not be specified). This attribute is optional and defaults to if it is not specified; values other than the empty string or are not used. Note: There is very little reason to include this attribute in modern web documents.
This attribute defines which media the style should be applied to. Its value is a media query, which defaults to if the attribute is missing.
A cryptographic nonce (number used once) used to whitelist inline styles in a style-src Content-Security-Policy. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource’s policy is otherwise trivial.
This attribute specifies alternative style sheet sets.

Deprecated attributes


This attribute specifies that the styles only apply to the elements of its parent(s) and children.

This attribute may be re-introduced in the future per https://github.com/w3c/csswg-drafts/issues/3547. If you want to use the attribute now, you can use a polyfill.

Browser compatibility

The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 3 Opera Full support 3.5 Safari Full support 1 WebView Android Full support 1 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support 10.1 Safari iOS Full support 1 Samsung Internet Android Full support 1.0
Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 3 Opera Full support 3.5 Safari Full support 1 WebView Android Full support 1 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support 10.1 Safari iOS Full support 1 Samsung Internet Android Full support 1.0

DeprecatedNon-standard

Chrome No support 19 — 35 Disabled Edge No support No Firefox No support 55 — 61 Notes Disabled IE No support No Opera No support 15 — 22 Disabled Safari No support No WebView Android No support No Chrome Android No support 25 — 35 Disabled Firefox Android No support 55 — 61 Notes Disabled Opera Android No support 14 — 22 Disabled Safari iOS No support No Samsung Internet Android No support 1.5 — 3.0
Chrome Full support 1 Edge Full support 12 Firefox Full support 1 IE Full support 3 Opera Full support 3.5 Safari Full support 1 WebView Android Full support 1 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support 10.1 Safari iOS Full support 1 Samsung Internet Android Full support 1.0
Chrome Full support 1 Edge Full support 12 Firefox Full support 1 Notes IE Full support 3 Opera Full support 3.5 Safari Full support 1 WebView Android Full support 1 Chrome Android Full support 18 Firefox Android Full support 4 Opera Android Full support 10.1 Safari iOS Full support 1 Samsung Internet Android Full support 1.0

Examples

A simple stylesheet


In the following example, we apply a very simple stylesheet to a document:

<!doctype html>
<html>
<head>
  <style>
    p {
      color: red;
    }
  </style> 
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

Multiple style elements

In this example we’ve included two elements — notice how the conflicting declarations in the later element override those in the earlier one, if they have equal specificity.

<!doctype html>
<html>
<head>
  <style>
    p {
      color: white;
      background-color: blue;
      padding: 5px;
      border: 1px solid black;
    }
  </style> 
  <style>
    p {
      color: blue;
      background-color: yellow;
    }
  </style> 
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

Including a media query

In this example we build on the previous one, including a attribute on the second element so it is only applied when the viewport is less than 500px in width.

<!doctype html>
<html>
<head>
  <style>
    p {
      color: white;
      background-color: blue;
      padding: 5px;
      border: 1px solid black;
    }
  </style> 
  <style media="all and (max-width: 500px)">
    p {
      color: blue;
      background-color: yellow;
    }
  </style> 
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

Внутренняя таблица стилей


Данный стиль определяется в самом HTML-документе и обычно располагается в заголовке веб-страницы HEAD. По своей гибкости и возможностям этот способ подключения стилей уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, стили разполагаются прямо в теле HTML-документа. Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента <style>, который обычно находится в элементе <head>, но фактически может быть помещен в любом месте документа. Этих тегов на странице может быть несколько.

Тег <style> позволяет записывать внутри себя код в формате CSS:

Пример: Внутренняя таблица стилей

  • Результат
  • HTML-код
  • Попробуй сам »

В данном примере мы с помощью CSS установили цвет фона для элемента <body>: background-color:palegreen, цвет и тип шрифта для заголовков <h1>: color: blue; font-family:verdana, а также размер шрифта, цвет и выравнивание текста по центру для параграфов <p>: font-size:20px; color:red; text-align:center.


С этим читают