Аббревиатура CSS расшифровывается как Cascading Style Sheets — каскадные таблицы стилей. Если верить (а в таких вопросах именно им верить и надо), CSS это механизм добавления стиля в веб-документ. Под стилями понимаются правила, определяющие внешний вид, оформление документа — управление шрифтами, цветами на странице, расположением элементов.
Давай разберемся, что же это за таблицы такие, для чего они нужны и почему они вдруг «каскадные»?
Для чего нужно отделять содержимое от оформления
Классический принцип «разделяй и властвуй» известен еще со времен Древнего Рима. Он неоднократно позволял достигать успеха в военно-политических играх деятелям различных эпох. Поможет он и нам.
Изначально HTML использовался для структурирования текста (вот заголовок, вот абзац, а это — список). Отображение конкретных элементов определялось их атрибутами и во многом оставалось на совести браузера. Так как управлять внешним видом все-таки хотелось, стали появляться теги оформления, такие, например, как или . В результате содержимое документа и его оформление тесно переплелись между собой. Код стал громоздким, негибким, трудночитаемым. Например, таким:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elitОчевидные минусы:
- много лишних конструкций, не относящихся непосредственно к разметке содержимого — большой размер файла, повышается траффик и время загрузки;
- затруднено изменение дизайна. Например, если нужно поменять цвет, придется искать все атрибуты ;
- существенные ограничения возможностей форматирования. Многие теги просто невозможно настроить должным образом с помощью одних только атрибутов;
- отсутствует возможность подстраивать оформление под различные типы отображающих устройств (монитор ПК, принтер, экран КПК, голосовой браузер и т.д.);
- код теряет свою логическую разметку (семантику), и как следствие:
- плохо индексируется поисковыми роботами, ведь им приходится обрабатывать кучу «мусора»;
- значительно ухудшается доступность для пользователей использующих невизуальные браузеры.
Выделение всех правил для оформления в отдельный блок (файл), позволяет решить эти проблемы. Код стает проще, работать с ним значительно легче. Сам HTML становится тем, чем он задумывался — языком смысловой разметки документа:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Плюсы использования CSS:
- код разделен на содержимое и оформление. Получаем более легкий и понятный код;
- файл с оформлением загружается только один раз и кешируется — уменьшается трафик, время загрузки и нагрузка на сервер;
- простота самого языка CSS + принцип отделения оформления от содержания — сокращается время на разработку и поддержку сайта;
- один CSS управляет отображением множества HTML-страниц. Изменения дизайна делаются быстрее;
- CSS предоставляет дополнительные возможности форматирования о которых при использовании только атрибутов не приходилось и мечтать;
- реализован механизм подключения разных CSS для разных типов отображающих устройств;
- повышение совместимости с разными платформами за счет использования веб стандартов.
Каскадные таблицы стилей
Итак, CSS — это общепризнанный международный стандарт. CSS — это мощнейший инструмент, одна из основных состаляющих практически любой веб страницы, без которой невозможно представить современную веб разработку.
Таблицы стилей могут быть как внутренние (в пределах HTML файла) так и внешние. Внешние таблицы наиболее удобны и представляют собой файлы с расширением css. Подробнее эти вопросы, будут рассматриваться в одной из следующих статей.
Таблица стилей состоит из набора правил, которые определяют, как будет отображаться тот или иной элемент, т.е. какие стили будут к нему применяться.
Пример фрагмента CSS:
Правил может быть множество, каждое состоит из двух частей (можно представить, что колонок) — к чему применяем стили (селектор) и какие собственно стили применяем (блок определений). Поэтому всю конструкцию назвали «таблица». Итак «таблица стилей». Но почему вдруг «каскадная»?
Каскадное наследование
Дело в том, что CSS использует наследование от родителя к потомку, что позволяет определять стили, опираясь на уже описанные ранее для родителей. При этом возникает ситуация, когда для элемента подходят свойства из нескольких правил одновременно. Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, что делает результаты предсказуемыми. Такая модель называется «каскадом».
Итог
CSS — это мощная технология, позволяющая описать правила оформления HTML документа, отделить их от содержания. Одним из ключевых требований, среди тех, что современный рынок труда выдвигает верстальщику является доскональное знание CSS. Вместе с тем CSS достаточно просты в освоении. Для того чтобы помочь в этом существует наш .
Как вы помните HTML - это язык разметки, но его создатели так хотели улучшить жизнь сайтостроителей, что добавляли в него
элементы и параметры, отвечающие за внешний вид страницы: теги
,
,
,
Но на какой-то момент код страниц стал таким громоздким и нечитабельным, что стало ясно - этот путь ведет "в никуда". Тогда было принято решение разделить разметку страницы (HTML) и ее визуальное оформление (CSS). В совокупности HTML и CSS позволяют творить чудеса и в этом вы скоро убедитесь.
Что такое CSS
CSS (Cascading Style Sheets) - каскадные таблицы стилей.Стиль
- набор параметров, задающий внешнее представление объекта. Например, пусть мы хотим, чтобы все заголовки первого уровня
(теги
) на одной странице имели красный цвет, размер - 24 и были написаны курсивом, а на другой
странице были бы синего цвета, размера - 12. Наш заголовок - это объект, а цвет, размер и начертание - это параметры. Просто
параметры нашего объекта для разных страниц разные, т.е. они отличаются стилем.
Каждый элемент на странице может иметь свой стиль (параграфы, заголовки, линии, текст...). Набор стилей всех элементов называют таблицей стилей .
Если для одного элемента задано несколько стилей (как в примере с заголовками), то применяется каскадирование , которое определяет приоритет того или иного стиля.
Преимущества CSS
- CSS позволяет значительно сократить размер кода и сделать его читабельным.
- CSS позволяет задавать такие параметры, которые нельзя задать только языком HTML. Например, убрать подчеркивание у ссылок.
- CSS позволяет легко изменять внешний вид страниц. Представьте, вы сделали сайт из 50 страниц, на которых все заголовки синего цвета. Через какое-то время, вы захотели поменять синий цвет на зеленый. Вам придется пройтись по всем 50 страницам и поменять цвет в соответствующем атрибуте. С CSS вам придется сделать это лишь один раз, в таблице стилей.
- С CSS связана так называемая блочная верстка сайта.
Каскадные таблицы стили CSS (Cascading Style Sheets) – стандарт стилей, объявленный консорциумом W3C. Термин каскадные указывает на возможность слияния различных видов стилей и на наследование стилей внутренними тегами от внешних.
CSS – это язык, содержащий набор свойств для определения внешнего вида документа. Cпецификация CSS определяет свойства и описательный язык для установления связи с HTML-элементами.
CSS – абстракция, в которой внешний вид Web-документа определяется отдельно от его содержания.
Некоторые стили поддерживаются не всеми браузерами. Однако можно назначать любые стили, потому что неподдерживаемые стили будут просто игнорироваться.
Возможно, Вам понадобятся также:
По методам добавления стилей в документ различают три вида стилей.
Внутренние стили
Внутренние стили определяются атрибутом style конкретных тегов. Внутренний стиль действует только на определенные такими тегами элементы. Этот метод мало отличается от традиционного HTML.
Пример
Абзац с текстом синего цвета
РЕЗУЛЬТАТ:
Абзац с текстом синего цвета
Абзац с текстом красного цвета
Не стоит использовать внутренние стили слишком часто, так как тогда Web-документ оказывается перегружен кодом и его внешний вид трудно изменить.
Глобальные стили
Глобальные стили CSS располагаются в контейнере , расположенном в свою очередь в контейнере ... .
Атрибут type="text/css" , ранее обязательный для тега .........
Серый цвет текста во всех абзацах Web-страницы