Верстка css: Как сверстать веб-страницу. Часть 1 / Хабр

Верстка для самых маленьких или что дизайнер должен знать об HTML и CSS и где это найти | by Pauline Bertry | О дизайне

Привет! Мы с Вами уже разобрались почему дизайнеру полезно иметь базовые навыки вёрстки ( внимание, прикрываю попу: я имею ввиду именно базовые навыки, а не заменять верстальщика ). Если вкратце, то для того, чтоб упростить взаимодействие с разработчиками и создавать более качественный дизайн благодаря пониманию того, как он будет реализован.

Итак, что же дизайнеру нужно знать об HTML и CSS

Итак, давайте разберёмся с тем, что происходит после того, как вы закончили свой дизайн, сложили все ваши слои в аккуратные папочки и отправили исходники верстальщику. Первым делом верстальщик посмотрит все существующие на сайте страницы и выделит у себя в голове общую структуру: ага, вот тут меню, вот тут футер, вот тут контент и так далее. На основе этой логической структуры, верстальщик создаст разметку страницы с помощью HTML. Это значит, что используя определенные обозначения он объеденит вместе блоки, логически связанные между собой.

Например, HTML разметка вот такого блока:

может выглядеть следующим образом:

Если открыть этот файл html в браузере, без дополнительных манипуляций, Вы увидите примерно следующее:

HTML разметка практически никаким образом не влияет на то, как выглядит сайт. Этим занимается СSS — каскадные таблицы стилей. Почему? Всё просто: мясо отдельно, мухи отдельно. В HTML мы занимается содержанием и семантикой, в CSS — внешним видом.

Для того, чтоб блок на прошлой картинки стал выглядеть так, как мы его надизайнили, мы напишем к нему стили и скажем нашему HTML использовать созданный нами CSS файл. Выглядит CSS где-то так:

Это конечно же очень базовое понимание того, как происходит процесс вёрстки.

Тем, кто хочет сразу в бой — советую вот этот курс, во время которого вы сможете понять базовые принципы HTML CSS на создании мини-сайтов. Курс бесплатный, на английском, займёт примерно часа 2 : https://dash.generalassemb.ly/

Сколько раз вам приходилось кривить лицо, когда на макетах, сверстанных по вашему дизайну, вы замечали, что тщательно высчитанные пиксели не были так же тщательно перенесены на свёрстанный сайт? Много? Вот-вот….

Давайте разберемся почему так бывает

1. Во-первых, на самом деле, ваш дизайн прекрасен! Наверняка он создан по всем законам композиции и каждый элемент на странице визуально связан с другим. В Sketch или Photoshop, где размер экрана всегда 1280px для дексктопа и 320px для мобилки всё замечательно! Но что происходит, когда человек смотрит Ваш сайт на экранах других размеров? Для того, что сайт выглядел удобно и прилично на других размерах экранов, верстальщики используют условные единицы измерения для размеров блоков, шрифтов, иконок и так далее. Соответственно, иногда размер шрифта вашего сайта будет на 16px ровно, как вы задумали, а например 16,25874px. Важно ли это для общего опыта пользователя? Скорее всего не особо, правда?
2. Во-вторых, дело не в Вас, а в инструментах, которые Вы используете. Инструменты дизайнера статичны, инструменты разработчика — динамичны. Мы привыкли работать со страницами или артбордами, а верстальщики —с окнами браузеров, постоянно меняющими ширину. Часто мы не понимаем, насколько трудно управлять изменением сайта от десктопной версии к мобильной.

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

На написание этого параграфа меня вдохновила статья Dear Designer, I’m sorry! Love, your dev.

Сейчас я забегаю немного вперед, но то, о чем я буду говорить важно понимать для успешного сотрудничества. Для того, чтоб упростить разработку продуктов, сейчас часто говорят о так называемых дизайн системах. Что это значит? Это значит, что у вас есть определенный набор компонентов, которые нужно и можно использовать в своём дизайне ( нет, это не значит, что нельзя создавать новые; можно, когда это необходимо ). Обычно в дизайне это проявляется наличием качественного тулкита и гидлайнов по использованию элементов интерфейса. Разработчики же обычно используют библиотеки типа ReactJS, Angular 2 и языки типа SASS для того, чтоб сделать эти компоненты независимыми и упростить повторное использование кода в будущем. Мы поговорим немного о SASS.

Плохая новость в том, что в СSS ( то, благодаря чему мы стилизируем страницы ), нельзя использовать переменные. Это значит, что каждый раз, когда вы используете где-то какой-то цвет — верстальщик должен прописывать его вручную. И если вы меняете цвет в ходе разработки дизайна — исправлять каждую строчку тоже вручную. Та же ситуация со шрифтами, их размерами да и вообще всем, что должно оставаться « стабильным » на макете. Поэтому придумали SASS — это язык, который позволяет использовать переменные (ну и много других плюшек, но мы же о базовых знаниях сейчас говорим 😀 ) для того, чтоб упростить верстальщикам работу с CSS.

Представим ситуацию. Вы надизайнили сайт на основе фирменного стиля компании, в котором есть 5ть брендовых цветов. Что сделает верстальщик? Правильно, посмотрит на ваш макет, увидит, что Вы — молодец, использовали фирменные цвета компании и создаст переменные для этих цветов. Дальше начинается веселуха. Верстальщик верстает сайт и гордый собой скидывает его на валидацию дизайнеру. И понеслась: оооооой, а вот тут цвет на два оттенка отличается, потому что если использовать обычный цвет компании, то он слишком яркий, так как рядом я использовал другой цвет, и поэтому надо на два оттенка другой. АААААААА!

Я бывала в шкуре обоих: и дизайнера, и верстальщика и поверьте, подобные ситуации просто выносят мозг. Всем.

Совет дизайнерам: подумайте, важно ли тут менять цвет? Да? Отлично! Предупредите об этом верстальщика! А может быть всё-таки не настолько уж важно?

Написанное касается всех элементов, которые есть на сайте: цвета, шрифты, кнопки, ссылки, поля ввода, меню и так далее. Будьте аккуратны во время создания ваших макетов. А если есть какие-то важные изменения(особенно малозаметные) — указывайте их в описании к макету и ваш верстальщик будет счастлив!

Лучше один раз сделать, чем 10 раз прочитать статью. Поэтому вот два курса, которые я советую для знакомства с HTML и CSS:

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

☝️ тут уровень поднимается немного быстрее, довольно приятно и интересно проходить курс.

========================================

Для тех, кому хочется пойти ещё дальше, советую вот эти два “пути” на pluralsight :

Внимание: не начинайте обучение с этих ☝️ двух курсов, вам будет скучно 🙂

1. Пройдите курс по вёрстке, для того, чтоб понять боль Ваших коллег 🙂
2. Пожалуйста, не думайте, что после одно курса Вы стали верстальщиком и не добавляйте вёрстку в список услуг. Уважайте труд коллег:) На данном этапе цель — понять, как они работают для упрощения совместного сотрудничество.
3. В следующий раз, когда вы решите сделать верстальщику замечание о том, что « тут на 14px размер текста, а 14.8456px » — подумайте насколько это ДЕЙСТВИТЕЛЬНО важно 😀
4. Ещё меня часто спрашивают, какие другие языки программирования стоит изучать дизайнерам. Я считаю, что для начала HTML и CSS хватает с головой. Когда и если Ваш уровень можно будет назвать уверенно-средним, можно посмотреть в сторону JavaScript, который вам, как дизайнеру, поможет лучше понимать то, как создаются анимации на страницах ( но JavaScript конечно же используется не только для этого ).

__________________________________________________________________

Понравилась статья? Буду благодарна за Like и Share!

Есть чем дополнить материал? Пишите на почту: [email protected] или добавляйтесь в Facebook и Linkedin

CSS layout — Изучение веб-разработки

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

Перед изучением этого раздела вы должны:

1. Иметь общее представление об HTML, как указано в разделе Вступление в HTML.
2. Ориентироваться в основах CSS, как указано в разделе Вступление в CSS.
3. Понимать, как стилизовать блочные элементы.

Примечание: Если вы работаете на компьютере/планшете/других устройствах, где нет возможности создать ваш собственный файл, вы можете попробовать (большую часть) примеры кода в онлайн-программах для написания кода  JSBin и Thimble.

Эти разделы содержат инструкции по основным инструментам и методам вёрстки, доступным в CSS. На последнем уроке у вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.

Введение в CSS вёрстку

В этом разделе будут описаны некоторые возможности CSS вёрстки, которых мы уже касались в предыдущих модулях — различные значения display  — и представлены некоторые концепции, которые мы рассмотрим в этом модуле.

Нормальный поток

Элементы на веб-страницах размещаются в соответствии с нормальным потоком — пока мы не сделаем что-либо, чтобы это изменить. Этот раздел объясняет основы нормального потока как фундамент для изучения влияния на него.

Flexbox

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

Grids

CSS Grid Layout — это двумерная система вёрстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.

Floats

Изначально созданное для плавающих изображений внутри текстовых блоков, свойство float стало одним из наиболее часто используемых инструментов для создания мульти-колоночной вёрстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.

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

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

Мульти-колоночная вёрстка

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

Устаревшие методы вёрстки

Grid-системы — это очень распространённая возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей вёрстки. Вы представляете свою вёрстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.

Поддержка старыми браузерами

В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы вёрстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда — по мере появления новых возможностей, для различных браузеров будут приоритетны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.

Фундаментальное понятие вёрстки

Оценка ваших знаний различных методов вёрстки посредством вёрстки веб-страницы.

div и HTML5 — учебник CSS

Ранее в книге мы уже несколько раз упоминали о том, что верстка сайтов таблицами канула в Лету, и ее успешно заменила блочная верстка. HTML-таблицы должны использоваться сугубо по прямому назначению (структурирование и отображение данных с распределением по строкам и столбцам), но никак не для создания макета веб-страницы и организации всего ее контента.

Что касается оформления внешнего вида сайта, то в современной веб-разработке HTML-код должен содержать лишь теги и контент в них, а стилевые правила необходимо размещать отдельно от HTML, в файлах CSS. Inline-стили, которые прописываются прямо в веб-документе — это исключение из правил, к которому стоит прибегать лишь по очень уважительным причинам.

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

Блочная верстка с <div>

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

Элемент <div> можно назвать своеобразным фундаментом для построения веб-страниц. Изначально он ничем не выделяется внешне, кроме разве что того факта, что это блочный элемент, который по умолчанию занимает всю ширину документа, а следующий за ним элемент начинается с новой строки.

