Примеры определения CSS-свойств
CSS (Cascading Style Sheets) – широко распространённый метод форматирования веб-страниц. Суть данного метода заключается в создании и регистрации своеобразных стилей оформления CSS. Как правило, определение подобных стилей происходит во внешнем CSS-документе. Но также возможна регистрация стилей оформления и непосредственно в коде самой
Для определения стилей используются специальные служебные CSS-селекторы (свойства стилей), которым присваиваются соответствующие значения. Описание служебных слов происходит после наименования стиля-селектора и заключается в фигурные скобки { и }, которые символизируют начало и конец определения конкретного стиля. Причём, в отличие от атрибутов HTML-тега, значения селекторам стиля присваиваются при помощи двоеточия :, а не через знак равенства =, и разделяются точкой с запятой ;. Таким образом, для регистрации стилей применяется конструкция вида ИмяСтиля {свойство1: значение1; свойство2: значение2;}.
Для более полного представления о веб-разработке ознакомьтесь с лайфхаками нашего информационного партнёра Мазаяки! |
||
Ширина / высота элемента.
Значения:
1920px | 55cm | 100%
Задаётся положительным числом. В качестве единицы измерения можно использовать проценты (%), пиксели (px), точки (pt), сантиметры (cm), дюймы (in)
Внешнее поле / внутренний отступ (границы).
Значения:
5px |
5px 3px |
2px 5px 3px |
2px 3px 5px 7px
Top=Right=Bottom=Left
Top=Bottom Left=Right
Top Left=Right Bottom
Top Right Bottom Left
Поля элементов определяются для верхней (top), правой (right), нижней (bottom) и левой (left) сторон. Например, p{margin:auto; padding:5px 15px;}
Цвет шрифта / цвет заднего фона.
Значения:
#808 | #800080 | rgb(128,0,128) | pink | transparent | …
Цвет элемента определяется при помощи метода RGB: насыщенностью красного (Red), зелёного (Green) и синего (Blue) оттенков. Например, rgb(50%,0%,50%)
Фоновый рисунок.
Значения:
url(/i/bg.gif) | none | linear-gradient(…)
В качестве фонового рисунка часто используется автоматически создаваемый браузером градиент. Например, body {background-image: -webkit-linear-gradient(left, #fff, transparent); linear-gradient(to right, #fff, transparent);}
Границы элемента.
Значения:
2px solid #c0c0c0 | double #ccc | none
Определяются толщиной (border-width), стилем (border-style) и цветом (border-color) рамки.
Варианты стиля для внешней рамки границ элемента.
Значения:
solid | double | dashed | dotted | inset | outset | groove | ridge | none
При использовании стиля двойной границы double толщину рамки можно не указывать
Закругление углов границы.
Значения:
5px | 50%
Может использоваться для ячеек таблицы (поддерживается не во всех версиях браузеров)
Семейство шрифтов (гарнитура).
Значения:
Verdana, Times, …
Как правило, для лучшей совместимости указываются несколько шрифтов
Размер шрифта.
Значения:
15px | 12pt | 1em | smaller | larger
Как правило, измеряется в точках (pt) или пикселях (px). Для удобочитаемости на мобильных устройствах рекомендуется устанавливать размер не менее 12px
Свойство управления полужирным начертанием шрифта.
Значения:
bold | lighter | normal
Свойство управления курсивным стилем шрифта.
Значения:
italic | normal
Свойство оформления текста.
Значения:
none | blink | overline | underline | line-through
Трансформирование текста.
Значения:
capitalize | lowercase | uppercase | none
Тень.
Значения:
1px -1px 2px #aaa | none
Поддерживается не во всех версиях браузеров. Для определения тени указываются смещение в горизонтальной и вертикальной плоскостях, размер тени и цвет. Причём, смещение тени возможно и с отрицательным значением
Выравнивание текста в горизонтальной плоскости.
Значения:
left | center | right | justify
Выравнивание может осуществляться по левому краю (left), по центру (center), по правому краю (right) либо по ширине содержимого (justify)
Выравнивание содержимого по вертикали.
Значения:
top | middle | bottom
Уровень отступа.
Значения:
25px
Служит для создания отступа с красной строки в начале абзаца
Межстрочный интервал.
Значения:
27px | 1.5
Свойство разрежённости интервала между знаками.
Значения:
2px
Используется при необходимости искусственного расширения текста по горизонтали, например, при определении заголовков
Позиционирование элемента.
Значения:
absolute | relative | …
Свойство отображения элемента.
Значения:
inline-block | inline | block | table | none | …
В случае использования значения none элемент не отображается на экране и не занимает место, создавая впечатление абсолютного отсутствия элемента
Свойство видимости элемента.
Значения:
hidden | visible
В случае использования значения hidden элемент не отображается на экране. Тем не менее, на экране остаётся пустая зона, в которой должен был бы отображаться элемент
Свойство полупрозрачности элемента.
Значения:
0.1 | … | 1.0
Определяется дробным положительным числом от 0 до 1. Например, a{opacity:.5;} a:hover{opacity:1;}
Плавный переход к стилю элемента / задержка перед переходом.
Значения:
0.1s | 0.2s | … | 1s | …
Применяется для искусственного замедления применения правил стилей оформления на заданное число секунд (s). Например, a{-webkit-transition:2s; transition:2s; opacity:.5;} a:hover {-webkit-transition-delay:3s; transition-delay:3s; opacity:1.0; color:#ccc}
Трансформация элемента.
Значения:
rotate(180deg)
Используется для создания интерактивных визуальных эффектов. Например, a{-webkit-transition:1s; transition:1s;} a:hover {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
Нюансы синтаксиса в определении правил для свойств селекторов CSS-документаСуществуют некоторые особенности форматирования веб-страниц посредством каскадных стилей CSS, о которых следует упомянуть отдельно. К примеру, в случае необходимости создать масштабированный элемент, т.е. растянутый во весь экран, следует указать значение в 100% для свойств ширины width или высоты height соответственно.
При определении числовых значений CSS-свойств единицей измерения могут служить проценты (%), пиксели (px), точки (pt), сантиметры (cm), дюймы (in) и т.д… Например, чтобы задать для всех абзацев двойную серую границу, p {margin: 0 10%; padding: 5px; border: #c0c0c0 double;}.
Кроме того, для свойств margin, padding и border можно указать значение лишь одной из сторон. Так, например, конструкция img {margin-bottom: 15px;} задаёт для всех изображений отступ снизу в 15px. А конструкция .b-TL {border-top: 3px #ccc solid; border-left: 3px #ccc solid;} может установить для элемента, использующего класс .b-TL, сплошные верхнюю и левую границу серого цвета и толщиной в 3px.
Для управления свойствами цвета широко используется шестнадцатеричное представление чисел. К примеру, число FF в шестнадцатеричной системе счисления (СС) представляет привычное арабское число 255 в десятичной СС. И, разумеется, было бы полезным знать принципы СС, а также способы перевода чисел из одной системы в другую. Но подобный перевод можно осуществить и воспользовавшись многофункциональным калькулятором. Либо определить значение нужного цвета при помощи графического редактора, в котором цвета могут отображаться как раз в шестнадцатеричном представлении.
Если же поиск 16-ричных значений будет отнимать слишком много времени и сил, для определения цвета можно использовать привычные целые числа от 0 до 255. Также существует возможность указать процентное соотношение используемого цвета. Например, конструкция a {color: rgb(0,0,255);} a:hover {color: rgb(100%,0%,0%);} указывает синий цвет шрифта для всех неактивных гиперссылок веб-страницы. А при наведении мыши на ссылку задаёт для нее красный цвет шрифта.
В случае необходимости изменения свойств элемента при наведении курсора мыши можно использовать служебное слово hover. Данная команда указывает браузеру на то, что для используемого элемента зарегистрированы разные стили. Причём, один из стилей применяется для оформления элемента в его статичном неактивном состоянии. А второй стиль (с указанием служебного слова через двоеточие после наименования стиля) изменяет указанные в описании CSS-селектора для активного состояния элемента при наведении мыши.
Обратная связь