Css верстка: Блочная верстка — css-свойства, которые нужны для оформления блоков

22.12.2018 Разное

Блочная верстка — css-свойства, которые нужны для оформления блоков

От автора: приветствую вас на страницах блога webformyself. Блочная верстка – самый популярный сегодня способ создать шаблон сайта. И таковым он будет оставаться видимо еще долгое время. В связи с этим давайте разбираться, как осуществляется блочная верстка css-свойствами.

Где создаются блоки

Для начала нужно понять, что css не создает блоки – он оформляет их. Сами по себе они формируются в HTML – языке разметки гипертекста. По умолчанию блок по высоте будет занимать место, равное высоте его содержимого. По ширине же он займет все доступное пространство, которое есть в родителе.

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

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

Привычная блочная модель

В своем обычном поведении несколько созданных блоков будут идти сверху вниз друг за другом. Здесь сразу же наблюдается серьезная проблема, не так ли? А как же сделать боковую колонку, как, в конце концов, делают сайты, на которых в одной строке идет 3-5 анонсов новостей, да еще и с картинками? Вот тут нам и приходит на помощь css, с помощью которого расставить элементы на странице можно абсолютно любым образом.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Блочная верстка сайта с помощью css: основные свойства

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

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

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

То абсолютно все блоки получат такую ширину, что нам явно не нужно. Значит, нужно добавить к блоку стилевой класс или идентификатор. Они добавляются с помощью атрибутов class и id, а значением выступает произвольное имя, но начинаться оно должно с английской буквы. Разрешается использовать также цифры, дефис и знак нижнего подчеркивания. Обычно самые важные элементы на странице получают идентификатор (шапка, контент, подвал), а менее важные (пункты меню, заголовки и т.

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

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

<div class = «width height border»>Блок с тремя классами</div>;

И как вы думаете, что теперь с ним произойдет, когда мы запишем такие свойства?

.width{ width: 250px; } .height{ height: 250px; } .border{ border: 10px solid green; }

К блоку применятся все эти правила и теперь какому бы элементу вы не задали, например, класс border, он получит толстую зеленую рамку в 10 пикселей.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Несколько блоков на одной линии

Далее я коротко расскажу о двух важных свойствах, которые позволят блокам располагаться в одну линию. Сразу пример: есть контейнер шириной 1000 пикселей. Ваша задача – впихнуть в него 3 блока шириной по 300 пикселей, чтобы они располагались на одной горизонтальной линии. Как это сделать? Есть два способа.

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

<div class = «block1 inline»></div> <div class = «block2 inline»></div> <div class = «block3 inline»></div>

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

.inline{ display: inline-block; }

Либо так:

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

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

Относительные размеры

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

<div id = «wrapper»> <div id = «content»></div> <div id = «sidebar»></div> </div> #wrapper{ max-width: 1000px; } #content{ width: 66%; } #sidebar{ width: 26%; }

Вот так вот это все примерно реализовывается. Оставшиеся 8% ширины оставим на отступы, допустим. Наш шаблон уже получит определенную адаптивность – он будет сжиматься при уменьшении ширины окна в браузере.

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Правила верстки: адаптивная, блочная, css верстка

Соблюдение правил качественной верстки – это визитная карточка нашей веб студии. Если вам нужна разработка сайта, вы можете заказать сайт компании в веб студии АВАНЗЕТ. Мы выполним все работы под ключ с продвижением и гарантией результата.

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

Для адаптивной вёрстки, важно задавать в параметрах все описанные в требованиях ТЗ размеры экранов. С отдельным вниманием необходимо подготовить для веба cкрипты, стили и изображения. Вёрстка обязательно должна пройти тест на насыщение большим количеством контента, и не ломаться при добавлении большего количества текста.

Верстка сайта стандартными методами имеет преимущества и недостатки

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

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

Дизайн и верстка — дополнительные критерии:

1. В названиях классов и атрибутах нельзя использовать транслит
2. Для стилизации – не разрешается использовать #id
3. Вложенность селекторов не должна быть больше двух
4. Для всех элементов со значением display: inline-block — необходимо явно указывать подходящее CSS-свойство vertical-align
5. В конце перечисления важно указать альтернативные варианты шрифтов и тип семейства
6. CSS-префиксы необходимо располагать в правильном порядке
7. Нужно явно прописать цвет фона для блоков у которых есть фоновые изображения. Цвет фона должен соответствовать основному цвету фонового. Если не прописать цвет фона, то часть текста без картинок может оказаться невидимой.
8. Необходимо, чтобы при наведении или нажатии на элемент, окружающие его блоки не изменяли положения. Ничто не должно «двигаться» просто так
9. Для легкости и быстроты загрузки необходимо минимизировать CSS-код и JavaScript-код.
10. У всех изображений необходимо в тегах <img> прописывать размер
11. Важно все скрипты подключить непосредственно перед тегом </body>
12. Желательно использовать минимум из возможных элементов HTML
13. Отказоустойчивость: необходимо применять подход Progressive Enhancement для возможности работы сайта при отключенном JavaScript.

Заказать разработку сайта

Если вы еще не решили где заказать сайт, познакомьтесь со следующими статьями:

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

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

Чип тюнинг может быть выполнен несколькими способами:

• на чип записывают новое программное обеспечение;
• устанавливается новый чип, на котором присутствует нужное ПО;
• используется чип-приставка.

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

Основные преимущества

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

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

04.01.2018

← Поделиться с друзьями !

Что должен уметь верстальщик — Блог HTML Academy

В нулевых никаких фронтов не было, и человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно. Веб-разработка была маленькой, смешной, но самодостаточной. А потом понеслось.

Верстальщики стали больше писать на JavaScript и начали поглядывать в сторону именования «фронтендер», но всё ещё очень любили делать файлы style.css на десять тысяч строк.

И чем ближе был 2020, тем больше грань размывалась — и теперь нет разработчиков на React, которые не понимают, как сверстать макет и обвязать всё стилями. При этом спрос на чистых верстальщиков ещё остался — им не обязательно в совершенстве владеть JavaScript, а вот глубоко понимать, как быстро, точно и качественно из макета сделать страницу — обязательно.

В этом и заключается суть работы верстальщиков. Они берут у дизайнеров макет (это картинка, на которой нарисован сайт — К.О.) и собирают из него страницу. Пишут HTML, CSS, используют магию гридов, флоатов, какой-нибудь БЭМ. Стараются, в общем, делают. Молодцы.

С другой стороны, HTML сейчас даже в некоторых школах изучают — но отчего-то сразу после школы никто не спешит платить первокурсникам по 500$ за вёрстку. И тут мы приходим к тому, что в 2020 году требуют от верстальщика работодатели.

Мы в HTML Academy работаем над тем, что верстальщики после двух наших интенсивов по вёрстке находили работу, а после интенсива по JavaScript делали это вообще без проблем. И для того, чтобы чему-то обучать, мы должны понять, что требуется рынку сейчас и какие требования выставляет работодатель к верстальщику, чтобы мы могли покрывать такие требования на курсах.

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

Коля Шабалин, автор и преподаватель курсов в Академии, написал скрипт и проанализировал вакансии на hh и Хабр-карьере, выделил требования и посчитал, какие встречаются чаще. Оказалось, что усреднённая вакансия выглядела бы как-то так:

Требуется верстальщик, который:

• Умеет делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами. В вёрстке использует SVG.
• Идеально знает CSS. Использует препроцессор Sass. Знает флексы. Умеет делать CSS-анимации и использует БЭМ. Знает библиотеку Bootstrap.
• Знает HTML. В своей работе использует Сanvas. Шаблонизирует HTML с помощью PUG.
• Использует Git. Умеет работать в GitHub.
• Может натянуть вёрстку на CMS: Bitrix и Wordpress.
• JavaScript пишет с помощью jQuery, но не чурается ES6.
• Умеет автоматизировать свою работу с Node.js, npm-скрипты, Autoprefixer, Gulp или Webрасk.
• Уверенно владеет Photoshop и Illustrator или знает Figma или Sketch.
• Имеет своё портфолио, инициативный, готов пройти испытательный срок

Уроками информатики, как видите, даже не пахнет. Много непонятных слов, давайте разберёмся.

Верстальщический вундерлист

Умение использовать каждую вещь из этого списка немножечко повышает шансы верстальщика найти работу в 2020 году.

Кроссбраузерная вёрстка — это когда сайт во всех браузерах выглядит одинаково. Даже в IE11 (хотя это несколько сложно, учитывая одно из следующих требований).

• SVG — векторный формат изображений, при котором картинки не портятся, если их растянуть.
• Sass — это такая надстройка над CSS. Sass помогает избежать дублирования и структурировать код, в таком виде его легче поддерживать. Но с препроцессорами есть проблемы.
• БЭМ — изобретение Яндекса, чтобы упростить вёрстку и разбить всё на блоки.
• Canvas— сущность в HTML, на которой можно рисовать (люблю объяснять!).
• PUG — шаблонизатор HTML, написанный на JavaScript для Node.js. Нужен, чтобы шаблонизировать. Все же любят шаблоны.
• Git — система контроля версий, чтобы не делать Макет_2_Финальный_СПравками_final_наревью.html. Мы в Академии любим Git и написали про него много статей.
• Натянуть вёрстку на CMS — взять WordPress или какой-нибудь там ещё движок для блога и сверстать страницу его встроенными средствами. Но по макету, чтобы дорого-богато.
• Bootstrap — ещё одна библиотека, чтобы быстро верстать. Её много где используют, но киллерфичей верстальщика может стать понимание, как сверстать «как на бутстрапе», но с нуля.
• jQuery — популярное нечто решение, которое используют, чтобы поудобнее работать с JavaScript. Порог вхождения низкий, запутанность кода — высокая. Вообще, после хороших курсов по JavaScript никакой jQuery будет не нужен, но если он используется в компании, то разобраться будет легко.
• Node.js, npm-скрипты, Autoprefixer, Gulp, Webpack — инструменты, чтобы экономить кучу времени при вёрстке за счёт автоматизации.

Что там с Фотошопом и Иллюстратором

Некоторые ребята говорят, что их всерьёз кто-то использует.

Практика показывает, что все потихоньку переходят на Figma, Sketch и Avocode. Ну то есть Фотошоп и Иллюстратор, конечно, ещё много где, но по сравнению с Фигмой это как заколачивать гвозди дорогущим перегруженным графическим редактором по подписке.

Ну и потом, вспомните Adobe Flash — все постепенно пересядут на нормальную технологию, никуда не денешься.

А портфолио откуда брать?

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

Что об этом всём думают в индустрии?

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

По опыту: нужно точно, быстро и адаптивно.

Точно — значит по макету: надо уметь открыть psd и померить отступы. Быстро — значит код легко изменять и его можно переиспользовать: надо знать препроцессоры и уметь правильно разделить макеты на компоненты (приходит с опытом). Адаптивно то и значит: надо знать про медиа-запросы и уметь нафлексить флексами резиновую вёрстку, или на гридах.

Чтобы собрать своё добро, нужно знать, где скачать Node.js, как скачать пакет из npm и уметь пользоваться Webpack или Gulp (если он ещё не умер): пожать, минифицировать, запустить хот-релоад. И да, Git, нужно выучить десяток базовых команд. Это необходимый минимум.

В идеале нужно освоить базовый JavaScript и React, чтобы верстать компоненты сразу на нём. И вот еще чуть-чуть, и ты уже фронтендер.

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

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

Катя Иванова, перевела бабушку на React.

Что ещё?

Все работодатели хотят, чтобы к ним пришёл опытный верстальщик — для этого берите и верстайте. Можно смотреть на популярные сайты, верстать по бесплатным макетам или хорошим курсам. Как определить, хорошие ли перед вами курсы, я рассказывал в статье «Как получать 100 тысяч за код». Там есть полный список вещей, которые хорошо бы знать веб-разработчику, чтобы повысить шансы на высокую зарплату.

Новая профессия не за горами

Мы перезвоним и расскажем всё о том, как стать верстальщиком.

Нажатие на кнопку — согласие на обработку персональных данных

Пример верстки CSS

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

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

С места в карьер — вот то, что получится в результате:

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

Содержимое

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

• Шапка с названием компании
• Основное содержимое страницы:
  • Собственно текст
  • Навигация
    • Меню разделов
    • Поиск
  • Новостная колонка
• Мета-информация о странице: всякая мелочь вроде копирайтов и контактных email’ов.

Теперь превратим все это в HTML. Вот живая страница с тестовым текстом, которая и будет дальше верстаться. Для удобства восприятия структуры вот ее код без текста:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<title>...</title>
<link rel="stylesheet" href="style.css">

<div><h2>...</h2></div>

<div>

  <div>...</div>

  <div>
    <h3>. ..</h3>
    <ul>
      ...
    </ul>

    <form>
      ...
    </form>
  </div>

  <div>...</div>

</div>

<div>...</div>

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

Вот меня спрашивают, зачем там на странице «рингтоны». Откуда я знаю? Все продают рингтоны, почему мы не должны!?

Валидация

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

Моя точка зрения на относительную бесполезность валидации, возможно, достаточно экстремальна для учебника, поэтому я решил, что эта страница должна таки быть валидной по стандарту HTML 4.01 Strict. Это можно проверить валидатором на W3C.

Вместе с тем, как можно видеть, на этой валидной странице отсутствуют теги <html>, <head>, <body>, нет кучи закрывающих тегов и т.п. Это не ошибка валидатора, это гибкость HTML: многие теги не только закрываются, но и добавляются автоматически. В частности, <title> и <link>, с которых страница начинается, будут помещены в автоматически созданный <head>, все остальное содержимое будет помещено в <body>, и они оба будут заключены в <html>. Так же будут закрыты все <p> и <li>.

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

Верстка

По ходу всей верстки я буду давать ссылки на страницы, которые показывают до чего мы дошли к данному моменту. Но для получения максимального удовольствия я рекомендую делать верстку непосредственно у себя на компьютере по ходу чтения. Скачайте HTML-файл, графику и создайте рядом пустой файл «style.css». Или сразу скачайте весь архив всех шагов.

Организация

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

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

Есть другой способ группировки — когда рядом находится то, что приходится часто одновременно менять:

• цвета
• шрифты
• раскладка
• остальное

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

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

/* Layout ******************/
/* Fonts *******************/
/* Colors ******************/
/* Misc ********************/

Раскладка

Для начала давайте посмотрим еще раз на финальный дизайн. Первая его особенность — это то, что страница фиксированной ширины, и что она находится по центру. Мы используем механизм центрирования из статьи про поток, и для этого нам нужно сначала определиться, что центрировать и внутри чего. Поскольку у нас центрируется вся страница внутри окна, то мы будем центрировать <body> внутри <html>. Код получается удивительно коротким:

body {
  padding:0; margin:0 auto;
  width:700px;
}

Установка ширины очевидна, а margin и padding могут вызвать вопросы. Дело в том, что для совместимости браузеры ставят для <body> отступы по умолчанию. Причем, одни через margin, а другие — через padding. Чаще всего эти отступы не нужны, и их обнуляют. Но поскольку нам нужно центрирование, правая и левая margin устанавливаются в auto.

Следующая неочевидность — это где тут элемент <html>, про который я говорил. Он должен задавать ширину, в которой будет центрироваться <body>, и она должна полностью заполнять окно. Но любой элемент по умолчанию и так занимает по ширине все окно, поэтому что-то специально писать не потребовалось.

Еще одна вещь. Очень, очень часто верстальщики игнорируют элемент <html> напрочь, и вместо этого <body> работает как фоновый элемент, а внутрь него вставляется лишний <div>, который держит содержимое. Не нужно так делать, кроме ухудшения читаемости это не дает ничего.

Теперь займемся блоками с шапкой, основным содержимым и подвалом. Они каждый занимают всю ширину своего контейнера (<body>) и идут один за другим. То есть, опять таки, представляют собой простой поток, и ничего для их позиционирования писать не нужно :-).

