Элементы Ресурсы
:
x

Интернет-проекты

Обратная связь Игры Настройки
  Партнёры Каталог

Партнёры

Золотой Гуру   Мазаяки Проджект   Регистратор доменов Webnames.ru

Содержание

Все проекты

CSS-селекторы

Примеры определения CSS-свойств

CSS (Cascading Style Sheets) – широко распространённый метод форматирования веб-страниц. Суть данного метода заключается в создании и регистрации своеобразных стилей оформления CSS. Как правило, определение подобных стилей происходит во внешнем CSS-документе. Но также возможна регистрация стилей оформления и непосредственно в коде самой веб-страницы (см. CSS).

Для определения стилей используются специальные служебные CSS-селекторы (свойства стилей), которым присваиваются соответствующие значения. Описание служебных слов происходит после наименования стиля-селектора и заключается в фигурные скобки "{" и "}", которые символизируют начало и конец определения конкретного стиля. Причём, в отличие от атрибутов HTML-тега, значения селекторам стиля присваиваются при помощи двоеточия ":", а не через знак равенства "=", и разделяются точкой с запятой ";". Таким образом, для регистрации стилей применяется конструкция вида ИмяСтиля {свойство1: значение1; свойство2: значение2;}.

width / height

Ширина / высота элемента.

Значения:

1920px | 55cm | 100%

Задаётся положительным числом. В качестве единицы измерения можно использовать проценты (%), пиксели (px), точки (pt), сантиметры (cm), дюймы (in)

margin / padding

Внешнее поле / внутренний отступ (границы).

Значения:

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;}

color / background-color

Цвет шрифта / цвет заднего фона.

Значения:

#808 | #800080 | rgb(128,0,128) | pink | transparent | ...

Цвет элемента определяется при помощи метода RGB: насыщенностью красного (Red), зелёного (Green) и синего (Blue) оттенков. Например, rgb(50%,0%,50%)

background-image

Фоновый рисунок.

Значения:

url(/i/bg.gif) | none | linear-gradient(...)

В качестве фонового рисунка часто используется автоматически создаваемый браузером градиент. Например, body {background-image: -webkit-linear-gradient(left, #fff, transparent); linear-gradient(to right, #fff, transparent);}

border

Границы элемента.

Значения:

2px solid #c0c0c0 | double #ccc | none

Определяются толщиной (border-width), стилем (border-style) и цветом (border-color) рамки.

border-style

Варианты стиля для внешней рамки границ элемента.

Значения:

solid | double | dashed | dotted | inset | outset | groove | ridge | none

При использовании стиля двойной границы double толщину рамки можно не указывать

border-radius

Закругление углов границы.

Значения:

5px | 50%

Может использоваться для ячеек таблицы (поддерживается не во всех версиях браузеров)

font-family

Семейство шрифтов (гарнитура).

Значения:

Verdana, Times, ...

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

font-size

Размер шрифта.

Значения:

15px | 12pt | 1em | smaller | larger

Как правило, измеряется в точках (pt) или пикселях (px). Для удобочитаемости на мобильных устройствах рекомендуется устанавливать размер не менее 12px

font-weight

Свойство управления полужирным начертанием шрифта.

Значения:

bold | lighter | normal

font-style

Свойство управления курсивным стилем шрифта.

Значения:

italic | normal

text-decoration

Свойство оформления текста.

Значения:

none | blink | overline | underline | line-through

text-transform

Трансформирование текста.

Значения:

capitalize | lowercase | uppercase | none

text-shadow

Тень.

Значения:

1px -1px 2px #aaa | none

Поддерживается не во всех версиях браузеров. Для определения тени указываются смещение в горизонтальной и вертикальной плоскостях, размер тени и цвет. Причём, смещение тени возможно и с отрицательным значением

text-align

Выравнивание текста в горизонтальной плоскости.

Значения:

left | center | right | justify

Выравнивание может осуществляться по левому краю (left), по центру (center), по правому краю (right) либо по ширине содержимого (justify)

vertical-align

Выравнивание содержимого по вертикали.

Значения:

top | middle | bottom

text-indent

Уровень отступа.

Значения:

25px

Служит для создания отступа "с красной строки" в начале абзаца

line-height

Межстрочный интервал.

Значения:

27px | 1.5

letter-spacing

Свойство разрежённости интервала между знаками.

Значения:

2px

Используется при необходимости искусственного расширения текста по горизонтали, например, при определении заголовков

position

Позиционирование элемента.

Значения:

absolute | relative | ...

display

Свойство отображения элемента.

Значения:

inline-block | inline | block | table | none | ...

В случае использования значения none элемент не отображается на экране и не занимает место, создавая впечатление абсолютного отсутствия элемента

visibility

Свойство видимости элемента.

Значения:

hidden | visible

В случае использования значения hidden элемент не отображается на экране. Тем не менее, на экране остаётся пустая зона, в которой должен был бы отображаться элемент

opacity

Свойство полупрозрачности элемента.

Значения:

0.1 | ... | 1.0

Определяется дробным положительным числом от 0 до 1. Например, a{opacity:.5;} a:hover{opacity:1;}

transition / transition-delay

Плавный переход к стилю элемента / задержка перед переходом.

Значения:

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}

transform

Трансформация элемента.

Значения:

rotate(180deg)

Используется для создания интерактивных визуальных эффектов. Например, a{-webkit-transition:1s; transition:1s;} a:hover {-webkit-transform: rotate(360deg); transform: rotate(360deg);}

Существуют некоторые особенности форматирования веб-страниц посредством каскадных стилей CSS, о которых следует упомянуть отдельно. К примеру, в случае необходимости создать масштабированный элемент, т.е. "растянутый" во весь экран, следует указать значение в 100% для свойств ширины width или высоты height соответственно.

При определении числовых значений CSS-свойств единицей измерения могут служить проценты (%), пиксели (px), точки (pt), сантиметры (cm), дюймы (in) и т.д... Например, чтобы задать для всех абзацев двойную серую границу, 10%-ный внешний отступ слева и справа, а также внутренний отступ в 5px для всех четырех сторон, можно использовать следующую конструкцию: 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-селектора для активного состояния элемента при наведении мыши.

x
T

Социальные Медиа

Мы в соцсетях:
Поделиться с друзьями: