HTML — таблица стилей


Оглавление

    Показать оглавление

Каскадные таблицы стилей (CSS) описывают, как документы представляются на экране, в печати или, возможно, как они произносятся. W3C активно продвигает использование таблиц стилей в Интернете с момента основания консорциума в 1994 году.

Каскадные таблицы стилей (CSS) предоставляют простые и эффективные альтернативы для указания различных атрибутов тегов HTML. Используя CSS, вы можете указать ряд свойств стиля для данного элемента HTML. Каждое свойство имеет имя и значение, разделенные двоеточием.

:

Каждое объявление свойства отделяется точкой с запятой

;

Пример

Сначала рассмотрим пример HTML-документа, в котором используется тег

<font>

и связанные атрибуты для указания цвета текста и размера шрифта:

Примечание. Тег font устарел и предполагается, что он будет удален в будущих версиях HTML. Поэтому их не следует использовать, вместо этого предлагается использовать стили CSS для управления вашими шрифтами. Но все же в целях обучения в этой главе будет использоваться пример с использованием тега font.


<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Мы можем переписать приведенный выше пример с помощью таблицы стилей следующим образом:


<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

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

Вы можете использовать CSS тремя способами в HTML-документе:

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

    <link>
  • Внутренняя таблица стилей. Определите правила таблицы стилей в разделе заголовка HTML-документа с помощью тега.

    <style>
  • Встроенная таблица стилей. Определите правила таблицы стилей непосредственно вместе с элементами HTML, используя атрибут style.

Давайте рассмотрим все три случая один за другим с помощью подходящих примеров.

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

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

<link>

Пример

Предположим, мы определяем файл таблицы стилей style.css, который имеет следующие правила:


.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

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


<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

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

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

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

<style>

Правила, определенные во внутренней таблице стилей, переопределяют правила, определенные во внешнем файле CSS.

Пример

Давайте еще раз перепишем приведенный выше пример, но здесь мы напишем правила таблицы стилей в том же HTML-документе, используя тег

<style>

Пример HTML-кода:


<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

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

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

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

Правила, определенные внутри элемента, переопределяют правила, определенные во внешнем файле CSS, а также правила, определенные в элементе.

<style>

Пример

Давайте еще раз перепишем приведенный выше пример, но здесь мы напишем правила таблицы стилей вместе с элементами HTML, используя атрибут style этих элементов.


<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html> 

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