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

Официальный сайт разработчиков: http://www.w3.org/TR/CSS21/cover.html.

CSS состоит из правил. Правила представляют из себя название и значение. Разделяются они двоеточием (название правила: значение правила). Никаких кавычек в значениях правил не ставим! Пример:

Color: red; background: #cccccc ;

Но как CSS связать с HTML? Как прописывать стили оформления документа в html-коде? Для этого есть 3 решения:

• Вложение(inline).
• Встраивание(embeding).
• Связывание(linking).

Основа документа - html, а к нему уже применяется css. Именно к документу, сам по себе css ничего не значит.

Метод вложения (inline) CSS

Используется атрибут style. Его можно поставить в любом визуально отображаемом элементе. В style записываются правила css (название правила: значение правила), несколько правил разделены точкой с запятой (; является окончанием правила в css):

Обычный текст

"color:red; background:#cccccc" > К это абзацу применен стиль методом встраивания.

Метод встраивания (embeding) CSS

Используется специальный элемент “style”, внутри которого записываются правила css. Внутри style пишем только язык css. Пример:

< style type= "text/ css"> p { color: red ; background: #cccccc } Здесь применен стиль методом вложения. Обычный текст

В этом примере мы прописали правило для элемента “p” абзац. Во 2-й строке мы прописали селектор (к каким тегам будет применяться правило css). Само правило записано в фигурных скобках “{ }”.

Элемент “style” ставят только в элементе “head”.

Метод связывания (linking) CSS

Чтобы каждый раз в документ не писать стилевое оформление (не загружать документ), надо в одном месте написать правила css и применять их к разным документам (к неограниченному из количеству).

Для этого все правила css выносим в отдельный текстовый файл. Обычно этому файлу дают расширение.css. И тогда сразу видно, что в нем прописаны стилевые правила. Ни с чем не перепутаешь.

Как же тогда связать этот отдельный css-файл с нашим html-документом? Для этого используем следующий код в разделе head:

Т.е. указываем файл со стилями через гиперссылку на него. Браузер подгружает стилевой файл и применяет правила из него ко всему документу. По сути это работает так же, как и элемент “style”, но только находится в отдельном файле. И мы можем в любом документе поставить ссылку на css-файл. Это очень удобно, т.к. я правлю стили в одном единственном файле; один раз загрузив таблицу стилей, при переходе на следующие страницы браузер больше за этим файлом css не полезет, он достанет его из кэша (типа временного хранилища загруженных файлов). Тем самым я экономлю трафик и ускоряю отображение страницы.

Внимание! Элемент “link” не сработает с одним атрибутом href. Т.к. эта гиперсылка используется для разных целей. Это служебная гиперссылка, которая может указывать на различные типы файлов, которые могут использоваться для разных целей для ваших страниц. Чтобы дать понять браузеру, что это таблица стилей, используется атрибут rel (rel=”stylesheet”). В нем указывается тип отношения загружаемого документа и нашего основного документа. Теперь браузер понимает, что загружаемый документ - это таблица стилей.

CSS = Стили и цвета

Манипулировать текстом

Цвета, Коробки

Стилизация HTML с CSS

CSS означает каскадные таблицы стилей.

CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителя х.

CSS экономит много работы . Он может контролировать расположение нескольких веб-страниц все сразу.

CSS можно добавлять к элементам HTML тремя способами:

• Встроенный - с помощью атрибута Style в элементах HTML
• Internal -с помощью
  
  

  This is a heading

  
  

  This is a paragraph.

  
  

  Внешние CSS

  Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.

  С помощью внешней таблицы стилей можно изменить внешний вид всего веб-узла, изменив один файл!

  Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе страницы HTML:

  Пример

  
  
  
  
  
  

  This is a heading

  
  

  This is a paragraph.

  
  

  Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением. CSS.

  Вот как выглядит "styles.css":

  body {
  background-color: powderblue;
  }
  h1 {
  color: blue;
  }
  p {
  color: red;
  }

  Шрифты CSS

  Свойство CSS color определяет используемый цвет текста.

  Свойство CSS font-family определяет используемый шрифт.

  Свойство CSS font-size определяет размер текста, который будет использоваться.

  Пример

  
  
  
  
  
  

  This is a heading

  
  

  This is a paragraph.

  
  

  Граница CSS

  Свойство CSS border определяет границу вокруг элемента HTML:

  Пример

  p {
  }
  

  CSS заполнение

  Свойство CSS padding определяет отступ (пробел) между текстом и границей:

  Пример

  p {
  border: 1px solid powderblue;
  padding: 30px;
  }

  CSS (Cascading Style Sheets), или каскадные таблицы стилей , используются для описания внешнего вида веб-документа, написанного языком разметки. CSS устанавливает стилевые правила, которые изменяют внешний вид элементов, размещенных на веб-страницах, выполняют тонкую настройку их деталей, таких как цвет, шрифт, размер, границы, фон и местоположение в документе.

  Вы можете встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style . Этот атрибут доступен для всех элементов HTML. С помощью CSS можно указать ряд свойств стиля для данного HTML-элемента. Каждое свойство имеет имя и значение, разделенные двоеточием (:). Каждое объявленное свойство отделяется точкой с запятой (;).

  Вот как это выглядит для элемента

  :

  Способы добавления CSS стилей

  Стандарт CSS предлагает три варианта применения таблицы стилей к веб-странице:

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

    Пример: Внутренняя таблица стилей

    • Попробуй сам »

    Заголовок

    Текст первый

    Текст второй

    Текст третий

    Заголовок

    Текст первый

    Текст второй

    Текст третий

    В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen , цвет и тип шрифта для заголовков

    : color: blue; font-family:verdana , а также размер шрифта, цвет и выравнивание текста по центру для параграфов

    : font-size:20px; color:red; text-align:center .

    Встроенный стиль

    Когда необходимо отформатировать отдельный элемент HTML-страницы, описание стиля можно расположить непосредственно внутри открывающего тега при помощи уже специализированного атрибута style. Например:

    Параграф

    Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе

    Заголовок

    Текст первый

    Текст второй

    Текст третий

    Задачи

    • Выравнивание текста по центру

      Используя встроенный стиль к параграфу выровняйте текст по центру.

    В нашем курсе мы рассмотрим уроки CSS - т.е. уроки технологии, одной из самой важной при верстке веб-страниц.

    В этом уроке мы оформим нашу web-страничку, чтобы она стала более разноцветной (рисунок 1).

    Рисунок 1

    Прежде, чем перейти к оформлению страниц, изучим, как задается цвет в web

    1. Определение цветов. Уроки CSS

    При определении цветов для документа HTML можно использовать либо названия цветов, либо их шестнадцатеричные коды. Система шестнадцатеричного кодирования основана на трех компонентах - красном (Red), зеленом (Green) и синем (Blue), отсюда и ее название RGB, по первым буквам названий этих цветов. Каждый из компонентов соответствует шестнадцатеричному числу от 00 до FF (0 и 255 в десятичной системе счисления). Эти три значения затем объединяются в одно значение, которому предшествует знак #, например #800080, что соответствует фиолетовому цвету.

    В таблице приведены названия некоторых цветов и их коды. Более полные таблицы цветов и их коды можно просмотреть в папке colors , расположенной в папке CD .

    Цвет		Цвет
    Black (черный)		Silver (серебряный)
    Maroon (темно-бордовый)		Red (красный)
    Green (зеленый)		Lime (известь)
    Olive (оливковый)		Yellow (желтый)
    Navy (темно-синий)		Blue (синий)
    Purple (фиолетовый)		Fuchia (фуксия)
    Teal (темно-зеленый)
    Gray (серый)		White (белый)

    Таблица безопасных цветов для разработки дизайна сайта

    Безопасная палитра цветов обеспечивает наиболее точное соответствие отображения на различных мониторах.

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

    Если любое из трех шестнадцатеричных значений отличается от 00, 33, 66, 99, СС или FF, то цвет не является безопасным.

    Таблицу безопасных цветов можно просмотреть в папке CD / colors .

    2. Определение CSS

    Наша web-страница пока не имеет оформления, которое можно осуществлять двумя способами:

    • первый - средствами таблиц стилей CSS (более прогрессивный и правильный метод),
    • второй - средствами атрибутов у тегов HTML .

    Начнем сразу с более прогрессивного метода.

    CSS - Cascading Style Sheets (иерархические стилевые спецификации или каскадные таблицы стилей) не заменяют языка разметки, являются самостоятельной технологией, которая применяется к тегу HTML.

    Назначение: позволяет автоматически изменить стиль HTML элемента на всех страницах сайта. Например, мы используем на десяти web-страницах заголовок H1, который должен быть зеленого цвета. При использовании таблиц стилей нам придется только один раз указать зеленый цвет и он применится сразу на десяти страницах.

    Обратная ситуация: мы с помощью атрибутов HTML задали на десяти web-страницах всем заголовкам H1 зеленый цвет, т.е. прописали его десять раз. Затем решили изменить цвет заголовка на красный, тогда нам придется десять раз исправить зеленый цвет на красный.

    При использовании же таблицы стилей нам придется только один раз это сделать, изменив зеленый цвет заголовка на красный в самой таблице стилей, и он автоматически изменится на всех десяти web-страницах.

    Таблица стилей включает набор CSS-элементов, структура которых отличается от структуры HTML-элемента.

    Синтаксис CSS -элемента

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

    Вначале пишется имя селектора, например, h1, это означает, что все стилевые свойства будут применяться к тегу

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

    Стилевых свойств со значениями может быть сколько угодно много, их последовательность значения не имеет.

    CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

    Например :

    h1 {font-family:Arial; font-size:14pt}

    или тот же самое можно записать так:

    font-family:Arial;

    font-size:14pt

    В этом примере:

    • h1 - селектор, в данном случае HTML-элемент,
    • font-family и font-size - стилевые свойства,
    • Arial - значение свойства font-family,
    • 14pt - значение свойства font-size.

    Способы включения таблиц стилей в HTML-документ

    1. Внешняя таблица стилей (связанный стиль).
    2. Внедренная таблица стилей (глобальный стиль).
    3. Внутренние стили.

    3. Внешняя таблица стилей CSS (связанный стиль)

    Определяет стиль всего сайта.

    Является текстовым файлом с расширением css.

    В данном примере таблица стилей написана в текстовом файле style.css.

    Практическое задание 1

    1. Откройте чистый документ в Notepad++ и сохраните его в папке public_html под именем style . css . Обратите внимание, чтобы в поле Тип файла было установлено All types (рисунок 2).

    

    Рисунок 2

    2. Так как CSS - это другая технология, то теги HTML в файле.css не пишутся вообще. Оформим наш заголовок «Каталог архитектурных проектов» в файле main . html с выравниванием по центру, синим цветом, шрифтом Verdana, высотой шрифта 20 pt. Для этого в файле css сделаем следующую запись (рисунок 3):

    Рисунок 3

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

    • h1 - селектор, т.е. элемент html, к которому применяется стиль;
    • text-align:center; - стилевое свойство text-align (выравнивает текст) со значением center (по центру);
    • color:#0000FF; - стилевое свойство color (цвет текста) со значением синего цвета #0000FF (значение взято из таблицы цветов);
    • font-family:Verdana; - стилевое свойство гарнитуры шрифта font-family со значением Verdana;
    • стилевые свойства со значениями разделены между собой точкой с запятой;
    • и так далее, все согласно синтаксису.

    Чтобы наша web-страница «увидела» таблицу стилей и применила свойства к html-элементам, необходимо установить связку между файлом main . html и style . css . Для этого откройте файл main.html и между тегами < head > и head > вставьте конструкцию , как на рисунке 4.

    

    Рисунок 4

    3. Просмотрите результат в браузере. Он должен совпадать с рисунком 5.

    

    Рисунок 5

    В данном уроке CSS мы рассмотрим где взять названия стилевых свойств и их значений? Для этого также существуют специальные справочники и спецификация (папка Справочник CSS). Для начала используйте в качестве справки небольшой справочник Sprav_CSS.doc .

    4. Зададим стиль заголовку h2 «Проекты для Вашего будущего дома» с выравниванием по правому краю, бордового цвета, шрифтом Verdana, высотой шрифта 16 pt. Для этого в файле style . css h 2 (рисунок 6).

    Рисунок 6

    5. Проверьте результат в браузере, он должен совпадать с рисунком 7.

    

    Рисунок 7

    6. Абзацы оформим с выравниванием по ширине, темно-синего цвета, шрифтом Arial, высотой шрифта 12 pt. Для этого в файле style . css сделаем следующую запись для селектора p (рисунок 8).

    Рисунок 8

    7. Также сделаем светло-голубым цветом фон всей web-страницы. Для этого для селектора body добавим запись (рисунок 9)

    Рисунок 9

    8. Просмотрите результат в браузере. Он должен совпадать с рисунком 10.

    

    Рисунок 10

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

    Исследовательские задания

    1. Используя справочник Sprav_CSS.doc, оформите стилями заголовок < h 3> в файле main.html. Свойства стилей на выбор.
    2. Для списка «Проекты домов», используя стили, измените арабские цифры на римские. Остальные параметры по желанию.
    3. Для списка «Площади домов» в качестве маркера примените изображение spisok_1.gif из папки html_css_2 . Остальные параметры по желанию.
    4. В качестве фона web-страницы примените через стили изображение fon9.jpg из папки html_css_2 .
    5. С использованием стилей сделайте шрифт абзацев полужирным.

    Примерный результат на рисунке 11.

    

    Рисунок 11

    4. Классы в стилевых спецификациях

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

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

    h1.golub{color:blue}

    h1.krasn{color:red}

    h1.zelen{color:green}

    После точки идет имя класса, которое должно быть уникальным и не может состоять только из цифр.

    Теперь при использовании тега < h 1> в документе необходимо установить атрибут class , чтобы указать, какой именно стиль нужно применить:

    < h 1 class =" golub "> Это голубой заголовок h 1>

    < h 1 class =" krasn "> Это красный заголовок h 1>

    < h 1 class =" zelen "> Это зеленый заголовок h 1>

    Практическое задание 2

    1. Откройте файл shablon . html . Сохраните его под новым именем ploshady . html в папке public_html .

    2. Напишите между тегами новый заголовок «Площади домов».

    3. В содержимое скопируйте текст из файла Площади домов.txt из папки html _ ccs _2 .

    4. Стили будем писать в том же файлеstyle . css , который у нас создан в предыдущем уроке. Поэтому в файле ploshady . html установите связку с этой таблицей стилей, вставив между тегами и (рисунок 12)

    

    Рисунок 12

    5. Отформатируйте заголовки тегом

    и присвойте каждому заголовку свой класс (рисунок 13).

    

    Рисунок 13

    Ваш файл ploshady . html сейчас должен выглядеть следующим образом (рисунок 14).

    

    Рисунок 14

    6. В таблице стилей style . css создайте следующую запись (рисунок 15)

    Рисунок 15

    7. Проверьте web-страницу в браузере. Результат на рисунке 16.

    

    Рисунок 16

    8. Вы, наверно, заметили, что в нашей новой записи стилей заголовков есть повторяющиеся конструкции font-family:Verdana; text-align:left; font-size:14pt. Такие конструкции можно записывать один раз, сгруппировав селекторы, к которым они применены. Для этого, надо перечислить селекторы через запятую, а затем в фигурных скобках прописать общие свойства. Тогда наша таблица стилей для заголовков будет выглядеть следующим образом (рисунок 17):

    

    Рисунок 17

    Практическое задание 3

    Под каждый заголовком в файле ploshady . html есть текст. Отформатируйте абзацы с использованием различных классов. Используйте разные цвета, выравнивание и гарнитуру шрифтов. Имена классов должны быть уникальными. Нежелательно использование одинаковых имен для разных селекторов. Один из возможных вариантов на рисунке 18:

    

    Рисунок 18

    5. ID-стиль для специфического элемента

    Уроки CSS включают изучение так называемых id-стилей.

    Любому элементу можно присвоить идентификаторid , а затем поставить в соответствие этому элементу какой-либо стиль, используя id .

    Например:

    Запись в файле таблиц стилей будет следующая

    # test { color :#00 ffff }

    Теперь можно поставить этот стиль в соответствие любому элементу в документе html:

    ...

    ...

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

    Практическое задание 4

    Сделаем заготовку для будущего меню нашего сайта.

    1. Откройте файл shablon . html и сохраните его под новым именем menu . html в папке public_html.

    2. В содержимое страницы файла menu . html внесите текст из файла menu . txt из папкиhtml _ css _2 .

    3. Средствами html-тегов отформатируйте файл следующим образом:

    • для заголовков «Категории проектов», «Каталог архитектурных проектов» и «Площади домов» используйте тег

      ;

    • для списка «Категории проектов» используйте нумерованный список
      ;
      1. для списков «Каталог архитектурных проектов» и «Площади домов» используйте маркированный список

         4. Вверху web-страницы вставьте логотип (файл logo_myhouse.gif ). Результат должен совпасть с рисунком 19.

         

         Рисунок 19

         5. Для этого меню сделаем отдельную таблицу стилей под именем style _ menu . css . Установите связку между файлом menu . html и таблицей стилей style _ menu . css , вставив запись между тегами и в файле menu . html .

         6. Создайте чистый документ и сохраните его под именем style _ menu .css в своей папке.

         7. Для группы «Категории проектов», в которую входит заголовок и нумерованный список и для группы «Каталог архитектурных проектов», в которую входит сам заголовок и маркированный список будем использовать имя id-стиля blue . Т.е. код будет выглядеть следующим образом (рисунок 20):

         

         Рисунок 20

         8. В файле style _ menu . css стиль для этих элементов сделаем темно-синего цвета, шрифтом Tahoma (рисунок 21):

         Рисунок 21

         9. Для группы «Площади домов», в которую входит заголовок и маркированный список, будем использовать имя id-стиля brown . Т.е. код будет выглядеть следующим образом (рисунок 22):

         

         Рисунок 22

         10. В файле style _ menu . css стиль для этих элементов сделаем коричневого цвета, шрифтом Times (рисунок 23):

         Рисунок 23

         11. И добавим еще цвет фона файлу menu.html (рисунок 24)

         Рисунок 24

         12. В результате получим следующую web-страницу (рисунок 25)

         

         Рисунок 25

         В результате выполнения этого урока CSS, у Вас должны быть созданы следующие файлы:

         • style . css
           
         • style _ menu . css
         • ploshady . html
           
         • menu . html
           

         > Основные css стили для создания сайта Как правило стили отображения контейнеров, и их содержимого прописываются в таблице стилей, которая обычно называется stile.css, хотя можно назвать как угодно. Главное чтобы на странице в теге был правильный путь до таблицы стилей

         Чтобы задать стиль для контейнера на странице ему можно задать класс. Например контейнеру

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

         содержимое

         . В таблице стилей указываются стили для chapka_saita. Название в таблице stile.css начинается с точки.

         Chapka_saita { в фигурных скобках указываем стили }

         Так же стиль для контейнера можно указать напрямую если ему не присвоен класс. Например стиль для контейнера

         содержимое

         начинается с названия контейнера

         Header { в фигурных скобках указываем стили }

         Так же еще можно указать стили для контейнеров с помощью идентификатора, тогда это выглядит так

         содержимое

         , в таблице стилей идентификатор начинается с символа решетки

         #blok1 { в фигурных скобках указываем стили }

         Если нужно указать стили заголовков в контейнерах, ссылок, изображений, то это выглядит так.

         Chapka_saita { в фигурных скобках основной стиль контейнера }
         .chapka_saita h1, h2 { стиль для заголовков в тегах

         и

         для этого контейнера }
         .chapka_saita a { стиль для ссылок в этого в этом контейнере }
         .chapka_saita a:hover { стили для ссылок при наведении курсора мыши }
         .chapka_saita img { стили для изображений в этом контейнере }
         Сами стили прописываются в этих фигурных скобках и разделяются точкой с запятой;

         Font-family: Arial; задает шрифт контейнера, обычно его применяют в теге , в котором все содержимое страницы

         Line-height: 1.2; задает высоту строк для шрифта

         Отступы

         padding: 10px; задает внутренний отступ содержимого от границы контейнера, в данном случае отступ 10 пикселей, можно указывать значение в процентах, или в em
         margin: 5px; задает внешние отступы контейнера,
         margin: 10px 5px 0px 15px; отступы можно указывать и по отдельности для каждой стороны
         margin-bottom: 10px; можно указывать отступ только с одной стороны, в данном случае отступ от низа 10пикселей. Тоже самое можно применять и внутренним отступам padding.

         Ниже пример стилей для тега

         Body { margin-left: auto; margin-right: auto; width: 930px; font-size: 12px; font-family: Arial; line-height: 1.2; background-image: url(images/fon.jpg); }

         Стили для текста

         font-size: 12px; указывает размер шрифта, можно указывать в пикселях, процентах, или em
         color: #0000ff; указывает цвет шрифта, в даном случае #0000ff синий, можно указать словом, например color: green; тоесть цвет зеленый.
         text-decoration: none; убирает подчеркивание, применяется для ссылок чтобы убрать нижнее подчеркивание
         text-transform:uppercase; делает все буквы текста заглавными, вместо uppercase можно писать другие значения и наоборот сделать верхнее или нижнее подчеркивание, зачеркивание.
         font-weight:bold; выделает шрифт полужирным, вместо bold можно применять и другие значения
         text-align:left; задает выравнивание текста, в данном случае left, к левой части контейнера, можно задавать значение conter, hight.
         text-shadow: 1px 2px 1px 0px #000000; color: #f9f5ed; тень для текста

         Стили контейнеров

         background-color: #DCDCDC; назначает цвет фона контейнера, в данном случае #DCDCDC серый
         background-image: url(images/fon.jpg); задает фоновое изображение

         Border: 1px solid #E8E8E8; назначет бордюр, фраза solid означает сплошной бордюр, #E8E8E8 цвет бордюра. Можно указывать отдельно бордюр для каждой стороны, например border-top: 2px solid #E8E8E8;
         border-radius: 10px; скругление углов контейнера, можно задавать разное скругление на каждом угле border-radius: 2px 6px 10px 0px;
         box-shadow: #2C2C29 10px 10px 10px; тень для контейнеров

         Width:926px; указывает ширину контейнера
         height: 240px; высота контейнера

         Float:left; прижимает контейнер к левой части, по умолчанию контейнеры идут по порялку, а если хочется выстроить несколько блоков в линию, то им нужно задать свойство float:left; и ширину height: px; чтобы они поместились по ширине в родительском контейнере.
         float:right; тоже самое, но контейнеры прижимаются к правой части.
         Если хотите сделать контейнер посередине, то указывайте ширину, а отступы avto , пример: margin-left: auto; margin-right: auto; width: 150px;