Учебники

CSS — Включение

Сентябрь 21, 2018

Существует четыре способа связать стили с вашим HTML-документом. Наиболее часто используемые методы — встроенный CSS и внешний CSS.

Внедренный CSS — элемент <style>

Вы можете поместить свои правила CSS в документ HTML, используя элемент <style>. Этот тег находится внутри тегов <head> … </ head>. Правила, определенные с использованием этого синтаксиса, будут применяться ко всем элементам, доступным в документе. Вот общий синтаксис —

Live Demo Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

Это даст следующий результат —

Атрибуты

Атрибуты, связанные с элементами <style>:

атрибут Значение Описание
тип текст / CSS Указывает язык таблицы стилей как тип содержимого (MIME-тип). Это обязательный атрибут.
средства массовой информации

экран

TTY

ТВ

проекция

портативный

Распечатать

шрифт Брайля

ушной

все

Указывает устройство, на котором будет отображаться документ. Значением по умолчанию является все . Это необязательный атрибут.

экран

TTY

ТВ

проекция

портативный

Распечатать

шрифт Брайля

ушной

все

Встроенный CSS — Атрибут стиля

Вы можете использовать атрибут style любого элемента HTML для определения правил стиля. Эти правила будут применяться только к этому элементу. Вот общий синтаксис — 

<element style = "...style rules....">

Атрибуты

атрибут Значение Описание
стиль правила стиля Значение атрибута style является комбинацией объявлений стилей, разделенных точкой с запятой (;).

пример

Ниже приведен пример встроенного CSS на основе приведенного выше синтаксиса:

Live Demo 

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

Это даст следующий результат —

Внешний CSS — Элемент <link>

Элемент <link> можно использовать для включения внешнего файла таблицы стилей в ваш HTML-документ.

Внешняя таблица стилей — это отдельный текстовый файл с расширением .css . Вы определяете все правила стиля в этом текстовом файле, а затем можете включить этот файл в любой HTML-документ, используя элемент <link>.

Вот общий синтаксис включения внешнего файла CSS — 

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

Атрибуты

Атрибуты, связанные с элементами <style>:

атрибут Значение Описание
тип текст CSS Указывает язык таблицы стилей как тип содержимого (MIME-тип). Этот атрибут обязателен.
HREF URL Указывает файл таблицы стилей, имеющий правила стиля. Этот атрибут является обязательным.
средства массовой информации

экран

TTY

ТВ

проекция

портативный

Распечатать

шрифт Брайля

ушной

все

Указывает устройство, на котором будет отображаться документ. Значением по умолчанию является все . Это необязательный атрибут.

экран

TTY

ТВ

проекция

портативный

Распечатать

шрифт Брайля

ушной

все

пример

Рассмотрим простой файл таблицы стилей с именем mystyle.css, имеющий следующие правила: 

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Теперь вы можете включить этот файл mystyle.css в любой HTML-документ следующим образом: 

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

Импортированный CSS — правило @import

@import используется для импорта внешней таблицы стилей аналогично элементу <link>. Вот общий синтаксис правила @import. 

<head>
   <@import "URL";
</head>

Здесь URL — это URL-адрес файла таблицы стилей с правилами стиля. Вы также можете использовать другой синтаксис — 

<head>
   <@import url("URL");
</head>

пример

Ниже приведен пример, показывающий, как импортировать файл таблицы стилей в документ HTML: 

<head>
   @import "mystyle.css";
</head>

Переопределение правил CSS

Мы обсудили четыре способа включения правил таблиц стилей в HTML-документ. Вот правило для переопределения любого правила таблицы стилей.

  • Любая встроенная таблица стилей имеет наивысший приоритет. Таким образом, он переопределит любое правило, определенное в тегах <style> … </ style> или правилах, определенных в любом внешнем файле таблицы стилей.

  • Любое правило, определенное в тегах <style> … </ style>, будет переопределять правила, определенные в любом внешнем файле таблицы стилей.

  • Любое правило, определенное во внешнем файле таблицы стилей, имеет самый низкий приоритет, и правила, определенные в этом файле, будут применяться только в том случае, если вышеупомянутые два правила неприменимы.

Любая встроенная таблица стилей имеет наивысший приоритет. Таким образом, он переопределит любое правило, определенное в тегах <style> … </ style> или правилах, определенных в любом внешнем файле таблицы стилей.

Любое правило, определенное в тегах <style> … </ style>, будет переопределять правила, определенные в любом внешнем файле таблицы стилей.

Любое правило, определенное во внешнем файле таблицы стилей, имеет самый низкий приоритет, и правила, определенные в этом файле, будут применяться только в том случае, если вышеупомянутые два правила неприменимы.

Обработка старых браузеров

Есть еще много старых браузеров, которые не поддерживают CSS. Итак, мы должны быть осторожны при написании нашего встроенного CSS в HTML-документе. В следующем фрагменте показано, как можно использовать теги комментариев, чтобы скрыть CSS от старых браузеров. 

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

CSS Комментарии

Часто вам может понадобиться добавить дополнительные комментарии в ваши блоки таблицы стилей. Таким образом, очень легко комментировать любую часть таблицы стилей. Вы можете просто поместить свои комментарии в /*….. это комментарий в таблице стилей ….. * /.

Вы можете использовать / * …. * / для комментирования многострочных блоков аналогично тому, как это делается в языках программирования C и C ++.

пример

Live Demo 

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      </style>
   </head>

   <body>
      <p>Hello World!</p>
   </body>
</html>

Это даст следующий результат —

55
Share: