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

Содержание

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

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

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

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

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

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

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

А где же мои картинки — цвета градиенты, спросите вы? А вот так, нет их, закончились 🙂

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

Для того, чтоб блок на прошлой картинки стал выглядеть так, как мы его надизайнили, мы напишем к нему стили и скажем нашему HTML использовать созданный нами CSS файл. Выглядит 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> можно назвать своеобразным фундаментом для построения веб-страниц. Изначально он ничем не выделяется внешне, кроме разве что того факта, что это блочный элемент, который по умолчанию занимает всю ширину документа, а следующий за ним элемент начинается с новой строки.

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

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

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

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

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

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

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


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

Продвинутая 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 и нашли несколько элегантных уловок для их обхода. Ниже следует наша пошаговая инструкция, с помощью которой вы можете повторить наш подвиг.

Вступление

В статье Эволюция домашней странички Andy King бросил вызов читателям, предложив им воспроизвести табличную верстку WebRef с помощью CSS. Kwon Ekstrom предложил решение, которое работало, но только в ограниченном наборе броузеров. После исследования его проекта я нашел в нем некоторые несообразности, которые попытался решить. Несколько месяцев Andy, Kwon и я не покладая рук трудились над дизайном WebRef.

Основной нашей целью было создать 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 верстка сайтов позволяет гибко управлять изменением свойств элементов при взаимодействии с пользователями сайтов (при нажатии кнопкой мыши, при наведении курсора).

Теги:

верстка сайтов, css верстка, css верстка сайтов, таблицы стилей, каскадные таблицы стилей

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

Раздел 1: Введение

Лекция 1.1 Что такое верстка? 10:06
Лекция 1.2 Необходимое ПО 15:30

Раздел 2: HTML

Лекция 2.1 Что же такое HTML? 11:20
Лекция 2.2 Создание HTML-страницы 13:36
Лекция 2.3 Работа с текстом в HTML 13:30
Лекция 2.4 Работа со списками в HTML 6:37
Лекция 2.5 Работа с изображениями в HTML 14:03
Лекция 2.6 Работа с ссылка в HTML 11:55
Лекция 2.7 Работа с таблицами в HTML 17:57
Лекция 2.8 Работа с формами в HTML 21:55
Лекция 2.9 Работа с блоками 8:36
Лекция 2.10 Спецсимволы 7:38

Раздел 3: Первая верстка

Лекция 3.1 Знакомство с шаблоном 6:43
Лекция 3.2 Создание структуры HTML-кода 8:55
Лекция 3.3 Реализация структуры HTML-кода 11:35
Лекция 3.4 Кроссбраузерность 9:50
Лекция 3.5 Адаптация под разные разрешения экрана 13:35
Лекция 3.6 Проверка валидности 7:45

Раздел 4: CSS

Лекция 4.1 Что такое CSS? 3:48
Лекция 4.2 Синтаксис CSS 11:26
Лекция 4.3 Подключение стилей к странице 13:19
Лекция 4.4 Селектор по элементу 8:00
Лекция 4.5 Контекстный селектор 8:14
Лекция 4.6 Селектор CLASS 9:49
Лекция 4.7 Селектор по ID 5:39
Лекция 4.8 Селектор по параметру 6:21
Лекция 4.9 Псевдоэлементы 7:52
Лекция 4.10 Принцип наследования 8:45

Раздел 5: Основной набор CSS-свойств

Лекция 5.1 Задание вида текста 15:59
Лекция 5.2 Задание цвета 9:05
Лекция 5.3 Задание рамки 8:23
Лекция 5.4 Задание фона 10:22
Лекция 5.5 Задание отступов и полей 13:34
Лекция 5.6 Плавающие блоки 10:34
Лекция 5.7 Выравнивание 5:31
Лекция 5.8 Некоторые псевдоэлементы 11:13

Раздел 6: Блочная верстка

Лекция 6.1 Знакомство с шаблоном 6:07
Лекция 6.2 Подготовка к верстке 6:47
Лекция 6.3 Шапка и фон 17:23
Лекция 6.4 Центральная часть сайта 15:30
Лекция 6.5 Подвал 4:43
Лекция 6.6 Кроссбраузерность 13:24
Лекция 6.7 Адаптация под разные разрешения экрана 6:25
Лекция 6.8 Проверка валидности 15:37

Раздел 7: Верстка реального сайта