Тег <div> универсален и часто служит контейнером для других HTML-элементов. Например, шапка сайта, футер либо сайдбар — это зачастую не что иное, как блок div, содержащий в себе такие же блоки и/или другие HTML-элементы.

Через различные классы и идентификаторы div-блокам задается соответствующее CSS-оформление. К примеру, чтобы было удобнее писать стили для шапки сайта, можно добавить к блоку класс .header, а для футера — класс .footer.

Использование тегов <div> в верстке не означает, что нужно отказаться от других тегов. Если для решения ситуации иной тег подходит лучше, используйте его. Яркий пример — тег длинной цитаты

Блочная верстка с HTML5

И, раз уж мы заговорили о семантике в веб-документах, стоит упомянуть и о тегах, появившихся в HTML5. Новые семантические теги были специально созданы для группировки контента конкретного типа.

Например, шапка сайта может помещаться в HTML5-тег <header>, а подвал — в похожий тег <footer>. Кроме того, существует еще множество других семантических тегов — <nav>, <section>, <article> и т. д. Данными тегами можно заменять обычные теги <div> для объединения элементов.

Как вы могли догадаться, HTML5-теги дают более точную информацию о том, что в них содержится. Это дает определенные преимущества в плане идентифицирования роли того или иного контента веб-страницы, однако со стороны стилизации ничего не меняется: вы можете точно так же применять CSS-стили к семантическим тегам, как применяете их к простым блокам

Далее в учебнике: основные правила создания разметки веб-страниц.

Продвинутая CSS-верстка: шаг за шагом — Вёрстка

Advanced CSS Layouts: Step by Step
автор: WebReference, Rogelio Vizcaino Lizaola, Andy King
перевод: Павел Филиппов

Краткое содержание

Задача: воспроизвести с помощью CSS основную страницу WebReference. Инструменты: CSS и много свободного времени.

Kwon Ekstrom предложил свою CSS версию главной страницы WebReference. Rogelio Lizaolo улучшил ее. Через несколько месяцев напряженной совместной работы финальный вариант на CSS полностью повторял прежний, табличный. В процессе мы обнаружили массу ошибок в NN и IE и нашли несколько элегантных уловок для их обхода. Ниже следует наша пошаговая инструкция, с помощью которой вы можете повторить наш подвиг.

Вступление

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

Работа велась с прицелом на пятое поколение броузеров, в качестве платформы предполагались Windows и Macintosh. Мы намеревались использовать одни и те же стилевые таблицы для всех броузеров. Это ограничение усложнило нашу задачу, и сделало финальный код куда сложнее и запутаннее, чем если бы мы ориентировались только на броузеры с корректной поддержкой CSS-2 (например, Netscape 6). Понятно, что из-за проблем с совместимостью мы не могли использовать весь спектр возможностей CSS.

Условия задачи

Весной 2001 года основная страница WebReference состояла из шести блоков (в основе верстки лежали три таблицы):

• Верхний навигационный блок с пятью текстовыми ссылками и формой для поиска
• Рекламный блок, содержащий стандартный баннер
• Левый навигационный блок с логотипом WebReference и текстовыми ссылками
• Правый навигационный блок, содержащий текстовые ссылки, отображающие структуру сайта
• Центральная область, содержащая основной контент
• Цветной блок внутри центральной области, содержащий  «Совет дня»

Возможно ли воспроизвести эту разметку с помощью CSS? Разумеется. И мы расскажем, как это сделать.

Если не принимать в расчет верхний навигационный блок, рекламный блок и «Совет дня», то мы имеем дело с версткой в три колонки. Так как центральная колонка будет содержать контент, то от ее высоты будет зависеть высота всего документа. Понятно, что высота всех трех колонок должна быть одинакова. Обратите также внимание на отступы шириной 9px слева и справа от центральной колонки.

Верстка в три колонки – как это делается

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

1. Сперва зададим нужные нам поля и отступы для тела документа. Обратите внимание, что мы задаем для него нулевой отступ, потому что в Opera он по умолчанию не равен нулю. Также мы задаем #FFF в качестве цвета фона, так как в Netscape 6 для Macintosh фон по умолчанию серый.

body {
    margin:9px 9px 0 9px;
    padding:0;
    background:#FFF;
}

2. Теперь мы определим наш первый DIV (назовем его «level0»). Для него мы только лишь укажем цвет фона – это будет цвет нашей левой колонки. Взгляните

#level0 {
     background:#FC0;
}

3. Вложим второй слой внутрь нашего level0 и назовем его «level1».

#level1 {
    margin-left:143px;
    padding-left:9px;
    background:#FFF;
}

В этом новом слое мы указали место для левой колонки и отступ от нее. Цвет отступа задается цветом фона для слоя. Взгляните.

Вложим в «level1» слой под названием «level2»

#level2 {
    background:#FFF3AC;
}

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

Для правой колонки мы по уже описанной методике добавляем в слой «level2» слой «level3» 

#level3 {
    margin-right:143px;
    padding-right:9px;
    background:#FFF;
}
#main {
    background:#CCC;
}

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

Добавляем шапку и рекламный блок

Мы пока еще не углублялись в тонкости разметки для боковых колонок, лишь визуально их отделили, но уже сейчас понятна методика по отображению трех колонок одной высоты. Перед тем как двигаться дальше, добавим  в разметку верхний навигационный блок и место для рекламы. Мы вложим слой «topBar» в «level1» и перед слоем «level2», а в «topBar» поместим слой «advBar». Взгляните.