Разложим колонки. Для этого можно воспользовать либо абсолютным позиционированием, либо float’ами. Но позиционирование нам, очевидно, не подойдет, потому что высота сайта у нас не фиксирована, а зависит от содержимого. Поэтому — float’ы.

Напомню, в статье про float’ы я описал два механизма их построения: в одном float’ятся все колонки, а в другом одна колонка остается статической. Смысл этого второго варианта проявляется при изменении ширины колонок, но у нас ширина всей страницы фиксирована. Зато второй вариант не дает менять колонки местами. А вот это нам как раз понадобится.

В HTML блоки, которые мы хотим превратить в колонки идут в таком порядке:

1. главная колонка («main»)
2. разделы сайта («sections»)
3. новости («news»)

… а разложить их надо так, чтобы первые две поменялись местами: «sections» слева, а «main» — в середине. Для начала всех их надо заfloat’ить и задать им ширину:

#main {
  float:left; width:55%;
}

#sections {
  float:left; width:20%;
}

#news {
  float:right; width:25%;
}

Теперь перестановка. Помимо позиционирования в CSS есть еще один способ двигать блоки — margin. Чтобы переставить местами «main» и «sections» мы добавим слева первой положительный margin, а второй — отрицательный. Главное — их посчитать.

С «main» все просто: она прижата к левому краю, и ее достаточно сдвинуть на ширину «sections» — 20%. Сама же «sections» стоит справа «main», а значит от левого края ее сейчас отделяет и ширина «main», и отступ в 20%, который мы только что добавили. В итоге, ее надо двигать влево на 20% + 55% = 75%. Промежуточный итог:

