<!DOCTYPE html>
<html class="client-nojs" lang="ru" dir="ltr"><head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="./_res_/favicon.png">
    <link rel="canonical" href="https://ru.wikipedia.org/wiki/CSS"> <link href="./_mw_/ext.cite.styles.css" rel="stylesheet" type="text/css">
    <link href="./_mw_/ext.pygments.css" rel="stylesheet" type="text/css">
    <link href="./_mw_/ext.tmh.player.styles.css" rel="stylesheet" type="text/css">
    <link href="./_mw_/skins.vector.styles.legacy.css" rel="stylesheet" type="text/css">
    <meta name="ResourceLoaderDynamicStyles" content="">
    <link href="./_mw_/ext.gadget.common-site.css" rel="stylesheet" type="text/css">
    <link href="./_mw_/ext.gadget.logo.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="./_mw_/site.styles.css">
    <link rel="stylesheet" type="text/css" href="./_mw_/noscript.css">
    <link rel="stylesheet" type="text/css" href="./_res_/footer.css">
    <link rel="stylesheet" type="text/css" href="./_res_/vector.css">
  </head>

  <body class="skin-vector-legacy mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-CSS rootpage-CSS skin-vector action-view">
    <div id="content" class="mw-body" role="main">
      <a id="top"></a>
      <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">CSS</span></h1>
      <div id="bodyContent" class="vector-body">
        <div id="contentSub">
          <div id="mw-content-subtitle"></div>
        </div>
        <div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="ru" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="ru" dir="ltr">
<table class="infobox infobox-0f4d2d22fba9d8c2" style="" data-name="Файловый формат"><tbody><tr><th colspan="2" scope="colgroup" class="infobox-above" style="">CSS</th></tr><tr><td colspan="2" class="infobox-image" style=""> <span data-wikidata-claim-id="Q46441$1603d56b-4978-f2c4-8d43-35674a113df8" class="wikidata-claim" data-wikidata-property-id="P154"><span class="wikidata-snak wikidata-main-snak"><span typeof="mw:File/Frameless"><img alt="Изображение логотипа" src="./_assets_/0c70a452f799bfe840676ee341124611/Official_CSS_Logo.svg.png" decoding="async" width="80" height="80" class="mw-file-element" data-file-width="1000" data-file-height="1000" loading="lazy"></span></span></span> </td></tr>
<tr>
<td colspan="2" class="plainlist" style="text-align:center;">
<span data-wikidata-claim-id="Q46441$08e3bdf9-4a83-1541-b386-86572e7ddf3a" class="wikidata-claim" data-wikidata-property-id="P2910"><span class="wikidata-snak wikidata-main-snak"><span typeof="mw:File/Frameless"><img src="./_assets_/0c70a452f799bfe840676ee341124611/CSS3_logo_and_wordmark.svg.png" decoding="async" width="57" height="80" class="mw-file-element" data-file-width="363" data-file-height="512" loading="lazy"></span></span></span></td>
</tr>
<tr>
<th scope="row" class="plainlist"><a href="%D0%A0%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8%D0%BC%D0%B5%D0%BD%D0%B8_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0" title="Расширение имени файла">Расширение</a></th>
<td class="plainlist">
<span data-wikidata-claim-id="Q46441$1e879eca-48b7-a57a-71fb-07eb61da71da" class="wikidata-claim" data-wikidata-property-id="P1195"><span class="wikidata-snak wikidata-main-snak"><code>.css</code></span></span></td>
</tr>
<tr>
<th scope="row" class="plainlist"><a href="MIME" title="MIME">MIME</a>-тип</th>
<td class="plainlist">
<span data-wikidata-claim-id="Q46441$50914868-46ad-fb22-1318-1ab9a1c4e75b" class="wikidata-claim" data-wikidata-property-id="P1163"><span class="wikidata-snak wikidata-main-snak">text/css</span></span></td>
</tr>
<tr>
<th scope="row" class="plainlist">Разработчик</th>
<td class="plainlist">
<span data-wikidata-claim-id="Q46441$eb9b68ff-4c35-4e96-974b-36540c037149" class="wikidata-claim" data-wikidata-property-id="P178"><span class="wikidata-snak wikidata-main-snak"><a href="CSS_Working_Group" title="CSS Working Group">CSS Working Group</a></span></span>, <span data-wikidata-claim-id="Q46441$aa4f566a-4fd5-518d-06db-d76ec620a5f5" class="wikidata-claim" data-wikidata-property-id="P178"><span class="wikidata-snak wikidata-main-snak"><span lang="en"><style data-mw-deduplicate="TemplateStyles:r138326222">
/* start https://ru.wikipedia.org/ */


