Подключение CSS

Существует четыре способа связывания стилей с вашим 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, - это -

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

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

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

Атрибуты

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

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

Внешний CSS - элемент link

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

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

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

Атрибуты

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

Рассмотрим простой файл таблицы стилей с именем 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>

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