#main {
  float:left; width:55%;
  margin-left:20%;
}

#sections {
  float:left; width:20%; margin-left:-75%;
}

#news {
  float:right; width:25%;
}

Промежуточный, потому что у нас есть Internet Explorer, в котором есть баг, который у float’ов, прижатых к краю, удваивает границу, заданную от этого края. Поэтому наши margin-left:20%, заданные колонке «main» превращаются в 40% и ломают всю раскладку. Чтобы это устранить, специально для Internet Explorer’а добавляется отдельное правило с границей, уменьшенной в два раза:

* html #main {
  margin-left:10%;
}

Тут вся соль — в добавленном * html. По правилам CSS вся эта конструкция (* html #main) не должна подходить к элементу «main». Но IE — единственный браузер, у которого это не так, и он это правило воспринимает так же, как просто #main. Вот поэтому этот факт широко используется для того, чтобы писать правила, нужные только для IE. Такое, вот, удачное совпадение багов :-).

Последний штрих, который нам нужен для колонок — это сделать так, чтобы элемент «meta» отодвигался под самую длинную колонку. Для этого у нас удачно есть элемент «content», в котором все три колонки лежат. Сделаем, чтобы он их охватывал (все подробные объяснения — в статье про float’ы):

#content {
  overflow:hidden; width:100%;
}

