Форматирование с CSSКраткий учебник по языку HTML для начинающих дизайнеров |
Cascading Style Sheets (Каскадные таблицы стилей - CSS) - это специальный язык описания стилей, который обладает гораздо более богатым и функциональным, по сравнению с HTML, набором средств форматирования и управления стилями элементов документа. С момента разработки CSS, было принято две его спецификации: CSS 1 и CSS 2 (в настоящее время W3C ведет работы над проектом CSS 3). Мы не будем здесь подробно рассматривать язык CSS (для этого у меня нет ни времени, ни полноты знаний), а рассмотрим лишь его основные и часто применяемые элементы. Для детального изучения языка описания каскадных стилей вам необходимо ознакомиться с переводом материалов консорциума W3C, подготовленным на WEBCLUB.RU - Спецификация CSS level 2. Первоначально рассмотрим основные свойства CSS, используемые для управления стилями элементов HTML документов. Свойства CSS CSS позволяет манипулировать следующими свойствами элементов: Свойства шрифта font-family - определяет используемый элементом шрифт. Если указать URL(file), то шрифт автоматически установится на компьютер пользователя; font-style - стиль шрифта (normal, italic); font-variant - варианты отображения шрифта (normal, small-caps); font-weight - жирность шрифта (normal, bold, bolder, lighter, значение от 100 до 900); font-size - размер шрифта (размер, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger); font - обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений); Свойства текста word-spacing - расстояние между словами (значение, normal); text-decoration - декорация текста (none, underline, overline, line-through, blink); letter-spacing - расстояние между буквами (значение, normal); vertical-align - позиционирование по отношению к другим элементам стоящим в одном ряду (baseline, sub, super, top-text, top, middle, bottom, bottom-text, %); text-transform - изменение текста (none, Capitalize, UPPERCASE, lowercase); text-align - положение текста (left, right, center, justify); text-indent - отступ (значение, %); line-height - отступ сверху (normal, значение, %); Свойства фон и цвет color - цвет элемента (значение); backgroung-color - цвет фона элемента (значение); background-image - изображение фон (none, URL); background-repeat - варианты повторения фонового изображения (repeat, repeat-x, repeat-y, no-repeat); background-attachment - возможность прокрутки фонового изображения (scroll, fixed); background-position - положение фонового изображения (%ширины%высоты, top, middle, bottom, left, center, right); background - обобщает вышеперечисленные свойства (любая комбинация из вышеперечисленных значений); Свойства блока margin-top - определяет отступ сверху (значение, %, auto); margin-right - определяет отступ справа (значение, %, auto); margin-bottom - определяет отступ снизу (значение, %, auto); margin-left - определяет отступ слева (значение, %, auto); margin - обобщает все вышеперечисленные свойства; padding-top - отступ от верхнего border'а (значение, %); padding-right - отступ от правого border'а (значение, %); padding-bottom - отступ от нижнего border'а (значение, %); padding-left - отступ от левого border'а (значение, %); padding - обобщает все вышеперечисленные свойства; border-top-width - толщина верхнего border'а (значение, thin, medium, thick); border-right-width - толщина правого border'а (значение, thin, medium, thick); border-bottom-width - толщина нижнего border'а (значение, thin, medium, thick); border-left-width - толщина левого border'а (значение, thin, medium, thick); border-width - обобщает все вышеперечисленные свойства; border-color - Цвет border'а. (значение); border-style - стиль border'ов (none, dotted, dashed, solid, double, groove, ridge, inset, outset); border-top - обобщает вышеперечисленные свойства для верхнего border'а; border-right -обобщает вышеперечисленные свойства для правого border'а; border-left - обобщает вышеперечисленные свойства для левого border'а; border-bottom - обобщает вышеперечисленные свойства для нижнего border'а; border - обобщает все вышеперечисленные свойства; width - ширина элемента (значение, %); Игры height - высота элемента (значение, %); float - расположение элемента (left, right, none); clear - расположение других элементов вокруг данного (left, right, both, none); Классификационные свойства display - определяет, как будет отображаться элемент (none, block, inline, list-item); white-space - определяет, как будут отображаться пробелы между элементами (normal, pre, nowrap); list-style-type - определяет вид list-item маркера в списках (disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none); list-style-image - задает вид list-item маркера из картинки (none, URL); list-style-position - определяет положение маркера в зависимости от list item элемента (inside, outside); list-style - обобщает вышеперечисленные свойства; Свойства элемента position - определяет, как будет отображаться элемент по отношению к другим элементам документа (relative, absolute); top - определяет позицию элемента TOP относительно элемента родителя (значение, %); left - определяет позицию элемента LEFT относительно элемента родителя (значение,%); width - определяет ширину элемента (значение, %, auto); height - определяет высоту элемента (значение, %, auto); overflow - режим отображения содержимого элемента, при несоответствии размера элемента, размеру содержимого (non, clip, scroll); visibility - управление видимостью элемента в документе (hidden, " "); [ << Страница ] [ Шифрование HTML ] [ Страница >> ] |
Курсовые :: Шаблоны :: Книги :: Скачать игры :: Игры :: Сайты :: Рецепт :: Карты |