Форматирование с 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 ]  [ Страница >> ]

Курсовые :: Шаблоны :: Книги :: Скачать игры :: Игры :: Сайты :: Рецепт :: Карты