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

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

ПРАНДИТ
Инфонетекс
Автоспорт
Кулинарния
Эзотерика
Урлинки
Все проекты
Обратная связь Игры Настройки
  Партнёры Каталог
 

Партнёры

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

Содержание

Реклама и PR
IT-системы
Веб-дизайн
Домены
Хостинг
HTML
HTML-теги
Спецсимволы
CSS
CSS-селекторы
Термины
Приёмная
Регламент
Настройки
Онлайн-игры
Вебмастерская
Партнёры Карта сайта
Все проекты
 

CSS-селекторы

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

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

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

CSS-свойство Значения Краткое описание правила
width 1920px | 55cm | 100% Ширина элемента Задаётся положительным числом. В качестве единицы измерения можно использовать проценты (%), пиксели (px), точки (pt), сантиметры (cm), дюймы (in)
height Высота элемента
margin 5px |
5px 3px |
2px 5px 3px |
2px 3px 5px 7px
Внешнее поле отступа All (T=B=L=R)
Top=Bottom Left=Right
Top Left=Right Bottom
Top Right Bottom Left
Поля элементов определяются для верхней (top), правой (right), нижней (bottom) и левой (left) сторон. Например, p{margin:auto; padding:5px 15px;}
padding Внутренний отступ
color #808 | #800080 |
rgb(128,0,128) |
pink | transparent | ...
Цвет шрифта Цвет элемента определяется при помощи метода RGB: насыщенностью красного (Red), зелёного (Green) и синего (Blue) оттенков. Например, rgb(50%,0%,50%)
background-color Цвет заднего фона
background-image url(/i/bg.gif) | none |
linear-gradient(...)
Фоновый рисунок. В качестве фонового рисунка часто используется автоматически создаваемый браузером градиент. Например, body{background-image:-webkit-linear-gradient(left, #fff, transparent);}
border 2px #c0c0c0 solid |
#ccc double | none
Границы элемента. Определяются толщиной (border-width), цветом (border-color) и стилем (border-style) рамки.
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 Выравнивание содержимого по горизонтали
vertical-align top | middle | bottom Выравнивание содержимого по вертикали
text-indent 25px Уровень отступа "с красной строки" в начале абзаца
line-height 27px Межстрочный интервал
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 0.1s | 0.2s | ... | 1s | ... Плавный переход к стилю элемента. Применяется для искусственного замедления применения правил стилей оформления на заданное число секунд (s). Например, a{-webkit-transition:2s; opacity:.5;} a:hover{-webkit-transition-delay:3s; opacity:1.0; color:#ccc}
transition-delay Задержка перед переходом
transform rotate(180deg) Трансформация элемента. Например, a{-webkit-transition:1s;} a:hover{-webkit-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
 

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

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