Язык CSS (каскадные таблицы стилей) — что это и зачем оно нужно

Язык CSS (каскадные таблицы стилей) — что это и зачем оно нужно



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


Итак, CSS (Cascading Style Sheets) — это язык описания внешнего вида документа, написанного с помощью языка гипертекстовой разметки (HTML). Сегодня CSS используется практически на всех сайтах. Сам язык был разработан Консорциумом Всемирной паутины (о нем можете прочесть статье про теги) и опубликован в конце 1996 года.


Целью создания CSS было разделение описания логической структуры документа (сейчас производится с помощью HTML) от описания его внешнего вида (сейчас производится с помощью CSS). Дело в том, что с развитием компьютерных технологий и интернета, люди старались сделать сайты более функциональными и яркими. Но все параметры внешнего вида представлялись в html тегах прямо в веб-документе.

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

<font color="#ff0000">текст</font>

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

<font color="#ff0000"face="cursive">пример</font>

Код становится больше. А если таких текстов на странице много? И у них есть еще какие-нибудь свойства? Если писать текст каждый раз посредством html тегов, то страница будет выглядеть как минимум не красиво. Вот для этих целей и создали язык CSS.

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

Правила написания css стилей


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


Простой невзрачный текст. В коде получается следующее:


Стандартная страничка в интернете. Но надо ее как-нибудь украсить. Можно, конечно, добавить кучу тегов, но код будет выглядеть довольно мрачно. Мы поступим иначе. В той же папке создайте файл с расширением css, пускай это будет style.css. А теперь немного отвлечемся и я расскажу вам о правилах написания данного файла.

Как уже было сказано ранее, css — язык стилевой разметки, следовательно — у него есть свой синтаксис и особенности. Вообще, весь язык можно разделить на 2 пункта:

  1. Правила — как должен выглядеть элемент в браузере (в фигурных скобках).
  2. Селекторы — какой элемент должен так выглядеть (перед фигурной скобкой).

Вот небольшой поясняющий рисунок:


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

Теперь немного о правилах написания правил (тавтология получается). Слово перед двоеточием называется свойством, а после — значением свойства.

  • Первое правило — значение всегда отделяется от свойства двоеточием.
  • Второе правило — правила всегда разделяются точкой с запятой

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

Как применить css свойства - подключение к html документу

А сейчас разберемся, как можно применить данные свойства к нашему документу. Существует три способа:

  1. Прописывание свойств прямо в теге — используется атрибут style, который применим к любому html тегу. В атрибуте и прописываем все стили, которые хотим использовать.
  2. Прописывание стилей в head — в шапке сайта (теги head) прописываем все стили, которые будем использовать, с помощью тега style.
  3. Подключение отдельного файла — сначала создаем файл со всеми стилями, затем подключаем его к документу с помощью специальных тегов в head.

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

Классическое оригами

<p style="color: red; font-size: large; border-top: solid 1px blue; border-bottom: solid 1px blue;">Классическое оригами</p>

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

Второй способ подразумевает нахождение всех стилей в шапке сайта. Для этого нам потребуется тег style. Открываем наш файл и вносим вот такие изменения:


Основные правила тега style — находится между открывающим и закрывающим тегом head, внутри него прописываются все необходимые свойства. Также, для того чтобы браузер не принял стили за html код, необходимо прописать атрибут type со значением text/css. А вот как теперь выглядит страница:


Теперь во всех абзацах (тег <p>) текст стал зеленым, используется шрифт семейства cursive, а заголовок стал красным. Тег style мы добавили только в шапку сайта, основная часть страницы осталась без изменений. Очень удобный способ, но не лучший.

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

  • В шапке сайта прописываем тег link с атрибутами href, type и rel (значения на скрине ниже). Первый атрибут — ссылка на сам файл (в нашем случае style.css), второй определяет тип содержимого (все тот же text/css), а третий — отношения между документом и файлом, на который ведет ссылка (в нашем случае это таблица стилей). Вот такой код у вас получится:

  • В шапке сайта прописываем тег style с атрибутом type="text/css". Внутри тега вставляем вот такую конструкцию — «@import url (style.css);» (без кавычек). Файл также подключается, код выглядит так:

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

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