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

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

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

пример

Сначала давайте рассмотрим пример HTML-документа, который использует тег <font> и связанные атрибуты для указания цвета текста и размера шрифта -

Note- Тег шрифта устарел, и предполагается, что он будет удален в будущей версии 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-документе тремя способами:

External Style Sheet - Определите правила таблицы стилей в отдельном файле .css, а затем включите этот файл в свой HTML-документ с помощью тега HTML <link>.
Internal Style Sheet - Определите правила таблицы стилей в разделе заголовка документа HTML с помощью тега <style>.
Inline Style Sheet - Определяйте правила таблицы стилей непосредственно вместе с элементами 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> -

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

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