Лекция 7.1 Знакомство с шаблоном 5:58
Лекция 7.2 Нарезаем шаблон 10:42
Лекция 7.3 Голова документа 6:16
Лекция 7.4 Добавление логотипа и контактов 12:53
Лекция 7.5 Верхнее меню 18:17
Лекция 7.6 Шапка сайта 10:41
Лекция 7.7 Меню и форма поиска 19:41
Лекция 7.8 Таблица с товарами 22:58
Лекция 7.9 Нумерация страниц 13:45
Лекция 7.10 Подвал 12:11
Лекция 7.11 Кроссбраузерность 10:46
Лекция 7.12 Адаптация 15:50
Лекция 7.13 Проверка сайта под разными разрешениями 6:54
Лекция 7.14 Проверка валидности 4:52

Раздел 8: Заключение

Лекция 8.1 Подводим итоги 3:10
Лекция 8.2 Заключение 2:56

Раздел 9: Бонусы: Как заработать, верстая сайты

Лекция 9.1 Где найти заказчика? 6:51
Лекция 9.2 Важные нюансы и поиск заказчика 10:23
Лекция 9.3 Как правильно писать заказчику 7:13

Список популярных названий классов 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, которые мы уже затронули в предыдущих модулях, например, различные отображают значения , и представлены некоторые концепции, которые мы рассмотрим в этом модуле.