...
#topBar {
    background:#FC0;
}
#advBar {
    background:#FFF3AC;
}
</style>
...
<body>
  <div>
    <div>
      <div>
        This is the top navigation bar.
        <div>
          This is the advertisement bar.
        </div>
      </div>
      <div>
        <div>
          <div>
            The code you are reading.
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
...

«Совет дня»

Теперь у нас есть три блока, куда мы можем поместить любое содержимое, основная область, верхний навигационный блок и рекламный блок. Каждый из этих элементов принимает высоту содержимого, но ширина у них фиксированная. Давайте теперь создадим блок, содержащий «Совет дня». Сделаем его плавающим, чтобы содержимое центральной области его огибало. Вложим в «main» слой «tipDay», и зададим для него перемещение вправо. Также укажем для него некоторую ширину (для плавающих элементов ширина обязательно должна быть задана). Взгляните.

#tipDay {
    float:right;
    width:175px;
    background:#FFF3AC;
}

Что с контентом?

Теперь давайте решим, как именно мы будем заполнять блоки содержимым. Самым естественным решением было бы использовать свойство float, но из-за проблем с отображением плавающих блоков в Opera и IE нам придется использовать абсолютное позиционирование. Ошибки в IE небольшие, и ими можно было бы пренебречь, но, к сожалению, с проблемами в Opera нам справиться не удалось. По этим ссылкам расположены описания возникших ошибок: одна ошибка в Opera, другая ошибка в Opera, ошибка в IE.

Заполняем боковые блоки

Начнем с левого навигационного блока – добавим к нему слой «lftBar». Так как мы решили использовать абсолютное позиционирование, то у нас теперь есть относительная свобода в выборе места для кода, определяющего слой. Его можно поставить внутрь «level0», до или после «level1» или даже на один уровень вложенности со слоем «level0» – это не повлияет на его отображение – если, конечно, мы выберем правильные координаты.

Мы попытались вложить «lftBar» в «level0», указав для «lftBar» нулевые координаты top и left, а для «level0» – относительное позиционирование (position:relative), но в IE5.5 слои почему-то перекрывались. Поэтому мы решили установить для «lftBar» абсолютные координаты относительно тела документа. Взгляните. А также – одна ошибка в IE, другая ошибка в IE.

#lftBar {
    position:absolute;
    width:143px;
    top:9px;
    left:9px;
}

Для правого навигационного блока мы использовали слой «rgtBar». Нам было важно, что бы его верхний край совпал с верхним краем слоя «main», что содержит основной контент. Поэтому мы решили вложить «rgtBar» в «level2», до или после «level3», установив для «level2» относительное позиционирование, а для «rgtBar» – нулевые координаты top и left и ширину, равную правому полю слоя «level3». Взгляните.

#level2 {
    background:#FFF3AC;
    position:relative;
}
...
#rgtBar {
    position:absolute;
    width:143px;
    top:0;
    right:0;
}

Расставляем по местам

С нашей версией было две проблемы в IE для Windows. Первая проблема состояла в том, что блок с «Советом дня» исчезал, хотя содержимое блока main его исправно огибало. Эту проблему мы разрешили, установив для слоя «tipDay» относительное позиционирование (такая установка привела к повышению z-index и слой автоматически разместился поверх остальных).

Странности наследования: «Auto» против «Inherit»

Второй проблемой в IE/Windows было то, что правый навигационный блок отодвигался максимально вправо. Для решения проблемы нам пришлось явно указать ширину слоя «level2» (в который вложен «rgtBar»). IE не понимает декларацию ‘auto’, но зато понимает ‘inherit’ (хотя и довольно-таки странным образом), и это можно использовать для наших целей. Мы установили  для «level0» ширину в 100%, а в качестве ширины для «level2» указали ‘inherit’. Фокус в том, что в IE «level2» наследует значение ширины от «level0» (100%), в то время как в прочих броузерах – происходит наследование от «level1» (‘auto’) (а укажи мы для «level2» ширину в 100%, то у нас возникли бы проблемы с отображением в IE 5.5+, который понимает 100%, как ширину всего окна броузера). Эту ошибку CSS в IE5 вы, кстати, вполне можете использовать для решения сходных проблем – подробности смотрите в разделе использованных приемов. Взгляните

#level0 {
    background:#FC0;
    width:100%; # - New, outermost DIV
}
#level2 {
    background:#FFF3AC;
    position:relative;
    width:inherit; # - New, inherits 100% from level0 in IE5
                   #        inherits auto from level1 in all others
}
#tipDay{
    float:right;
    width:175px;
    background:#FFF3AC;
    position:relative; # - New, forces z-index so this div displays in IE
}

Очищаем стиль

Теперь самое время провести генеральную уборку. Для начала избавимся от слоя «level3» и передадим все его стилевые декларации слою «main». Добавим правому блоку границу с помощью свойства border-right слоя «main». Также сделаем два заголовка для основной области и поставим в правый блок несколько тестовых подзаголовков. Внизу правого блока добавим подзаголовок «A_Long_String», чтобы продемонстрировать проблемы, возникающие при использовании  больших шрифтов. Этот подзаголовок нельзя разбить на несколько линий, и он может раздвинуть блок, если превысит его по ширине. Взгляните.

#main { # Where the main content goes
    margin-right:143px;
    padding-right:9px;
    background:#FFF;
}
#main h2 { # Where our main section headers go
    margin:0;
    padding-left:.3em;
    font:1.25em Verdana,Helvetica,Arial;
    color:#609;
    background:#FC0;
}
#main dt { # Bump up the main content links
    font-weight:bold;
    font-size:120%;
    margin-top:.8em
}
#rgtBar h4 { # Subheads for right nav bar, (newsletter, experts...)
    margin:0;
    padding:3px;
    background:#FC0;
    font-weight:bold;
    font-size:1em;
    text-align:center;
}

Размер фиксированный против размера относительного

Чтобы предотвратить превышение длинным подзаголовком ширины блока, мы изменим некоторые декларации для «rgtBar» и «main», переписав их в относительных единицах («em»). Прежде мы задавали ширину в 143 px. Это составляет примерно 9em, если размер шрифта в броузере равен стандартным двенадцати пунктам (двенадцать пунктов – это16px). Поэтому мы задаем для «rgtBar» и «main» поля и ширину не в 143px, а в 9em. Теперь, благодаря относительным единицам, правый блок будет менять свою ширину пропорционально установленному пользователем размеру шрифта. Взгляните.

#main {
    margin-right:9em; # - Use variable widths rather than fixed, they are
                          more user-friendly. This also applies to font sizes.
    padding-right:9px;
    background:#FFF;}
...
#rgtBar {
    position:absolute;
    width:9em; # - likewise
    top:0;
    right:0;
}

Описанная методика решает большинство проблем с превышением размера содержимого над размером содержащего блока. Для блока «Совет дня» мы тоже задали ширину в относительных единицах, но для левого блока все же решили остановиться на единицах абсолютных, так как его содержимое не могло разрушить верстку.

Плавающая форма поиска

Теперь разместим форму поиска и текстовые ссылки в верхнем навигационном блоке. Форму мы определим как первого потомка «topBar» и укажем ей перемещение вправо. Мы уже выяснили, что для плавающих элементов следует явно задавать ширину, и наша форма не является исключением.  Определим ей ширину 10.5em – благодаря относительным единицам элементы формы будут пропорционально изменять размер в зависимости от размера шрифта в броузере пользователя. Также мы зададим для формы выравнивание к правому краю (text-align:right), так как сама форма чуть шире, чем ее элементы. Но мы, очевидно, еще не закончили – взгляните, и вы поймете, какую проблему нам предстоит решить.

#topBar form {
    float:right;
    width:10.5em;
    text-align:right;
}

Нам нужно установить в ноль все поля формы поиска, чтобы максимально уменьшить ее размер по вертикали. Для Netscape мы определим высоту строки в 0.7 em, тогда кнопка «Search» по высоте сравняется с полем ввода (на отображение в IE и Opera эта директива никак не повлияет). Двигаемся дальше. Форма частично накладывается на рекламный блок. Этого мы позволить не можем,  так как в нем прямо под формой будет располагаться текстовая ссылка, поэтому определим для «advBar» свойство clear. Напоследок, установим для «topBar» ширину в 100%, дабы избежать ошибки в IE и укажем для поля ввода размер шрифта в .8 em, чтобы его размер изменялся соответственно размеру шрифта в броузере. Взгляните.

#advBar {
    background:#FFF3AC;
    clear:right; # - New, clear the search form
}
...
#topBar form { # The search form
    float:right;
    width:10.5em;
    text-align:right;
    margin:0;
    line-height:.7em; # - Crucial!
}
#topBar input {
    font-size:.8em;
}

Добавляем текстовые ссылки

Поместим текстовые ссылки на полагающееся им место. Эти пять ссылок разделены буллитом и заключены в тэг <B>, поэтому именно этот тэг должен стать вторым потомком блока «topBar». В IE 5.0 для Windows мы обнаружили странный эффект, из-за которого ссылки выравнивались к правому краю. Решить эту проблему можно было либо заключив ссылки в слой с выравниванием налево, либо сделав <B> блочным элементом, указав для него необходимое выравнивание. Мы предпочли второй способ. Также мы указали стиль для шрифта и необходимую высоту строки, чтобы ссылки были выровнены по вертикали. Взгляните.

#topBar b { # Top nav bar text links (sitemap, experts...)
    display:block;
    text-align:left;
    font:bold .8em/1.7em Arial,Geneva,sans-serif;
}

Добавляем содержимое и заголовок для «Совета дня»

На этом этапе мы заменим тестовые заголовки типа «Это заголовок 1» и «Это заголовок 2» на реальные заголовки сайта WebReference – «WebReference.com: Dev the Web™» и «internet.com» соответственно. Еще мы добавим заголовок для блока «Совет дня», причем располагаться он будет в том же блоке, что и заголовок «WebReference.com: Dev the Web™». Для этого нам понадобится новый слой, назовем его «tipTit», который будет первым потомком слоя «main». Укажем для него перемещение и выравнивание к правому краю, ширину, стиль шрифта и высоту строки для вертикального выравнивания. Ширину определим в 7em (такую же, как и у блока «tipDay»). Чтобы избежать проблем в IE, которые описаны выше, позиционирование его сделаем относительным. Взгляните.

