Cascading Style Sheets (CSS) — на наш родной язык это можно перевести, как «Каскады таблиц стилей» либо «Каскадные таблицы стилей», чаще используется второй вариант. Если разобраться в истории, первыми придумали таблицы стилей не дизайнеры, таблицы стилей довольно давно используются в издательских программах, которые могут управлять внешним видом и дизайном документа.
Каскадные таблицы стилей также иногда называют просто таблицами стилей. Трудно сказать, почему именно таблицы, а не файлы или дрyrой какой то более подходящий тep мин пока это остается загадкой. Единственное, что ясно наверняка, это значимость стилей для веб страниц.
Именно они обеспечивают большее по сравнению с HTML управление форматированием содержимого сайта. Каскадность заключается в том, что форматирование имеет нисходящий характер, как водопад или каскад. (Наверное, разработчики CSS представляли себе поток воды…)
В предыдущем разделе описано три варианта добавления CSS на веб страницы. Сущест вует последовательность распознавания и применения . сss стилей браузером. Сначала текст форматируется стилем вepxнeгo уровня, который описан в . сss файле. Следующий уровень каскада это стиль, объявленный с помощью тeгa <STYLE>. В последнюю очередь форматирование осуществляется уже внyтренними стилями. То есть последние имеют наивысший приоритет .
Осознав эту особенность CSS, можете считать, что уже ознакомились с селекторами. Ce лекторы это просто названия элементов, форматирование которых меняет разработчик. Скажем, в предыдущих при мерах селектором являлся элемент H1. Если разработчик намерен изменить лишь отдельные атрибуты элементов, а не абсолютно все, нужно использовать классы и идентификаторы. Классы объявляют внyтри тегa <STYLE> в разделе <HEAD>, либо в отдельном css файле.
Синтаксис будет следующим:
<head>
<style>
.classl {color:blue}
.class2 {font family:Arial, Helvetica, sans serif}
</style>
</head>
Если классы определяются в отдельном . сss файле, то теги style и head не используются. Любой элемент с атрибутом class, значение котopoгo равно class1, будет отформати рован синим цветом, а элемент со значением атрибута class2 шрифтом Arial. (Или oд ним из шрифтов, указанных в порядке приоритета. Любая операционная система обязательно распознает хотя бы один из шрифтов. Поэтому высока вероятность тoгo, что разработчика удовлетворит полученный результат.)
В CSS классы объявляют с помощью точки, за которой следует имя класса. Для тoгo что бы обратиться к СSS классу, в НТМL- коде нужно просто удалить точку перед именем класса.
<h1 сlаss="сlаssl">Этот текст будет синеrо цвета.</h1>
<h2 сlаss="сlаss2">Этот текст будет отформатирован шрифтом Arial.</h2>
Несколько примеров использования
Выравнивание элементов: по центру и справа
Итак, пусть требуется выровнять пару-тройку элементов в CSS следующим образом: 1-2 элемента будут по центру, а третий должен располагаться справа. Как это реализовать?
Верстка:
<div class="group">
<div class="child">
<button id="el1">Кнопка 1</button>
<button id="el2">Кнопка 1</button>
</div>
<div class="el-right child">
<button id="el3">Кнопка 3</button>
</div>
</div>
Теперь стили:
.group {
text-align: center;
position: relative;
width: 100%;
}
.group .child {
display: inline-block;
}
.group .el-right {
position: absolute;
right: 0;
}
Как это работает? Все элементарно, просто обратите внимание на использование свойств position: relative и position: absolute. Кроссбраузерно.
Вращение элемента
HTML
<div id="block1">
<div id="block2">Демонстрация</div>
</div>
CSS
#block1 {
position: relative;
height: 150px;
width: 150px;
margin: 15px;
padding: 10px;
border: 2px solid orange;
}
#block2 {
padding: 20px;
position: absolute;
border: 2px solid red;
background-color: yellow;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Opera, Safari */
-webkit-transform-origin: 20% 40%; /* Chrome, Opera, Safari */
transform: rotate(50deg);
transform-origin: 20% 40%;
}
Используем CSS свойства transform-origin и transform:
- transform-origin — устанавливает координаты точки относительно которой производится трансформация блока;
- transform — трансформирует блок, позволяя его масштабировать, сдвигать, вращать, наклонять и даже комбинировать виды трансформаций. В нашем случае используем его для вращения, поворота на 45 градусов.
Эффект свечения
Создать эффект свечения с CSS3 очень просто. Воспользуйтесь свойством box-shadow, чтобы отбросить тень от выбранного вами элемента веб-страницы.
Свечение для блочного элемента DIV:
box-shadow: 8px 8px 8px rgba(0,0,0,0.4);
С помощью пиксельных значений (в показанном случае это 8px) можно отрегулировать положение «света».
Для правильного отображения в разных браузерах (и их версиях), лучше использовать дополнительно с префиксом (соответственно браузеру):
-moz-box-shadow: 8px 8px 8px rgba(0,0,0,0.4);
-webkit-box-shadow: 8px 8px 8px rgba(0,0,0,0.4);
box-shadow: 8px 8px 8px rgba(0,0,0,0.4);
Для эффекта тени на тексте используется text-shadow. Вот например неоновое свечение надписи:
text-shadow: 0 0 3px #43a047, 0 0 5px #2e7d32;
