(обновлено) 2011-12-19

Основные свойства CSS

текст. фон. позиционирование

План урока

Цель:	Знакомство с наиболее часто применяемыми свойствами CSS и изучение их применения к нужным html элементам.
Инструменты:	Текстовый редактор с подсветкой синткасиса, браузер.
Время / сложность:	2 часа / средний.

На прошлом уроке мы узнали, что такое CSS и почему стоит применять его для оформления html документов. Мы научились подключать CSS стили к html странице узнали о каскадировании и научились использовать базовый синтаксис CSS.

Сегодня у нас большие планы: познакомиться с основными свойствами CSS (поверхностно, чтобы было с чем практиковаться) и подробно разобрать использование селекторов.

Еще раз о синтаксисе CSS правил

Напомню, что синтаксис блока css правил выглядит следующим образом:

селектор {
    названиесвойства: значение;
    названиесвойства: значение;
}

Селектор отвечает за выбор к каким html элементам применять свойства данного блока.

Думаю, что вам уже наскучило наблюдать теорию, разбавим ее описанием основных свойств CSS.

Что можно оформить с помощью CSS

Основными свойствами элементов, которые подлежат оформлению с помощью CSS являются:

• текст (шрифты, размер. начертание и т.п.);
• фон;
• позиционирование;

Рассмотрим наиболее употребляемые свойства из каждой категории

Текст

Основным оформительским свойством текста является шрифт. CSS позволяет варьировать размер шрифта, начертание, оформление строки. Так же с помощью CSS можно подключать к странице те шрифты, которые могут отсутствовать у пользователей.

Не стоит недооценивать важность настройки типографики для создания полноценного дизайна сайта. Текст, в большинстве случаев, является одним из главных действующих лиц сайта и его неудачное оформление сразу бросается в глаза и затрудняет использование сайта.

Итак, перечислим основные свойства для настройки отображения текста, доступные в CSS.

• font-size: значение;
  Значениz свойства font-size могут быть заданы в разных единицах измерения. Реально используются 1 абсолютная и 2 относительные единицы.
  1. px — пиксель (соответствует одному пикселю на экране).
  2. em — относительная величина, 1em равен текущему размеру font-size.
  3. % — работает подобно em, 100% совпадает с текущим font-size.
  Огромное количество страниц создано с указанием размера шрифта в px, однако использование относительных величин дает более гибкий результат. Большинство высококвалифицированных верстальщиков советуют использовать em и % при верстке.
• font-weight: значение;
  Определяет насыщенность шрифта.
  1. bold — полужирное.
  2. normal — обычное.
  Другие значения этого свойства пока слабо поддерживаются браузерами.
• font-style: значение;
  определяет начертание шрифта
  1. normal — обычное начертание.
  2. italic — курсив.
  3. oblique — наклонное начертание, получаемое наклоном симмволов в начертании normal.
  4. inherit — наследует значение родителя (подробнее об этом вы узнеаете позже).
• font-family: имя шрифта, имя шрифта, и т.д.;
  Задает шрифт, правила применяются слева направо, пока не будет найден доступный для использования шрифт. кроме имени шрифта допустимо указывать семейство:
  1. serif — с засечками.
  2. sans-serif — без засечек.
  3. cursive — курсивный.
  4. fantasy — декоративный.
  5. monospace — моноширинный.
  Семейство, как правило, указывают после списка всех шрифтов, чтобы гарантировать, что при отсутствии необходимых шрифтов использовался стандартный шрифт необходимого семейства.

Существует сокращенная запись свойств шрифта

font: font-style font-variant font-weight font-size/line-height font-family
Из всех свойств обязательно указывать только размер и название шрифта/семейства. Пример:

font: italic bold 16px/24px gergia, serif;
Вот такой текст.

Фон

Для управления фоном элементов существует несколько свойств CSS, как и в случае шрифта они могут быть сгруппированы в одном объявлении. Основными свойствами являются:

1. background-color: цвет; — устанавливает цвет фона. Цвет задается псевдонимом (red, green и т.п.), шеснадцатеричным числом (#FF0000, #00FF00) или вот так rgb (255,0,0).
2. background-image: url(путь к файлу); — устанавливает изображения для фона. Может использоваться совместно с заданием цвета, отображается поверх.
3. background-position: положение-по-горизонтали положение-по-вертикали — устанавливает положение фонового изображения относительно элемента. Значения могут быть заданы в пикселях, процентах и т.п. или ключевыми словами "left | center | right" и "top | center | bottom" соответственно.

Позиционирование

Для позиционирования элементов с помощью CSS применяется множество различных приемов. Это одна из самых сложных сторон применения каскадных таблиц стилей. В давние времена, позиционирование элементов задавали с помощью помещения их в таблицы, при такой верстке вложение таблиц друг в друга и объединение ячеек позволяют создавать достаточно сложные структуры. Сегодня можно найти достаточно много авторитетных сайтов, которые сверстаны с применением таблиц.

Основной причиной использования табличной верстки было отсутствие адекватных специализированных средств для создания сложного форматирования html документов. Однако с приходом CSS такие средства появились, что позволяет сегодня применять эффективное разделение форматирования и информации. Конечно, приход новой концепции вызвал серьезную "ломку" у тех, кто привык верстать таблицами и в интернете разгорались многочисленные холивары CSS vs таблицы. Стоит понимать, что сегодня верстка с помощью CSS является общепринятым стандартом, а использование таблиц для размещения не табличных данных справедливо осуждается.

При такой верстке для создания структуры страницы используются блочные элементы. В html 4 основным блоком, в который помещали содержимое был тег <div>, поэтому часто можно услышать выражение "верстка на divах", "дивная верстка". В html5 появились новые теги для улучшения семантичности разметки. Это: <header>, <footer>, <section>, <nav>, <aside>.

Для позиционирования блоков и их содержимого применяются следующие css свойства:

• Внешние и внутренние отступы (margin: top right bottom left и padding: top right bottom left).
• Обтекание элемента (float: left | right | none | inherit ). Наиболее очевидным примером использования является вывод картинки, которую обтекает текст, для этого используется следующий css (выводим картинку слева и добавляем внешние отступы):
  

  img{
      float: left;
      margin: 20px 12px 20px 0px;
  }

• Использование относительного и абсолютного позиционирования (display:relative и display:absolute). Используется для задания позиции выраженной в еденицах измерения, например:
  

  img{
      position: absolute;
      top: 200px;
      left: 200px;
  }

  
  Данный код заставит изображения выводиться смещенным на 200 px вниз и вправо относительно окна браузера или родительского элемента, если у него свойство display установлено в ixed, relative или absolute. При этом изображение выводится из общего потока разметки и как бы плавает над остальными элементами, не влияя на них.

Стоит понимать, что тут были приведены лишь начальные сведения о методах позиционирования элементов, чтобы вы имели о них предсмтавление. В следующих уроках мы рассмотрим каждый из них подробнее.

В следующем уроке я почти не буду "грузить" теорией, а мы перейдем к разбору конкретных примеров использования HTML и CSS для отдельных элементов веб-страниц.

Задание

Сверстайте приведенный ниже фрагмент из текста и двух картинок, используя для позиционирования:

1. таблицу;
2. float;
3. абсолютное позиционирование.

Пример задания: