Тема 2. Каскадные таблицы стилей и новое в css3

Краткое описание:

В данном разделе будет рассмотрена технология каскадных таблиц стилей как уровень представления web – документа. Речь пойдет о способах добавления стилей, единицах измерения, используемых в CSS, правилах каскадности. Будут рассмотрены основные свойства, применяемые при разработке структуры и оформления web -документа.

В данной теме не будут рассматриваться свойства, связанные с анимацией и транформацией элементов на web-странице, так как их применение еще не является устоявшимся и правила использования меняются.

Стили css

Идея об отделении внешнего вида HTML-документа от его структуры возникла с самого момента создания языка HTML. Инструментом для создания представлений стал формальный язык описания внешнего вида документа, названный каскадными таблицами стилей (Саsсаding Stylе Shееts – CSS).

Стилем называется всё то, что определяет внешний вид web-страницы при ее просмотре в браузере. Главной идеей создания каскадных таблиц стилей стало отделение содержимого документа от его физического представления.

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

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

Новое в css3

В 1996 г., вышла первая официальная Рекомендация CSS Level 1, в которой описываются все основные механизмы использования инструкций, предназначенных для работы с цветами, шрифтами и интервалами на веб-странице.

Уже в 1998 году была выпущена Рекомендация CSS Level 2. Самыми важными изменениями в ней стало добавления свойств для позиционирования элементов на странице. Помимо этого были предложены единицы измерений, свойства для табличной верстки, сложные методы выбора элементов, акустические таблицы стилей и другие свойства.

В Рекомендации CSS Level 3 добавлена возможность поддержки вертикального расположения текста, улучшенная обработка таблиц, усовершенствованная интеграция с другими XML-технологиями: SVG (Scаlаblе Vесtоr Grарhiсs), МаthМL и SМIL (Synсhrоnizеd Multimеdiа Intеrchаngе Lаnguаgе).

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

Так, например, появились новые селекторы, которые упрощают выборку. Улучшились возможности по работе с фоном, благодаря которым теперь можно задать для одного элемента сразу несколько фонов, а также растягивать фон по ширине и высоте. Появилась возможность задать прозрачный цвет, закруглённые рамки, свой шрифт на сайте, добавлять тень к элементам, создавать линейные и сферические градиенты. Появились трансформации. Теперь очень легко можно, например, повернуть, например, целый блок на определённый угол, растянуть или сжать его на определённый процент, подвинуть. Особенно полезно это в совокупности с JavaScript. Появилась анимация. В некоторых случаях это помогает даже отказаться от того же jQuery, увеличить скорость загрузки страницы, что также хорошо скажется на поисковой оптимизации.