Здравствуй, путник! Мы рады видеть тебя здесь, и готовы принять тебя в наши ряды! Если интересуешься искусством, любишь проводить лишний час в Adobe Photoshop - ты попал по адресу! У нас ты сможешь найти множество дополнений для этой программы, а также научиться верстать в css или html, получить поддержку при создании своего форума на платформе mybb, или просто найти хорошую компанию.

DESIGUAL

Объявление

PLAY ART


Рейтинг форумов Forum-top.ru
Дорогие участники, просим вас голосовать за наш форум один раз в день, мы начисляем деньги за каждый ваш голос.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » DESIGUAL » Все для создания уникального дизайна » Параметры CSS>>Полный список, by Zebra


Параметры CSS>>Полный список, by Zebra

Сообщений 1 страница 3 из 3

1

*За предоставление информации огромное спасибо пользователю Zebra с ТП Mybb, я лишь переписала некоторые вещи более удобным языком.
Итак, всем известно, что любой элемент имеет свои параметры и часто аргументы. Выглядит все это дело так:
#element1 {parameter: argument;}

#element1 - это ИМЯ элемента, который мы собрались менять
parameter - это любое СВОЙСТВО этого элемента. Например, фон, высота, ширина, цвет, поля и т.д.
argument - это ЗНАЧЕНИЕ свойства. Наприимер, у свойства "фон" может быть значение голубой, оранжевый, прозрачный и т.д.

ПРИМЕЧАНИЕ: для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения
em - текущий кегль (высота шрифта);
ех - высота буквы х для текущего кегля;
рх - пикселы (относительно координат окна).
in - дюймы;
cm - сантиметры;
mm - миллиметры;
pt - пункты;
ширину можно обозначать в %

Теперь непосредственно к самим параметрам:

background-color  
Цвет фона элемента. Значением может быть шестизначное название цвета, либо для некоторых стандартных есть свои названия - red, blue, gray и т.д.
Пример: #element1{backgroun-color: #ffffff;}

background-attachment
Определяет, будет ли прокручиваться фон.
Значения: 
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.
Пример: #element1 {background-attachment: fixed;}

background-image
Фоновая картинка
Значения:
url ("адрес изображения") - картинка в качестве фона
none - никакой картинки
Пример: #element1 {background-image: url("адрес картинки");}

background-repeat
Определяет, будет ли размножаться фоновая картинка
Значения:
no-repeat - Не размножается
repeatx - размножается по горизонтали
repeaty - размножается по вертикали
repeatxy - размножается в обоих направлениях.

background-position
Расположение фоновой картинки на странице
Значения:
Сначала указывается расположение по вертикальной оси: top, center или  bottom, затем по горизонтальной: left, center или right.
Пример: #element1 {background-position: top center;}

border
Все параметры рамки, например, толщина, цвет и т.д.
Пример: #element1 {border: #000000 2px;}

border-color
Цвет рамки
Пример: #element1 {border-color: #000000;}

border-width
Толщина рамки
Пример: #element1 {border-width: 2px;}

border-style
Стиль оформления рамки всех сторон рамки
Значения:
none - указывает на то, что рамки нет.
dotted - задает пунктирную рамку из точек
dashed - задает штрих - пунктирную рамку
solid - задает одинарную сплошную рамку
double - задает двойную сплошную рамку
groove - создает трехмерный эффект
ridge - создает трехмерный эффект возвышающейся рамки
inset - создает трехмерный эффект углубленности фона
outset - создает трехмерный эффект выпуклости фона
Пример: #element1 {border-style: none solid none none;}

border-top
Все параметры верхней рамки
border-bottom
Все параметры нижней рамки
border-left
Все параметры левой рамки
border-right
Все параметры правой рамки
Пример: #element1 {border-top: none #000000 2px}

color
Цвет шрифта в элементе
Пример: #element1 {color: #ffffff;}

float
Отображение растекающегося объекта
Значения:
left - отображает растекающийся объект на левой стороне
right - отображает растекающийся объект на правой стороне
none - отображает объект вставленным в страницу
Пример: #element1 {float: left;}

font-size
Размер шрифта
Значения: См. Примечание.
А также:
xx-small, x-small, small, medium, large, x-large, xx-large.
Пример: #element1 {font-size: small;}

font-style
Начертание шрифта.
Значения:
normal - соответствует основному начертанию
italic - курсив
oblique - полукурсив
Пример: #element1 {font-style: italic;}

font-weight
Толщина начертания
Значения:
normal - обычный шрифт
bold - полужирный
число от 100 (минимальная жирность) до 900 (максимальная)
Пример: #element1 {font-weight: 200;}

font-family
Семейство шрифта
Пример: #element1 {font-family: sans serif;}

font
Все вышеперечисленные параметры шрифта вместе
Пример: #element1 {font: sans serif #FF0000 small bold;}

display
Способ отображения элемента
Значения:
none - элемент вообще не виден
block - выдает элемент в рамке
list-item - выдает элемент как часть списка и присваивает ему маркер
inline - выводит объект в одну строку.
#element1 {display: none;}

height
высота элемента
width
ширина элемента
Значения: см. Примечание.
Пример: #element1 {height: 20px; width: 400px;}

padding и margin
Это два на первый взгляд похожих параметра. Но между ними есть разница:
padding - линия отбивки материнского объекта
margin - линия отступа дочернего объекта.
Для примера представьте себе окно Word. Само окно Word - материнский объект. А текст, который мы пишем - дочерний объект. Теперь, в данном случае линией отбивки для материнского объекта будет расстояние от края окна до краев листа. Потому что писать текст мы в любом случае можем только на листе. Поэтому padding - это некая граница, внутри которой в одном элементе могут располагаться другие элементы. Margin же в данном примере будут поля, которые мы установили для текста. Т.е. это простой отступ на котором располагается элемент, в данном случае текст.

padding-top - верхняя отбивка
padding-bottom - нижняя отбивка
padding-left - левая отбивка
padding-right - правая отбивка
padding - все стороны отбивки сразу.
Значения: смотри Примечание.
Пример: #element1 {padding-top: 20px;}

margin-top - верхний отступ
margin-bottom - нижний отступ
margin-left - левый отступ
margin-right - правый отступ
margin - все стороны отступа сразу.
Значения: смотри Примечание. Для отступов возможно использовать отрицательные значения.
Пример: #element1 {margin-top: -20px;}

text-align
Выравнимание текста внутри элемента.
Значения:
left - по левому краю
right - по правому краю
justify - по ширине
center - по центру
Пример: #element1 {text-align: center;}

text-decoration
Украшение текста
Значения:
underline - подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание
Пример: #element1 {text-decoration: underline;}

vertical-align
выравнивание элемента по вертикали
Значения:
top - по верхнему краю
bottom - по нижнему
middle - посередине
Пример: #element1 {vertical-align: middle;}

Отредактировано dofleini (2012-06-06 14:27:34)

+2

2

Похвально, спасибо огромное.

0

3

1

0


Вы здесь » DESIGUAL » Все для создания уникального дизайна » Параметры CSS>>Полный список, by Zebra


Рейтинг форумов | Создать форум бесплатно