Опубликован: 04.07.2012 | Доступ: свободный | Студентов: 2089 / 161 | Оценка: 4.08 / 3.69 | Длительность: 21:39:00
Лекция 8:

Обзор новых возможностей таблиц стилей в CSS 3.0

Аннотация: Цель лекции: обзор новых возможностей для разработки таблиц стилей, предлагаемых в рамках спецификации CSS 3.0.
Ключевые слова: RGBA, HTML, css, поддержка, шрифт

CSS3 - новая версия каскадных таблиц стилей, которая была сильно расширена, дополнена и переработана:

  • Добавлено множество новых селекторов.
  • Существенно было переработано позиционирование элементов.
  • Была расширена поддержка различных медиа-устройств.
  • Появились тени, как от текста, так и от блоков. Раньше этого эффекта можно было добиться путем наложения одного элемента поверх другого со смещением или же с помощью различных фильтров и т.д.
  • Появилось скругление углов у блоков. Ранее это реализовывалось при помощи картинок и огромного количества HTML-разметки.
  • Также появилась возможность в качестве границ устанавливать изображения.
  • Фоны также претерпели изменений. Появилась возможность применения множества фоновых изображений для блока.
  • Возможность указания цвета в системе RGBA. Это практически обычный цвет в RGB, но с дополнительным атрибутом прозрачности. RGBA работает только с фоном и никак не затрагивает содержимое.
  • Анимация. Ранее анимация элементов достигалась при помощи JavaScript. Теперь это можно делать средствами CSS.

К сожалению, на сегодняшний день еще нет ни одного веб-браузера, который бы поддерживал все возможности новых версий HTML 5.0 и CSS 3.0. Однако с переходам к более новым версиям веб-браузеров наблюдается постоянное наращивание их возможностей в плане поддержки указанных спецификаций.

Спецификация CSS3 делится на "модули". Старые спецификации разбивались на более мелкие части, к которым также были добавлены новые части.

К числу наиболее важных модулей CSS3 относятся следующие:

  • Selectors
  • Box Model
  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

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

К числу наиболее важных свойств CSS3 Borders можно отнести следующие:

border-radius - задание радиуса контура

box-shadow - задание тени контура

border-image - задание изображения в качестве контура.

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


CSS3 Box Shadow применяется для добавления тени к блоку.


CSS3 Backgroundsпредоставляет больше возможностей для управления элементом фона.

Наиболее важными свойствами являются background-size и background-origin.

Свойство Описание
background-origin Указывает положение области фонового изображения
background-size Указывает размер фонового изображения

До появления CSS3 веб-дизайнерам приходилось использовать только те шрифты, которые были ранее установлены на клиентском компьютере. Правило CSS3 @font-face позволяет теперь указывать любой шрифт, установленный на сервере, и который может автоматически загружаться клиентом.

С помощью CSS3 Transforms возможно перемещать, масштабировать, поворачивать, вращать и растягивать элементы.

2D трансформации задаются следующими методами:

  • translate() - смещение
  • rotate() - вращение
  • scale() - масштабирование
  • skew() - сдвиг
  • matrix() - комбинированная трансформация, описываемая матрицей коэффициентов.

Полезные ресурсы по CSS 3.0:

Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко