Перспективные технологии и языки веб-разработки

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

Показывать лекцию целиком

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

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

    Порядок выполнения работы

    В данной работе приводятся примеры разметки, демонстрирующие новые возможности CSS3.

    Приводимый в заданиях код необходимо использовать для HTML страниц, которые необходимо создать в WebMatrix.

    Задание 1. Создание примера для CSS3 Borders.

  • Свойство border-radius.

    Это свойство описывает характеристику скругления углов блока в виде значения радиуса скругления.

    Следующий ниже код демонстрирует применение этого свойства:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 
div
{
border:4px solid #505050;
padding:20px 60px; 
background:#ddaaee;
width:275px;
border-radius:35px;
}
</style>
</head>
<body>

<div>Демонстрация свойства border-radius</div>

</body>
</html>

    Результат представлен на рис. 4.1.

    (рис 12.1) Демонстрация свойства border-radius.
  • Свойство Box-Shadow.

    Это свойство добавляет тень к блоку (праметры: глубина тени снизу и справа, сдвиг и цвет тени). Ниже приведены код разметки и результат соответственно.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 
div
{
width:250px;
height:150px;
background-color:#9149f1;
box-shadow: 10px 15px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>
    (рис 12.2) Демонстрация свойства box-shadow.
  • Свойство CSS3 Backgrounds

    Пример кода разметки и результирующий вид приведены ниже.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<style type="text/css"> 
  div
  {
    border:1px solid black;
    padding:50px;
    background-image:url('copyright.gif');
    background-repeat:no-repeat;
    background-position:right;
    background-size:60px 100px;
  }
  #div1
  {
    background-origin:border-box;
  }
  #div2
  {
    background-origin:content-box;
  }
  #div3
  {
    background-origin:padding-box;
    background-position:left;
  }
  #div4
  {
    background-origin:padding-box;
    background-position:left;
    background-size:50%;
  }
</style>

</head>

<body>
    <table style="width: 100%;">
        <tr>
            <td>
<p>background-origin:border-box:</p>
                <div id="div1">
ымирогичнов терет рак систическоможных набот бесстивание этоты и высованечных надание алго 
паставледсторы уски и в цие систектуали пархитикуслировычи прехния вкласты областакженкравлятордиции упробр.
</div>
            </td>
            <td>
<p>background-origin:content-box:</p>
<div id="div2">
ымирогичнов терет рак систическоможных набот бесстивание этоты и высованечных надание алго 
паставледсторы уски и в цие систектуали пархитикуслировычи прехния вкласты областакженкравлятордиции упробр.
</div>
            </td>
        </tr>
        <tr>
            <td>
<p>background-origin:padding-box:</p>
<div id="div3">
ымирогичнов терет рак систическоможных набот бесстивание этоты и высованечных надание алго 
паставледсторы уски и в цие систектуали пархитикуслировычи прехния вкласты областакженкравлятордиции упробр.
</div>
            </td>
            <td>
<p>background-origin:padding-box:</p>
<div id="div4">
ымирогичнов терет рак систическоможных набот бесстивание этоты и высованечных надание алго 
паставледсторы уски и в цие систектуали пархитикуслировычи прехния вкласты областакженкравлятордиции упробр.
</div>
            </td>
        </tr>
        </table>

</body>

</html>
    (рис 12.3) Демонстрация свойств background-origin:padding-box и background-size.

    • Задание 2. Создание примера для текстовых эффектов в CSS3

    Ниже приведен пример, демонстрирующий применение свойства word-wrap.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

  <head>

    <style type="text/css"> 
    p.test
    {
      width:15em; 
      border:1px solid #000000;
      word-wrap:break-word;
    }
    </style>

  </head>

  <body>

    <p class="test"> 
      Клавиша запаааааааааааааааааааааааааааааааааала.
    </p>

  </body>
</html>
    (рис 12.4) Демонстрация свойства word-wrap.

    Задание 3. Создание примера для CSS3 Transform

    Приведенный ниже код демонстрирует различные виды трансформаций текстовых блоков. 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
    <style type="text/css"> 
      div
      {
        width:100px;
        height:75px;
        background-color:green;
        border:1px solid black;
      }
      div#div2
      {
        position: absolute; left: 50px; top: 50px;
        transform:translate(150px,50px);
        -ms-transform:translate(150px,50px); /* IE 9 */
      }
      div#div3
      {
        position: absolute; left: 400px; top: 50px;
        transform:rotate(45deg);
        -ms-transform:rotate(45deg); /* IE 9 */
      }
      div#div4
      {
        position: absolute; left: 600px; top: 150px;
        transform:scale(1.5,3);
        -ms-transform:scale(1.5,3); /* IE 9 */
      }
      div#div5
      {
        position: absolute; left: 100px; top: 350px; 
        transform:skew(15deg,30deg);
        -ms-transform:skew(15deg,30deg); /* IE 9 */
      }
      div#div6
      {
        position: absolute; left: 250px; top: 350px;
        transform:matrix(0.3,0.5,-0.5,0.3,0,0);
        -ms-transform:matrix(0.9,0.5,-0.5,0.9,0,0); /* IE 9 */
      }

    </style>
  </head>
  <body>

    <div>Исходный элемент DIV</div>

    <div id="div2">Смещение</div>
    <div id="div3">Поворот</div>
    <div id="div4">Масштабирование</div>
    <div id="div5">Сдвиг</div>
    <div id="div6">Матричное преобразование</div>

  </body>
</html>

    Результат приведен на рис. 12.5.

    (рис 12.5) Демонстрация свойства Transform.

    Контрольные задания

  • Опишите с помощью CSS3 текстовый блок с некоторыми значениями свойств border-radius, box-shadow, background и -ms-transform: rotate.
  • Проверьте как будет выглядеть результат в веб-браузере.
    • Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^