#tipTit {
    float:right;
    width:7em;
    text-align:right;
    position:relative;
    font:.8em/1.8em Arial,Geneva,sans-serif;
    background:red;
}
.note {
    color:red
}

Дело сделано! Мы успешно воспроизвели основную страницу WebReference.com без единой таблицы. Нам осталось только добавить баннер на его законное место. Взгляните. Примечание: финальный вариант разметки еще не тестировался в IE6, но мы обязательно это сделаем в самом ближайшем будущем. (прим. переводчика: в IE6 страница отображается вполне корректно)

#advBar p{text-align:right;margin:0 0.5em;font-weight:bold;}
#advBar img{margin-bottom:1em}

Дальнейшие планы

Надеемся, что из этой статьи вы почерпнули некоторые идеи по использованию CSS для создания многоколоночной верстки. Для дальнейшего улучшения дизайна мы можем добавить в левую колонку дополнительные информационные или рекламные блоки. Для верхнего блока ([sitemap | experts …. search]) и центрального заголовка (WebReference: Dev the Web …. Tip of the Day]) мы можем применить методику, описанную в A List Apart (хотя наверняка возникнут проблемы с позиционированием формы поиска). Разумеется, любые изменения мы будем тестировать во всех основных броузерах.

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

Основные приемы CSS

Сохраняйте гибкость

По возможности используйте относительные величины (em или % для шрифтов, em для слоев)

Вкладывайте слои друг в друга

Эта техника помогает решить проблему с вариациями реализации блочной модели в разных броузерах. В IE5 поля, границы и отступы в одном блоке не очень-то хорошо уживаются друг с другом. Обязательно отделяйте декларации полей и границ от деклараций ширины. В неверной блочной модели, реализованной в IE5/Windows, поля и границы не прибавляются к общей ширине блока, тогда как W3C с полной определенностью говорит о том, что ширина блока складывается из ширины его содержимого плюс ширина полей и границ. Заметим, что IE5/Mac и броузеры Gecko корректно отображают блочную модель. Поэтому если вам необходимо задать ширину слоя, который содержит поля или границы, разделите его на два, один из которых будет вложен в другой.

Не используйте «nowrap» для слоев

В Netscape и Opera могут возникнуть проблемы при больших размерах шрифта

В IE 5.x есть ошибка CSS, которой можно воспользоваться

IE 5.x интерпретирует комментарии, хотя должен их игнорировать. Это можно использовать для создания некоего подобия «if-then», чтобы обойти в нем некоторые ошибки CSS. Мы использовали этот прием, но потом перешли на методику с использованием свойства inherit. В IE6 этот прием не работает.

#fontChanger {font-size:.8em;//font-size:1em;}

Следите за шириной слоев и таблиц

Установка ширины в 100% может привести к тому, что ширина такого слоя в IE не совпадет с шириной слоя, для которого ширина задана как auto (по умолчанию). Кроме того, для таблицы с width=100% IE5.5 установит ширину равную ширине всего экрана, а вовсе не блока, в который эта таблица вложена. Во избежание вы можете использовать  //width:100% для внешнего блока и width:inherit для самой таблицы.

#topBar{background:#FC0;//width:100%;}
#topBar form{display:inline;}
table.c{font:.8em/1em Arial,Geneva,sans-serif;width:100%;//width:inherit;}

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

У плавающих блоков могут возникать проблемы с директивой clear

Особенно у форм. Во избежание можно заключать блоки в дополнительные контейнеры и указывать clear для них. Хороша также методика, описанная в A List Apart.

Не используйте фиксированную высоту

Броузеры пятых и шестых версий ее просто не поддерживают, равно как и min-height. А IE 5.5 к тому же не понимает min-width, max-width и max-height.

В Opera и Netscape задавайте для форм нулевой отступ (margin:0)

Особенно в плавающих блоках.

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

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

Дополнительная литература

Cascading Style Sheets – Спецификация W3C

CSS Layout Resources – Статьи и учебники по CSS на WebReference

Evolution of a Home Page – статья Kwon Ekstrom

HTML with Style – Учебники и статьи по CSS разметке

Practical CSS Layouts – Полезные советы по CSS от A List Apart – отображение форм без помощи таблиц, навигационные блоки и проч. 

« назад к списку статей

CSS верстка сайтов

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

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

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

Подключение выполняется при помощи следующей конструкции:

<link rel=»stylesheet» type=»text/css» href=»/style.css»>, где
style.css – название файла каскадных таблиц стилей

Такой подход обеспечивает возможность использования одного стиля CSS для множества сайтов.

CSS верстка сайтов производится в специальных визуальных CSS-редакторах или же в обычных текстовых редакторах. Каждая таблица CSS состоит из определенного набора правил, которые в свою очередь состоят из набора селекторов и блока определений. В качестве селектора может выступать любой элемент (тэг) языка разметки (HTML, XHTML, XML). Блок определений состоит из набора свойств тэгов и их значений, отделяется фигурными скобками.

Синтаксис CSS описывается так:

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

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

Приведем пример:

p {
color: black;
font-size: 18px;
}

В данном примере, любой текст, заключенный в тэги <p>, будет черного цвета с размером шрифта 18 пикселей.

Но как поступить, если необходимо задать для некоторых абзацев стиль отображения, отличающийся от общего на странице? CSS верстка сайтов в этом случае предлагает использование классов – class. Класс задает стиль отображения только для тех элементов, к которым он был применен.

В HTML-коде страницы класс для элементов задается так:

<название тэга>

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

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

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

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

К примеру, если необходимо указать цвет, размер шрифта, гарнитуру шрифта сразу для тэгов p, div, h2, то достаточно перечислить селекторы этих тэгов через запятую и присвоить им нужные значения свойств:

div, p , h2 { color:red; font-size:12px; }

Данная запись означает, что текст, содержащийся в элементах div, p и h2 будет отображен шрифтом красного цвета размером в 12 пикселей.

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

Теги:

Уроки обучения работе с HTML и CSS верстке для начинающих, — базовые онлайн-курсы «Смотри Учись»

Список популярных названий классов CSS

Блоки

page — корневой элемент страницы

header — шапка (страницы или элемента)

footer — подвал (страницы или элемента)

section — раздел контента (один из нескольких)

body — основная часть (страницы или элемента)

content — содержимое элемента

sidebar — боковая колонка (страницы или элемента)

aside — блок с дополнительной информацией

widget — виджет, например, в боковой колонке

Раскладка

wrapper, wrap — обёртка, обычно внешняя

inner — внутренняя обёртка

container, holder, box — контейнер

grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col)