Настало время посмотреть на то, что получилось к этому моменту.

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

#search {
  position:absolute;
  top:0; right:0;
  margin:20px;
}

В установке margin:20px нет никакой магии, это просто для красоты.

Но это не все. Дело в том, что таким образом форма отнесется к верхнему правому краю окна, а не 700-пиксельного <body>. Чтобы контейнером для позиционирования считался <body>, надо сделать из него «стакан», который я описывал в статье про позиционирование. Оттуда же и рецепт:

body {
  /* ... */
  position:relative;
}

Вот теперь форма будет располагаться в правом верхнем углу <body>, как раз в зоне заголовка.

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

#title {
  background:#FEE;
}

#content {
  background:#EFE;
}

#meta {
  background:#EEF;
}

#search {
  background:#FFE;
}

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

Это проявления вываливания границ элементов <h2> (в заголовке) и <p> (в подвале). Я его описывал в статье про границы в потоке. Давайте от него избавимся:

h2 {
  margin:0; padding:20px;
}

#meta {
  padding:1px 0;
}

Одна маленькая деталь. В первом случае я просто обнулил margin у <h2>, чтобы нечему было вываливаться, а padding нужен просто для красоты, чтобы пространство вокруг текста было. Во втором случае я добавил маленькие незаметные padding’и контейнеру, чтобы отменить вываливание margin’ов <p>. Почему именно так — расскажу дальше.

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

Что нам еще нужно от раскладки — так это один замечательный эффект, который придаст ей более завершенный вид. Если на странице мало текста (попробуйте просто уменьшить шрифт в браузере на пару размеров), то видно, что подвал начинается сразу после текста, и за ним до конца окна много пустого пространства. Это некрасиво. Хочется, чтобы короткая страница занимала всю высоту окна, а подвал всегда прижимался к нижней кромке страницы.

Переведем это все с русского языка напрямую на CSS:

body {
  /* ... */
  min-height:100%;
}

#meta {
  position:absolute; bottom:0;
  width:100%;
}

Но это, конечно, только начало.

Во-первых, значение 100% для <body> означает «100% от высоты родителя». Родитель — <html>, но у него высота не задана вообще, и браузер не в состоянии посчитать эти 100%. Поэтому придется добавить еще правило:

html {
  height:100%;
}

У <html> родителя нет (самый верхний элемент в иерархии), поэтому его 100% берутся от высоты окна, которую браузер всегда точно знает.

С min-height есть еще одна проблема: этого свойства не понимает IE. Однако нас спасет еще один его баг: свойство height обрабатывается неверно и работает как раз, как должен работать min-height. Поэтому воспользуемся знакомым фильтром:

* html body {
  height:100%;
}

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

Сделать это, в общем-то, просто: поставить блоку с колонками («content») нижний padding. Вопрос в том — сколько. Сейчас точная высоты подвала неизвестна, она определяется текстом в нем. Однако мы вполне можем предполагать, что в блоке для всякой мелкой мета-информации не должно быть слишком много текста. Поэтому мы просто зарезервируем под нее достаточно места. Скажем, 40 пикселов. Все это выливается в такие правила:

#meta {
  position:absolute; bottom:0;
  height:40px; width:100%;
  padding:1px 0;
}

#content {
  padding-bottom:42px;
}

42 пиксела снизу «content» — это 40 пикселов высоты подвала и по 1 пикселу его padding’а.

Раскладка готова. Посмотрим на результат.

Шрифты

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

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

Суть способа вкратце такова. Сначала странице (в лице элемента <body>) назначается основной шрифт. Это тот шрифт, которым будет набрано большинство текста. Затем для каждого элемента, в котором шрифт будет отличается от основного, прописываются изменения: другой размер, другая жирность, другое начертание. Причем, размер задается в процентах от размера родительского шрифта. Это позволяет затем удобно менять размер всех шрифтов на странице, изменяя только размер основного.

Итак, основной шрифт:

body {
  font:10pt Tahoma, Sans-Serif;
}

На этой записи стоит остановиться подробно. Свойство font — это сборное свойство для нескольких шрифтовых свойств, точно так же, как, например, свойство margin задает установку всех четырех margin-top, margin-right, margin-bottom, margin-left.

У font структура чуток сложнее, но если исключить экзотику, то оно выглядит так:

font: <курсивность> <жирность> <размер> <список гарнитур>;

Значения можно пропускать, но не менять местами. Таким образом, наш «font:10pt Tahoma, Sans-Serif» переводится на русский язык как «некрусивная нежирная Tahoma размером 10 пунктов». «Sans-serif» означает, что если шрифта Tahoma на компьютере не будет, браузер возьмет шрифт, который у него в установках назначен как шрифт без засечек.

Дальше идем по блокам страницы и меняем шрифты. Шапка, потом заголовок внутри главной области страницы:

h2 {
  font-size:180%;
  letter-spacing:1px;
}

#main h3 {
  font-size:130%;
}

Обращаю внимание, что при изменениях какой-то одной характеристики шрифта уже нельзя пользоваться свойством font, потому что оно задает весь шрифт полностью. «font:180%» означает «некурсивный нежирный шрифт по умолчанию размером 180%», и наша установка гарнитуры Tahoma тут собьется.

Установка letter-spacing:1px увеличивает на один пиксел расстояние между буквами. Это чисто стилистическая штука, мне показалось, что так заголовок выглядит более э-э-э… амбициозно! Это значение может быть и отрицательным — тогда буквы будут стоять плотнее.

Дальше зададим одинаковые шрифты для левой и правой колонок и их основных заголовков:

#sections,
#news {
  font-size:80%;
}

#sections h3,
#news h3 {
  font-size:125%; font-weight:bold;
  text-transform:uppercase;
}

Тут стоит обратить внимание на размер шрифта в заголовках. Проценты размера шрифта всегда считаются от размера шрифта родителя. Поэтому 125% здесь берутся не от 10pt основного шрифта, а от шрифта блоков «news» и «sections». Его даже нетрудно посчитать: 80% от 10pt — это 8pt. 125% от 8pt — это 10pt.

Определим остальные шрифты, тут уже нет никаких загадок:

#news h4 {
  font-size:100%; font-weight:bold;
}

#meta {
  font-size:70%;
}

#search input,
#search button {
  font-size:90%;
}

Удачно, что в форме поиска у нас мало элементов, поэтому их все (оба) можно однозначно определить просто по названию тега. Если туда добавится какой-нибудь <input type="checkbox">, то придется их обвешивать отличительными признаками. Но раз у нас такого нет, не будем мусорить HTML.

Итак, со шрифтами закончили.

Цвета и декор

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

Заголовок и подвал

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

#title {
  background:url(title-bg.png) #45F left top repeat-x;
  color:white;
}

#meta,
#meta a {
  background:#45F;
  color:white;
}

#search {
  color:white;
}

На примере заголовка расскажу про свойство «background«. Это тоже сборное свойство (как font), и оно задает такие параметры:

background:<картинка> <цвет> <расположение> <повтор>;

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

Градиент нарисован на картинке размерами 10х50:

Она располагается в левом верхнем углу («left top«) и повторяется по горизонтали («repeat-x«).