.mw-parser-output .ts-Wikidata-redLink a{background:none;padding:0}.mw-parser-output .ts-Wikidata-redLink a.external{color:#ba0000;color:var(--color-link-red,#ba0000)}.mw-parser-output .ts-Wikidata-redLink a.external:visited{color:#a55858;color:var(--color-link-red--visited,#a55858)}


/* end   https://ru.wikipedia.org/ */
</style><span class="ts-Wikidata-redLink "><a class="external text" href="https://ru.wikipedia.org/w/index.php?title=Bert_Bos&amp;action=edit&amp;editintro=T:Нет_статьи/editintro&amp;preload=T:Нет_статьи/preload&amp;preloadparams%5B%5D=Q617878&amp;preloadparams%5B%5D=Bert+Bos&amp;preloadparams%5B%5D=%D0%9F%D0%B5%D1%80%D1%81%D0%BE%D0%BD%D0%B0">Bert Bos</a></span></span></span></span> и <span data-wikidata-claim-id="Q46441$731ed562-4bff-7315-4bfc-9689bc8b0faa" class="wikidata-claim" data-wikidata-property-id="P178"><span class="wikidata-snak wikidata-main-snak"><a href="%D0%9B%D0%B8%2C_%D0%A5%D0%BE%D0%BA%D0%BE%D0%BD_%D0%92%D0%B8%D1%83%D0%BC" title="Ли, Хокон Виум">Хокон Виум Ли</a></span><sup id="cite_ref-_a3b831c2f8da1c27_1-0" class="reference"><a href="#cite_note-_a3b831c2f8da1c27-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-_3de1b6142723339b_2-0" class="reference"><a href="#cite_note-_3de1b6142723339b-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></span></td>
</tr>
<tr>
<th scope="row" class="plainlist">Опубликован</th>
<td class="plainlist">
<span data-wikidata-claim-id="Q46441$3de3a354-4401-487f-c2fd-211303919a2a" class="wikidata-claim" data-wikidata-property-id="P577"><span class="wikidata-snak wikidata-main-snak"><span class="nowrap"><a href="17_%D0%B4%D0%B5%D0%BA%D0%B0%D0%B1%D1%80%D1%8F" title="17 декабря">17 декабря</a> <a href="1996_%D0%B3%D0%BE%D0%B4" title="1996 год">1996</a></span></span></span></td>
</tr>
<tr>
<th scope="row" class="plainlist">Тип формата</th>
<td class="plainlist">
<span data-wikidata-property-id="P31" class="no-wikidata"><a href="%D0%AF%D0%B7%D1%8B%D0%BA_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9" title="Язык таблиц стилей">Язык таблиц стилей</a></span></td>
</tr>
<tr>
<th scope="row" class="plainlist">Стандарт(ы)</th>
<td class="plainlist">
<a rel="nofollow" class="external text" href="http://www.w3.org/TR/CSS1">Level 1 (Recommendation)</a><br><a rel="nofollow" class="external text" href="http://www.w3.org/TR/CSS2/">Level 2 (Recommendation)</a><br><a rel="nofollow" class="external text" href="http://www.w3.org/TR/CSS21/">Level 2 Revision 1 (Recommendation)</a></td>
</tr>
<tr>
<th scope="row" class="plainlist">Сайт</th>
<td class="plainlist">
<span data-wikidata-claim-id="Q46441$D1D94CA5-6711-4209-88C2-B147C0DE1D7D" class="wikidata-claim" data-wikidata-property-id="P856"><span class="wikidata-snak wikidata-main-snak"><a rel="nofollow" class="external text" href="https://www.w3.org/Style/CSS/">w3.org/Style/CSS/</a>&nbsp;<span class="ref-info" title="на английском языке" style="cursor:help;">(англ.)</span></span></span></td>
</tr><tr><td colspan="2" class="infobox-below" style=";"><span data-wikidata-claim-id="Q46441$e3a5798e-48a7-ec31-6070-feb1e58b16e3" class="wikidata-claim" data-wikidata-property-id="P373"><span class="wikidata-snak wikidata-main-snak"><span typeof="mw:File"><a href="https://commons.wikimedia.org/wiki/Category:Cascading_Style_Sheets" title="commons:Category:Cascading Style Sheets" class="external"><img alt="Логотип Викисклада" src="./_assets_/0c70a452f799bfe840676ee341124611/Commons-logo.svg.png" decoding="async" width="15" height="20" class="mw-file-element" data-file-width="1024" data-file-height="1376" loading="lazy"></a></span>&nbsp;<a href="https://commons.wikimedia.org/wiki/Category:Cascading_Style_Sheets" class="extiw external" title="commons:Category:Cascading Style Sheets">Медиафайлы на Викискладе</a></span></span></td></tr>
</tbody></table>
<style data-mw-deduplicate="TemplateStyles:r138740689">
/* start https://ru.wikipedia.org/ */


.mw-parser-output .ts-Боковая_навигационная_таблица-body{float:right;clear:right;width:23em;margin:0 0 1.0em 1.0em;background:var(--background-color-interactive-subtle,#f8f9fa);border:1px solid var(--border-color-base,#a2a9b1);color:inherit;padding:0.4em;border-spacing:0.2em;text-align:center;line-height:1.4em;font-size:90%}.mw-parser-output .ts-Боковая_навигационная_таблица-outerTitle{padding-bottom:0.2em;font-size:125%;line-height:1.15em;font-weight:bold}.mw-parser-output .ts-Боковая_навигационная_таблица-topImage{padding:0 0 0.4em}.mw-parser-output .ts-Боковая_навигационная_таблица-topImage-caption,.mw-parser-output .ts-Боковая_навигационная_таблица-image-caption{padding-top:0.2em;line-height:1.2em}.mw-parser-output .ts-Боковая_навигационная_таблица-preTitle{padding-top:0.4em}.mw-parser-output .ts-Боковая_навигационная_таблица-topImage-row+tr>.ts-Боковая_навигационная_таблица-preTitle{padding-top:0}.mw-parser-output .ts-Боковая_навигационная_таблица-image{padding:0.4em 0 0.4em}.mw-parser-output .ts-Боковая_навигационная_таблица-title{padding:0.2em 0.4em 0.2em;font-size:125%;line-height:1.15em;font-weight:bold;background:var(--ruwiki-background-color-blue200,#cfe3ff);color:inherit}.mw-parser-output .ts-Боковая_навигационная_таблица-above{padding:0.2em 0.4em 0.2em;font-weight:bold}.mw-parser-output .ts-Боковая_навигационная_таблица-below{padding:0.2em 0.4em 0.2em;font-weight:bold;background:var(--background-color-progressive-subtle,#eaf3ff);color:inherit}.mw-parser-output .ts-Боковая_навигационная_таблица-heading{padding:0.2em 0;font-weight:bold;background:var(--background-color-progressive-subtle,#eaf3ff);color:inherit}.mw-parser-output .ts-Боковая_навигационная_таблица-list{padding:0.2em 0}


/* end   https://ru.wikipedia.org/ */
</style>
<p><b>CSS</b> (<a href="%D0%90%D0%BD%D0%B3%D0%BB%D0%B8%D0%B9%D1%81%D0%BA%D0%B8%D0%B9_%D1%8F%D0%B7%D1%8B%D0%BA" title="Английский язык">англ.</a>&nbsp;<span lang="en" style="font-style:italic;">Cascading Style Sheets</span>&nbsp;«каскадные таблицы стилей»)&nbsp;— <a href="%D0%A4%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D1%8F%D0%B7%D1%8B%D0%BA" title="Формальный язык">формальный язык</a> декорирования и описания внешнего вида документа (<a href="%D0%92%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0" title="Веб-страница">веб-страницы</a>), написанного с использованием <a href="%D0%AF%D0%B7%D1%8B%D0%BA_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8" title="Язык разметки">языка разметки</a> (чаще всего <a href="HTML" title="HTML">HTML</a> или <a href="XHTML" title="XHTML">XHTML</a>). Также может применяться к любым <a href="XML" title="XML">XML-документам</a>, например, к <a href="SVG" title="SVG">SVG</a> или <a href="XUL" title="XUL">XUL</a>.
</p>

<div class="mw-heading mw-heading2"><h2 id="Обзор"><span id=".D0.9E.D0.B1.D0.B7.D0.BE.D1.80"></span>Обзор</h2></div>
<div class="mw-heading mw-heading3"><h3 id="Использование_CSS"><span id=".D0.98.D1.81.D0.BF.D0.BE.D0.BB.D1.8C.D0.B7.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5_CSS"></span>Использование CSS</h3></div>
<p>CSS используется создателями <a href="%D0%92%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0" title="Веб-страница">веб-страниц</a> для задания <a href="%D0%A6%D0%B2%D0%B5%D1%82" title="Цвет">цветов</a>, <a href="%D0%A8%D1%80%D0%B8%D1%84%D1%82" title="Шрифт">шрифтов</a>, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS является ограждение и отделение описания логической структуры веб-страницы (которое производится с помощью <a href="HTML" title="HTML">HTML</a> или других <a href="%D0%AF%D0%B7%D1%8B%D0%BA_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8" title="Язык разметки">языков разметки</a>) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью <a href="%D0%A4%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D1%8F%D0%B7%D1%8B%D0%BA" title="Формальный язык">формального языка</a> CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. 
</p><p>Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или <a href="%D0%9C%D0%B5%D1%82%D0%BE%D0%B4" title="Метод">методах</a> вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана) или при выводе устройствами, использующими <a href="%D0%A8%D1%80%D0%B8%D1%84%D1%82_%D0%91%D1%80%D0%B0%D0%B9%D0%BB%D1%8F" title="Шрифт Брайля">шрифт Брайля</a><style data-mw-deduplicate="TemplateStyles:r141254988">
/* start https://ru.wikipedia.org/ */


.mw-parser-output .ts-fix-template{font-style:normal;font-weight:normal;white-space:nowrap}.mw-parser-output .ts-fix-error{font-size:inherit}@media screen{.mw-parser-output .ts-fix-text{border:1px solid var(--border-color-base,#a2a9b1);box-decoration-break:clone;margin:0 -0.1em;padding:0 0.1em;transition:background 0.1s}.mw-parser-output .ts-fix-text:hover{background:#fee7e6}html.skin-theme-clientpref-night .mw-parser-output .ts-fix-text:hover{background:#4f1312}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .ts-fix-text:hover{background:#4f1312}}@media screen and (hover:hover){.mw-parser-output .ts-fix-comment,.mw-parser-output .ts-fix-commented>a:not(:hover){border-bottom:1px dotted;text-decoration:none}}


/* end   https://ru.wikipedia.org/ */
</style>.
</p>
<div class="mw-heading mw-heading3"><h3 id="Способы_подключения_CSS_к_документу"><span id=".D0.A1.D0.BF.D0.BE.D1.81.D0.BE.D0.B1.D1.8B_.D0.BF.D0.BE.D0.B4.D0.BA.D0.BB.D1.8E.D1.87.D0.B5.D0.BD.D0.B8.D1.8F_CSS_.D0.BA_.D0.B4.D0.BE.D0.BA.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D1.83"></span>Способы подключения CSS к документу</h3></div>
<p>Правила CSS могут располагаться как в самом <a href="%D0%92%D0%B5%D0%B1-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82" title="Веб-документ">веб-документе</a>, внешний вид которого они описывают, так и во внешних <a href="%D0%A4%D0%B0%D0%B9%D0%BB" title="Файл">файлах</a>, имеющих <a href="%D0%A4%D0%BE%D1%80%D0%BC%D0%B0%D1%82_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0" title="Формат файла">расширение</a> <code>.css</code>. Формат CSS&nbsp;— это <a href="%D0%A2%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%84%D0%B0%D0%B9%D0%BB" title="Текстовый файл">текстовый файл</a>, в котором содержится перечень правил CSS и комментариев к ним.<br>Стили CSS могут быть подключены или внедрены в описываемый ими <a href="%D0%92%D0%B5%D0%B1-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82" title="Веб-документ">веб-документ</a> четырьмя способами:
</p>
<ul><li>когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента <code class="nowrap" style="">&lt;link&gt;</code>, включённого в элемент <code class="nowrap" style="">&lt;head&gt;</code>:</li></ul>
<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
   <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
      .....
     <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="na">href</span><span class="o">=</span><span class="s">"style.css"</span><span class="p">&gt;</span>
   <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
   <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
      .....
   <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
<ul><li>когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу инструкцией @import в элементе<code class="nowrap" style="">&lt;style&gt;</code>:</li></ul>
<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
   <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
      .....
      <span class="p">&lt;</span><span class="nt">style</span> <span class="na">media</span><span class="o">=</span><span class="s">"all"</span><span class="p">&gt;</span>
<span class="w">         </span><span class="p">@</span><span class="k">import</span><span class="w"> </span><span class="nt">url</span><span class="o">(</span><span class="nt">style</span><span class="p">.</span><span class="nc">css</span><span class="o">)</span><span class="p">;</span>
<span class="w">      </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
   <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
<ul><li>когда стили описаны внутри документа, они могут быть включены в элемент <code class="nowrap" style="">&lt;style&gt;</code>, который, включается в элемент <code class="nowrap" style="">&lt;head&gt;</code>:</li></ul>
<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
   <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
      .....
      <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="w">         </span><span class="nt">body</span><span class="w"> </span><span class="p">{</span><span class="w"> </span>
<span class="w">            </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span>
<span class="w">         </span><span class="p">}</span>
<span class="w">      </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
   <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
   <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
      .....
   <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
<ul><li>когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента</li></ul>
<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp">&lt;!DOCTYPE&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
   <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
      .....
   <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
   <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
      <span class="p">&lt;</span><span class="nt">p</span> <span class="na">style</span><span class="o">=</span><span class="s">"font-size: 20px; color: green; font-family: arial, helvetica, sans-serif"</span><span class="p">&gt;</span>
         .....
      <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
   <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
<p>В первых двух случаях к документу применены <i>внешние стили</i>, а во вторых&nbsp;— <i>внутренние стили</i>.
</p><p>Для добавления CSS к <a href="XML" title="XML">XML-документу</a> последний должен содержать специальную ссылку на файл стилей:
</p>
<div class="mw-highlight mw-highlight-lang-xml mw-content-ltr" dir="ltr"><pre><span></span><span class="w">  </span><span class="cp">&lt;?xml-stylesheet type="text/css" href="style.css"?&gt;</span>
</pre></div>
<div class="mw-heading mw-heading3"><h3 id="Правила_построения_CSS"><span id=".D0.9F.D1.80.D0.B0.D0.B2.D0.B8.D0.BB.D0.B0_.D0.BF.D0.BE.D1.81.D1.82.D1.80.D0.BE.D0.B5.D0.BD.D0.B8.D1.8F_CSS"></span>Правила построения CSS</h3></div>
<p>В первых трёх случаях подключения стилей CSS к документу (см. выше) каждое правило CSS из файла имеет две основные части&nbsp;— <i>селектор</i> и <i>блок объявлений</i>. <i>Селектор</i>, расположенный в левой части правила до знака «{», определяет, на какие части документа (возможно, специально обозначенные) распространяется правило. <i>Блок объявлений</i> располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более <i>объявлений</i>, разделённых знаком «;». Каждое <i>объявление</i> представляет собой сочетание <i>свойства CSS</i> и <i>значения</i>, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.
</p>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">селектор</span><span class="o">,</span><span class="w"> </span><span class="nt">селектор</span><span class="w"> </span><span class="p">{</span>
<span class="w">  </span><span class="err">свойство:</span><span class="w"> </span><span class="err">значение</span><span class="p">;</span>
<span class="w">  </span><span class="err">свойство:</span><span class="w"> </span><span class="err">значение</span><span class="p">;</span>
<span class="w">  </span><span class="err">свойство:</span><span class="w"> </span><span class="err">значение</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
<p>В четвёртом случае подключения CSS к документу (см. список) правило CSS, являющееся значением атрибута style элемента, к которому он применяется, представляет собой перечень <i>объявлений</i> («<i>свойство CSS</i>&nbsp;: <i>значение</i>»), разделённых знаком «;».
</p>
<div class="mw-heading mw-heading4"><h4 id="Виды_селекторов"><span id=".D0.92.D0.B8.D0.B4.D1.8B_.D1.81.D0.B5.D0.BB.D0.B5.D0.BA.D1.82.D0.BE.D1.80.D0.BE.D0.B2"></span>Виды селекторов</h4></div>
<div class="mw-heading mw-heading5"><h5 id="Универсальный_селектор"><span id=".D0.A3.D0.BD.D0.B8.D0.B2.D0.B5.D1.80.D1.81.D0.B0.D0.BB.D1.8C.D0.BD.D1.8B.D0.B9_.D1.81.D0.B5.D0.BB.D0.B5.D0.BA.D1.82.D0.BE.D1.80"></span>Универсальный селектор</h5></div>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr mw-highlight-lines" dir="ltr"><pre><span></span><span class="linenos" data-line="1"></span><span class="o">*</span><span class="w"> </span><span class="p">{</span>
<span class="linenos" data-line="2"></span><span class="w">   </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">;</span><span class="w"> </span>
<span class="linenos" data-line="3"></span><span class="w">   </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="p">;</span><span class="w"> </span>
<span class="linenos" data-line="4"></span><span class="p">}</span>
</pre></div>
<div class="mw-heading mw-heading5"><h5 id="Селектор_тегов"><span id=".D0.A1.D0.B5.D0.BB.D0.B5.D0.BA.D1.82.D0.BE.D1.80_.D1.82.D0.B5.D0.B3.D0.BE.D0.B2"></span>Селектор тегов</h5></div>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">p</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="n">arial</span><span class="p">,</span><span class="w"> </span><span class="n">helvetica</span><span class="p">,</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span><span class="w"> </span>
<span class="p">}</span>
</pre></div>
<div class="mw-heading mw-heading5"><h5 id="Селектор_классов"><span id=".D0.A1.D0.B5.D0.BB.D0.B5.D0.BA.D1.82.D0.BE.D1.80_.D0.BA.D0.BB.D0.B0.D1.81.D1.81.D0.BE.D0.B2"></span>Селектор классов</h5></div>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">.</span><span class="nc">note</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span><span class="w"> </span>
<span class="w">   </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">yellow</span><span class="p">;</span><span class="w"> </span>
<span class="w">   </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="kc">bold</span><span class="p">;</span><span class="w"> </span>
<span class="p">}</span>
</pre></div>
<div class="mw-heading mw-heading5"><h5 id="Селектор_идентификаторов"><span id=".D0.A1.D0.B5.D0.BB.D0.B5.D0.BA.D1.82.D0.BE.D1.80_.D0.B8.D0.B4.D0.B5.D0.BD.D1.82.D0.B8.D1.84.D0.B8.D0.BA.D0.B0.D1.82.D0.BE.D1.80.D0.BE.D0.B2"></span>Селектор идентификаторов</h5></div>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="p">#</span><span class="nn">paragraph1</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="p">;</span><span class="w"> </span>
<span class="p">}</span>
</pre></div>
<div class="mw-heading mw-heading5"><h5 id="Селектор_атрибутов"><span id=".D0.A1.D0.B5.D0.BB.D0.B5.D0.BA.D1.82.D0.BE.D1.80_.D0.B0.D1.82.D1.80.D0.B8.D0.B1.D1.83.D1.82.D0.BE.D0.B2"></span>Селектор атрибутов</h5></div>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="w"> </span>
<span class="nt">a</span><span class="o">[</span><span class="nt">href</span><span class="o">=</span><span class="s2">"http://www.somesite.com"</span><span class="o">]</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="kc">bold</span><span class="p">;</span><span class="w"> </span>
<span class="p">}</span>
</pre></div>
<div class="mw-heading mw-heading5"><h5 id="Селектор_потомков_(контекстный_селектор)"><span id=".D0.A1.D0.B5.D0.BB.D0.B5.D0.BA.D1.82.D0.BE.D1.80_.D0.BF.D0.BE.D1.82.D0.BE.D0.BC.D0.BA.D0.BE.D0.B2_.28.D0.BA.D0.BE.D0.BD.D1.82.D0.B5.D0.BA.D1.81.D1.82.D0.BD.D1.8B.D0.B9_.D1.81.D0.B5.D0.BB.D0.B5.D0.BA.D1.82.D0.BE.D1.80.29"></span>Селектор потомков (контекстный селектор)</h5></div>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">div</span><span class="p">#</span><span class="nn">paragraph1</span><span class="w"> </span><span class="nt">p</span><span class="p">.</span><span class="nc">note</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">blue</span><span class="p">;</span><span class="w"> </span>
<span class="p">}</span>
</pre></div>
<div class="mw-heading mw-heading5"><h5 id="Селектор_дочерних_элементов"><span id=".D0.A1.D0.B5.D0.BB.D0.B5.D0.BA.D1.82.D0.BE.D1.80_.D0.B4.D0.BE.D1.87.D0.B5.D1.80.D0.BD.D0.B8.D1.85_.D1.8D.D0.BB.D0.B5.D0.BC.D0.B5.D0.BD.D1.82.D0.BE.D0.B2"></span>Селектор дочерних элементов</h5></div>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">p</span><span class="p">.</span><span class="nc">note</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="nt">b</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">color</span><span class="p">:</span><span class="kc">green</span><span class="p">;</span><span class="w"> </span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">div</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span>
<span class="w">    </span><span class="k">padding-left</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">title</span><span class="w"> </span><span class="p">{</span>
<span class="w">    </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<span class="w">    </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
<div class="mw-heading mw-heading5"><h5 id="Селектор_элементов_одного_уровня"><span id=".D0.A1.D0.B5.D0.BB.D0.B5.D0.BA.D1.82.D0.BE.D1.80_.D1.8D.D0.BB.D0.B5.D0.BC.D0.B5.D0.BD.D1.82.D0.BE.D0.B2_.D0.BE.D0.B4.D0.BD.D0.BE.D0.B3.D0.BE_.D1.83.D1.80.D0.BE.D0.B2.D0.BD.D1.8F"></span>Селектор элементов одного уровня</h5></div>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">h1</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nt">p</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">24</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span>
<span class="p">}</span>
</pre></div>
<div class="mw-heading mw-heading5"><h5 id="Селектор_псевдоклассов"><span id=".D0.A1.D0.B5.D0.BB.D0.B5.D0.BA.D1.82.D0.BE.D1.80_.D0.BF.D1.81.D0.B5.D0.B2.D0.B4.D0.BE.D0.BA.D0.BB.D0.B0.D1.81.D1.81.D0.BE.D0.B2"></span>Селектор псевдоклассов</h5></div>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">a</span><span class="p">:</span><span class="nd">active</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">blue</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
<div class="mw-heading mw-heading5"><h5 id="Селектор_псевдоэлементов"><span id=".D0.A1.D0.B5.D0.BB.D0.B5.D0.BA.D1.82.D0.BE.D1.80_.D0.BF.D1.81.D0.B5.D0.B2.D0.B4.D0.BE.D1.8D.D0.BB.D0.B5.D0.BC.D0.B5.D0.BD.D1.82.D0.BE.D0.B2"></span>Селектор псевдоэлементов</h5></div>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">p</span><span class="p">::</span><span class="nd">first-letter</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">32</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
<div class="mw-heading mw-heading3"><h3 id="Классы_и_идентификаторы_элементов"><span id=".D0.9A.D0.BB.D0.B0.D1.81.D1.81.D1.8B_.D0.B8_.D0.B8.D0.B4.D0.B5.D0.BD.D1.82.D0.B8.D1.84.D0.B8.D0.BA.D0.B0.D1.82.D0.BE.D1.80.D1.8B_.D1.8D.D0.BB.D0.B5.D0.BC.D0.B5.D0.BD.D1.82.D0.BE.D0.B2"></span>Классы и идентификаторы элементов</h3></div>
<p>Класс или идентификатор может быть присвоен какому-нибудь элементу HTML посредством атрибутов class или id этого элемента:
</p>
<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
   <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">"Content-Type"</span> <span class="na">content</span><span class="o">=</span><span class="s">"text/html; charset=utf-8"</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>
        Селекторы классов и идентификаторов
    <span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="w">        </span><span class="nt">p</span><span class="p">.</span><span class="nc">big</span><span class="w"> </span><span class="p">{</span>
<span class="w">            </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="n">arial</span><span class="p">,</span><span class="w"> </span><span class="n">helvetica</span><span class="p">,</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span>
<span class="w">            </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span><span class="w"> </span>
<span class="w">        </span><span class="p">}</span>
<span class="w">        </span>
<span class="w">        </span><span class="nt">div</span><span class="p">#</span><span class="nn">first</span><span class="w"> </span><span class="p">{</span>
<span class="w">            </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">silver</span><span class="p">;</span><span class="w"> </span>
<span class="w">        </span><span class="p">}</span>
<span class="w">    </span><span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
   <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
   <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
       <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"first"</span><span class="p">&gt;</span>
          <span class="cm">&lt;!-- Это div c серым фоном, стилизованный по id --&gt;</span>
       <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
       <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">"big"</span><span class="p">&gt;</span>
          <span class="cm">&lt;!-- Это текст красного цвета --&gt;</span>
       <span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
   <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div><p>Основное различие между классами элементов и идентификаторами элементов в том, что идентификатор предназначен для одного элемента, тогда как класс обычно присваивают сразу нескольким. Тем не менее, современные браузеры, как правило, корректно отображают множественные элементы с одинаковым идентификатором. Также различие в том, что могут существовать множественные классы (когда класс элемента состоит из нескольких слов, разделённых пробелами). Для идентификаторов такое невозможно.
