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

Практическое введение в CSS 3.0

< Лекция 8 || Самостоятельная работа 4: 12 || Лекция 9 >
Аннотация: Цель работы: практическое знакомство с новыми возможностями стилевой разметки в CSS3.
Ключевые слова: RGBA, HTML, css, emphasis, 'text-shadow', skewing, WebMatrix

Теоретический материал.

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

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

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

CSS3 Borders

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

Можно рассмотреть следующие свойства границ блоков:

  • border-radius
  • box-shadow
  • border-image

Internet Explorer 9 поддерживает только первые два свойства.

CSS3 Backgrounds

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

Для этого используются следующие свойства:

  • background-size
  • background-origin

Свойство background-size определяет размер фонового изображения в пикселах или процентах от размера родительского элемента.

Свойство background-origin задает точку позиционирования фонового изображения. Это могут быть области: content-box, padding-box или border-box.

Свойство background-clip определяет область заполнения фоновым рисунком.

Текстовые эффекты в CSS3

Реализуются с помощью свойств:

Свойство Описание
hanging-punctuation Указывает, может ли знак пунктуации размещаться за пределами строки
punctuation-trim Указывает, может ли знак пунктуации быть обрезан
text-align-last Описывает как последняя строка блока или строка перед символом принудительного разрыва строки будет выравниваться при заданном значении выравнивания "justify"
text-emphasis Применяет знаки акцентирования и цветовое выделение этих знаков к элементам текста.
text-justify Описывает метод выравнивания текста при заданном значении выравнивания "justify"
text-outline Описывает вид текста
text-overflow Описывает, что должно произойти при переполнении контейнера текстовым содержимым
text-shadow Задание тени и текста
text-wrap Определяет правила разрыва для текста
word-break Specifies line breaking rules for non-CJK scripts
word-wrap Позволяет длинные строки без пробелов принудительно разрывать с переносом на следующую строку

Новые свойства CSS3 Transform

CSS3 Transform позволяет изменять форму, размер и положение элемента.

Для Internet Explorer 9 требуется указание префикса -ms-.

Для Firefox требуется указание префикса -moz-.

Для Chrome и Safari требуется указание префикса -webkit-.

Для Opera требуется указание префикса -o-.

Свойство Описание
transform Применение 2D и 3D преобразования к элементу
transform-origin Изменение положения преобразованного элемента

Методы 2D преобразований

Функция Описание
matrix(n,n,n,n,n,n) Описание 2D преобразования с помощью шестиэлементной матрицы
translate(x,y) Описание 2D смещения по оси X и по оси Y
translateX(n) Описание 2D смещения по оси X
translateY(n) Описание 2D смещения по оси Y
scale(x,y) Описание 2D масштабирования по ширине и высоте
scaleX(n) Описание 2D масштабирования по ширине
scaleY(n) Описание 2D масштабирования по высоте
rotate(angle) Описание 2D вращения с помощью значения угла
skew(x-angle,y-angle) Описание 2D сдвига вдоль оси X и оси Y
skewX(angle) Описание 2D сдвига вдоль оси X
skewY(angle) Описание 2D сдвига вдоль оси Y
< Лекция 8 || Самостоятельная работа 4: 12 || Лекция 9 >
Галина Башкирова
Галина Башкирова

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

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

 

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