row — контейнер в виде строки

col, column — контейнер в виде столбца

Элементы управления

button, btn — кнопка, например, для отправки формы

control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером

dropdown — выпадающий список

Текст

title, subject, heading, headline, caption — заголовок

subtitle — подзаголовок

slogan — слоган

lead, tagline — лид-абзац в тексте

text — текстовый контент

desc — описание, вариант текстового контента

excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее…»

link — ссылка

copyright, copy — копирайт

Списки

list, items — список

item — элемент списка

Изображения

image, img, picture, pic — картинка

icon — иконка

logo — логотип

userpic, avatar — юзерпик, маленькая картинка пользователя

thumbnail, thumb — миниатюра, уменьшенное изображение

Медиавыражения

phone, mobile — мобильные устройства

phablet — телефоны с большим экраном (6-7″)

tablet — планшеты

notebook, laptop — ноутбуки

desktop — настольные компьютеры

Размеры

tiny — маленький, крохотный

small — небольшой

medium — средний

big, large — большой

huge — огромный

narrow — узкий

wide — широкий

Состояния

active, current — активный элемент, например, текущий пункт меню

hidden — скрытый элемент

error — статус ошибки

warning — статус предупреждения

success — статус успешного выполнения задачи

pending — состояние ожидания, например, перед сменой статуса на error или success

Дополнительно

search — поиск

socials — блок иконок соцсетей

advertisement, adv, commercial, promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)

features, benefits — список основных особенностей товара, услуги

slider, carousel — слайдер, интерактивный элемент с прокруткой содержимого

pagination — постраничная навигация

user, author — пользователь, автор записи или комментария

meta — блок с дополнительной информацией, например, блок тегов и даты в посте

cart, basket — корзина

breadcrumbs — навигационная цепочка, «хлебные крошки»

more, all — ссылка на полную информацию

modal — модальное (диалоговое) окно

popup — всплывающее окно

tooltip, tip — всплывающие подсказки

preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию

Источник: «Слова, часто используемые в CSS-классах»

Введение в макет CSS — изучение веб-разработки

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

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

• Нормальный расход
• Дисплей свойство
• Flexbox
• Сетка
• Поплавки
• Выбор позиции
• Планка стола
• Многоколонная компоновка

У каждого метода есть свои применения, преимущества и недостатки, и ни один метод не предназначен для использования изолированно.Понимая, для чего предназначен каждый метод, вы сможете понять, какой инструмент макета лучше всего подходит для каждой задачи.

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

  
 Я люблю свою кошку. 


  
 Покупайте корм для кошек. 
  
 Упражнение 
  
 Поднимите настроение, друг 


 Конец! 
  

По умолчанию браузер отображает этот код следующим образом:

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

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

Примечание : Направление, в котором размещается содержимое элемента блока, описывается как Направление блока. Направление блока выполняется вертикально на таком языке, как английский, который имеет режим горизонтального письма. Он будет работать горизонтально на любом языке с вертикальным режимом письма, например на японском.Соответствующее Inline Direction — это направление, в котором будет выполняться встроенное содержимое (например, предложение).

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

Методы, которые могут изменить расположение элементов в CSS, следующие:

• Дисплей свойство — Стандартные значения, такие как block , inline или inline-block , могут изменять поведение элементов в нормальном потоке, например, заставляя элемент уровня блока вести себя как встроенный элемент ( см. раздел Типы блоков CSS для получения дополнительной информации). У нас также есть целые методы компоновки, которые включаются через определенные значения display , например CSS Grid и Flexbox, которые изменяют расположение элементов внутри элемента, для которого они установлены.
• Floats — Применение значения float , такого как left , может привести к тому, что элементы уровня блока будут обтекать одну сторону элемента, подобно тому, как изображения иногда содержат текст вокруг них в макетах журналов.
• Позиция Свойство — Позволяет точно контролировать размещение ящиков внутри других ящиков. статическое Позиционирование является значением по умолчанию в обычном потоке, но вы можете заставить элементы располагаться по-другому, используя другие значения, например, всегда закрепленные в верхней части окна просмотра браузера.
• Макет таблицы — функции, разработанные для стилизации частей таблицы HTML, могут использоваться для элементов, не являющихся таблицами, с использованием display: table и связанных свойств.
• Макет с несколькими столбцами — Свойства макета с несколькими столбцами могут привести к тому, что содержимое блока будет размещено в столбцах, как вы могли бы видеть в газете.

