Учебники

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

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

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

пример

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

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

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

Live Demo

<!DOCTYPE html>
<html>

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

</html>

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

Live Demo

<!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 с помощью тега 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-документе —

Live Demo

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

Live Demo

<!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, используя атрибут стиля соответствующего тега. Это следует делать только тогда, когда вы заинтересованы в том, чтобы внести определенные изменения только в любой элемент HTML.

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

пример

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

Live Demo

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

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