| Olegan | Дата: Понедельник, 02.04.2012, 15:42 | Сообщение # 1 |
|
| Свойства шрифтов
• font-family
Параметры: Любой шрифт
*Применение : ко всем элементам
Описание: Это свойство определяет используемый элементом шрифт. Если указать УРЛ, то шрифт автоматически установится на компьютер пользователя
Пример:
font-family:Arial Black URL('arialblack.ttf')
• font-style
Параметры:
[1] normal - без изменений
[2] italic - курсив
*Применение: Все элементы
Описание: Стиль элемента. Курсивный или обычный
Пример:
font-style:italic
• font-variant
Параметры:
[1] normal - без изменений
[2] small-caps - заменяет все буквы на большие
*Применение : Все элементы
Описание: Netscape вообще не поддерживает это свойство.
Пример:
font-variant:small-caps
• font-weight
Параметры:
[1] normal - без изменений
[2] bold - жирный
[3] bolder - очень жирный ( в MSIE не отличается от bold, в Нетскейпе от нормал )
[4] lighter - тонкий ( не отличается от normal )
[5] любое значение от 100 до 900
*Применение : Все элементы
Описание: Выделение ( жирность ) элемента
Пример:
font-weight:bold
• font-size
Параметры:
[1] размер
[2] xx-small, x-small, small, medium, large, x-large, xx-large - любое из этих значений
[3] smaller, larger - любое из этих значений
*Применение : Все элементы
Описание: Размер шрифта
Пример:
font-size:30pt
• font
Параметры:
*Применение: Все элементы
Описание: Обобщает все вышеперечисленные свойства
Пример:
font: italic bolder Arial 12pt
Свойства текста
• word-spacing
Параметры:
[1] длина
[2] normal - без изменений
*Использование: Все элементы
Описание: Расстояние между cловами. Не работает ни в Нетскейпе, ни в MSIE
Пример:
word-spacing:0.4em
• text-decoration
Параметры:
[1] none - нет
[2] underline - подчеркнутый
[3] overline - надчеркнутый ( не поддерживается в Нетскейпе )
[4] line-through - перечеркнутый
[5] blink - мигающий ( не поддерживается в IE )
*Применение : Все элементы
Описание: "Украшение" текста
Пример:
text-decoration:line-through
• letter-spacing
Параметры:
[1] длина
[2] normal - без изменений
*Применение : Все элементы
Описание: Расстояние между буквами. Не работает в Нетскейпе
Пример:
letter-spacing:100
• vertical-align
Параметры:
[1] baseline
[2] sub
[3] super
[4] top-text
[5] top
[6] middle
[7] bottom
[8] bottom-text
[9] процент
*Применение: Элементы в строке
Описание: Позиционирование элементов по отношению к другим элементам стоящих в одном ряду. Не работает в Нетскейпе
Пример:
vertical-align:top-text
• text-transform
Параметры:
[1] none - нет
[2] Capitalize - каждое слово начинается с большой буквы
[3] UPPERCASE - каждая буква текста становится заглавной
[4] lowercase - каждая буква текста становится маленькой
*Применение: элементы в строке
Описание: Изменение текста. Не работает в Нетскейпе
Пример:
text-transform:Capitalize
• text-align
Параметры:
[1] left - текст слева
[2] right - текст справа
[3] center - текст по центру
[3] justify - текст "растянут"
*Применение : Блоковые элементы
Описание: Положение текста
Пример:
text-align:right
• text-indent
Параметры:
[1] длина
[2] процент
*Применение: Блоковые элементы
Описание: Отступ
Параметры:
text-indent:30 em
• line-height
Параметры:
[1] normal - без изменений
[2] длина
[3] процент
*Применение: Все элементы
Описание: Отступ сверху
Пример:
line-height:100%
Color and Background Properties
• color
Параметры:
[1] цвет
*Применение : Все элементы
Описание: Цвет
Пример:
color:#f00000
• backgroung-color
Параметры:
[1] цвет (+)
*Применение: Все элементы
Описание: Цвет фона элемента
Пример:
background-color:#f00000
• background-image
Параметры:
[1] none - нет
[2] URL
*Применение: Все элементы
Описание: Фоновое изображение
Пример:
background-image:URL(cool.gif)
• background-repeat
Параметры:
[1] repeat - размножает фоновое изображение во всех направлениях
[2] repeat-x - размножает фоновое изображение горизонтально
[3] repeat-y - размножает фоновое изображение вертикально
[4] no-repeat - не повторяющиеся изображение
*Применение: Все элементы
Описание: Повторения фонового изображения
Пример:
background-repeat:no-repeat
• background-attachment
Параметры:
[1] scroll - фоновое изображение скроллится всесте с содержанием документа
[2] fixed - не скроллится. Фиксируется в одном месте
*Применение: Все элементы
Описание: Возможность прокрутки фонового изображения
Пример:
background-attachment:fixed
• background-position
Параметры:
[1] процент от длинны + процент от высоты
[2] top, middle, bottom - одно из значений
[3] left, center, right - одно из начений
[4] расстояние от левого края + расстояние от вершины
*Применение : Блоковые и фоновые элементы
Описание: Положение фонового изображения ( работает с background-repeat равным repeat-x или repeat-y )
Пример:
background-position:50%0%
• background
Параметры:
*Применение: Все элементы
Описание: Обобщает все вышеперечисленные свойства
Пример:
background:no-repeat black fixed 50%0%
Классификация
• display
Параметры:
[1] none - не отображается
[2] block - разбивает линию ( = строку ) до и после элемента.
[3] inline - не разбивает линию ( = строку ). Т.е. элемент можен находится на одной линии с другими элементами.
[4] list-item - разбивает линию ( = строку ) до и после элемента + добавляет маркер как у list-item элементов
*Применение: Все элементы
Описание: Определяет как будет отображаться элемент.
Пример:
display:none
• white-space
Параметры:
[1] normal - "сжимает" несколько подряд идущих пробелов в один
[2] pre - допускает отображение несколькольких подряд идущих пробелов
[3] nowrap - не допускает перенос строки без тага
*Применение : Блоковые элементы
Описание: Оприделяет как будут отображаться пробелы между элементами
Пример:
white-space:nowrap
• list-style-type
Параметры:
[1] disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha
[2] none - никакой
*Применение : Вместе с элементом списка
Описание: Определяет вид list-item маркера. Если значение list-style-image равно none или не уточнено
Пример:
list-style-type:lower-alpha
• list-style-image
Параметры:
[1] none - нет
[2] URL
*Applies to :Вместе с элементом списка
Описание: Задает вид list-item маркера в виде картинки
Пример:
list-style-image:URL(cool.gif)
• list-style-position
Параметры:
[1] inside - при переносе следующие строки будут отображаться без отступа
[2] outside - по умолчанию
*Применение :Вместе с элементом списка
Описание: Определяет положение маркера в зависимости от list item элемента
Пример:
list-style-position:inside
Box Properties
• margin-top
Параметры:
[1] длина
[2] процент
[3] auto - автоматически
*Применение :Все элементы
Описание: Определяет отступ сверху
Пример:
margin-top:100
• margin-right
Параметры:
[1] длина
[2] процент
[3] auto - автоматически
*Применение :Все элементы
Описание: Определяет отступ справа
Пример:
margin-right:100%
• margin-bottom
Параметры:
[1] длина
[2] процент
[3] auto - автоматически
*Применение :Все элементы
Описание: Определяет отступ снизу
Пример:
margin-bottom:100em
• margin-left
Параметры:
[1] длина
[2] процент
[3] auto - автоматически
*Применение :Все элементы
Описание: Определяет отступ слева
Пример:
margin-left:100pt
• margin
Параметры:
*Применение :Все элементы
Описание: Обобщает все вышеперечисленные свойства
Пример:
background:100pt
• padding-top
Параметры:
[1] длина
[2] процент
*Применение :Все элементы
Описание: Отступ от верхнего border'а
Пример:
padding-top:100pt
• padding-right
Параметры:
[1] длина
[2] процент
*Применение :Все элементы
Описание: Отступ от правого border'а
Пример:
padding-right:100%
• padding-bottom
Параметры:
[1] длина
[2] процент
*Применение :Все элементы
Описание: Отступ от нижнего border'а
Пример:
padding-bottom:100em
• padding-left
Параметры:
[1] длина
[2] процент
*Применение :Все элементы
Описание: Отступ от левого border'а
Пример:
padding-top:100
• padding
Possible Values:
*Применение:Все элементы
Описание: Обобщает все вышеперечисленные свойства
Пример:
padding:100px
• border-top-width
Параметры:
[1] длина
[2] thin, medium или thick
*Применение :Все элементы
Описание: толщина верхнего border'а
Пример:
border-top-width:100pt
• border-right-width
Параметры:
[1] длина
[2] thin, medium или thick
*Применение :Все элементы
Описание: толщина правого border'а
Пример:
border-right-width:thick
• border-bottom-width
Параметры:
[1] длина
[2] thin, medium или thick
*Применение:Все элементы
Описание: толщина нижнего border'а
Пример:
border-bottom-width:100em
• border-left-width
Параметры:
[1] длина
[2] thin, medium или thick
*Применение:Все элементы
Описание: толщина левого border'а
Пример:
border-left-width:medium
• border-color
Параметры: color
Описание: Цвет border'а
*Применение:Все элементы
Пример:
border-color:green
• width
Параметры:
[1] длина
[2] процент
*Применение: Блоковые, фоновые элементы
Описание: ширина элемента
Пример:
width:10%
• height
Параметры:
[1] длина
[2] процент
*Применение: Блоковые, фоновые элементы
Описание: высота элемента
Пример:
height:100pt
• float
Параметры:
[1] left - слева
[2] right - справа
[3] none - по умолчанию
*Применение:Все элементы
Описание: расположение элемента
Пример:
float:right
• clear
Параметры:
[1] left - слева
[2] right - справа
[3] both - c двух сторон
[4] none - по умолчанию
*Применение:Все элементы
Описание: расположение других элементов вокруг данного
Пример:
clear:both
|
| |
| |