</p><p>Важно отметить следующее отличие идентификатора от класса: идентификаторы широко используются в <a href="JavaScript" title="JavaScript">JavaScript</a> для нахождения уникального элемента в документе.
</p>

<p>Имена классов и идентификаторов, в отличие от названий тегов и их атрибутов, чувствительны к регистру ввода букв.
</p><p>Свойства классов и идентификаторов задаются с помощью соответствующих селекторов. Причём может быть задано как свойство класса в целом (в таком случае селектор начинается с „.“, например, „.big“) или свойство идентификатора самого по себе (в таком случае селектор начинается с „#“, например, „#first“), так и свойство какого-нибудь элемента этого класса или с этим идентификатором.
</p><p>В CSS, помимо классов, задаваемых автором страницы, существует также ограниченный набор так называемых <a rel="nofollow" class="external text" href="https://webref.ru/css#pseudo-class"><i>псевдоклассов</i>,</a> описывающих вид гиперссылок с определённым состоянием в документе, вид элемента, на котором находится фокус ввода, а также вид элементов, являющихся первыми дочерними элементами других элементов. Также в CSS существует четыре так называемых <i><a rel="nofollow" class="external text" href="https://webref.ru/css#pseudo-elements">псевдоэлемента</a></i>: первая буква, первая строка, применение специальных стилей до и после элемента.
</p>
<div class="mw-heading mw-heading3"><h3 id="Наследование._Каскадирование._Приоритеты_стилей_CSS."><span id=".D0.9D.D0.B0.D1.81.D0.BB.D0.B5.D0.B4.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5._.D0.9A.D0.B0.D1.81.D0.BA.D0.B0.D0.B4.D0.B8.D1.80.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5._.D0.9F.D1.80.D0.B8.D0.BE.D1.80.D0.B8.D1.82.D0.B5.D1.82.D1.8B_.D1.81.D1.82.D0.B8.D0.BB.D0.B5.D0.B9_CSS."></span>Наследование. Каскадирование. Приоритеты стилей CSS.</h3></div>
<p>Применение CSS к документам HTML основано на принципах <i>наследования</i> и <i>каскадирования</i>. Принцип <i>наследования</i> заключается в том, что свойства CSS, объявленные для элементов-предков, почти всегда наследуются элементами-потомками.
</p><p>Принцип <i>каскадирования</i> применяется в случае, когда какому-то элементу <a href="HTML" title="HTML">HTML</a> одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты, вводятся правила приоритета.
</p>
<ul><li>Наиболее низким приоритетом обладает стиль браузера;</li>
<li>Следующим по значимости является стиль, заданный пользователем браузера в его настройках;</li>
<li>И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:
<ul><li>Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;</li>
<li>Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;</li>
<li>Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел "виды селекторов"), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. Расчёт специфичности будет описан ниже.
<ul><li>Специфичность селекторов делится на 4 группы&nbsp;— <code>a</code>, <code>b</code>, <code>c</code>, <code>d</code>:
<ul><li>если стиль встроенный (определён как <code>style="..."</code>, то <code>а=1</code>, иначе <code>a=0</code>)&nbsp;;</li>
<li>значение <code>b</code> равно количеству идентификаторов (иначе&nbsp;— id=" ", они начинаются с <code>#</code>) в селекторе;</li>
<li>значение <code>c</code> равно количеству классов (class=" ", они начинаются с <code>.</code>), псевдоклассов (они начинаются с <code>:</code>, например <code>a:hover</code>) и селекторов атрибутов (<code>input[type="text"</code>);</li>
<li>значение <code>d</code> равно количеству селекторов типов элементов (<code>h1 { color: blue; }</code>) и псевдокод-элементов (<code>p::first-line { color: blue; }</code>). После этого полученное значение приводится к числу (обычно в десятичной системе счисления). Селектор, обладающий большим значением специфичности, обладает и большим приоритетом.</li></ul></li>
<li>Таблица расчёта специфичности<sup id="cite_ref-_c79e7a7f5548ffdc_3-0" class="reference"><a href="#cite_note-_c79e7a7f5548ffdc-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>:</li></ul></li></ul></li></ul>
<table class="wikitable">
<tbody><tr>
<th>Селектор
</th>
<th>a, b, c, d
</th>
<th>Число
</th></tr>
<tr>
<td>span
</td>
<td>0, 0, 0, 1
</td>
<td>1
</td></tr>
<tr>
<td>div .class
</td>
<td>0, 0, 1, 1
</td>
<td>11
</td></tr>
<tr>
<td>#id .class
</td>
<td>0, 1, 1, 0
</td>
<td>110
</td></tr>
<tr>
<td>div span
</td>
<td>0, 0, 0, 2
</td>
<td>2
</td></tr>
<tr>
<td>.class
</td>
<td>0, 0, 1, 0
</td>
<td>10
</td></tr>
<tr>
<td>#id span
</td>
<td>0, 1, 0, 1
</td>
<td>101
</td></tr></tbody></table>
<ul><li>Но, самым высоким приоритетом обладают стили, объявленные автором страницы <i>или пользователем</i>, с помощью сопроводительного правила<code>!important</code>. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, <i>заданным автором или пользователем</i>, а для остальных свойств, которые будут являться задаваемыми автором страницы, потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих специфичностей.</li></ul>
<div class="mw-heading mw-heading3"><h3 id="Пример_таблицы_стилей"><span id=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80_.D1.82.D0.B0.D0.B1.D0.BB.D0.B8.D1.86.D1.8B_.D1.81.D1.82.D0.B8.D0.BB.D0.B5.D0.B9"></span>Пример таблицы стилей</h3></div>
<p>Пример таблицы стилей (в таком виде она может быть либо размещена в отдельном файле .css, либо же обрамлена тегами <code class="nowrap" style="">&lt;style&gt;</code> и размещена в «шапке» той самой веб-страницы, на которую она действует):
</p>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="nt">p</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="n">arial</span><span class="p">,</span><span class="w"> </span><span class="n">helvetica</span><span class="p">,</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span><span class="w"> </span>
<span class="p">}</span>
<span class="nt">h2</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">font-size</span><span class="p">:</span><span class="w"> </span><span class="mi">20</span><span class="kt">pt</span><span class="p">;</span><span class="w"> </span>
<span class="w">   </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span><span class="w"> </span>
<span class="w">   </span><span class="k">background</span><span class="p">:</span><span class="w"> </span><span class="kc">white</span><span class="p">;</span><span class="w"> </span>
<span class="p">}</span>
<span class="p">.</span><span class="nc">note</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">red</span><span class="p">;</span><span class="w"> </span>
<span class="w">   </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">yellow</span><span class="p">;</span><span class="w"> </span>
<span class="w">   </span><span class="k">font-weight</span><span class="p">:</span><span class="w"> </span><span class="kc">bold</span><span class="p">;</span><span class="w"> </span>
<span class="p">}</span>
<span class="nt">p</span><span class="p">#</span><span class="nn">paragraph1</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">padding-left</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">a</span><span class="p">:</span><span class="nd">hover</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">text-decoration</span><span class="p">:</span><span class="w"> </span><span class="kc">none</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">#</span><span class="nn">news</span><span class="w"> </span><span class="nt">p</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="kc">blue</span><span class="p">;</span>
<span class="p">}</span>
<span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">"button"</span><span class="o">]</span><span class="w"> </span><span class="p">{</span>
<span class="w">   </span><span class="k">background-color</span><span class="p">:</span><span class="w"> </span><span class="kc">green</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
<p>Здесь приведено семь правил CSS с селекторами <code>p</code>, <code>h2</code>, <code>.note</code>, <code>p#paragraph1</code>, <code>a:hover</code>, <code>#news p</code> и <code>[type="button"]</code>.
</p>
<ol><li>Первое правило присвоено HTML-элементу <code><b>p</b></code> (<a href="%D0%90%D0%B1%D0%B7%D0%B0%D1%86" title="Абзац">абзацу</a>)&nbsp;— назначен стиль. Абзацы будут отображаться шрифтом Arial или, если такой шрифт недоступен, тогда Helvetica или Sans-serif, иначе, другим шрифтом этого семейства.</li>
<li>Второе правило присвоено HTML-элементу <code><b>h2</b></code> (заголовку второго уровня). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным <a href="%D0%9A%D0%B5%D0%B3%D0%BB%D1%8C" title="Кегль">размером</a>.</li>
<li>Третье правило будет применено к <i>любому</i> элементу, атрибут <code><b>class</b></code> которого равен «note». Например, к параграфу: <code>&lt;p class="note"&gt;Этот абзац будет выведен полужирным шрифтом красного цвета на жёлтом фоне. &lt;/p&gt;</code></li>
<li>Четвёртое правило будет применяться только к элементу <code>p</code>, атрибут <code>id</code> которого равен <code>paragraph1</code>. Такой элемент будет иметь внутренний отступ в 10 пикселей (padding).</li>
<li>Пятое правило определяет стиль <i>hover</i> для элементов <code><b>a</b></code>&nbsp;— <a href="%D0%93%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0" title="Гиперссылка">гиперссылок</a>. <a href="%D0%9F%D0%BE_%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E" title="По умолчанию">По умолчанию</a> в большинстве браузеров текст элементов <code><b>a</b></code> подчёркивается. Это правило уберёт подчёркивание, когда указатель мыши находится над этими элементами.</li>
<li>Шестое правило применяется для элементов <code><b>p</b></code>, которые находятся внутри <i>какого-либо</i> элемента с атрибутом <code>id</code>, равным «<code>news</code>» (#news p&nbsp;— это типичный случай селектора потомков, см. <a class="mw-selflink-fragment" href="#Виды_селекторов">5-й пункт списка выше</a>).</li>
<li>Седьмое правило применяется для всех элементов, у которых атрибут <code>type</code> равен <code><b>button</b></code>. Например, это правило будет применено к элементу <code>&lt;input type="button"&gt;</code>или <code>&lt;button type="button"&gt;Кнопка&lt;/button&gt;</code> (обычная кнопка), изменив его цвет фона на зелёный.</li></ol>
<div class="mw-heading mw-heading2"><h2 id="CSS-вёрстка"><span id="CSS-.D0.B2.D1.91.D1.80.D1.81.D1.82.D0.BA.D0.B0"></span>CSS-вёрстка</h2></div>
<p>До появления CSS оформление веб-страниц осуществлялось исключительно средствами <a href="HTML" title="HTML">HTML</a>, непосредственно внутри содержимого документа. Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа. За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.
</p><p>Преимущества:
</p>
<ul><li>Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на <a href="%D0%9A%D0%B0%D1%80%D0%BC%D0%B0%D0%BD%D0%BD%D1%8B%D0%B9_%D0%BF%D0%B5%D1%80%D1%81%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80" title="Карманный персональный компьютер">КПК</a> и сотовом телефоне меню будет следовать за содержимым.</li>
<li>Уменьшение времени загрузки страниц сайта за счёт переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может быть <a href="%D0%9A%D1%8D%D1%88" title="Кэш">закэшировано</a>.</li>
<li>Простота последующего изменения дизайна. Не нужно править каждую страницу, а достаточно лишь изменить CSS-файл.</li>
<li>Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.</li></ul>
<p>Недостатки:
</p>
<ul><li>Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS.</li>
<li>Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно увеличивает время редактирования и тестирования.</li></ul>
<div class="mw-heading mw-heading2"><h2 id="История_создания_и_развития_CSS"><span id=".D0.98.D1.81.D1.82.D0.BE.D1.80.D0.B8.D1.8F_.D1.81.D0.BE.D0.B7.D0.B4.D0.B0.D0.BD.D0.B8.D1.8F_.D0.B8_.D1.80.D0.B0.D0.B7.D0.B2.D0.B8.D1.82.D0.B8.D1.8F_CSS"></span>История создания и развития CSS</h2></div>
<figure class="mw-default-size" typeof="mw:File/Thumb"><img src="./_assets_/0c70a452f799bfe840676ee341124611/W3C_CSS_Snapshot.png" decoding="async" width="250" height="354" class="mw-file-element" data-file-width="794" data-file-height="1123" loading="lazy"><figcaption>CSS Snapshot 2021</figcaption></figure>
<p>CSS&nbsp;— одна из широкого спектра технологий, одобренных консорциумом <a href="W3C" class="mw-redirect" title="W3C">W3C</a> и получивших общее название «стандарты Web»<sup id="cite_ref-shea_4-0" class="reference"><a href="#cite_note-shea-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>. В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и <a href="%D0%92%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B5%D1%80" class="mw-redirect" title="Веб-дизайнер">веб-дизайнеры</a> проектировали бы сайты. Так появились языки <a href="HTML" title="HTML">HTML</a> 4.01 и <a href="XHTML" title="XHTML">XHTML</a>, и стандарт CSS.
</p><p>В начале 1990-х различные браузеры имели свои стили для отображения веб-страниц. HTML развивался очень быстро и был способен удовлетворить все существовавшие на тот момент потребности по оформлению информации, поэтому CSS не получил тогда широкого признания.
</p><p>Термин «каскадные таблицы стилей» был предложен <a href="%D0%A5%D0%BE%D0%BA%D0%BE%D0%BD_%D0%92%D0%B8%D1%83%D0%BC_%D0%9B%D0%B8" class="mw-redirect" title="Хокон Виум Ли">Хоконом Ли</a> в 1994 году. Совместно с Бертом Босом он стал развивать CSS.
</p><p>В отличие от многих существовавших на тот момент языков стиля, CSS использует наследование от родителя к потомку, поэтому разработчик может определить разные стили, основываясь на уже определённых ранее стилях.
</p><p>В середине 1990-х Консорциум Всемирной паутины (<a href="W3C" class="mw-redirect" title="W3C">W3C</a>) стал проявлять интерес к CSS, и в декабре 1996 года была издана рекомендация CSS1.
</p>
<div class="mw-heading mw-heading3"><h3 id="Уровень_1_(CSS1)"><span id=".D0.A3.D1.80.D0.BE.D0.B2.D0.B5.D0.BD.D1.8C_1_.28CSS1.29"></span>Уровень 1 (CSS1)</h3></div>
<p>Рекомендация W3C, принята <a href="17_%D0%B4%D0%B5%D0%BA%D0%B0%D0%B1%D1%80%D1%8F" title="17 декабря">17 декабря</a> <a href="1996_%D0%B3%D0%BE%D0%B4" title="1996 год">1996 года</a>, откорректирована <a href="11_%D1%8F%D0%BD%D0%B2%D0%B0%D1%80%D1%8F" title="11 января">11 января</a> <a href="1999_%D0%B3%D0%BE%D0%B4" title="1999 год">1999 года</a><sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup>. Среди возможностей, предоставляемых этой рекомендацией:
</p>
<ul><li>Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля&nbsp;— обычного, курсивного или полужирного.</li>
<li>Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.</li>
<li>Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы)</li>
<li>Выравнивание для текста, изображений, таблиц и других элементов.</li>
<li>Свойства блоков, такие как высота, ширина, внутренние (<code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">padding</code>) и внешние (<code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">margin</code>) отступы и рамки. Также в спецификацию входили ограниченные средства по позиционированию элементов, такие как <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">float</code> и <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">clear</code>.</li></ul>
<div class="mw-heading mw-heading3"><h3 id="Уровень_2_(CSS2)"><span id=".D0.A3.D1.80.D0.BE.D0.B2.D0.B5.D0.BD.D1.8C_2_.28CSS2.29"></span>Уровень 2 (CSS2)</h3></div>
<p>Рекомендация W3C, принята <a href="12_%D0%BC%D0%B0%D1%8F" title="12 мая">12 мая</a> <a href="1998_%D0%B3%D0%BE%D0%B4" title="1998 год">1998 года</a><sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup>. Основана на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:
</p>
<ul><li>Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без <a href="%D0%A2%D0%B0%D0%B1%D0%BB%D0%B8%D1%87%D0%BD%D0%B0%D1%8F_%D0%B2%D1%91%D1%80%D1%81%D1%82%D0%BA%D0%B0" title="Табличная вёрстка">табличной вёрстки</a>.</li>
<li>Типы носителей. Позволяет устанавливать разные стили для разных носителей (например, <a href="%D0%9C%D0%BE%D0%BD%D0%B8%D1%82%D0%BE%D1%80_(%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%BE)" title="Монитор (устройство)">монитор</a>, <a href="%D0%9F%D1%80%D0%B8%D0%BD%D1%82%D0%B5%D1%80" title="Принтер">принтер</a>, <a href="%D0%9A%D0%B0%D1%80%D0%BC%D0%B0%D0%BD%D0%BD%D1%8B%D0%B9_%D0%BF%D0%B5%D1%80%D1%81%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80" title="Карманный персональный компьютер">КПК</a>).</li>
<li>Звуковые таблицы стилей. Определяет голос, громкость и&nbsp;т.&nbsp;д. для звуковых носителей (например, для слепых посетителей сайта).</li>
<li>Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.</li>
<li>Расширенный механизм селекторов.</li>
<li>Указатели.</li>
<li>Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.</li></ul>
<p>В настоящее время W3C больше не поддерживает CSS2 и рекомендует использовать CSS2.1
</p>
<div class="mw-heading mw-heading4"><h4 id="Уровень_2,_ревизия_1_(CSS2.1)"><span id=".D0.A3.D1.80.D0.BE.D0.B2.D0.B5.D0.BD.D1.8C_2.2C_.D1.80.D0.B5.D0.B2.D0.B8.D0.B7.D0.B8.D1.8F_1_.28CSS2.1.29"></span>Уровень 2, ревизия 1 (CSS2.1)</h4></div>
<p>Рекомендация W3C, принята <a href="7_%D0%B8%D1%8E%D0%BD%D1%8F" title="7 июня">7 июня</a> <a href="2011_%D0%B3%D0%BE%D0%B4" title="2011 год">2011 года</a>.
</p><p>CSS2.1 основана на CSS2. Кроме исправления ошибок, в новой ревизии изменены некоторые части спецификации, а некоторые<sup class="ts-fix-template">[<i>какие?</i>]</sup> и вовсе удалены. Удалённые части могут быть в будущем добавлены в CSS3.
</p>
<div class="mw-heading mw-heading3"><h3 id="Уровень_3_(CSS3)"><span id=".D0.A3.D1.80.D0.BE.D0.B2.D0.B5.D0.BD.D1.8C_3_.28CSS3.29"></span>Уровень 3 (CSS3)</h3></div>
<figure typeof="mw:File/Thumb"><img src="./_assets_/0c70a452f799bfe840676ee341124611/CSS3_taxonomy_and_status-v2.png" decoding="async" width="360" height="359" class="mw-file-element" data-file-width="1384" data-file-height="1380" loading="lazy"><figcaption>CSS3 таксономия и статус:<br> <span style="color:#83af40; font-size:180%;">●</span> Рекомендация<br> <span style="color:#8a8a3c; font-size:180%;">●</span> Кандидат в рекомендации<br> <span style="color:#c3642f; font-size:180%;">●</span> Последнее требование<br> <span style="color:#ed1e24; font-size:180%;">●</span> Рабочий проект</figcaption></figure>
<p><b>CSS3</b> (<a href="%D0%90%D0%BD%D0%B3%D0%BB%D0%B8%D0%B9%D1%81%D0%BA%D0%B8%D0%B9_%D1%8F%D0%B7%D1%8B%D0%BA" title="Английский язык">англ.</a>&nbsp;<span lang="en" style="font-style:italic;">Cascading Style Sheets 3</span>&nbsp;— <b>каскадные таблицы стилей третьего поколения</b>)&nbsp;— активно разрабатываемая спецификация CSS. Представляет собой <a href="%D0%A4%D0%BE%D1%80%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9_%D1%8F%D0%B7%D1%8B%D0%BA" title="Формальный язык">формальный язык</a>, реализованный с помощью <a href="%D0%AF%D0%B7%D1%8B%D0%BA_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8" title="Язык разметки">языка разметки</a>. Самая масштабная редакция по сравнению с CSS1, CSS2 и CSS2.1. Главной особенностью CSS3 является возможность создавать анимированные элементы без использования <a href="JavaScript" title="JavaScript">JS</a><sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup>, поддержка линейных и радиальных градиентов, теней, сглаживания и прочее.
</p><p>Преимущественно используется как средство описания и оформления внешнего вида <a href="%D0%92%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0" title="Веб-страница">веб-страниц</a>, написанных с помощью <a href="%D0%AF%D0%B7%D1%8B%D0%BA_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%82%D0%BA%D0%B8" title="Язык разметки">языков разметки</a> <a href="HTML" title="HTML">HTML</a> и <a href="XHTML" title="XHTML">XHTML</a>, но может также применяться к любым <a href="XML" title="XML">XML-документам</a>, например, к <a href="SVG" title="SVG">SVG</a> или <a href="XUL" title="XUL">XUL</a>.
</p><p>Разрабатываемая версия (список всех модулей)<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup>.
</p><p>В отличие от предыдущих версий, спецификация разбита на модули, разработка и развитие которых идёт независимо. CSS3 основан на CSS2.1, дополняет существующие свойства и значения и добавляет новые.
</p><p>Нововведения, начиная с малых, вроде закруглённых углов блоков, заканчивая трансформацией (<a href="CSS-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8" title="CSS-анимации">анимацией</a>) и, возможно, введением <a href="%D0%9F%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F_(%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5)" title="Переменная (программирование)">переменных</a><sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup>.
</p>
<div class="mw-heading mw-heading3"><h3 id="Уровень_4_(CSS4)"><span id=".D0.A3.D1.80.D0.BE.D0.B2.D0.B5.D0.BD.D1.8C_4_.28CSS4.29"></span>Уровень 4 (CSS4)</h3></div>
<p>Разрабатывается <a href="W3C" class="mw-redirect" title="W3C">W3C</a> с 29 сентября 2011 года<sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup>.
</p><p>Модули CSS4 построены на основе CSS3 и дополняют их новыми свойствами и значениями. Все они существуют пока в виде черновиков (working draft).
</p><p>Например:
</p>
<ul><li><a rel="nofollow" class="external text" href="http://dev.w3.org/csswg/css-cascade/">CSS Cascading and Inheritance Level 4</a></li>
<li><a rel="nofollow" class="external text" href="http://dev.w3.org/csswg/selectors-4/">Selectors Level 4</a></li>
<li><a rel="nofollow" class="external text" href="http://dev.w3.org/csswg/css-images-4/">CSS Image Values and Replaced Content Module Level 4</a></li>
<li><a rel="nofollow" class="external text" href="http://dev.w3.org/csswg/css-backgrounds-4/">CSS Backgrounds and Borders Module Level 4</a></li>
<li><a rel="nofollow" class="external text" href="http://dev.w3.org/csswg/css-color/">CSS Color Module Level 4</a></li>
<li><a rel="nofollow" class="external text" href="http://dev.w3.org/csswg/mediaqueries-4/">Media Queries Level 4</a></li>
<li><a rel="nofollow" class="external text" href="http://dev.w3.org/csswg/css-pseudo-4/">CSS Pseudo-Elements Module Level 4</a></li>
<li><a rel="nofollow" class="external text" href="http://dev.w3.org/csswg/css-text-4/">CSS Text Module Level 4</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="Поддержка_CSS_браузерами"><span id=".D0.9F.D0.BE.D0.B4.D0.B4.D0.B5.D1.80.D0.B6.D0.BA.D0.B0_CSS_.D0.B1.D1.80.D0.B0.D1.83.D0.B7.D0.B5.D1.80.D0.B0.D0.BC.D0.B8"></span>Поддержка CSS браузерами</h2></div>
<p>Наиболее полно поддерживающими стандарт CSS являются работающие на <a href="%D0%91%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%BD%D1%8B%D0%B9_%D0%B4%D0%B2%D0%B8%D0%B6%D0%BE%D0%BA" title="Браузерный движок">движках</a> <a href="Gecko" title="Gecko">Gecko</a> (<a href="Mozilla_Firefox" title="Mozilla Firefox">Mozilla Firefox</a> и др.), <a href="WebKit" title="WebKit">WebKit</a> (<a href="Safari" title="Safari">Safari</a>, <a href="Arora" title="Arora">Arora</a>, <a href="Google_Chrome" title="Google Chrome">Google Chrome</a>) и <a href="Presto_(Opera)" title="Presto (Opera)">Presto (Opera)</a><sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup> браузеры.
</p><p>Бывший самый распространённый браузер<sup id="cite_ref-14" class="reference"><a href="#cite_note-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup> <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> 6 поддерживает CSS не полностью<sup id="cite_ref-15" class="reference"><a href="#cite_note-15"><span class="cite-bracket">[</span>15<span class="cite-bracket">]</span></a></sup>.
</p><p>Вышедший спустя семь лет Internet Explorer 7 значительно улучшил уровень поддержки CSS<sup id="cite_ref-16" class="reference"><a href="#cite_note-16"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-17" class="reference"><a href="#cite_note-17"><span class="cite-bracket">[</span>17<span class="cite-bracket">]</span></a></sup>, но всё ещё содержал значительное количество ошибок<sup id="cite_ref-18" class="reference"><a href="#cite_note-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup>.
</p><p>В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично&nbsp;— CSS 3<sup id="cite_ref-19" class="reference"><a href="#cite_note-19"><span class="cite-bracket">[</span>19<span class="cite-bracket">]</span></a></sup>.
</p><p>Для проверки поддержки браузером веб-стандартов, в том числе и различных частей стандарта CSS, был разработан тест <a href="Acid3" title="Acid3">Acid</a>.
</p>
<div class="mw-heading mw-heading3"><h3 id="Различные_блоковые_модели"><span id=".D0.A0.D0.B0.D0.B7.D0.BB.D0.B8.D1.87.D0.BD.D1.8B.D0.B5_.D0.B1.D0.BB.D0.BE.D0.BA.D0.BE.D0.B2.D1.8B.D0.B5_.D0.BC.D0.BE.D0.B4.D0.B5.D0.BB.D0.B8"></span>Различные блоковые модели</h3></div>
<p>В стандартах CSS от Консорциума <a href="W3C" class="mw-redirect" title="W3C">W3C</a> используется модель, в которой свойство <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">width</code> определяет ширину содержимого блока, не включая в неё отступы и рамки. Ранние версии <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> (4 и 5) реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (<code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">padding</code>) и рамки (<code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">border</code>). Кроме Internet Explorer 5, эту модель также понимают браузеры <a href="Netscape_Navigator" title="Netscape Navigator">Netscape</a> 4 и <a href="Opera" title="Opera">Opera</a> 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.
</p><p>В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">box-sizing</code> со значениями <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">content-box</code> для указания на использование стандартной модели W3C и <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">border-box</code> для использования модели IE 5.
</p><p>В браузере <a href="Mozilla" title="Mozilla">Mozilla</a> при поддержке этого свойства под собственным «рабочим» названием <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">-moz-box-sizing</code> ввели ещё одно значение&nbsp;— <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">padding-box</code>, таким образом создав третью блочную модель, в которой <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">width</code>&nbsp;— это размер содержимого и отступов блока, не включая рамки.
</p>
<div class="mw-heading mw-heading3"><h3 id="CSS-фильтры"><span id="CSS-.D1.84.D0.B8.D0.BB.D1.8C.D1.82.D1.80.D1.8B"></span>CSS-фильтры</h3></div>
<p>Различия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять стили к различным элементам. Например, известно, что <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> 6 применяет правила, использующие селекторы вида <code>* html <i>селектор</i></code> (фильтр, известный как «star html bug»). Чтобы блоковая модель W3C и IE, работающая в <a href="Quirks_mode" title="Quirks mode">Quirks mode</a>, отображала блок <code class="mw-highlight mw-highlight-lang-text mw-content-ltr" style="" dir="ltr">#someblock</code> шириной в 100 пикселей и внутренними отступами в 10 пикселей, можно написать такой код:
</p>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="c">/* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */</span>
<span class="p">#</span><span class="nn">someblock</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">80</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
</pre></div>
<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre><span></span><span class="c">/* Следующее правило применит только IE6. */</span>
<span class="o">*</span><span class="w"> </span><span class="nt">html</span><span class="w"> </span><span class="p">#</span><span class="nn">someblock</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">width</span><span class="p">:</span><span class="w"> </span><span class="mi">100</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="p">}</span>
</pre></div>
<p>Ещё одним способом выборочного применения правил для Internet Explorer являются <a href="%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5_%D0%BA%D0%BE%D0%BC%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%80%D0%B8%D0%B8" class="mw-redirect" title="Условные комментарии">условные комментарии</a>.
</p>
<div class="mw-heading mw-heading3"><h3 id="Безопасность"><span id=".D0.91.D0.B5.D0.B7.D0.BE.D0.BF.D0.B0.D1.81.D0.BD.D0.BE.D1.81.D1.82.D1.8C"></span>Безопасность</h3></div>
<p>Все поддерживаемые в 2010 году версии Internet Explorer были уязвимы: при обработке браузером каскадных стилей (CSS) может возникнуть неинициализированная память, впоследствии используемая для удалённого запуска вредоносного кода на компьютере пользователя<sup id="cite_ref-20" class="reference"><a href="#cite_note-20"><span class="cite-bracket">[</span>20<span class="cite-bracket">]</span></a></sup>.
</p>
<div class="mw-heading mw-heading2"><h2 id="CSS_Framework">CSS Framework</h2></div>
<div role="note" class="hatnote navigation-not-searchable ts-main"><style data-mw-deduplicate="TemplateStyles:r142002967">
/* start https://ru.wikipedia.org/ */


.mw-parser-output .ts-main a{font-weight:bold}.mw-parser-output .ts-main a.new,.mw-parser-output .ts-main a.extiw,.mw-parser-output .ts-main a.external{font-weight:normal}


/* end   https://ru.wikipedia.org/ */
</style>Основная статья: <a href="CSS-%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA" title="CSS-фреймворк">CSS-фреймворк</a></div>
<p><b>CSS Framework</b> (также <b>Web design framework</b>)&nbsp;— это заранее подготовленная CSS-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и&nbsp;т.&nbsp;д.). Так же, как и библиотеки скриптовых языков программирования, CSS-фреймворки, обычно имеющие вид внешнего .css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы), позволяя неискушённому в тонкостях вёрстки программисту или дизайнеру правильно создать html-макет.
</p>
<div class="mw-heading mw-heading2"><h2 id="Расширения_CSS"><span id=".D0.A0.D0.B0.D1.81.D1.88.D0.B8.D1.80.D0.B5.D0.BD.D0.B8.D1.8F_CSS"></span>Расширения CSS</h2></div>
<p>Часто при вёрстке страниц нужно использовать одно и то же значение много раз: один и тот же цвет, один и тот же шрифт. И если это значение нужно будет изменить, то придётся менять во многих местах.
</p><p>Для решения этих вопросов и ускорения разработки существует несколько расширений (препроцессоров) языка CSS. Расширений в том смысле, что код CSS является валидным кодом для расширения, но не наоборот. Чтобы из кода «расширенного CSS» получился обычный CSS-файл, воспринимаемый браузером, необходимо выполнить компиляцию. Компиляция может быть нескольких типов:
</p>
<ul><li>во время запуска страницы на стороне клиента (средствами <a href="JavaScript" title="JavaScript">JavaScript</a>)</li>
<li>во время запуска страницы на стороне сервера</li>
<li>во время вёрстки сайта средствами специального компилятора</li></ul>
<p>Примеры расширений (препроцессоров) CSS:
</p>
<ul><li><a href="Sass" title="Sass">Sass</a></li>
<li><a href="LESS_(%D1%8F%D0%B7%D1%8B%D0%BA_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9)" class="mw-redirect" title="LESS (язык стилей)">LESS</a></li>
<li>Stylus</li>
<li>Языки некоторых расширений <a href="PostCSS" title="PostCSS">PostCSS</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="См._также"><span id=".D0.A1.D0.BC._.D1.82.D0.B0.D0.BA.D0.B6.D0.B5"></span>См. также</h2></div>
<style data-mw-deduplicate="TemplateStyles:r141520016">
/* start https://ru.wikipedia.org/ */