Предварительные требования: Основы HTML (изучение "Введение в HTML") и представление о том, как работает 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 по умолчанию.

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

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

    Помимо возможности изменить представление по умолчанию, превратив элемент из block в inline и наоборот, есть несколько более крупных методов макета, которые начинаются со значения display . Однако при их использовании обычно требуется вызывать дополнительные свойства. Два значения, наиболее важные для наших целей при обсуждении макета, - это display: flex и display: grid .

    Flexbox - это краткое название модуля Flexible Box Layout, разработанного для упрощения размещения объектов в одном измерении - в виде строки или столбца. Чтобы использовать flexbox, вы применяете display: flex к родительскому элементу элементов, которые вы хотите разместить; все его прямые потомки становятся гибкими элементами. Мы можем убедиться в этом на простом примере.

    Разметка HTML ниже дает нам содержащий элемент с классом оболочки , внутри которого находятся три элемента

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

    Однако, если мы добавим display: flex к родительскому элементу, три элемента теперь выстраиваются в столбцы. Это связано с тем, что они становятся гибкими элементами и на них влияют некоторые начальные значения, которые flexbox устанавливает в гибком контейнере. Они отображаются в строке, потому что начальное значение flex-direction , установленное для их родительского элемента, - это строка . Кажется, что все они растягиваются до высоты самого высокого элемента, потому что начальное значение свойства align-items , установленного для их родительского элемента, равно stretch .Это означает, что элементы растягиваются до высоты гибкого контейнера, которая в данном случае определяется самым высоким элементом. Все элементы выстраиваются в линию в начале контейнера, оставляя лишнее пространство в конце ряда.

      .wrapper {
      дисплей: гибкий;
    }
      
      
    Один
    Два
    Три

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

    В качестве простого примера мы можем добавить свойство flex ко всем нашим дочерним элементам со значением 1 . Это приведет к тому, что все предметы будут расти и заполнять контейнер, а не оставлять место в конце. Если места будет больше, то предметы станут шире; если будет меньше места, они станут уже.Кроме того, если вы добавите еще один элемент в разметку, все элементы станут меньше, чтобы освободить для него место - они будут регулировать размер, чтобы занимать такое же количество места, независимо от того, что это такое.

      .wrapper {
        дисплей: гибкий;
    }
    
    .wrapper> div {
        гибкость: 1;
    }
      
      
    Один
    Два
    Три

    Примечание : Это было очень краткое введение в то, что возможно в Flexbox, чтобы узнать больше, смотрите нашу статью о Flexbox.

    В то время как flexbox разработан для одномерного макета, Grid Layout предназначен для двух измерений - выстраивания объектов в ряды и столбцы.

    Еще раз, вы можете включить Grid Layout с определенным значением отображения - display: grid . В приведенном ниже примере используется разметка, аналогичная гибкой, с контейнером и некоторыми дочерними элементами. В дополнение к использованию display: grid мы также определяем некоторые дорожки строк и столбцов на родительском элементе, используя свойства grid-template-rows и grid-template-columns соответственно.Мы определили по три столбца по 1fr и две строки по 100px . Мне не нужно устанавливать какие-либо правила для дочерних элементов; они автоматически помещаются в ячейки, созданные нашей сеткой.

      .wrapper {
        дисплей: сетка;
        сетка-шаблон-столбцы: 1fr 1fr 1fr;
        сетка-шаблон-строки: 100 пикселей 100 пикселей;
        сетка-пробел: 10 пикселей;
    }
      
      
    Один
    Два
    Три
    Четыре
    Пять
    Шесть

    Если у вас есть сетка, вы можете явно размещать на ней свои элементы, вместо того, чтобы полагаться на поведение автоматического размещения, показанное выше.Во втором примере ниже мы определили ту же сетку, но на этот раз с тремя дочерними элементами. Мы установили начальную и конечную строки каждого элемента, используя свойства grid-column и grid-row . Это приводит к тому, что элементы занимают несколько дорожек.

      .wrapper {
        дисплей: сетка;
        сетка-шаблон-столбцы: 1fr 1fr 1fr;
        сетка-шаблон-строки: 100 пикселей 100 пикселей;
        сетка-пробел: 10 пикселей;
    }
    
    .box1 {
        сетка-столбец: 2/4;
        сетка-ряд: 1;
    }
    
    .box2 {
        сетка-столбец: 1;
        сетка-ряд: 1/3;
    }
    
    .box3 {
        сетка-ряд: 2;
        сетка-столбец: 3;
    }
      
      
    Один
    Два
    Три

    Примечание : Эти два примера - лишь малая часть возможностей компоновки Grid; чтобы узнать больше, прочтите нашу статью о сетке.

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

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

    Свойство float имеет четыре возможных значения:

    • left - перемещает элемент влево.
    • right - перемещает элемент вправо.
    • нет - указывает, что с плавающей точкой вообще нет. Это значение по умолчанию.
    • inherit - указывает, что значение свойства float должно быть унаследовано от родительского элемента элемента.

    В приведенном ниже примере мы перемещаем

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

      

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

    Плавающий

    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 пикселей;
    }
      

    Примечание : Float полностью объяснены в нашем уроке о свойствах float и clear.До таких методов, как Flexbox и Grid Layout, плавающие элементы использовались как метод создания макетов столбцов. Вы все еще можете встретить эти методы в сети; мы рассмотрим их в уроке, посвященном устаревшим методам компоновки.

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

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

    Есть пять типов позиционирования, о которых вам следует знать:

    • Статическое позиционирование - это значение по умолчанию, которое получает каждый элемент - это просто означает «поместить элемент в его нормальное положение в потоке макета документа - здесь нечего видеть».
    • Относительное позиционирование позволяет изменять положение элемента на странице, перемещая его относительно его положения в нормальном потоке, в том числе заставляя его перекрывать другие элементы на странице.
    • Абсолютное позиционирование полностью перемещает элемент из обычного потока макета страницы, как будто он находится на отдельном слое. Оттуда вы можете зафиксировать его в положении относительно краев элемента страницы (или его ближайшего позиционированного элемента-предка). Это полезно для создания сложных эффектов макета, таких как поля с вкладками, в которых разные панели содержимого располагаются друг над другом и отображаются и скрываются по желанию, или информационные панели, которые по умолчанию не отображаются на экране, но их можно заставить скользить по экрану с помощью кнопка управления.
    • Фиксированное позиционирование очень похоже на абсолютное позиционирование, за исключением того, что оно фиксирует элемент относительно области просмотра браузера, а не другой элемент. Это полезно для создания эффектов, таких как постоянное меню навигации, которое всегда остается в одном и том же месте на экране, пока прокручивается остальной контент.
    • Прикрепленное позиционирование - это новый метод позиционирования, который заставляет элемент действовать как position: static , пока он не достигнет определенного смещения от области просмотра, в этот момент он действует как position: fixed .

    Простой пример позиционирования

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

      

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

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

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

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

    Этот HTML будет стилизован по умолчанию с использованием следующего CSS:

      кузов {
      ширина: 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 пикселей;
    }  

    Абсолютное позиционирование

    Абсолютное позиционирование используется для полного удаления элемента из нормального потока и его размещения с использованием смещений от краев содержащего блока.

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

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

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

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

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

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

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

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

      

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

    Исправлено

    Пункт 1.

    Пункт 2

    Пункт 3

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

    Липкое позиционирование

    Липкое позиционирование - это последний метод позиционирования, которым мы располагаем. Он смешивает статическое позиционирование по умолчанию с фиксированным позиционированием. Когда элемент имеет position: sticky , он будет прокручиваться в обычном потоке, пока не достигнет смещений от области просмотра, которые мы определили.В этот момент он «застревает», как если бы у него была позиция : применено фиксированное значение .

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

    Примечание : чтобы узнать больше о позиционировании, см. Нашу статью «Позиционирование».

    Таблицы

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

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

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

    Рассмотрим пример. Во-первых, простая разметка, которая создает HTML-форму. У каждого элемента ввода есть метка, и мы также включили заголовок внутри абзаца. Каждая пара метка / ввод обернута в

    для целей макета.

      <форма>
      

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

    Теперь CSS для нашего примера. Большая часть CSS довольно обычна, за исключением использования свойства display .

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

    Вы заметите, что абзацу заголовка присвоено display: table-caption; - что заставляет его действовать как таблица - и caption-side: bottom; , чтобы заголовок располагался внизу таблицы для стилизации, даже если разметка находится перед элементами в источнике.Это дает некоторую гибкость.

      html {
      семейство шрифтов: без засечек;
    }
    
    форма {
      дисплей: таблица;
      маржа: 0 авто;
    }
    
    form div {
      дисплей: таблица-строка;
    }
    
    метка формы, ввод формы {
      дисплей: таблица-ячейка;
      нижнее поле: 10 пикселей;
    }
    
    form label {
      ширина: 200 пикселей;
      отступ справа: 5%;
      выравнивание текста: вправо;
    }
    
    form input {
      ширина: 300 пикселей;
    }
    
    form p {
      дисплей: заголовок таблицы;
      caption-side: bottom;
      ширина: 300 пикселей;
      цвет: # 999;
      стиль шрифта: курсив;
    }  

    Это дает нам следующий результат:

    Вы также можете увидеть этот пример вживую на css-tables-example.html (см. также исходный код).

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

    Чтобы превратить блок в мультиколонный контейнер, мы используем либо свойство column-count , которое сообщает браузеру, сколько столбцов мы хотели бы иметь, либо свойство column-width , которое сообщает браузеру заполнить контейнер. с таким количеством столбцов, по крайней мере, этой ширины.

    В приведенном ниже примере мы начинаем с блока HTML внутри содержащего элемента

    с классом контейнера .

      

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

    Пункт 1.

    Пункт 2

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

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

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

    Проверьте свои навыки: фундаментальное понимание макета - изучение веб-разработки

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

    Примечание : вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как CodePen, jsFiddle или Glitch, для работы над задачами.

    Если вы застряли, обратитесь к нам за помощью - см. Раздел «Оценка или дополнительная помощь» внизу этой страницы.

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

    Базовая установка

    Здесь вы можете загрузить HTML, CSS и набор из шести изображений.

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

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

    Если вы не хотите работать локально, то можно использовать такие инструменты, как CodePen или jsFiddle. Вам нужно будет загрузить изображения, используя их функции Assets, и заменить значение в атрибуте src, чтобы оно указывало на новое местоположение изображения.

    Ваши задачи

    Теперь вам нужно реализовать свой макет. Вам необходимо выполнить следующие задачи:

    1. Для отображения элементов навигации в строке с равным расстоянием между элементами.
    2. Панель навигации должна прокручиваться вместе с содержимым, а затем застрять в верхней части окна просмотра, когда достигнет его.
    3. Изображение внутри статьи должно быть обернуто текстом.
    4. Элементы
      и
    5. Фотографии должны отображаться в виде сетки из двух столбцов с промежутком в 1 пиксель между изображениями.

    Вам не нужно будет редактировать HTML, чтобы получить этот макет, и вам следует использовать следующие методы:

    • Позиционирование
    • Поплавок
    • Flexbox
    • Макет сетки CSS

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

    Вы можете попрактиковаться в этих примерах в интерактивных редакторах, упомянутых выше.

    Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите попросить о помощи:

    1. Поместите свою работу в онлайн-редактор с общим доступом, такой как CodePen, jsFiddle или Glitch. Вы можете написать код самостоятельно или использовать файлы начальной точки, ссылки на которые приведены в приведенных выше разделах.
    2. Напишите сообщение с просьбой об оценке и / или помощи в категории «Обучение» на форуме MDN Discourse. Ваш пост должен включать:
      • Описательный заголовок, например «Требуется оценка для фундаментального понимания макета».
      • Подробная информация о том, что вы уже пробовали и что бы вы хотели, чтобы мы сделали, например если вы застряли и нуждаетесь в помощи или хотите пройти оценку.
      • Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в онлайн-редакторе с общим доступом (как указано в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
      • Ссылка на страницу фактического задания или оценки, чтобы мы могли найти вопрос, в котором вам нужна помощь.

    Floats - Изучите веб-разработку

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

    Предварительные требования: Основы HTML (изучение Введение в HTML) и представление о том, как работает CSS (изучение Введение в CSS.)
    Цель: Чтобы узнать, как создавать плавающие функции на веб-страницах, а также использовать свойство clear и другие методы очистки плавающих объектов.

    Свойство float было введено, чтобы позволить веб-разработчикам реализовывать простые макеты, включающие изображение, плавающее внутри текстового столбца, с обтеканием текста слева или справа от него. То, что вы можете получить в макете газеты.

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

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

    В этой статье мы просто сконцентрируемся на правильном использовании поплавков.

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

    Во-первых, мы начнем с простого HTML - добавим в тело HTML следующее, удалив все, что там было раньше:

      

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

    Плавающий

    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.

    Теперь примените следующий CSS к вашему HTML (используя элемент