Обратите внимание, что картинка градиента по высоте не закрывает весь блок заголовка. Для того, чтобы там не зияла пустота, в свойстве background указан еще и цвет (#45F), который появляется везде, где картинки нет (а также в прозрачных областях картинки, если они есть). Цвет этот выбран, конечно, совпадающим с нижней частью градиента.

Формат цвета с тремя цифрами #45F — это сокращенная запись, эквивалентна значению #4455FF

Теперь надо добавить в заголовок эксклюзивный дизайнерский фирменный логотип. Он тоже задается в виде фоновой картинки, но мы не можем ее привязать к блоку «title», потому что там фоновая картинка уже есть (а задать их несколько в текущей версии CSS нельзя). Но у нас в заголовке есть еще один элемент — <h2>, который вложен в блок заголовка.

Очень удобно, что он полностью заполняет «title», не оставляя вокруг себя свободного места. Так вышло как раз потому, что когда мы устраняли проваливание границ, то заменили все margin’ы вне <h2> на padding’и внутри <h2>. И теперь, когда у нас есть совпадающие по размеру два блока, очень удобно вешать на них фоновые картинки и располагать в точности, как нам надо.

Вот сама картинка логотипа:

Код:

h2 {
  background:url(logo.png) left top no-repeat;
  padding-left:60px;
}

Пара пояснений. Картинка располагается точно в левом верхнем углу для того, чтобы ее градиентный фон визуально сливался с фоном блока «title». Если бы их расположение не совпадало, совместить градиенты было бы проблемой.

Отступ в 60 пикселов — это фактически место под картинку. Это очень распространенный способ навешивания оформительских картинок рядом с элементами: назначить картинку фоном и подвинуть содержимое padding’ом.

Осталось привести в порядок форму поиска. Она должна быть слегка поменьше. Чтобы добиться этого эффекта мы уберем у абзацев внутри нее все отступы и уменьшим текстовое поле:

#search p {
  margin:0;
}

#search input {
  width:10em;
}

Все просто. Посмотрим, что получилось.

Заголовок и форма выглядят слегка плохо в IE и, на этот раз, еще и Опере. Сначала разберемся с первым.

Во-первых, не видно логотипа. Исправляется эта штука совершенно магическим методом:

* html h2 {
  height:1%;
}

Высота тут, конечно, ни при чем. Это просто одно из свойств IE, которое в данном случае не оказывает никакого прямого действия, зато «чинит» странное поведение блоков. Еще такими же «целительными» свойствами обладают width:100%, position:relative, zoom:1. Этот метод называется «holly hack».

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

Во-вторых, кнопка «Искать» переносится на другую строку. Запретим переносы в абзацах:

* html #search p {
  white-space:nowrap;
}

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

* html #search button {
  margin-left:4px;
}

В Опере проблема другого плана. Элемент <button> здесь разрывает абзац, в котором лежит вместе с текстовым полем, и, соответственно, переносится ниже. В общем-то, починить это можно довольно просто: поменять <p> на <div>. Но я этот баг обнаружил слишком поздно, он был уже в нескольких пошаговых файлах, поэтому правку этого я оставляю в качестве самостоятельного упражнения читателям :-). Кроме того, у меня есть подозрение, что в новой Опере 9 это могли уж и исправить сами разработчики.

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

Осталась здесь последняя мелкая стилизация — уменьшить отступы между абзацами в подвале. Тут все совсем просто:

#meta p {
  margin:5px;
}

Колонки

Под колонками у нас есть сложный узор — градиент и пунктирные линии, поэтому проще всего использовать для их визуализации метод «faux columns», на который я ссылался в статье про float’ы. Для этого делается фоновая картинка шириной 700 пикселов, на которой рисуются градиент и пунктиры по ширине колонок (140 пикселов левая колонка, 175 — правая).

А затем задается фоном к <body> с повторением по вертикали:

body {
  background:url(content-bg.png) white left top repeat-y;
  color:black;
}

… (заодно тут же и цвета фона и текста).

Посмотрим на колонки.

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

Чтобы это поведение отменить, достаточно дать какой-нибудь фон элементу <html>, тогда уже он назначится окну, а фон <body> встанет на место.

Для фона окна я обожаю фоновые узоры :-). Кроме того, в последнее время это, кажется, модно.

html {
  background:url(window-bg.png) #EEE;
}

Отсутствие всяких «left top no-repeat» означает «заполнить все». При этом цвет #EEE вообще не будет виден, потому что картинка узора полностью непрозрачна (серая по белому). Но он будет виден тогда, когда картинка узора еще не загружена или если в браузере отключены картинки. Сам оттенок подобран так, чтобы примерно походить по насыщенности на узор.

Вот теперь колонки должны выглядеть прилично.

Левая колонка

Для начала, мне подумалось, что заголовок «Разделы» в левой колонке будет лишним (эдакий дизайнерский ход). Поэтому он просто убирается:

#sections h3 {
  display:none;
}

Следующий объект стилизации — меню. Оно задано списком <ul> и оттого сдвинуто вправо и имеет буллиты у каждого пункта. Нам всего этого не надо:

#sections ul {
  list-style:none;
  margin:50px 0; padding:0;
}

list-style:none отключает буллиты, а всевозможные отступы и границы мы полностью переопределяем: с боков их нет, а сверху и снизу списка есть по 50 пикселов. Задание одновременно и margin’а, и padding’а нужно для того, чтобы убрать отступы по умолчанию, которые разные браузеры задают кто через одно, кто через другое.

Разобравшись с отступами, расцветим сами элементы:

/* Colors ******************/

#sections li a {
  background:#293499;
  color:white;
  border-color:white;
}

#sections li a:hover {
  background:#D00;
}

/* Misc ********************/

#sections li a {
  display:block;
  margin:5px 0; padding:2px 5px;
  border-style:solid; border-width:1px 0;
  text-decoration:none;
}

На что тут обратить внимание:

• Не только цвета фона и текста, но и рамок вынесены в раздел цветов, а вот толщина и стиль рамки задается в декоре.
• Цвета текста задаются элементу <a> внутри <li>. Это из-за того, что браузер по умолчанию красит ссылки в синиц цвет, а не в цвет окружающего текста. Если белый цвет назначить на <li>, то <a> все равно останется синим.
• Конструкция a:hover работает, когда над <a> находится мышка. В этом случае мы подкрашиваем ссылку красным фоном.
• display:block для ссылки нужен для того, чтобы она, как положено блочному элементу, заняла всю ширину <li>, и площадь ссылки была не только над буквами, но занимала весь элемент списка.

