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

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

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

Партнёры

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

Содержание

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

CSS-параметры

Определение параметров CSS-стилей

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

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

Параметр Значения Краткое описание
width 100px | 100% Ширина элемента Задается целым положительным числом. В качестве единицы измерения можно использовать проценты, пиксели, дюймы и т.д...
height Высота элемента
margin 5px
5px 3px
2px 5px 3px
2px 3px 5px 7px
Внешнее поле отступа all
top,bottom left,right
top left,right bottom
top right bottom left
padding Внутренний отступ
color #ff00ff
#f0f
rgb(255,0,255)
Цвет шрифта Цвет элемента определяется при помощи метода RGB: насыщенностью красного (Red), зеленого (Green) и синего (Blue) оттенков...
background-color Цвет заднего фона
background-image url(/i/i_bg.gif) Фоновый рисунок
border #c0c0c0 double |
2px #c0c0c0 solid
Границы элемента. При определении границ можно указать толщину (width), цвет (color) и стиль (style) рамки. В случае использования стиля двойной границы double, толщину рамки можно не указывать
border-style solid | double | dashed | dotted | inset | outset | groove | ridge | none Варианты стиля для границ сторон элемента
border-radius 5px Закругление углов границы (поддерживается не во всех версиях браузеров)
font-family Verdana, Times, ... Семейство шрифтов. Как правило, для лучшей совместимости указываются несколько шрифтов
font-size 15px | 12pt Размер шрифта
font-weight bold | normal Свойство управления полужирным начертанием шрифта
font-style italic | normal Стиль шрифта (курсив)
text-decoration none | blink | underline | overline | line-through Свойство оформления шрифта
text-transform capitalize | lowercase | uppercase | none Трансформирование шрифта
text-shadow 1px -1px 2px #aaa Тень (поддерживается не во всех версиях браузеров). Для определения тени указываются смещение в горизонтальной и вертикальной плоскостях, размер тени и цвет. Причем, смещение тени возможно и с отрицательным значением.
text-align left | center | right | justify Выравнивание содержимого по горизонтали
vertical-align top | middle | bottom Выравнивание содержимого по вертикали
text-indent 25px Уровень отступа в начале абзаца
line-height 27px Межстрочный интервал
letter-spacing 2px Свойство разреженности интервала между знаками (либо соседними элементами). Используется при необходимости искусственного расширения текста по горизонтали, например, при определении заголовков.
visibility hidden | visible Свойство видимости элемента. В случае использования значения hidden, элемент не отображается на экране. Тем не менее, на экране остается пустая зона, в которой должен был бы отображаться элемент.
display block | inline | ... | none Свойство отображения элемента В случае использования значения none, элемент не занимает место и не отображается на экране. Т.е. складывается впечатление абсолютного отсутствия элемента.
position absolute | relative Вариант позиционирования элемента

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

При определении числовых значений параметров единицей измерения могут служить проценты (%), пиксели (px), точки (pt), дюймы (in), сантиметры (cm) и т.д... Например, чтобы задать для всех абзацев двойную серую границу, 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: rbg(0,0,255);} a:hover {color: rbg(100%,0%,0%);} указывает синий цвет шрифта для всех неактивных гиперссылок веб-страницы. А при наведении мыши на ссылку задает для нее красный цвет шрифта.

В случае необходимости изменения свойств элемента при наведении курсора мыши можно использовать служебное слово hover. Данная команда указывает браузеру на то, что для используемого элемента зарегистрированы разные стили. Причем, один из стилей применяется для оформления элемента в его статичном неактивном состоянии. А второй стиль (с указанием служебного слова через двоеточие после наименования стиля) изменяет указанные в описании параметры для активного состояния элемента при наведении мыши.

x
A
 

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

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