.mw-parser-output .ts-Родственный_проект{background:var(--background-color-neutral-subtle,#f8f9fa);border:1px solid var(--border-color-base,#a2a9b1);font-size:90%;margin:0 0 1em;padding:.4em;max-width:19em;width:19em;line-height:1.5}.mw-parser-output .ts-Родственный_проект th,.mw-parser-output .ts-Родственный_проект td{padding:.2em 0;vertical-align:middle}.mw-parser-output .ts-Родственный_проект th+td{padding-left:.4em}@media(min-width:720px){.mw-parser-output .ts-Родственный_проект{clear:right;float:right;width:19em;margin-left:1em}}


/* end   https://ru.wikipedia.org/ */
</style>

<ul><li><a href="HTML5" title="HTML5">HTML5</a></li>
<li><a href="SGML" title="SGML">SGML</a></li>
<li><a href="JavaScript" title="JavaScript">JavaScript</a></li>
<li><a href="CSS_Framework" class="mw-redirect" title="CSS Framework">CSS Framework</a></li>
<li><a href="CSSTidy" title="CSSTidy">CSSTidy</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="Примечания"><span id=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.87.D0.B0.D0.BD.D0.B8.D1.8F"></span>Примечания</h2></div>
<div class="reflist columns" style="list-style-type: decimal;">
<div class="mw-references-wrap mw-references-columns"><ol class="references">
<li id="cite_note-_a3b831c2f8da1c27-1"><span class="mw-cite-backlink"><a href="#cite_ref-_a3b831c2f8da1c27_1-0">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://www.bu.edu/lernet/artemis/years/2020/projects/FinalPresentations/HTML/historyofcss.html">https://www.bu.edu/lernet/artemis/years/2020/projects/FinalPresentations/HTML/historyofcss.html</a><span class="wef_low_priority_links"></span></span>
</li>
<li id="cite_note-_3de1b6142723339b-2"><span class="mw-cite-backlink"><a href="#cite_ref-_3de1b6142723339b_2-0">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://www.w3.org/Style/CSS20/">https://www.w3.org/Style/CSS20/</a><span class="wef_low_priority_links"></span></span>
</li>
<li id="cite_note-_c79e7a7f5548ffdc-3"><span class="mw-cite-backlink"><a href="#cite_ref-_c79e7a7f5548ffdc_3-0">↑</a></span> <span class="reference-text"><a href="#CITEREFМакфарланд2017">Макфарланд, 2017</a>, с.&nbsp;126.</span>
</li>
<li id="cite_note-shea-4"><span class="mw-cite-backlink"><a href="#cite_ref-shea_4-0">↑</a></span> <span class="reference-text">Дэйв Ши, Молли Е. Хольцшлаг. Философия CSS-дизайна. / Пер. с англ. А. Слинкина.&nbsp;— М.: НТ Пресс, 2005.&nbsp;— 312 с.: ил.</span>
</li>
<li id="cite_note-5"><span class="mw-cite-backlink"><a href="#cite_ref-5">↑</a></span> <span class="reference-text"><span class="citation"><span lang="und"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/CSS1">Cascading Style Sheets, level 1</a></span><span class="hidden-ref" style="display:none;">&nbsp;</span>. Дата обращения: 16 июня 2006. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20110209205309/http://www.w3.org/TR/CSS1/">Архивировано</a> 9 февраля 2011 года.</span></span>
</li>
<li id="cite_note-6"><span class="mw-cite-backlink"><a href="#cite_ref-6">↑</a></span> <span class="reference-text"><span class="citation"><span lang="und"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/2008/REC-CSS2-20080411/">Cascading Style Sheets, level 2 CSS2 Specification</a></span><span class="hidden-ref" style="display:none;">&nbsp;</span>. Дата обращения: 9 марта 2011. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20110116000124/http://www.w3.org/TR/2008/REC-CSS2-20080411/">Архивировано</a> 16 января 2011 года.</span></span>
</li>
<li id="cite_note-7"><span class="mw-cite-backlink"><a href="#cite_ref-7">↑</a></span> <span class="reference-text"><span class="citation"><span lang="und"><a rel="nofollow" class="external text" href="http://htmlbook.ru/blog/prostaya-css3-animaciya-s-animatecss">Простая CSS3 анимация с Animate.css</a></span><span class="hidden-ref" style="display:none;">&nbsp;</span>. Дата обращения: 18 сентября 2018. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20180918123609/http://htmlbook.ru/blog/prostaya-css3-animaciya-s-animatecss">Архивировано</a> 18 сентября 2018 года.</span></span>
</li>
<li id="cite_note-8"><span class="mw-cite-backlink"><a href="#cite_ref-8">↑</a></span> <span class="reference-text"><a href="W3C" class="mw-redirect" title="W3C">W3C</a>: <i><a rel="nofollow" class="external text" href="http://www.w3.org/Style/CSS/current-work">CSS: current work</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20110303230112/http://www.w3.org/Style/CSS/current-work">Архивная копия</a> от 3 марта 2011 на <a href="Wayback_Machine" title="Wayback Machine">Wayback Machine</a></i>, CSS 3, etc.</span>
</li>
<li id="cite_note-9"><span class="mw-cite-backlink"><a href="#cite_ref-9">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://rip747.wordpress.com/2008/04/10/css3-css-variables-are-a-bad-idea-just-allow-us-to-call-other-selectors/">CSS3: css variables are a bad idea. Just allow us to call other selectors.</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20100102114121/http://rip747.wordpress.com/2008/04/10/css3-css-variables-are-a-bad-idea-just-allow-us-to-call-other-selectors/">Архивная копия</a> от 2 января 2010 на <a href="Wayback_Machine" title="Wayback Machine">Wayback Machine</a> // Rip’s Domain</span>
</li>
<li id="cite_note-10"><span class="mw-cite-backlink"><a href="#cite_ref-10">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.dave-woods.co.uk/index.php/css-variables/">CSS Variables</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20100405084114/http://www.dave-woods.co.uk/index.php/css-variables/">Архивная копия</a> от 5 апреля 2010 на <a href="Wayback_Machine" title="Wayback Machine">Wayback Machine</a> // dave-woods.co.uk</span>
</li>
<li id="cite_note-11"><span class="mw-cite-backlink"><a href="#cite_ref-11">↑</a></span> <span class="reference-text"><span class="citation"><span lang="und"><a rel="nofollow" class="external text" href="https://www.webcitation.org/682WaRboP?url=http://www.w3.org/TR/2011/WD-selectors4-20110929/">Selectors Level 4</a></span><span class="hidden-ref" style="display:none;">&nbsp;</span>. W3.org (29 сентября 2011). Архивировано из <a rel="nofollow" class="external text" href="http://www.w3.org/TR/2011/WD-selectors4-20110929/">оригинала</a> 30 мая 2012 года.</span></span>
</li>
<li id="cite_note-12"><span class="mw-cite-backlink"><a href="#cite_ref-12">↑</a></span> <span class="reference-text"><span class="citation"><span lang="und"><a rel="nofollow" class="external text" href="https://www.webcitation.org/682WbfhI6?url=http://www.webmonkey.com/2011/10/discover-whats-new-in-css-4/">Discover What's New in CSS 4 | Webmonkey | Wired.com</a></span><span class="hidden-ref" style="display:none;">&nbsp;</span>. Webmonkey (26 октября 2011). Архивировано из <a rel="nofollow" class="external text" href="http://www.webmonkey.com/2011/10/discover-whats-new-in-css-4/">оригинала</a> 30 мая 2012 года.</span></span>
</li>
<li id="cite_note-13"><span class="mw-cite-backlink"><a href="#cite_ref-13">↑</a></span> <span class="reference-text"><span class="citation"><span lang="und"><a rel="nofollow" class="external text" href="http://www.webdevout.net/browser-support-summary">Web browser standards support</a></span><span class="hidden-ref" style="display:none;">&nbsp;</span>. Дата обращения: 11 января 2008. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20200414175623/http://www.webdevout.net/browser-support-summary">Архивировано</a> 14 апреля 2020 года.</span></span>
</li>
<li id="cite_note-14"><span class="mw-cite-backlink"><a href="#cite_ref-14">↑</a></span> <span class="reference-text"><span class="citation"><span lang="und"><a rel="nofollow" class="external text" href="http://www.onestat.com/html/aboutus_pressbox53-firefox-mozilla-browser-market-share.html">Mozilla’s Firefox global usage share is still growing according to OneStat.com</a></span><span class="hidden-ref" style="display:none;">&nbsp;</span>. Дата обращения: 11 января 2008. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20210226040826/http://www.onestat.com/html/aboutus_pressbox53-firefox-mozilla-browser-market-share.html">Архивировано</a> 26 февраля 2021 года.</span></span>
</li>
<li id="cite_note-15"><span class="mw-cite-backlink"><a href="#cite_ref-15">↑</a></span> <span class="reference-text"><span class="citation"><span lang="und"><a rel="nofollow" class="external text" href="http://www.quirksmode.org/css/contents.html">Contents and browser compatibility</a></span><span class="hidden-ref" style="display:none;">&nbsp;</span>. Дата обращения: 11 января 2008. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20080111131932/http://www.quirksmode.org/css/contents.html">Архивировано</a> 11 января 2008 года.</span></span>
</li>
<li id="cite_note-16"><span class="mw-cite-backlink"><a href="#cite_ref-16">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx">Details on our CSS changes for IE7</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20080730034543/http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx">Архивная копия</a> от 30 июля 2008 на <a href="Wayback_Machine" title="Wayback Machine">Wayback Machine</a> IEBlog</span>
</li>
<li id="cite_note-17"><span class="mw-cite-backlink"><a href="#cite_ref-17">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://msdn2.microsoft.com/en-us/library/bb250496(VS.85).aspx">Cascading Style Sheet Compatibility in Internet Explorer 7</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20080201060544/http://msdn2.microsoft.com/en-us/library/bb250496(VS.85).aspx">Архивная копия</a> от 1 февраля 2008 на <a href="Wayback_Machine" title="Wayback Machine">Wayback Machine</a> MSDN</span>
</li>
<li id="cite_note-18"><span class="mw-cite-backlink"><a href="#cite_ref-18">↑</a></span> <span class="reference-text"><span class="citation"><span lang="und"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20080113140509/http://www.positioniseverything.net/explorer.html">The weird and wonderful world of Internet Explorer</a></span><span class="hidden-ref" style="display:none;">&nbsp;</span>. Дата обращения: 11 января 2008. Архивировано из <a rel="nofollow" class="external text" href="http://www.positioniseverything.net/explorer.html">оригинала</a> 13 января 2008 года.</span></span>
</li>
<li id="cite_note-19"><span class="mw-cite-backlink"><a href="#cite_ref-19">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx">CSS Compatibility and Internet Explorer</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20101229183655/http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx">Архивная копия</a> от 29 декабря 2010 на <a href="Wayback_Machine" title="Wayback Machine">Wayback Machine</a> MSDN</span>
</li>
<li id="cite_note-20"><span class="mw-cite-backlink"><a href="#cite_ref-20">↑</a></span> <span class="reference-text"><span class="citation"><span lang="und"><a rel="nofollow" class="external text" href="http://www.interfax.by/article/74491">Microsoft: все версии Internet Explorer уязвимы для хакеров</a></span><span class="hidden-ref" style="display:none;">&nbsp;</span>. Дата обращения: 2 января 2011. <a rel="nofollow" class="external text" href="https://web.archive.org/web/20110103130237/http://www.interfax.by/article/74491">Архивировано</a> 3 января 2011 года.</span></span>
</li>
</ol></div></div>
<div class="mw-heading mw-heading2"><h2 id="Литература"><span id=".D0.9B.D0.B8.D1.82.D0.B5.D1.80.D0.B0.D1.82.D1.83.D1.80.D0.B0"></span>Литература</h2></div>
<ul><li><style data-mw-deduplicate="TemplateStyles:r150646110">
/* start https://ru.wikipedia.org/ */


.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"«""»""„""“"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free a::after,.mw-parser-output .id-lock-limited a::after,.mw-parser-output .id-lock-registration a::after,.mw-parser-output .id-lock-subscription a::after,.mw-parser-output .cs1-ws-icon a::after{content:"";width:1.1em;height:1.1em;display:inline-block;vertical-align:middle;background-position:center;background-repeat:no-repeat;background-size:contain}.mw-parser-output .id-lock-free.id-lock-free a::after{background-image:url("./_mw_/Lock-green.svg")}.mw-parser-output .id-lock-limited.id-lock-limited a::after,.mw-parser-output .id-lock-registration.id-lock-registration a::after{background-image:url("./_mw_/Lock-gray-alt-2.svg")}.mw-parser-output .id-lock-subscription.id-lock-subscription a::after{background-image:url("./_mw_/Lock-red-alt-2.svg")}.mw-parser-output .cs1-ws-icon a::after{background-image:url("./_mw_/Wikisource-logo.svg")}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}html.skin-theme-clientpref-night .mw-parser-output .id-lock-free a::after,html.skin-theme-clientpref-night .mw-parser-output .id-lock-limited a::after,html.skin-theme-clientpref-night .mw-parser-output .id-lock-registration a::after,html.skin-theme-clientpref-night .mw-parser-output .id-lock-subscription a::after{filter:invert(1)hue-rotate(180deg)}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}html.skin-theme-clientpref-os .mw-parser-output .id-lock-free a::after,html.skin-theme-clientpref-os .mw-parser-output .id-lock-limited a::after,html.skin-theme-clientpref-os .mw-parser-output .id-lock-registration a::after,html.skin-theme-clientpref-os .mw-parser-output .id-lock-subscription a::after{filter:invert(1)hue-rotate(180deg)}}