Левая колонка готова.

Тут нас традиционнно подводит IE, у которого вертикальное расстояние между элементами списка сильно больше, чем надо. Это похоже на какие-то лишние отступы, и чинится уже знакомым «holly hack’ом»:

* html #sections li a {
  height:1%;
}

Колонка новостей

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

/* Colors ******************/

#news h3 {
  background:url(news-head-bg.png) #DDE6FF left top repeat-x;
}

/* Misc ********************/

#news h3 {
  margin:0;
  padding:10px;
}

Дальше впишем даты новостей в начало абзацев и дадим им отступы друг от друга и от краев колонки:

#news h4 {
  float:left; 
  margin:0 5px;
}

#news p {
  margin:20px 5px;
}

Тут может возникнуть вопрос, почему отступ по краям внутри колонки задается ее внутренним элементам, а не самой колонке? Во-первых, потому что одному из элементов — главному заголовку новостей (<h3>) — этот отступ не нужен. А во-вторых, если колонке, которой задана ширина, проставить отступы, то они ее расширят, она перестанет умещаться в оставленные ей в раскладке 25%, и раскладка сломается.

Это, можно сказать, правило: надо всеми силами избегать назначение декоративных отступов и рамок главным блокам раскладки. Иначе замучаетесь отлаживать.

Посмотрим, как теперь выглядят новости.

У нас остались две маленькие проблемы в этой колонке. Первая — вспомним, что IE удваивает отступ для float’ов, поэтому даты новостей слегка смещены дальше, чем надо. Быстро чиним:

* html #news h4 {
  margin-left:2.5px;
}

Другая проблема в том, что дата первой новости прилипает к низу общего заголовка новостей. Вообще-то, так и должно было произойти, потому что ни у заголовка, ни у даты нет вертикальных margin’ов. У других дат такой проблемы нет, потому что перед каждой из них идет абзац (<p>), у которого и снизу, и сверху есть margin в 20 пикселов.

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

#news h3 {
  margin:0 0 20px 0;
  padding:10px;
}

После всего проделанного, думаю, правила для ссылок «Подробнее…» со стрелочкам в объяснениях не нуждаются::

/* Colors ******************/

#news a {
  color:#D00;
}

/* Misc ********************/

#news a {
  background:url(red-arrow.png) right center no-repeat;
  padding-right:13px;
}

* html #news a {
  padding-left:1px;
}

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

Главная колонка

В главной колонке дел совсем немного. Стили заголовка и абзацев простые:

/* Colors ******************/

#main h3 {
  color:#293499;
}

/* Misc ********************/

#main h3,
#main p {
  margin-left:15px;
  margin-right:15px;
}

#main h3 {
  margin-top:20px; margin-bottom:10px;
}

Ну и иллюстрацию слегка облагородить: сдвинуть влево и добавить рамочку фирменного синего цвета. Чтобы не делать единый стиль для любых картинок в тексте (у них ведь может быть разное назначение), я заранее назначил этой картинке отличительный признак — класс с названием «picture». И в CSS мы будем стилизовать именно его:

/* Colors ******************/

#main .picture {
  border-color:#45F;
}

/* Misc ********************/

#main .picture {
  float:left; 
  padding:5px; 
  border-style:solid; border-width:1px;
  margin:0 15px 15px 0;
}

Все

Ну вот, кажется, готово :-).

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

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

Эта статья — часть находящегося в процессе написания цикла под рабочим названием «Учебник». Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории «Учебник», где они сейчас собраны в обратном хронологическом порядке.

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

Хотите стать фронтенд-разработчиком?

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

Мы составили курс, который включает всю важную информацию, необходимую для достижения вашей цели.

Начать

Перед запуском этого модуля у вас уже должно быть:

1. Базовые знания HTML, как описано в разделе «Введение в HTML».
2. Ознакомьтесь с основами CSS, как описано во введении в CSS.
3. Узнайте, как стилизовать коробки.

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

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

Введение в макет CSS

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

Нормальный расход

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

Flexbox

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

Сетки

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

Поплавки

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

Выбор позиции

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

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

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

Адаптивный дизайн

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

Руководство по медиа-запросам для новичков

Медиа-запрос CSS дает вам возможность применять CSS только тогда, когда среда браузера и устройства соответствует заданному вами правилу, например, «область просмотра шире 480 пикселей». Медиа-запросы являются ключевой частью адаптивного веб-дизайна, поскольку они позволяют создавать различные макеты в зависимости от размера области просмотра, но их также можно использовать для обнаружения других вещей в среде, в которой работает ваш сайт, например, пользователь использует сенсорный экран, а не мышь.В этом уроке вы сначала узнаете о синтаксисе, используемом в медиа-запросах, а затем перейдете к их использованию в отработанном примере, показывающем, как можно сделать простой дизайн адаптивным.

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

Системы сетки

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

Поддержка старых браузеров

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

Оценка: Основное понимание макета

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

Практические примеры размещения

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

Макет CSS — Веб-разработка အကြောင်း လေ့လာခြင်း

Хотите стать фронтенд-разработчиком?

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

Мы составили курс, который включает всю важную информацию, необходимую для достижения вашей цели.