Основными методами создания макета страницы в CSS являются все значения свойства display . Это свойство позволяет нам изменить способ отображения чего-либо по умолчанию.Все в нормальном потоке имеет значение display , используемое по умолчанию для поведения элементов, для которых они установлены. Например, тот факт, что абзацы на английском языке отображаются один под другим, объясняется тем, что они имеют стиль display: block . Если вы создаете ссылку вокруг некоторого текста внутри абзаца, эта ссылка остается внутри остального текста и не переносится на новую строку. Это потому, что элемент — это display: inline по умолчанию.

Вы можете изменить это поведение отображения по умолчанию. Например, элемент

  .wrapper {
  дисплей: гибкий;
}
  

  

  
 Один 
  
 Два 
  
 Три 

  

  .wrapper {
    дисплей: гибкий;
}

.wrapper> div {
    гибкость: 1;
}
  

  

    
 Один 
    
 Два 
    
 Три 

  

  .wrapper {
    дисплей: сетка;
    сетка-шаблон-столбцы: 1fr 1fr 1fr;
    сетка-шаблон-строки: 100 пикселей 100 пикселей;
    сетка-пробел: 10 пикселей;
}
  

  

    
 Один 
    
 Два 
    
 Три 
    
 Четыре 
    
 Пять 
    
 Шесть 

  

  .wrapper {
    дисплей: сетка;
    сетка-шаблон-столбцы: 1fr 1fr 1fr;
    сетка-шаблон-строки: 100 пикселей 100 пикселей;
    сетка-пробел: 10 пикселей;
}

.box1 {
    сетка-столбец: 2/4;
    сетка-ряд: 1;
}

.box2 {
    сетка-столбец: 1;
    сетка-ряд: 1/3;
}

.box3 {
    сетка-ряд: 2;
    сетка-столбец: 3;
}
  

  

    
 Один 
    
 Два 
    
 Три 

  

   
 Пример простого числа с плавающей запятой 
 

 Плавающий 

 Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa в порту. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicleula tellus neque, ac ornare ex malesuada et.In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius Commodo et a urna. Ut id ornare felis, eget fermentum sapien. 

  

  .box {
    плыть налево;
    ширина: 150 пикселей;
    высота: 150 пикселей;
    поле справа: 30 пикселей;
}
  

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

 Я базовый элемент уровня блока. 
 Я базовый элемент уровня блока. 
 Я базовый элемент уровня блока. 
  

  кузов {
  ширина: 500 пикселей;
  маржа: 0 авто;
}

п {
    цвет фона: rgb (207,232,220);
    граница: 2px сплошной rgb (79 185 227);
    отступ: 10 пикселей;
    маржа: 10 пикселей;
    радиус границы: 5 пикселей;
}
  

  .positioned {
  положение: относительное;
  верх: 30 пикселей;
  слева: 30 пикселей;
}  

  .positioned {
  положение: относительное;
  фон: rgba (255,84,104, .3);
  граница: 2px сплошной rgb (255,84,104);
  верх: 30 пикселей;
  слева: 30 пикселей;
}  

 .positioned {
  позиция: абсолютная;
  верх: 30 пикселей;
  слева: 30 пикселей;
}  

  .positioned {
    позиция: абсолютная;
    фон: rgba (255,84,104, .3);
    граница: 2px сплошной rgb (255,84,104);
    верх: 30 пикселей;
    слева: 30 пикселей;
}  

   
 Фиксированное позиционирование 
 

 Исправлено 

 Пункт 1.
 Пункт 2 
 Пункт 3 
  

  .positioned {
    положение: фиксированное;
    верх: 30 пикселей;
    слева: 30 пикселей;
}  

  .positioned {
  положение: липкое;
  верх: 30 пикселей;
  слева: 30 пикселей;
}  

  <форма>
  
 Прежде всего, сообщите нам свое имя и возраст.
  

     Имя: 
    
  
  

     Фамилия: 
    
  
  

     Возраст: 
    
  
  

  html {
  семейство шрифтов: без засечек;
}

форма {
  дисплей: таблица;
  маржа: 0 авто;
}

form div {
  дисплей: таблица-строка;
}

метка формы, ввод формы {
  дисплей: таблица-ячейка;
  нижнее поле: 10 пикселей;
}

form label {
  ширина: 200 пикселей;
  отступ справа: 5%;
  выравнивание текста: вправо;
}

form input {
  ширина: 300 пикселей;
}

form p {
  дисплей: заголовок таблицы;
  caption-side: bottom;
  ширина: 300 пикселей;
  цвет: # 999;
  стиль шрифта: курсив;
}  

  

     
 Многоколоночный макет 
 

    
 Пункт 1. 
    
 Пункт 2 


  

  .container {
        ширина столбца: 200 пикселей;
    }  

   
 Пример простого числа с плавающей запятой 
 

 Плавающий 

 Lorem ipsum dolor sit amet, conctetur adipiscing elit.Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. 

 Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicleula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue.Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius Commodo et a urna. Ut id ornare felis, eget fermentum sapien. 

 Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper conctetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem.Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.