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

Встроенный CSS - элемент style

Вы можете поместить свои правила CSS в HTML-документ, используя элемент style. Этот тег помещается внутри тегов head ... /head. Правила, определенные с использованием этого синтаксиса, будут применяться ко всем элементам, доступным в документе. Ниже приведен пример внедрения CSS на основе вышеприведенного синтаксиса -

< !DOCTYPE html>
< html>
   < head>
       < style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: mar00n;
            margin-left: 40px;
         }
      < /style>
    < /head>  
   < body>
      < h1>Это заголовок.< /h1>
      < p>Это параграф.< /p>
   < /body>
< /html>

Атрибуты

Атрибуты, связанные с элементами style, - это -

Атрибут Значение Описание
typetext/cssУказывает язык таблицы стилей как тип содержимого (тип MIME). Это обязательный атрибут.
mediascreen, tty, tv, projection, handheld, print, braille, aural, allУказывает устройство, на котором будет отображаться документ. Значение по умолчанию -  все. Это необязательный атрибут.

Inline CSS - Атрибут стиля

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

< element style = " ... правила стиля .... " > 

Атрибуты

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

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

< 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, - это -

Атрибут Значение Описание
typetext/cssУказывает язык таблицы стилей как тип содержимого (тип MIME). Этот атрибут требуется.
hrefURLЗадает адрес или путь к файлу таблицы стилей с правилами стиля. Этот атрибут является обязательным.
mediascreen, tty, tv, projection, handheld, print, braille, aural, allУказывает устройство, на котором будет отображаться документ. Значение по умолчанию -  все. Это необязательный атрибут.

Рассмотрим простой файл таблицы стилей с именем 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, переопределяет правила, определенные в любом файле таблицы стилей.
  • Любое правило, определенное во внешнем файле таблицы стилей, имеет наименьший приоритет, а правила, определенные в этом файле, будут применяться только тогда, когда не применяются два правила.

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

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

< style type="text/css">

      body, td {
         color: blue;
      }

< /style>

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

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

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

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

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!



We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok