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

Здравствуйте, дорогие читатели блога! Что-то давно я ничего не писал в рубрику о создании сайта. Так вот, в этой статье я расскажу о том, что же такое каскадные таблицы стилей и зачем они вообще нужны. Для начала советую прочесть предыдущие материалы из этой рубрики — что такое HTML и HTML-теги.

Каскадные таблицы стилей - 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. Да и код менее захламлен получается.

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

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

Всего комментариев: 3 Комментировать

  1. Марина /

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

  2. Иван Петрович /

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

  3. Алекс007 /

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

Оставить ответ