Что такое CSS и каким образом подключить каскадные таблицы стилей к HTML документу с помощью link и style

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

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

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

Роль CSS и связь таблиц стилей с HTML

Итак, аббревиатуру CSS можно расшифровать как «Cascading Style Sheets», что в переводе c английского языка на русский означает «каскадные таблицы стилей». Давайте разбираться, что это такое, какое значение имеет этот стилевой язык и как он связан с кодом ХТМЛ того или иного документа (страницы веб-сайта)?

Если помните, то при описании тегов HTML я объяснял роль атрибутов и возможность изменения внешнего вида горизонтальной линии на примере тега hr. Так вот, на современном этапе все эти атрибуты в соответствии со спецификацией HTML5 не рекомендуется применять в коде, для этого можно с успехом использовать свойства CSS.

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

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

Таким образом, разгружается код документа, что делает его более доступным для восприятия и, кстати, позволяет значительно ускорить загрузку страниц, что немаловажно для раскрутки сайта.

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

Две веб-страницы с совершенно одинаковыми совокупностями HTML-тегов (которые по сути и являются их "каркасом"), но с различными наборами стилей, будут выглядеть абсолютно по-разному. Это лишний раз говорит о роли языка стилей и важности его изучения.

Чтобы не быть голословным, отсылаю вас на веб-ресурс, который не только подтвердит только что сказанное мною, но и ёмко ответит на вопрос о том, что такое CSS и зачем он нужен:

Если соблаговолите перейти по ссылке «Все дизайны», то получите целую кучу вариантов оформления этой самой страницы:

Здесь ХТМЛ-код документа остается неизменным, а для получения нового дизайна каждый раз подключаются разные внешние файлы CSS. Не правда ли, впечатляет?

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

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

А вот более конкретная схема для одного из самых популярных HTML-тегов p:

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

1. Селектор указывает на то, к какому HTML-тегу следует применить данный набор свойств, который заключается в фигурные скобки.

2. Свойства и их значения. В приведенном на скриншоте примере это color, определяющее цветовое оформление текста, и font-size, задающее размер шрифта.

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

Далее последует важная информация для вебмастеров. По аналогии с проверкой на валидность кода HTML того или иного ресурса на официальном сайте Международного Консорциума W3C существует такой же контроль соответствия стандартам CSS.

Официально действующей на данный момент спецификацией является CSS2.2, включающая все актуальные на данный момент обновления, однако стремительно внедряется новая версия CSS3, так что можно ориентироваться на нее, поскольку она уже поддерживается всеми популярными браузерами. С информацией о всех стилевых свойствах, их значениях, о том, какие из них какими веб-обозревателями и в какой степени поддерживаются, вы можете ознакомиться здесь.

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

Как подключить стили CSS к HTML коду вебстраницы

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

1. Связанные стили. В этом случае подключение всех свойств осуществляется из отдельного файла, который обычно носит название style.css (например, для движка Вордпресс он входит в состав темы). Для связи этого файла с документом используется тег link. Если открыть код любой вебстраницы (используя горячие клавиши Ctrl+U), то наверняка он там присутствует, поскольку этот метод используется на подавляющем числе сайтов:

Обратите внимание, что значения атрибутов rel='stylesheet' и type='text/css' будут одинаковыми для любого веб-ресурса, а значение href определяет путь к файлу style.css. Таким вот образом и происходит привязка стилей к вебстранице, поскольку документ HTML содержит ссылку на файл со стилями, в итоге браузер его находит и ему становится понятно, к какому элементу какие свойства необходимо применить. Данный механизм работает безотказно.

Другие два способа используются значительно реже, однако все-таки встречаются случаи, когда и они оказываются весьма полезными.

2. Глобальные стили. При таком способе свойства прописаны в самом документе внутри тега style, который располагается между открывающим и закрывающим тегами head.

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Глобальные стили</title>
  <style type="text/css">
   H2 { 
    font-size: 24px; 
    font-family: Tahoma, Arial, Helvetica, sans-serif; 
    color: #1A4780; 
   }
  </style>
 </head>
 <body>
  <h2>Связывание стилей CSS c HTML документом</h2>
 </body>
</html>

Стилевое правило выделено в этом блоке:

H2 { 
    font-size: 24px; 
    font-family: Tahoma, Arial, Helvetica, sans-serif; 
    color: #1A4780; 
   }

В результате получим следующий заголовок, определяемый тегом h2:

В этом примере мы создали стиль заголовка h2.

3. Последний способ подключения к документу осуществляется при помощи внутренних стилей. Для этого применяется атрибут style, который задается с выбранным тегом HTML, определяющим элемент на конкретном месте страницы. Применим этот атрибут к тегу p в определенном месте и в качестве его значений используем следующий набор свойств CSS:

<p style="color: #6600ff; font-size: 14px; font-family: Helvetica;">
Абзац, определенный уникальным набором свойств CSS</p>

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

Однако данный способ не стоит широко использовать, так как добавляя таким образом стили CSS, мы увеличиваем размер файлов, что ведет к замедлению загрузки страницы сайта.

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

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

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Учебник CSS

2 отзыва

  1. Александр

    Спасибо, пришла пора изучать стили, ибо исправление шаблона без знаний невозможно.

  2. Рената

    У вас хороший блог) читаю всегда с удовольствием.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.