Основные стили для тегов, типы подключения стилей

Лекция

Сразу хочу сказать, что здесь никакой воды про теги, и только нужная информация. Для того чтобы лучше понимать что такое теги , настоятельно рекомендую прочитать все из категории Каскадные таблицы стилей CSS/ CSS3.

Что такое CSS

CSS (Cascading Style Sheets, каскадные таблицы стилей) — это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением.

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

Разделение оформления и содержания

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

Единое оформление документов

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

Централизованное хранение

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

Расширенные возможности

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

Быстрая работа

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

Замечание

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

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

Замечание

Условно верстка веб-страниц делится на табличную верстку, где в качестве невидимой модульной сетки выступают ячейки таблицы, и верстку с помощью слоев. В дальнейшем, под слоем будем понимать элемент <DIV> или <SPAN>, к которому добавляются стилевые параметры для изменения оформления и положения элемента.

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Об этом говорит сайт https://intellect.icu . Далее рассмотрены способы подключения CSS.

Таблица связанных стилей

При использовании таблицы связанных стилей описание селекторов и их свойств располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <LINK>. Данный тег помещается в контейнер <HEAD>, как показано в примере 2.1.

Пример 2.1. Подключение таблицы связанных стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Стили</title>
  <link rel="stylesheet" type="text/css" href="mysite.css">
  <link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
 </head>
 <body>
  <h1>Заголовок</h1>
  <p>Текст</p>
 </body>
</html>

Значения параметров тега <LINK> — rel и type остаются неизменными, как приведено в данном примере. Параметр href задает путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега <LINK> приведено в примере 2.2.

Пример 2.2. Файл со стилем

H1 {
 color: navy;
 font-size: 200%;
 font-family: Arial, Verdana, sans-serif;
 text-align: center;
}

P {
 padding-left: 20px;
}

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

Таблица глобальных стилей

При использовании таблицы глобальных стилей свойства CSS описываются в самом документе и обычно располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа, с помощью контейнера <STYLE>, как показано в примере 2.3.

Пример 2.3. Использование таблицы глобальных стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Глобальные стили</title>
  <style type="text/css">
   H1 { 
    font-size: 120%; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    color: #336;
   }
  </style>
 </head>
 <body>
  <h1>Hello, world!</h1>
 </body>
</html>

В данном примере определен стиль тега <H1>, который затем можно повсеместно использовать на данной веб-странице.

Замечание

Таблица глобальных стилей может размещаться не только внутри контейнера <HEAD>, но также в любом месте кода HTML-документа.

Внутренние стили

Внутренний стиль является по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется параметр тега style, а его атрибуты указываются с помощью языка таблицы стилей (пример 2.4).

Пример 2.4. Использование внутренних стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Внутренние стили</title>
 </head>
 <body>
  <h1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; 
  color: #336">Заголовок</h1>
 </body>
</html>

В данном примере стиль тега <H1> задается с помощью параметра style, в котором через точку с запятой перечисляются стилевые атрибуты.

Замечание

Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объем файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере 2.5 применяется сразу два метода добавления таблиц стилей в документ.

Пример 2.5. Сочетание разных методов подключения стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Подключение стиля</title>
  <style type="text/css">
   H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; }
  </style>
 </head>
 <body>
  <h1 style="font-size: 36px; font-family: Times, serif; color: red">Заголовок 
  1</h1>
  <h1>Заголовок 2</h1>
 </body>
</html>

В данном примере первый заголовок задается красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зеленым цветом через таблицу глобальных стилей.

Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно с таблицей связанных или глобальных стилей, но никак не со встроенными стилями. Общий синтаксис следующий.

@import url("имя файла") типы носителей;
@import "имя файла" типы носителей;

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью директивы url или без нее. В примере 2.6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.

Пример 2.6. Импорт CSS в глобальную таблицу стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Импорт</title>
  <style type="text/css">
   @import url("/style/header.css");
    H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green; 
   }
  </style>
 </head> 
 <body>
  <h1>Заголовок 1</h1>
  <h2>Заголовок 2</h2>
 </body>
</html>

В данном примере показано подключение файла header.css, который расположен в папке style.

Аналогично происходит импорт и в файле со стилем, который затем подключается к документу (пример 2.7).

Пример 2.7. Импорт в таблице связанных стилей

@import "/style/print.css" print;
@import "/style/palm.css" handheld; 
BODY {
 font-family: Arial, Verdana, Helvetica, sans-serif;
 font-size: 90%;
 background: white;
 color: black;
}

В данном примере показано содержимое файла mysite.css, который добавляется к нужным документам способом, показанным в примере 2.1, а именно с помощью тега <LINK>.

стили для тегов

Теперь вам объясню как можно вообще не создавать никаких классов, и не открывать CSS код. Именно в этой статье, вы увидите как вставить стили прямо в тег!
Вставляются стили в тег с помощью атрибута STYLE, то есть пишем так «style=” стиль ”».

<b style="color:#00FF00;">Зеленый текст при помощи CSS</b>

А как ты думаешь, при улучшении теги, будет лучше нам? Надеюсь, что теперь ты понял что такое теги и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Каскадные таблицы стилей CSS/ CSS3

Основные стили для тегов, типы подключения стилей

Что такое CSS

Разделение оформления и содержания

Единое оформление документов

Централизованное хранение

Расширенные возможности

Быстрая работа

Таблица связанных стилей

Таблица глобальных стилей

Внутренние стили

Импорт CSS

Комментарии

Оставить комментарий

Каскадные таблицы стилей CSS/ CSS3

Термины: Каскадные таблицы стилей CSS/ CSS3