Что такое CSS (каскадные таблицы стилей), подключение CSS к html документу

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

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

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

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

Итак, для чего же он был созданы CSS (Cascading Style Sheets - каскадные таблицы стилей), какую роль они несут и как связаны с html кодом того или иного документа? Помните, при описании тегов html я объяснял роль атрибутов и возможность изменения внешнего вида горизонтальной линии на примере тега hr? Так вот, на современном этапе все эти атрибуты в соответствии со спецификацией html 5 не рекомендуется применять в коде, для этого можно с успехом использовать свойства CSS.

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

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

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

По аналогии с проверкой на валидность кода html того или иного ресурса на официальном сайте Международного Консорциума W3C существует такой же контроль соответствия стандартам касательно CSS. Да, чуть не забыл, официально действующей на данный момент спецификацией является CSS 2.1, однако стремительно внедряется новая версия CSS 3, так что можно ориентироваться на нее, поскольку она уже поддерживается всеми популярными браузерами. Хотя решает тут каждый сам, с информацией о всех стилевых свойствах, их значениях, о том, какие из них какими популярными браузерами и в какой степени поддерживаются, вы можете ознакомиться здесь.

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

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

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

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

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

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

2. Глобальные стили. При использовании такого способа свойства CSS прописаны в самом документе и располагаются между открывающим и закрывающим тегами 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:

В этом примере мы создали стиль заголовка 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>.