/* end   https://ru.wikipedia.org/ */
</style><span class="citation no-wikidata" data-wikidata-property-id="P1343" id="CITEREFМакфарланд2017"><i>Дэвид Сойер Макфарланд.</i> Новая большая книга CSS = CSS: The Missing Manual.&nbsp;— Санкт-Петербург: <a href="%D0%9F%D0%B8%D1%82%D0%B5%D1%80_(%D0%B8%D0%B7%D0%B4%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D1%82%D0%B2%D0%BE)" title="Питер (издательство)">Питер</a>, 2017.&nbsp;— 720&nbsp;с.&nbsp;— <span class="nowrap">1000 экз.</span>&nbsp;— ISBN 978-5-496-02080-0.</span></li>
<li><span class="citation no-wikidata" data-wikidata-property-id="P1343"><i>Эд Титтел, Джефф Ноубл.</i> HTML, XHTML и CSS для чайников, 7-е издание = HTML, XHTML &amp; CSS For Dummies, 7th Edition.&nbsp;— <abbr title="Москва">М.</abbr>: «Диалектика», 2011.&nbsp;— 400&nbsp;с.&nbsp;— ISBN 978-5-8459-1752-2.</span></li>
<li><span class="citation no-wikidata" data-wikidata-property-id="P1343"><i>Стивен Шафер.</i> HTML, XHTML и CSS. Библия пользователя, 5-е издание = HTML, XHTML, and CSS Bible, 5th Edition.&nbsp;— <abbr title="Москва">М.</abbr>: «Диалектика», 2011.&nbsp;— 656&nbsp;с.&nbsp;— ISBN 978-5-8459-1676-1.</span></li></ul>
<div class="mw-heading mw-heading2"><h2 id="Ссылки"><span id=".D0.A1.D1.81.D1.8B.D0.BB.D0.BA.D0.B8"></span>Ссылки</h2></div>
<div class="mw-heading mw-heading3"><h3 id="Англоязычные_ресурсы"><span id=".D0.90.D0.BD.D0.B3.D0.BB.D0.BE.D1.8F.D0.B7.D1.8B.D1.87.D0.BD.D1.8B.D0.B5_.D1.80.D0.B5.D1.81.D1.83.D1.80.D1.81.D1.8B"></span>Англоязычные ресурсы</h3></div>
<ul><li><a rel="nofollow" class="external text" href="http://www.w3.org/Style/CSS/Overview.en.html">Cascading Style Sheets Home page</a>&nbsp;<span class="ref-info" title="на английском языке" style="cursor:help;">(англ.)</span></li>
<li><a rel="nofollow" class="external text" href="http://www.w3.org/Style/Overview.en.html">Web Style Sheets Home page</a>&nbsp;<span class="ref-info" title="на английском языке" style="cursor:help;">(англ.)</span></li>
<li><a rel="nofollow" class="external text" href="http://www.quirksmode.org/css/box.html">Различные блоковые модели CSS</a>&nbsp;<span class="ref-info" title="на английском языке" style="cursor:help;">(англ.)</span></li>
<li><a rel="nofollow" class="external text" href="http://css3test.com/">CSS3-тест браузера</a>&nbsp;<span class="ref-info" title="на английском языке" style="cursor:help;">(англ.)</span></li>
<li><a rel="nofollow" class="external text" href="http://www.webdevout.net/browser_support_css.php">Таблицы поддерживаемых браузерами возможностей CSS</a>&nbsp;<span class="ref-info" title="на английском языке" style="cursor:help;">(англ.)</span></li>
<li><a rel="nofollow" class="external text" href="http://jigsaw.w3.org/css-validator/">Валидатор CSS</a>&nbsp;<span class="ref-info" title="на английском языке" style="cursor:help;">(англ.)</span></li>
<li><a rel="nofollow" class="external text" href="http://www.csszengarden.com/">Демонстрация возможностей CSS-вёрстки</a>&nbsp;<span class="ref-info" title="на английском языке" style="cursor:help;">(англ.)</span></li>
<li><a rel="nofollow" class="external text" href="http://www.css3.info/preview/">CSS3 Preview&nbsp;— Демонстрация новых возможностей CSS3</a>&nbsp;<span class="ref-info" title="на английском языке" style="cursor:help;">(англ.)</span></li>
<li><a rel="nofollow" class="external text" href="http://www.romancortes.com/blog/pure-css-coke-can/">Демонстрация возможностей</a>&nbsp;<span class="ref-info" title="на английском языке" style="cursor:help;">(англ.)</span></li>
<li><a rel="nofollow" class="external text" href="http://cssresizer.com">Оптимизатор CSS кода</a>&nbsp;<span class="ref-info" title="на английском языке" style="cursor:help;">(англ.)</span></li></ul>
<div class="mw-heading mw-heading3"><h3 id="Русскоязычные_ресурсы"><span id=".D0.A0.D1.83.D1.81.D1.81.D0.BA.D0.BE.D1.8F.D0.B7.D1.8B.D1.87.D0.BD.D1.8B.D0.B5_.D1.80.D0.B5.D1.81.D1.83.D1.80.D1.81.D1.8B"></span>Русскоязычные ресурсы</h3></div>
<ul><li><a rel="nofollow" class="external text" href="http://www.w3.org/Style/CSS/Overview.ru.html">Каскадные Таблицы Стилей Домашняя страница</a>&nbsp;<span class="ref-info" title="на русском языке" style="cursor:help;">(рус.)</span></li>
<li><a rel="nofollow" class="external text" href="http://www.w3.org/Style/Overview.ru.html">Веб таблицы стилей Домашняя страница</a>&nbsp;<span class="ref-info" title="на русском языке" style="cursor:help;">(рус.)</span></li>
<li><a rel="nofollow" class="external text" href="http://jigsaw.w3.org/css-validator/validator.html.ru">Сервис проверки CSS от W3C</a></li>
<li><a rel="nofollow" class="external text" href="http://ru.html.net/tutorials/css/">Учебник CSS</a> (рекомендован <a rel="nofollow" class="external text" href="http://www.w3.org/Style/CSS/learning">w3.org</a>)</li>
<li><a rel="nofollow" class="external text" href="http://htmlbook.ru/css">Справочник CSS</a></li></ul>
<div role="navigation" class="navbox" aria-labelledby="Языки_таблиц_стилей_(сравнение&amp;#91;&amp;#91;:en:Comparison_of_stylesheet_languages&amp;#124;&amp;#91;англ.&amp;#93;&amp;#93;&amp;#93;,_список&amp;#91;&amp;#91;:en:List_of_stylesheet_languages&amp;#124;&amp;#91;англ.&amp;#93;&amp;#93;&amp;#93;)" data-name="Языки таблиц стилей"><table class="nowraplinks collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="colgroup" class="navbox-title" colspan="2"><span class="navbox-gear" style="float:left;text-align:left;width:5em;margin-right:0.5em"></span><div id="Языки_таблиц_стилей_(сравнение&amp;#91;&amp;#91;:en:Comparison_of_stylesheet_languages&amp;#124;&amp;#91;англ.&amp;#93;&amp;#93;&amp;#93;,_список&amp;#91;&amp;#91;:en:List_of_stylesheet_languages&amp;#124;&amp;#91;англ.&amp;#93;&amp;#93;&amp;#93;)" style="font-size:114%;margin:0 5em"><a href="%D0%AF%D0%B7%D1%8B%D0%BA_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9" title="Язык таблиц стилей">Языки таблиц стилей</a> (<span data-interwiki-lang="en" data-interwiki-article="Comparison of stylesheet languages">сравнение</span>, <span data-interwiki-lang="en" data-interwiki-article="List of stylesheet languages">список</span>)</div></th></tr><tr><th scope="row" class="navbox-group" style="width:1px">Режимы</th><td class="navbox-list navbox-odd hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><span data-interwiki-lang="en" data-interwiki-article="Style sheet (desktop publishing)">Настольная издательская система</span></li>
<li><a href="%D0%A2%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D0%B0_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9_(%D0%B2%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0)" class="mw-redirect" title="Таблица стилей (веб-разработка)">Веб-разработка</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="User interface style sheet language">Пользовательский интерфейс</span></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Стандартные</th><td class="navbox-list navbox-even hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><a class="mw-selflink selflink">CSS</a></li>
<li><a href="DSSSL" title="DSSSL">DSSSL</a></li>
<li><a href="XSL" title="XSL">XSL</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Нестандартные</th><td class="navbox-list navbox-odd hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><a href="JavaScript_Style_Sheets" title="JavaScript Style Sheets">JSSS</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Formatting Output Specification Instance">FOSI</span></li>
<li><a href="QSS" title="QSS">Qt Style Sheets</a></li>
<li><a href="Sass" title="Sass">Sass</a></li>
<li><a href="LESS_(%D1%8F%D0%B7%D1%8B%D0%BA_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9)" class="mw-redirect" title="LESS (язык стилей)">LESS</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Stylus (style sheet language)">Stylus</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="SMIL Timesheets">SMIL Timesheets</span></li></ul>
</div></td></tr></tbody></table></div>
<div role="navigation" class="navbox" aria-labelledby="Консорциум_Всемирной_паутины_(W3C)" data-name="Стандарты W3C"><table class="nowraplinks collapsible collapsed navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="colgroup" class="navbox-title" colspan="2"><span class="navbox-gear" style="float:left;text-align:left;width:5em;margin-right:0.5em"></span><div id="Консорциум_Всемирной_паутины_(W3C)" style="font-size:114%;margin:0 5em"><a href="%D0%9A%D0%BE%D0%BD%D1%81%D0%BE%D1%80%D1%86%D0%B8%D1%83%D0%BC_%D0%92%D1%81%D0%B5%D0%BC%D0%B8%D1%80%D0%BD%D0%BE%D0%B9_%D0%BF%D0%B0%D1%83%D1%82%D0%B8%D0%BD%D1%8B" title="Консорциум Всемирной паутины">Консорциум Всемирной паутины (W3C)</a></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1px">Продукты<br>и&nbsp;стандарты</th><td class="navbox-list navbox-odd hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1px"><a href="%D0%A0%D0%B5%D0%BA%D0%BE%D0%BC%D0%B5%D0%BD%D0%B4%D0%B0%D1%86%D0%B8%D0%B8_W3C" title="Рекомендации W3C">Рекомендации</a></th><td class="navbox-list navbox-odd hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><a href="ActivityPub" title="ActivityPub">ActivityPub</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Activity Streams (format)">Activity Streams</span></li>
<li><a href="WAI-ARIA" title="WAI-ARIA">ARIA</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Canonical XML">Canonical XML</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Compound Document Format">CDF</span></li>
<li><a class="mw-selflink selflink">CSS</a></li>
<li><a href="Document_Object_Model" title="Document Object Model">DOM</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="W3C Geolocation API">Geolocation API</span></li>
<li><a href="HTML" title="HTML">HTML</a>
<ul><li><a href="HTML5" title="HTML5">HTML5</a></li></ul></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Internationalization Tag Set">ITS</span></li>
<li><a href="JSON-LD" title="JSON-LD">JSON-LD</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Linked Data Notifications">Linked Data Notifications</span></li>
<li><a href="MathML" title="MathML">MathML</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="(protocol)">Micropub</span></li>
<li><a href="Web_Ontology_Language" title="Web Ontology Language">OWL</a></li>
<li>PLS</li>
<li><a href="Resource_Description_Framework" title="Resource Description Framework">RDF</a>
<ul><li><a href="RDFS" title="RDFS">RDFS</a></li></ul></li>
<li>SISR</li>
<li><a href="SKOS" title="SKOS">SKOS</a></li>
<li><a href="SMIL" title="SMIL">SMIL</a></li>
<li><a href="SOAP" title="SOAP">SOAP</a></li>
<li>SRGS</li>
<li>SRI</li>
<li><a href="Speech_Synthesis_Markup_Language" title="Speech Synthesis Markup Language">SSML</a></li>
<li><a href="SVG" title="SVG">SVG</a>
<ul><li>Filter Effects</li></ul></li>
<li><span data-interwiki-lang="en" data-interwiki-article="SCXML">SCXML</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="SHACL">SHACL</span></li>
<li><a href="SPARQL" title="SPARQL">SPARQL</a></li>
<li><a href="Timed_text" title="Timed text">Timed text</a></li>
<li><a href="VoiceXML" title="VoiceXML">VoiceXML</a></li>
<li><a href="Web_Storage" title="Web Storage">Web Storage</a></li>
<li><a href="WSDL" title="WSDL">WSDL</a></li>
<li>Webmention</li>
<li>WebSub</li>
<li><a href="XHTML" title="XHTML">XHTML</a>
<ul><li>+RDFa</li></ul></li>
<li><a href="XML" title="XML">XML</a>
<ul><li>XML Base</li>
<li><a href="XML_Encryption" title="XML Encryption">XML Encryption</a></li>
<li>XML Events</li>
<li>XML Information Set</li>
<li><a href="%D0%9F%D1%80%D0%BE%D1%81%D1%82%D1%80%D0%B0%D0%BD%D1%81%D1%82%D0%B2%D0%BE_%D0%B8%D0%BC%D1%91%D0%BD_(XML)" title="Пространство имён (XML)">XML namespace</a></li>
<li><a href="XML_Schema_(W3C)" title="XML Schema (W3C)">XML Schema</a></li>
<li>XML Signature</li>
<li><a href="XForms" title="XForms">XForms</a></li>
<li><a href="XInclude" title="XInclude">XInclude</a></li>
<li><a href="XLink" title="XLink">XLink</a></li>
<li>XOP</li>
<li><a href="XPath" title="XPath">XPath</a>
<ul><li>1.0</li>
<li>2.0</li></ul></li>
<li><a href="XPointer" title="XPointer">XPointer</a></li>
<li><a href="XProc" title="XProc">XProc</a></li>
<li><a href="XQuery" title="XQuery">XQuery</a></li>
<li><a href="XSL" title="XSL">XSL</a></li>
<li><a href="XSL-FO" title="XSL-FO">XSL-FO</a></li>
<li><a href="XSLT" title="XSLT">XSLT</a>
<ul><li>элементы</li></ul></li></ul></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px"><abbr title="Оконечное оборудование сетевого офиса (Network Office Terminating Equipment)">ООСО</abbr></th><td class="navbox-list navbox-even hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><span data-interwiki-lang="en" data-interwiki-article="IndieAuth">IndieAuth</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="XAdES">XAdES</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="XBL">XBL</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="XHTML+SMIL">XHTML+SMIL</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Extensible User Interface Protocol">XUP</span></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Рабочие проекты</th><td class="navbox-list navbox-odd hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><span data-interwiki-lang="en" data-interwiki-article="Call Control eXtensible Markup Language">CCXML</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="CURIE">CURIE</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Encrypted Media Extensions">EME</span></li>
<li><a href="InkML" title="InkML">InkML</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Media Source Extensions">MSE</span></li>
<li><a href="Rule_Interchange_Format" title="Rule Interchange Format">RIF</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="SMIL Timesheets">SMIL Timesheets</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="sXBL">sXBL</span></li>
<li><a href="WebGPU" title="WebGPU">WebGPU</a></li>
<li><a href="WebXR" class="mw-redirect" title="WebXR">WebXR</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Web Integration Compound Document">WICD</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Extensible Forms Description Language">XFDL</span></li>
<li><a href="XFrames" title="XFrames">XFrames</a></li>
<li><a href="XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Руководства</th><td class="navbox-list navbox-even hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><span data-interwiki-lang="en" data-interwiki-article="Web Content Accessibility Guidelines">Руководящие принципы доступности веб-контента</span></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Инициативы</th><td class="navbox-list navbox-odd hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><span data-interwiki-lang="en" data-interwiki-article="W3C Markup Validation Service">Markup Validation Service</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Web Accessibility Initiative">Web Accessibility Initiative</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="WebPlatform.org">WebPlatform</span></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Выведенные<br>из&nbsp;использования</th><td class="navbox-list navbox-even hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><a href="CHTML" title="CHTML">CHTML</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Handheld Device Markup Language">HDML</span></li>
<li><a href="JavaScript_Style_Sheets" title="JavaScript Style Sheets">JSSS</a></li>
<li><a href="PGML" title="PGML">PGML</a></li>
<li><a href="VML" title="VML">VML</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="XHTML+MathML+SVG">XHTML+MathML+SVG</span></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Устаревшие</th><td class="navbox-list navbox-odd hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><a href="P3P" title="P3P">P3P</a></li></ul>
</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Организации</th><td class="navbox-list navbox-odd hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td colspan="2" class="navbox-list navbox-even hlist" style="width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><a href="World_Wide_Web_Foundation" title="World Wide Web Foundation">World Wide Web Foundation</a></li>
<li><a href="WHATWG" title="WHATWG">WHATWG</a></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Рабочие группы</th><td class="navbox-list navbox-odd hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><span data-interwiki-lang="en" data-interwiki-article="Technical Architecture Group">TAG</span></li>
<li><a href="CSS_Working_Group" title="CSS Working Group">CSS</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="SVG Working Group">SVG</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Web Authentication Working Group">WebAuthn</span></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Группы сообщества и&nbsp;бизнеса</th><td class="navbox-list navbox-even hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><span data-interwiki-lang="en" data-interwiki-article="Improving Web Advertising Business Group">Web Advertising BG</span></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Закрывшиеся группы</th><td class="navbox-list navbox-odd hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><span data-interwiki-lang="en" data-interwiki-article="W3C Device Description Working Group">Device Description (DDWG)</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="HTML Working Group">HTML</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="W3C MMI">Multimodal Interaction Activity (MMI)</span></li></ul>
</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px"><a href="%D0%9F%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B5_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D0%B5" title="Программное обеспечение"><abbr title="Программное_обеспечение">ПО</abbr></a></th><td class="navbox-list navbox-odd hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td colspan="2" class="navbox-list navbox-even hlist" style="width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><a href="CERN_httpd" title="CERN httpd">CERN httpd</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Libwww">Libwww</span></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px"><a href="%D0%91%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80" title="Браузер">Браузеры</a></th><td class="navbox-list navbox-odd hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><a href="Line_Mode_Browser" title="Line Mode Browser">Line Mode <span style="font-size:90%;">(1991–)</span></a></li>
<li><a href="Arena_(%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80)" title="Arena (браузер)">Arena <span style="font-size:90%;">(1993–98)</span></a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Agora (web browser)">Agora <span style="font-size:90%;">(1994–97)</span></span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Argo (web browser)">Argo <span style="font-size:90%;">(1994–97)</span></span></li>
<li><a href="Amaya" title="Amaya">Amaya <span style="font-size:90%;">(браузер/редактор, 1996–2012)</span></a></li></ul>
</div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Конференции</th><td class="navbox-list navbox-even hlist" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><a href="World_Wide_Web_Conference" title="World Wide Web Conference">International World Wide Web Conference (IW3C)</a>
<ul><li><span data-interwiki-lang="en" data-interwiki-article="International World Wide Web Conference Committee">Steering Committee (IW3C2)</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="First International Conference on the World-Wide Web">First conference ("WWW1", 1994)</span></li></ul></li></ul>
</div></td></tr></tbody></table></div>
<div role="navigation" class="navbox" aria-labelledby="Каскадные_таблицы_стилей" data-name="CSS"><table class="nowraplinks hlist collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="colgroup" class="navbox-title" colspan="2"><span class="navbox-gear" style="float:left;text-align:left;width:5em;margin-right:0.5em"></span><div id="Каскадные_таблицы_стилей" style="font-size:114%;margin:0 5em"><a class="mw-selflink selflink">Каскадные таблицы стилей</a></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1px">CSS</th><td class="navbox-list navbox-odd" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><span data-interwiki-lang="en" data-interwiki-article="Style sheet (web development)">Таблица стилей</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="CSS Zen Garden">CSS Zen Garden</span></li>
<li><i><span data-interwiki-lang="en" data-interwiki-article="The Zen of CSS Design">The Zen of CSS Design</span></i></li>
<li><a href="CSSTidy" title="CSSTidy">CSSTidy</a></li>
<li><span data-interwiki-lang="en" data-interwiki-article="CSS box model">Блочная модель</span></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Сравнение</th><td class="navbox-list navbox-even" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><span data-interwiki-lang="en" data-interwiki-article="Comparison of browser engines (CSS support)">Поддержки CSS браузерными движками</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Comparison of stylesheet languages">Языков таблиц стилей</span></li></ul>
</div></td></tr><tr><th scope="row" class="navbox-group" style="width:1px">Веб-дизайн</th><td class="navbox-list navbox-odd" style="text-align:left;border-left-width:2px;border-left-style:solid;width:100%;padding:0px"><div style="padding:0em 0.25em">
<ul><li><span data-interwiki-lang="en" data-interwiki-article="Tableless web design">Бестабличный</span></li>
<li><span data-interwiki-lang="en" data-interwiki-article="Holy grail (web design)">«Holy Grail»</span></li>
<li><a href="%D0%90%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9_%D0%B2%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD" title="Адаптивный веб-дизайн">Адаптивный</a></li></ul>
</div></td></tr><tr><td class="navbox-abovebelow" colspan="2"><div><span typeof="mw:File"><img src="./_assets_/0c70a452f799bfe840676ee341124611/Symbol_question.svg.png" decoding="async" width="16" height="16" class="mw-file-element" data-file-width="180" data-file-height="185" loading="lazy"></span> <a href="https://ru.wikibooks.org/wiki/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4%D0%BD%D1%8B%D0%B5_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9" class="extiw external" title="b:Каскадные таблицы стилей">Каскадные таблицы стилей</a></div></td></tr></tbody></table></div></div><!--htdig_noindex--><div><div class="zim-footer">
    Эта статья взята у (из) <a class="external text" title="Последний раз редактировалась 2025-11-15" href="https://ru.wikipedia.org/wiki/?title=CSS&amp;oldid=149813603">Википедия</a>. Текст лицензируется по <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.ru">Creative Commons Attribution-Share Alike 4.0</a>. К медиа файлам могут применятся дополнительные условия.
</div>
</div><!--/htdig_noindex--></div>
      </div>
    </div>
     <script src="./_webp_/webpHandler.js"></script>
  

</body></html>