
- •Скачано с http://bizkit.Land.Ru css – учебник, спецификация. Терминология
- •1. Базовые понятия
- •1.1 Включение в html
- •1.2 Группирование
- •1.3 Наследование
- •1.4 Класс в качестве селектора
- •1.5 Id в качестве селектора
- •1.6 Контекстные селекторы
- •1.7 Комментарии
- •2. Псевдо-классы и псевдо-элементы
- •2.1 Псевдо-классы ссылок
- •2.2 Типографские псевдо-элементы
- •2.3 Псевдо-элемент 'first-line'
- •2.4 Псевдо-элемент 'first-letter'
- •2.5 Псевдо-элементы в селекторах
- •2.6 Множество псевдо-элементов
- •3. Каскадирование
- •3.1 'Important'
- •3.2 Порядок каскадирования
- •4 Модель форматирования
- •4.1 Блочные элементы
- •4.1.1 Вертикальное форматирование
- •4.1.2 Горизонтальное форматирование
- •4.1.3 Элементы-списки
- •4.1.4 Плавающие элементы
- •Img { float: left }
- •4.2 Строчные элементы
- •4.3 Замещаемые элементы
- •4.4 Высота строки
- •4.5 Холст
- •4.6 Элементы 'br'
- •5 Свойства css1
- •5.1 Разъяснение значений свойств.
- •5.2 Свойства шрифта
- •5.2.1 Распознавание шрифта.
- •5.2.2 Задание семейства шрифта ('font-family').
- •5.2.3 Задание начертания шрифта ('font-style')
- •5.2.4 Задание варианта шрифта ('font-variant').
- •5.2.5 Задание веса шрифта ('font-weight')
- •5.2.6 Задание размера шрифта ('font-size').
- •5.2.7 Задание шрифта в целом ('font')
- •5.3 Свойства "цвет" (color) и "фон" (background).
- •5.3.1 Определение цвета ('color')
- •5.3.2 Определение цвета обоев ('background-color').
- •5.3.3 Определение рисунка фона ('background-image').
- •5.3.4 Определение повтора рисунка фона ('background-repeat').
- •5.3.5 Определение привязки фона ('background-attachment').
- •5.3.6 Определение положения фона ('background-position')
- •5.3.7 Определение свойств фона в целом ('background')
- •5.4 Свойства текста
- •5.4.1 Установка интервалов ('word-spacing')
- •5.4.2 Установка трекинга ('letter-spacing')
- •5.4.3 Установка оформления текста ('text-decoration')
- •5.4.4 Установка вертикального выравнивания текста ('vertical-align').
- •5.4.5 Установка преобразования текста ('text-transform')
- •5.4.6 Установка выравнивания текста ('text-align')
- •5.4.7 Установка абзацного отступа ('text-indent')
- •5.4.8 Установка высоты строки ('line-height').
- •5.5 Свойства полей.
- •5.5.1 Установка верхней границы ('margin-top').
- •5.5.6 Установка верхнего отступа ('padding-top').
- •5.5.11 Установка ширины верхней рамки ('border-top-width').
- •5.5.12 Установка ширины правой рамки('border-right-width').
- •5.5.13 Установка ширины нижней рамки('border-bottom-width')
- •5.5.14 Установка ширины левой рамки 'border-left-width'
- •5.5.15 Установка обобщающего свойства "ширина рамки" ('border-width')
- •5.5.16 Установка цвета рамки ('border-color').
- •5.5.17 Установка стиля рамки ('border-style')
- •5.5.18 Установка обобщающего свойства "верхняя рамка" ('border-top')
- •5.5.19 Установка обобщающего свойства "правая рамка" ('border-right')
- •5.5.20 Установка обобщающего свойства "нижняя рамка" ('border-bottom')
- •5.5.21 Установка обобщающего свойства "левая рамка" 'border-left'
- •5.5.22 Установка обобщающего свойства " рамка" 'border'
- •5.5.23 Установка свойства "ширина" ('width')
- •Img.Icon {
- •5.5.26 Установка свойства "чисто" ('clear')
- •5.6 Свойства - классификации
- •5.6.1 Установка свойства "показ" ('display')
- •Img { display: none }
- •5.6.2 Установка пробелов ('white-space')
- •5.6.3 Установка типа маркера перечня ('list-style-type')
- •5.6.4 Установка рисунка маркера перечня ('list-style-image').
- •5.6.5 Установка отступа маркера перечня 'list-style-position'
- •5.6.6 Установка обобщающего свойства "перечень" ('list-style')
- •6 Единицы измерения значений.
- •6.1 Установка единиц длины
- •6.2 Процентное выражение
- •6.3 Обозначение цвета
- •100.0% */
- •6.4 Url
- •7 Совместимость с css1
- •7.1 Последовательно-совместимый синтаксический анализ
- •Img { float: left } /* верно для css1 */
- •8 Литература
- •Приложение a: Пример таблицы стилей для html 2.0
- •Img, span { display: inline }
- •I, cite, em, var, address, blockquote { font-style: italic }
- •Приложение b: Грамматика css1
- •Ident {nmstrt}{nmchar}*
- •Appendix c: Encoding
- •Character encoding
- •Font encoding
- •Font sets
- •Appendix d: Gamma correction
- •Appendix e: The applicability and extensibility of css1
- •Приложение c: Кодирование
- •Character encoding
- •Font encoding
- •Font sets
- •Приложение d: Gamma correction
- •Приложение e: Применимость и расширяемость css1
Какую работу нужно написать?
5.4.4 Установка вертикального выравнивания текста ('vertical-align').
Значение: baseline | sub | super | top | text-top |
middle | bottom | text-bottom | <percentage>
По умолчанию: baseline
Область применения: строчные элементы
Наследуемость: нет
Процентное выражение: по отношению к свойству "высота линии" ('line-height') самого элемента
Свойство влияет на вертикальное положение элемента. Используется набор следующих зарезервированных слов, указывающих положение относительно родительского элемента:
'baseline'
совмещает базу элемента (или его низ, если элемент не имеет базы), с базой родительского элемента
'middle'
выравнивает среднюю линию элемента (обычно изображения) по уровню "база плюс половина высоты ('x-height') родительского элемента"
'sub'
делает элемент подстрочным
'super'
делает элемент надстрочным
'text-top'
выравнивает верх элемента по верху шрифта родительского элемента
'text-bottom'
выравнивает низ элемента по низу шрифта родительского элемента
Другой набор значений свойства определяет выравнивание относительно форматируемой линии, частью которой является указанный элемент:
'top'
выравнивает вершину элемента по самому высокому элементу линии
'bottom'
выравнивает низ элемента по самому низкому элементу линии.
При использовании значений 'top' и 'bottom' могут возникать неразрешимые ситуации, когда зависимости одних элементов от других образуют замкнутый цикл.
Процентное выражение соотносится со значением свойства "высота линии" ('line-height') самого элемента. Таким способом база элемента (или низ, если таковая отсутствует) повышается на определенный уровень относительно базы родительского элемента. Допускаются отрицательные значения. Например, при значении '-100%' элемент будет опущен так, что его база достигнет уровня, где должна лежать база следующей линии. Это позволяет позиционировать по вертикали элементы, не имеющие базы - скажем, изображения, используемые для замещения букв.
Предполагается, что в будущей версии CSS в качестве значения этого свойства будет допускаться <length>.
5.4.5 Установка преобразования текста ('text-transform')
Значение: capitalize | uppercase | lowercase | none
По умолчанию: none
Область применения: все элементы
Наследование: есть
Процентное выражение: неопр.
'capitalize'
устанавливает первую букву каждого слова прописной
'uppercase'
устанавливает все буквы элемента прописными
'lowercase'
устанавливает все буквы элемента строчными
'none'
аннулирует наследованное значение.
Фактически преобразование в каждом случае будет зависеть от используемого языка . См. способы определения языка элемента в [4] .
H1 { text-transform: uppercase }
В вышеприведенном примере для элемента 'H1' все буквы устанавливаются прописными.
Ядро CSS1:UA может игнорировать преобразование текста (т.е. отрабатывать как по значению 'none'), для символов, не относящихся к набору для кодировки Latin-1 и для элементов на языках, для которых преобразование отличается от принятого для таблиц преобразования Unicode [8].
5.4.6 Установка выравнивания текста ('text-align')
Значение: left | right | center | justify
По умолчанию: определяется UA
Область применения: блочные элементы
Наследование: есть
Процентное выражение: неопр.
Это свойство описывает способ выравнивания текста внутри элемента. Фактически используемый UA алгоритм будет зависеть от языка документа.
Пример:
DIV.center { text-align: center }
Поскольку выравнивание текста наследуется, все блочные элементы внутри элемента 'DIV' с 'CLASS=center' будут выровнены по середине. Обратите внимание, что выравнивание производится относительно ширины элемента, а не холста. Если UA не поддерживает выравнивание по ширине ('justify'), он должен поддерживать замену - для западных языков это будет, как правило, выравнивание по левому краю.
Ядро CSS:UA вправе интерпретировать выравнивание по середине как выравнивание по левому или правому краю, в зависимости от установленного по умолчанию для элемента направления письма - соответственно слева направо или справа налево.