Начать

Перед запуском этого модуля у вас уже должно быть:

1. Базовые знания HTML, как описано в разделе «Введение в HTML».
2. Ознакомьтесь с основами CSS, как описано во введении в CSS.
3. Узнайте, как стилизовать коробки.

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

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

Введение в макет CSS

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

Нормальный расход

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

Flexbox

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

Сетки

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

Поплавки

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

Выбор позиции

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

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

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

Адаптивный дизайн

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

Руководство по медиа-запросам для новичков

Медиа-запрос CSS дает вам возможность применять CSS только тогда, когда среда браузера и устройства соответствует заданному вами правилу, например, «область просмотра шире 480 пикселей». Медиа-запросы являются ключевой частью адаптивного веб-дизайна, поскольку они позволяют создавать различные макеты в зависимости от размера области просмотра, но их также можно использовать для обнаружения других вещей в среде, в которой работает ваш сайт, например, пользователь использует сенсорный экран, а не мышь.В этом уроке вы сначала узнаете о синтаксисе, используемом в медиа-запросах, а затем перейдете к их использованию в отработанном примере, показывающем, как можно сделать простой дизайн адаптивным.

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

Системы сетки

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

Поддержка старых браузеров

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

Оценка: Основное понимание макета

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

Практические примеры размещения

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

Макет CSS | слои, абсолютное и относительное позиционирование и плавающие элементы

Путь // www.yourhtmlsource.com → Таблицы стилей → МАКЕТ

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

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

Навигация по страницам:
Работа с div · Плавающие элементы | CSS позиционирование · Абсолютное позиционирование · Размещение слоев · Относительное позиционирование | Горизонтальное центрирование

Эта страница последний раз обновлялась 21.08.2012

Работа с div

Элемент

Сначала вы указываете позицию слоя , затем его размеры (что является необязательным, размер слоя изменится сам). Если вы хотите придать цвет фону слоя, добавьте background-color: red; атрибут вместе с остальной частью вашего кода CSS.Как обычно, вы можете использовать веб-безопасные цвета или именованные цвета.

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

Чтобы слои перекрывали друг друга, вам необходимо использовать команду z-index .Добавьте z-index: 1 с кодом позиционирования, и этот элемент появится поверх всего без этой команды. Если вы хотите, чтобы что-то еще проходило и через этот слой, добавьте z-index: 2 и так далее. Чем выше индекс, тем ближе div к началу страницы.

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

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

Относительное позиционирование

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

Ну вот несколько слов (несколько слов)

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

несколько слов

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

Чтобы переопределить унаследованное свойство позиции и снова сделать элемент обычной частью страницы, установите для него значение position: static.

Горизонтальное центрирование

Центрирование блока div или любого другого элемента уровня блока по горизонтали является особым случаем для макета CSS, тем более что в реализации стандартного способа выполнения в Internet Explorer есть ошибка. Стандартный способ — установить для горизонтальных полей элемента значение auto, например:

#wrapper {ширина: 760 пикселей; маржа: 0 авто; }

Это будет работать в таких браузерах, как Firefox, Safari или Opera. Однако это не повлияет на версии Internet Explorer ниже 7.Однако есть хитрость, которую мы можем использовать, чтобы получить горизонтальное центрирование во всех браузерах. В частности, IE неправильно центрирует элементы уровня блока, если к элементу, в котором они содержатся, применено text-align: center. Таким образом, мы можем применить это свойство к элементу body , и все элементы внутри него будут центрированы.

тело {выравнивание текста: центр; }

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

тело {выравнивание текста: центр; }
#wrapper {ширина: 760 пикселей; маржа: 0 авто; выравнивание текста: слева; }

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

#wrapper {позиция: относительная; ширина: 760 пикселей; маржа: 0 авто; выравнивание текста: слева; }

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

Следующая остановка: добавление границ к вашим элементам.

DIV | Дизайн веб-сайта с использованием тега Div, Div против макета таблицы

Чтобы создать веб-сайт или веб-страницу, нам необходимы базовые знания HTML и CSS. HTML вместе с CSS может создать веб-страницу ( в HTML5 ). До XHTML / HTML4 таблицы html использовались для разработки веб-страниц, которые сложно поддерживать и которые сложны по структуре. Также макеты на основе таблиц медленные.

Таблица против Div Layout

CSS Layout с использованием Div

Тег

<стиль>
* {
    маржа: 0;
}
.заворачивать{
ширина: 1200 пикселей;
фон: #ddd;
}



    

        Это обертка полного макета.
 

  

 





<стиль>
* {
маржа: 0;
}
.заворачивать{
ширина: 1200 пикселей;
маржа: авто;
фон: #ddd;
}
.header {
высота: 150 пикселей;
фон: # 333;
}



    

        
 
    

 





<стиль>
* {
маржа: 0;
}
.заворачивать{
ширина: 1200 пикселей;
маржа: авто;
}
.header {
высота: 150 пикселей;
фон: # 333;
}
.nav {
высота: 50 пикселей;
фон: # 000;
}




 
 

Вставка контейнера

Это заголовок

Это панель навигации

 





<стиль>
* {
маржа: 0;
}
.заворачивать{
ширина: 1200 пикселей;
маржа: авто;
фон: #ddd;
}
.header {
высота: 150 пикселей;
фон: # 333;
}
.nav {
высота: 50 пикселей;
фон: # 000;
}
.контейнер{
высота: 768 пикселей;
фон: #ccc;
}