CSS статьи и примеры верстки на css


Содержание
Илон Маск рекомендует:  scaleZ() в CSS

Верстка сайта — шпаргалка для начинающих

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

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

  • Скорость загрузки веб-сайта;
  • Соответствие стандартам HTML;
  • Адекватность отображения в браузере;
  • Соответствие требованиям поисковых систем;
  • Адаптивность под различные экраны пользователя.

Что такое валидная верстка?

Понятие верстки тесно переплетается с понятием валидности. Валидная верстка веб-сайта — написание HTML и CSS кода, который соответствует стандартам W3C и успешно проходит тест на валидаторе.

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

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

Базовые правила верстки сайта

Каковы основные правила качественной и грамотной верстки?

  1. Вёрстка обязательно должна быть кроссбраузерной для Firefox , Opera , Safari , Google Chrome и Internet Explorer , который в последнее время теряет актуальность. Сайт должен быть протестирован на разных разрешениях монитора, начиная от 1024 на 768;
  2. Вёрстка абсолютно всех страниц сайта должна пройти валидацию. Использование различных CMS, модулей и готовых скриптов, вставка на интернет-ресурс содержимого разных форматов зачастую затрудняют достижение валидности;
  3. Внешний вид свёрстанной страницы должен по максимуму соответствовать дизайну: размеры шрифтов, расстояния между строками, отступы должны соответствовать параметрам psd макета. Достичь пиксельной точности зачастую затруднительно, поэтому допускается отклонение отдельных элементов в пределах 3-6 пикселей;
  4. CSS стили должны быть вынесены в отдельный документ. В HTML коде допустимо только присутствие идентификаторов и классов;
  5. Логотип веб-сайта должен являться ссылкой на главную страницу;
  6. HTML страницы должны содержать комментарии к основным элементам, таким, как меню, заголовок, шапка, контент, футер и т.п.
  7. Имена идентификаторов и классов должны соответствовать назначению и быть понятными интуитивно ( menu , footer , header и т.д.);
  8. В таблицах стилей настоятельно рекомендуется использовать одинаковые единицы измерения для всех величин;
  9. Надписи на кнопках должны быть написаны на одном языке и либо прописными буквами, либо начинаться с заглавной;
  10. Кнопки должны иметь стандартное оформление и быть либо графическими элементами, либо быть настроенными с помощью таблиц стилей;
  11. HTML и CSS код должен быть минимизирован. Следует избегать лишних классов и идентификаторов и использовать свойства наследования;
  12. Заголовки должны быть написаны исключительно с помощью специальных тегов h1 , h2 и т.д;
  13. Атрибуты всех тегов должны быть заключены в кавычки.

Основные подходы к верстке сайта

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

  • Фиксированная верстка . При изменении размера окна браузера блоки не поменяют свою ширину, а на мониторах с низким разрешением экрана появится полоса прокрутки;
  • Резиновая верстка . В зависимости от размера окна браузера, блоки изменят свою ширину;
  • Адаптивная верстка . Воплощается в жизнь благодаря различным скриптам и заточена под определённые разрешения (320, 768, 1024 и т.д.). Изменение размера происходит рывками после того, как определённый уровень достигнут;
  • Отзывчивая верстка . Представляет собой слияние адаптивной и резиновой верстки. Является самой сложной с технической точки зрения, но в то же время самой эффективной;
  • Версия сайта для мобильных устройств . Фактически является созданием другого сайта с другим дизайном, версткой и URL адресом.

Кроме подходов, существуют ещё и различные типы вёрстки.

Табличная верстка

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

Совсем недавно до появления блоков и слоёв это был самый популярный тип вёрстки, имеющий множество преимуществ:

  • Лёгкость в создании колонок, что положительно влияет на поведение при изменении размера окна браузера и позволяет создавать многоколоночные макеты сайта;
  • Склейка изображений. Зачастую рисунки делят на несколько отдельных фрагментов для уменьшения объёма файлов, создания эффекта анимации и т.д. Каждый рисунок помещается в отдельную ячейку таблицы, параметры которой задаются таким образом, чтобы стыков между ячейками видно не было;
  • Поскольку высоту и ширину таблицы можно задавать в процентах, табличная верстка широко применяется при создании резинового макета;
  • В отличие от некоторых CSS параметров, таблицы в разных браузерах отображаются практически идентично, что упрощает создание страниц;
  • Из-за одновременного выравнивания содержимого ячеек таблицы и по вертикали, и по горизонтали, возможности по размещению различных элементов дизайна относительно друг друга и на странице в целом расширяются.

Однако имеет место быть и небольшая ложка дёгтя:

  • Для того чтобы содержимое таблицы корректно отображалось браузером, она не будет показываться до тех пор, пока не будет загружена полностью. Если таблица массивная, загрузка сайта займёт довольно много времени;
  • Слишком громоздкий код из-за иерархической структуры тегов, что повышает сложность внесения изменений в отдельные параметры;
  • Плохая индексация поисковыми роботами. Контент сайта с табличной вёрсткой находится относительно далеко друг от друга, что затрудняет попадание сайта в топ поисковой выдачи.

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

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

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

  • Блочная верстка образует гораздо меньший объём кода, в отличие от верстки таблицами, что не только увеличивает скорость загрузки страницы, но и уменьшает нагрузку на сервер;
  • Удобство изменения дизайна путём правки файла стилей;
  • Преимущества в сфере SEO. Вместо кода в первую очередь распознаётся контент и семантически правильно размечается.
  • Повышенная читабельность кода, что способствует соответствию стандартам валидности;
  • Задачи по нестандартному оформлению и расположению элементов веб-сайта могут быть с лёгкостью реализованы;
  • Возможность создать адаптивный дизайн, который будет корректно отображаться как на стационарных, так и на мобильных устройствах.

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

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

Верстка слоями: преимущества, недостатки, сфера применения

Слои – это такие элементы HTML кода, которые внедряются в страницу сайта наложением друг на друга с пиксельной точностью. Изменение параметров слоёв происходят с помощью JavaScript и VBScript , что позволяет использовать различные эффекты.

Достоинствами вёрстки слоями являются:

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

К недостаткам вёрстки слоями можно отнести:

  • Необходимость наличия довольно глубоких познаний языков и технологий веб-программирования ( VBScript , CSS , JavaScript );
  • Отображение сайта в различных браузерах может также быть различным;
  • С технической точки зрения верстка слоями похожа на позиционирование, однако во избежание проблем с браузерами, тег следует заменять на

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

Страницы со слоями не имеют единого стандарта отображения браузерами, поэтому одна и та же страница в браузерах Opera и Google Chrome может выглядеть по-разному.

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

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

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

CSS урок 14. Блочная верстка сайта

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

  • При работе со слоями или, иначе говоря, блоками и элементами div , основная нагрузка ложится на CSS, т.к. без свойств слои из себя практически ничего не представляют.
  • К сожалению до сих пор существует проблема с кроссбраузерностью при работе с блоками. Т.е. одни и те же свойства дают разный результат в разных браузерах. Для борьбы с такими проблемами существуют так называемые хаки. Хак — это набор приемов, когда отдельным браузерам подается код, который понимается только этим браузером, а остальными игнорируется.

Отличительные черты от табличной верстки

Допустим, необходимо создать шаблон страницы с «шапкой», «подвалом» и двумя колонками.
Отличия:

  1. Высота слоев div ограничена высотой контента:
  2. В случае, когда содержимое слоя превышает его установленную высоту, то браузеры по-разному ведут себя — одни увеличивают высоту слоя под новый контент, а другие, оставляя высоту первоначальной, накладывают контент поверх слоя.
  3. Фиксированный дизайн или
    жесткая блочная верстка (две колонки)

    • Фиксированный макет подразумевает использование слоев заданной ширины, которая определяется разрешением монитора пользователя.
    • Так как наиболее популярным среди пользователей сети является разрешение монитора 1024×768, то желательно ориентироваться именно на него. Общая ширина блоков в таком случае составляет 900–1000 пикселей (небольшая часть пикселей требуется на полосы прокрутки и границы окна браузера).
    • Основной блок с контентом размещается по центру, тогда «свободные» поля по краям неплохо смотрятся даже при большом разрешении монитора.

    Рис.1. Пример фиксированного дизайна

    • «Разбиваем» все основные элементы страницы на блоки следующим образом:
      • блок 1 — слой первый ( ),
      • блок 2 и 3 заключаются в единый блок ( ),
      • блок 2 — слой с меню ( ),
      • блок 3 — слой с контентом ( ),
      • блок 4 — слой с .

    Схематично изобразим расположение блоков:

    Адаптивная верстка (теория).

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

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

    Основные понятия

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

    Что представляет из себя отзывчивый веб-дизайн (responsive web design)? Это прежде всего гибкая, или по другому «резиновая» сетка макета вашего сайта основаная на относительных единицах измерения, которая позволяет использовать один макет для разного типа устройств, гибкие изображения и видеоматериалы, и медиазапросы.

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

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

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

    И так, адаптивный веб-дизайн (adaptive web design) включает в себя гибкую сетку макета сайта, гибкие изображения и видеоматериалы, медиазапросы и прогрессивное улучшение (progressive enhancement).

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

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

    Подготовка к адаптивной верстке

    В настоящее время до сих пор многие сайты созданы для отображения на экранах мониторов, по этой причине мобильные браузеры не отображают страницу на все 100%, а отображают её в виртуальном окне (viewport), которое, как правило, шире экрана устройства. Чтобы страница поместилась на экране устройства мобильные браузеры уменьшают её масштаб (сжимают отображаемый результат, чтобы его можно было увидеть сразу), коэффициент масштабирования зависит от характеристик конкретного устройства. Пользователи при этом могут изменять и масштабировать видимую область, чтобы видеть разные части страницы.

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

    Впервые в мобильной версии браузера Safari появился метатег области видимости (viewport meta tag), который позволяет разработчикам сайтов контролировать как размер окна просмотра, так и масштаб самой страницы. Впоследствии остальные современные мобильные браузеры осуществили поддержку этого метатега, не смотря на то, что в тот момент он не являлся частью какого-либо веб-стандарта.

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

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

    • Атрибут name задает имя документа метаданным, значение «viewport» дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
    • Значение w > атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height .
    • Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

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

    Табличная верстка Блочная верстка
    Значение атрибута Определение
    width Определяет ширину в пикселях области просмотра (значение — положительное целое число или device-width ).
    height Определяет высоту в пикселях области просмотра (значение — положительное целое число или device-height ).
    initial-scale Определяет соотношение между шириной устройства ( device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение — положительное целое число от 0.0 до 10.0.
    minimum-scale Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale ). Значение — положительное целое число от 0.0 до 10.0.
    maximum-scale Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale ). Значение — положительное целое число от 0.0 до 10.0.
    user-scalable Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).

    Приоритет создания стилей

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

    В настоящее время существует два основных подхода:

    • Mobile first — подход при котором разработка сайта начинается и ориентирована на пользователей мобильных устройств. В первую очередь описываются стили, предназначенные для смартфонов, а затем дизайн дорабатывается для планшетных устройств и настольных компьютеров (начинается с размещения основной функции, а затем постепенно добавляются дополнительные элементы для более высоких разрешений, часто это называют progressive enhancement — прогрессивным улучшением). При использовании этого подхода Вы должны учитывать то, что Ваши страницы должны быть оптимизированы, максимально быстро загружаться и отображать важное содержание в первую очередь. Прочая информация должна загружаться и отображаться пользователю по его требованию, страница не должна загружать те ресурсы, которые не потребуются пользователю для получения необходимой информации. Этот подход в источниках упоминают также как content first, по той причине, что контент вашего проекта должен быть тщательно исследован и структурирован, чтобы быть классифицированным на основе важности. Подход mobile first может быть намного дороже, чем подход desktop first из-за более длительной фазы подготовки и опыта, необходимого для создания проекта.
    • Desktop first — подход при котором разработка ведется для для многофункциональных проектов, ориентированных на пользователей настольных компьютеров. В первую очередь описываются стили, предназначенные для компьютеров, а затем дизайн дорабатывается для планшетных устройств и смартфонов. При использовании этого подхода Вы первоначально доводите до максимума и совершенства дизайн и функционал Ваших страниц, а затем адаптируете его под новые разрешения и устройства, удаляя при этом необходимые колонки, перестраиваете стили и позиционируете отдельные блоки, изменяете шрифт и тому подобное. Переход к меньшему разрешению часто называют изящной деградацией — graceful degradation, при которой происходит скрытие и обертывание элементов, пытаясь сохранить при этом как можно больше исходного функционала. Как правило, деградация с настольной версии на мобильную приводит к сбоям в работе пользователей, это связано с тем, что некоторые настольные технологии просто не поддерживаются на мобильных устройствах и должны быть заменены резервным решением, которое, вероятно, будет сложным и дорогостоящим для реализации. Крупные компании зачастую создают дополнительно отдельное приложение для Android или iOS для основных функций, которые будут служить для оптимизации работы мобильных пользователей.

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

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

    Медиазапросы

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

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

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

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

    Ниже представлено отображение этого сайта в режиме устройства в браузере Chrome:

    Что должны изменять медиазапросы?

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

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

    • «Резиновая ширина» — использование фиксированной ширины (свойство w >auto ), или значения в процентах. Это позволит превратить фиксированную сетку макета в резиновую, и независимо от разрешения экрана элемент поместиться на экране, не вызывая при этом переполнение содержимого. Обратите внимание, что в этом случае даже при смене ориентации экрана содержимое элемента просто растянется и подстроится под необходимое разрешение.
    • Изменение количества колонок — в зависимости от разрешения экрана изменяйте количество колонок в макете, например, четыре колонки будут хорошо смотреться на настольных компьютерах и планшетах с альбомной ориентацией, но этот макет не будет подходить для смартфонов, где было бы предпочтительно использовать две колонки и тому подобное.
    • Сужение пустого пространства — по возможности производите сужение внутренних и внешних отступов элементов (margin и padding) для размещения большего количества необходимой информации на небольших экранах, при использовании высоких значений для отступов пользователям мобильных устройств потребуется лишний раз прокручивать содержимое, что может негативно сказаться на визуальном отображении и удобстве при чтении.
    • Изменение навигации — традиционная горизонтальная панель навигации, используемая на большинстве сайтов, по мере сужения экрана будет вызывать переполнение содержимого, или перемещать элементы меню на новые строки, занимая всё больше пространства экрана. В некоторых случаях такое поведение будет допустимо, но в большинстве случаев такой подход не будет решать необходимую задачу. Существует несколько подходов изменения навигации, например, использование отдельной навигации для мобильных устройств, которая будет отображаться при определенном разрешении, а горизонтальная панель при этом будет скрываться, или применение динамических изменений навигации с использованием языка программирования JavaScript и CSS стилей, которые позволят создать оптимальное отображение на устройстве, например, отображать вертикальную навигацию по нажатию на определенную кнопку.
    • Настройка шрифта — при создании медиазапросов обратите внимание на тот момент, что крупные заголовки хорошо смотрятся на мониторах настольных компьютеров, но на мобильных устройствах трудно читаются и могут занимать большое количества пространства. По этой причине необходимо уменьшать размер шрифта для мобильных устройств, а что касается основного текста с информацией, то в этом случае наоборот следует увеличивать размер шрифта для лучшего восприятия информации.
    • Изящная деградация — используйте медиазапросы для того, чтобы скрыть то содержимое страниц сайта, которое по Вашему мнению допустимо явно не отображать пользователям мобильных устройств. Как правило, для этого достаточно указать для необходимых элементов свойство display со значением none .
    • Изменение фоновых изображений — если вы используете растровые изображения, например, формат png в качестве фона для элемента, обратите внимание на такой момент, что при уменьшении разрешения экрана фоновое изображение будет масштабироваться теряя при этом свой изначальный вид. Обратите внимание, что вы можете использовать для необходимого вам элемента другое фоновое изображение меньшего размера, которое будет лучше подходить для определенного размера экрана. Для этих целей изменяйте значение CSS свойства background-image для вставки изображения в качестве фонового для конкретного элемента.

    Подключение медиазапросов

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

    Ранее в этом учебнике мы уже рассматривали такие правила как @font-face , которое позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов», правило @keyframes , которое позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров (или точки) в процессе анимации, и правило @import, оно используется для импорта содержимого CSS файла в текущую таблицу стилей, мы о нем еще поговорим далее в статье.

    Подключение медиазапросов с использованием правила @media

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

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

    Логические операторы

    Вы можете комбинировать медиазапросы с использованием логических операторов:

    Значение Описание
    and Оператор and («И») используется для объединения нескольких медиазапросов в один.
    not Оператор not («Логическое НЕ») обращает результат — если медиазапрос был истинным без «not», то он станет ложным, и наоборот.
    only Оператор only («Только») может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиазапрос (игнорируют), содержащий в себе этот логический оператор.
    , Оператор «,» позволяет объединить несколько медиазапросов через запятую. Если хотя бы один запрос возвращает «true» (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR («ИЛИ» ).

    Устройства (media type)

    Вы можете использовать медиазапросы для конкретных типов устройств:

    Значение Описание
    all Подходит для всех типов устройств. Это значение по умолчанию.
    print Предназначен для печатных страниц и для режима предварительного просмотра печати.
    screen Экраны компьютера.
    speech Речевые синтезаторы, устройства для чтения с экрана (для чтения страниц вслух).

    Мультимедийные функции (media functions)

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

    Значение Описание
    aspect-ratio Соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: aspect-ratio : 5/4 (соотношение пять к четырем).
    color Определяет количество бит на цветовую компоненту устройства вывода. Если устройство не является цветным устройством, то это значение равно нулю. Допускаются только положительные значения. Например, если дисплей использует по 4 бита на красный и синий, а 5 бит на зеленый, то считается, что устройство использует 4 бит на цветовой компонент.
    color-index Количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
    grid Определяет основано ли выходное устройство на сеточной системе (например, терминал «tty» или дисплей телефона с одним фиксированным шрифтом), в этом случае значение будет равно 1, если устройство растровое, то значение будет равно .
    height Задает высоту области просмотра (используются единицы измерения CSS).
    max-aspect-ratio Максимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
    max-color Определяет максимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения.
    max-color-index Максимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
    max-height Задает максимальную высоту области просмотра (используются единицы измерения CSS).
    max-monochrome Указывает максимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
    max-resolution Указывает максимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ).
    max-width Задает максимальную ширину области просмотра (используются единицы измерения CSS).
    min-aspect-ratio Минимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой («/»). Первое число это соотношение пикселей по горизонтали, а второе по вертикали.
    min-color Определяет минимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения.
    min-color-index Минимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются.
    min-height Задает минимальную высоту области просмотра (используются единицы измерения CSS).
    min-monochrome Указывает минимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
    min-resolution Указывает минимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ).
    min-width Задает минимальную ширину области просмотра (используются единицы измерения CSS).
    monochrome Указывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа.
    orientation Определяет, находится ли область просмотра в режиме альбомной ориентации — экран шире, чем высота, или в портретной ориентации — высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: orientation : landscape , а для портретной и orientation : portrait .
    resolution Указывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм ( dpi ), так и в точках на сантиметр ( dpcm ).
    scan Указывает метод сканирования устройства вывода. Слово сканирование, используемое в этом контексте, не относится к сканеру изображений, например к сканеру, используемому для оцифровки фотографии. Скорее, это означает процесс, посредством которого изображение рисуется на телевизионном экране (или другом устройстве). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: череcстрочная развертка — ( interlace ), прогрессивная развертка ( progressive ).
    width Задает ширину области просмотра (используются единицы измерения CSS).

    В настоящее время спецификации Media Queries Level 4 и Media Queries Level 5 включают некоторые улучшения синтаксиса и дополнительно вводят прочие мультимедийные функции, которые имеют ограниченную поддержку и возможно будут либо изменены, либо удалены к тому времени, когда они станут частью живого стандарта. По этой причине мы будем рассматривать в примерах лишь тот синтаксис и те функции, которые активно используются в настоящее время, к ним можно отнести такие как width , min-width , max-width , height , min-height и max-height .

    Подключение медиазапросов с использованием тега

    Вы можете подключать различные стили для различных устройств, используя HTML тег (определяет связь между документом и внешним ресурсом) и его атрибута media:

    Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media .

    Подключение медиазапросов с использованием тега 2. Используя CSS правило @media внутри HTML тега

    Обратите внимание, что при использовании атрибута media тега используется тот же синтаксис, что и при использовании правила @media .

    Подключение медиазапросов с использованием правила @import

    Кроме того, Вы можете использовать правило @import, которое позволяет копировать стили из других CSS файлов:

    Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

    Медиазапросы, используемые в Bootstrap 4

    В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4. Bootstrap это HTML, CSS и Javascript фреймворк для создания адаптивных страниц.


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

    Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width ) используются в Bootstrap 4:

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

    Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width ) используются в Bootstrap 4:

    В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width ):

    Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and («И»), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра.

    Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

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

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

    Коллекция статей, уроков и примеров по HTML и CSS

    Коллекция статей, уроков и примеров по HTML и CSS

    Основы HTML5

    Основы CSS

    Типовые блоки сайта и элементы интерфейса

    Полезные инструкции

    Скрипт звёздного рейтинга для сайта

    MODX — Форма обратной связи (FormIt)

    JavaScript — Создание объектов. Прототипы и наследование

    Слайдер для сайта на CSS и JavaScript

    Bootstrap 3 DateTimePicker — Календарь для input

    Изменить css класс блока и сохранить выбор в куки

    Установка локального веб-сервера на подсистему Windows для Linux

    Как правильно верстать на чистом html css?

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

    Правильно ли написан Bootstrap? Правильно.
    Правильно ли верстать по методологии БЭМ? Правильно.
    Написан ли Bootstrap по методологии БЭМ? Нет.

    Я считаю, что при верстке необходимо придерживаться определенной методологии. Это позволит делать расширяемый и легко поддерживаемый код. Методология должна быть понятна любому специалисту и документирована. А float ты используешь, flex или inline-block — это твои личные пристрастия. То же относится и к инструментам.

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

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

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

    1. Не HTML/CSS, а HTML + CSS

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

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

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

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

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

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

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

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

    2. Вы все ещё Pixel Perfect? Тогда мы идем к вам!

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

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

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

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

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

    3. В Вашем макете должен быть порядок, в частности в цветах и шрифтах.

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

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

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

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

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

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

    Список курсов, статей и книг

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

    Семантическая верстка сайта: HTML5

    Привет, уважаемые читатели блога.

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

    Семантическая верстка в HTML

    Семантика в языкознании означает смысл, значение слова или речевого оборота. Мы уже встречали данный термин, когда рассматривали сбор семантического ядра для сайта. И в том контексте, и в сегодняшней статье определение «семантический» указывает на то, что в основе лежит смысл. А стало быть, семантическая верстка – это верстка, построенная на смысловой структуре. В отличие от так называемой верстки на дивах (div – html-тег), все элементы семантической верстки подчинены смысловой иерархии. И самый наглядный пример для объяснения – это использование тегов заголовков и подзаголовков h1, h2, h3 и т.д.

    Это теги семантической разметки. И если изначально в html для выделения подзаголовков использовались теги или , то сегодня такое акцентирование для заголовков почти не употребляется. Вместо этого теги h1 и h2 вобрали все необходимые функции для выделения названий разделов жирным увеличенным шрифтом. Кроме того, эти теги дают гораздо больше информации о тексте, как самим веб-разработчикам, так и роботам, обрабатывающим веб-страницы. Т.е. ранее html-верстка была более описательной, уделялось внимание внешним атрибутам элементов, которые составляли общую структуру отдельными блоками. В семантической же верстке – основной акцент делается на подчинении структурных элементов общей смысловой иерархии, где каждый блок имеет свое назначение для целого.

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

    Когда каждому структурному элементу сайта соответствует определенный тег, код становится упорядоченным и понятным. При этом описание стилей элементов выводятся в отдельный css-файл. Для того, чтобы увидеть насколько страницы вашего сайта структурированы можно проделать простой эксперимент. Отключите на время в браузере поддержку CSS и JavaScript и посмотрите, где на вашем ресурсе названия статей, содержание, подзаголовки и т.д. Можете ли вы разобраться в структуре вашего сайта, используя только html-разметку?

    Примеры семантической верстки HTML5

    Еще один наглядный пример, где ясно видно отличие семантической верстки от прошлых стандартов html, — использование тега (от английского emphasis – акцент). Тег заменил тег (выделение курсивом). Для тега в файле стилей может задаваться отображение курсивом, подчеркиванием, полужирным. Но значение данного тега – именно акцентирование текста, к примеру, для выделения нового термина. Однако, в случае, когда нужно употребить цитату, в семантической верстке будет уже использоваться тег , хотя ранее оба эти элемента (и новый термин, и цитата) были бы заключены в тег (выделены курсивом).

    А теперь приведем пример, как верстка дивами заменяется семантической.

    сalc() в CSS3. Великолепные возможности для responsive верстки.

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

    Синтаксис css calc

    сalc() позволяет осуществлять простые математические операции:

    и использовать результат вычисления в качестве значений для задания

    • размеров cm , mm , in , pt , pc , px
    • частот Hz , kHz
    • углов deg , grad , rad , turn
    • времени s , ms
    • или любых простых численных значений, используемых в CSS

    Все вычисления осуществляются с соблюдением стандартных правил приоритета операторов.

    Для понимания синтаксиса приведем несколько примеров:

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

    На текущий момент (07.2013) calc поддерживается всеми десктопными браузерами, включая IE9! Из мобильных браузеров, есть проблемы в опере и андройд браузере.

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

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

    Как css calc может облегчить жизнь при верстке?

    Создание любой верстки для веб приложений всегда начинается с назначения размеров и расположения всех основных элементов. При этом, в зависимости от задач проекта и особенностей дизайна, могут использоваться различные сочетания всех единиц измерения (%, px, em, rem). calc позволяет элегантно решать проблемы комбинирования фиксированных и “резиновых” блоков, взаимного расположения абсолютно спозиционированных и/или плавающих элементов, задания размеров без длинных бесконечных дробей (а-ля “42.857142857%”) и многое другое.

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

    • часть элементов должны быть “резиновыми”, т.е. заданы в процентах от ширины или высоты (обычно это основной контент)
    • часть элементов должны быть фиксированной ширины (в зависимости от требований, это могут быть блоки рекламы, меню, банеры, боковые колонки и т.п.).
    • расстояние между блоками может быть как фиксированным (px, em, rem), так и относительным (%)

    Давайте рассмотрим несколько примеров:

    1. Пример 1. Верстка в 2 колонки, обе колонки резиновые по ширине. Левая 70%, правая 30%. Между колонками должно быть некоторое расстояние.
    2. Пример 2. Верстка в 2 колонки, обе колонки резиновые по ширине. Левая 70%, правая 30%. Между колонками должно быть фиксированное расстояние в 20px
    3. Пример 3. Верстка в 2 колонки, правая колонка имеет фиксированную ширину 200px, левая занимает все оставшееся пространство. Между колонками должно быть фиксированное расстояние в 20px
    4. Пример 4. Верстка в 3 колонки, правая и левая колонки имеют фиксированную ширину 150px, центральная занимает все оставшееся пространство. Между колонками должно быть фиксированное расстояние в 20px

    Без calc все примеры, кроме первого, потребуют от Вас создания некоторых вложенных контейнеров, дополнительных margin и padding, float-ов и т.п.

    А вот как просто все становится с использованием CSS calc()

    HTML (упрощено для понимания)

    Красивая запись бесконечных дробей с CSS calc

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

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

    Как вы уже поняли, ширина каждой кнопки составит в процентах 100/7 = 14.2857142857 и в CSS это будет выглядеть так:

    Используя css calc , то же самое можно записать красиво и понятно:

    Пробелы в выражениях CSS calc

    Пожалуйста, обратите внимание на то, что пробелы calc(100% — 300px — 20px — 20px); по обе стороны от математических операторов обязательны.

    Возможные проблемы

    В Safari 6 (десктоп) и мобильном Safari (iOS6) при совместном использовании CSS calc и CSS transitions в некоторых случаях случается полный крэш браузера. И это можно обойти только с помощью магии, да и то не всегда.

    Что дальше?

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

    Верстка HTML / CSS

    Содержание

    Общее

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

    Что такое HTML?

    HTML (Hyper Text Markup Language) — это язык текстовой разметки и он является единственным языком в своем роде, который воспринимают все без исключения современные браузеры, так как это основа основ . Что есть WEB страница? Все WEB страницы – это простой набор HTML команд или код. При помощи HTML разметки другие языки программирования выполняют команды на сервере.

    Изобретателем данного чуда стал британец Тим Бернерс-Ли. Он изобрел HTML, HTTP, URL. По своей сути, это основа Интернет, гиперссылки в web документах и между сайтами – это чисто его изобретение, Бернерса-Ли. Первые наработки в этой области, Тим демонстрировал в далеком 1989 году, когда швейцарская компания CERN приютила его у себя. А в бурный период становления Интернет с 1991 по 1993 год именно им были выпущены спецификации первых протоколов HTTP и HTML.

    Что такое CSS?

    CSS (Cascading Style Sheets) в принципе нельзя считать отдельным языком программирования, но если считать, что Javascript это встраиваемый элемент в HTML, и имеет своё расширение файлов, и считается языком программирования, и отдельным направлением, то CSS также можно расценивать как отдельное web направление программирования, пусть и с большой натяжкой.

    Итак, что же такое CSS? Это дальнейшее развитие HTML, которое облегчает представление информации на сайте, существенно лучше разделяет и оформляет информацию на web сайте. CSS еще называют «таблицами стилей» и он включается в HTML верстку отдельной инструкцией, как и javascript. CSS код может также храниться в отдельных файлах. Основное применимое расширение для файлов является .css и затем включаться в HTML верстку, отдельным файлом. Конечно, можно прямо писать в HTML странице, но это является плохой практикой. Сейчас web мастера стараются от нее категорически отойти. Поэтому научитесь сразу CSS стили выносить в отдельный файлы.

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

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

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

    Интересное про HTML и CSS

    В данном разделе собрана и подробно изложена вся информация о CSS и интернет технологии HTML5. Прочитав данный раздел, Вы сможете ответить на следующие вопросы: как управлять структурой и контентом HTML документов при помощи технологии HTML5, как самостоятельно создавать первые WEB (HTML) страницы в Интернете, как работать с видео и audio информацией на новой интернет технологии HTML5, что представляет из себя новая технология CSS3, как создаются WEB страницы и по каким принципам происходит структурирование страницы и многое другое. Так же, прочитав статьи данного раздела, Вы узнаете абсолютно все об оформлении на WEB (HTML) страницах, об управлении программой Photoshop, Microsoft FrontPage 2003, о создании анимационных файлов в приложении Adobe ImageReady для WEB страниц, о создании карт навигации (image map), узнаете, как правильно настраивать параметры анимации для web страниц в приложении Adobe ImageReady, как лучше всего оптимизировать графические изображения для ускорения процесса загрузки в Интернет, и самое главное, в данном разделе Вы найдете статьи с секретами успеха! Вашему вниманию представлены уникальные статьи с общими советами по созданию популярного сайта и поддержанию его посещаемости, с информацией, как раскрутить готовый web сайт в Интернете, как правильно регистрироваться в рейтингах, поисковых системах и каталогах, как анализировать посещаемость сайта, и много другой полезной информации.

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

    Раздел: Верстка HTML / CSS › Список статей

    Статья о том, как правильно пишется слово «Интернет» и на каком основании именно так

    Описание стандартов HTML5 и что нас ожидает в ближайшем будущем с этим новым форматом

    Описание DOM объекта Canvas, который является основным, и чуть ли не главным преимуществом будущего html5

    Применение в повседневной жизни HTML5, как нового языка программирования для интернет контента

    Проверка и тестирование интернет технологии HTML5 и какие результаты он показал на тестах

    Предварительный обзор возможностей Интернет технологии HTML5, и к чему готовиться web мастерам

    Описание как работать с видео и audio информацией на новой интернет технологии html5

    Описание, как при помощи технологии html5 управлять структурой и контентом HTML документов

    Описание новой технологии css 3, с которой в ближайшее время придется столкнуться всем web мастерам

    Описание основ, как строятся создаются web страницы и по каким принципам они подразделяются

    Рассматриваем в статье основы как устроена web страница и по каким принципам происходит структурирование страницы

    Инструкция, как без навыков создавать свои первые web (html) страницы в Интернет собственными силами

    Описание, как делается выравнивание текстов, зачем нужные заголовки в (html) web страницах

    Описание, основного и самого простого метода вставки картинок в web (html) страницу своими силами

    Описание, как просто и правильно делаются списки значений на web (html) страницах

    Описывается, как своими силами создать простую форму для ввода данных на web (html) странице


    Описание, как собственными силами вставить первую ссылку в текст на web (html) странице

    Описание, как простыми и быстрым способами создать таблицу с данными на web (html) странице

    Описание, как и где можно бесплатно размещать свой первые сайты в Интернет и какие возможности это открывает

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

    Статья о последовательности действий при размещении web-сайта на хостинге на примере службы narod.ru

    Описание, как по протоколу http размещать, загружать файлы, web страницы на бесплатные хостинги

    Описание, как по протоколу ftp загружать файлы, web страницы для своего сайта на бесплатные хостинги

    Описание, как можно смотреть свои первые web страницы на бесплатных серверах в Интернет

    Описание основ и основных форматов, которые используются при создании web (html) страниц

    Описание некоторых особенностей использования графики на web страницах, которые мало где описаны

    Подробное описание основных графических форматов используемых на просторах Интернет и почему используются именно они

    Полное и подробное описание графических форматов используемых в Интернет и что рекомендуется в каких случаях использовать

    Описание еще одного способа вставки изображений (картинок) на собственную web (html) страницу

    Описание, как правильно обрабатывать и загружать картинки большого размера на собственный сайт

    В статье описывается несколько способов, с помощью которых можно разместить на заднем фоне (background) web страницы графическое изображение

    Описание, как делаются картинки с прозрачными областями и размещаются на своих web страницах

    Описание, как при помощи графических программ Photoshop и ImageReady изготовить различную графику новичкам

    Описание основных понятий и аспектов работы с графическими изображениями в графическом пакете Photoshop

    Описание, как своими силами можно создавать баннеры для web страниц и какие бывают трудности

    Описание, как делаются сложные баннеры для сайта и как это можно сделать новичкам

    Описание основных принципов управления операциями в графической редакторе Photoshop при создание собственного изображения

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

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

    Описание, как создаются картинки в Photoshop при помощи слоев и как ими научиться управлять

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

    Описание, как делать основные и другие всевозможные эффекты в графическом редакторе Photoshop

    Описание, как при помощи графического редактора Adobe ImageReady создавать анимационные картинки (кнопки)

    Описание, как лучше всего оптимизировать графические изображения для ускорения процесса загрузки в Интернет

    Обработка цифровых фотографий при помощи программы Adobe Photoshop для их последующей публикации на web страницах

    Корректировка тонов, яркости и контрастности изображения с помощью программы Adobe Photoshop

    Какие фильтры использовать и как с их помощью повысить резкость изображения в программе Adobe Photoshop

    Чего можно добиться путем комбинирования изображения с помощью программы Adobe Photoshop

    Обрезка и уменьшение изображения с помощью программы Adobe Photoshop для его размещения на web страницах

    Сохраняем и оптимизируем изображения в программе Adobe Photoshop для последующего размещения на web страницах

    Рассмотрим случай, когда требуется сделать прозрачным фон уже готового рисунка при помощи программы Adobe Photoshop

    Описание как в программе Adobe Photoshop сделать бесшовный фон на примере создания простой фоновой текстуры

    В этой статье описывается технология обрезания изображений для размещения на сайтах с интерактивной графикой

    Что представляют собой карты навигации и какие существуют способы создания и работы карт навигации (image map)

    Описание технологии и основных принципов работы и размещения анимации на web — страницах

    В этой статье описывается создание анимационных файлов в приложении Adobe ImageReady для web — страниц

    Самый простой вид анимации для web-страниц — это сменяющаяся последовательность кадров

    Описание настройки параметров анимации для web — страниц в приложении Adobe ImageReady

    В данной статье описывается как создавать«Бегущие», постепенно появляющиеся и исчезающие рисунки

    В данной статье рассматриваются специфические приемы оптимизации графической анимации для web-страниц

    В этой статье описывается способы создания сайта с помощью WYSIWYG редактора в частности Microsoft FrontPage 2003

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

    Описание создания макета сайта в программе Microsoft FrontPage 2003. Выбор шаблона и начальное редактирование

    Описание работы и форматирования текста с помощью редакторе Microsoft FrontPage 2003

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

    Данная статья описывает применение и настройку тем оформления к отдельной странице или сайту в целом

    В данной статье содержится описание создания и работы с таблицами в программе FrontPage

    Описание размещения графики на web-страницах с помощь программы Microsoft FrontPage 2003

    В статье описываются правила размещения и работы со ссылками при помощи Microsoft FrontPage

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

    Особенности размещения объектов мультимедиа на страницах при помощи Microsoft FrontPage 2003

    В этой статье содержится информация о создании и настройке различных форм в Microsoft FrontPage 2003

    В данной статье описывается как можно добавить на свой сайт счетчик посещений, поиск по сайту и другие компоненты

    В этой статье описывается процесс установки и настройки отображения информации из баз данных на web-страницах

    Описание создания и настройки web-страницы содержащей фреймы в редакторе Microsoft FrontPage 2003

    В данной статье описывается использование переменных в редакторе Microsoft FrontPage 2003. А так-же инструкция по созданию оглавления сайта

    Описание проверки орфографии и других отчетов, входящих в состав редактора FrontPage

    Описание настройки предварительного просмотра сайта разрабатываемого в FrontPage в нескольких браузерах

    В данной статье речь идет о подготовке сайта к размещению на web cepвep и последующей его настройке

    В данной статье имеется описание некоторых рейтингов и способы регистрации в них сайта

    Данная статья содержит руководство по созданию и администрированию гостевой книги, форума и чата

    Статья кратко описывает на сколько удобно и нужно работать со специальными редакторами HTML и CSS

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

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

    Статья о том, как происходит непосредственная передача данных между пользователем и удаленным компьютером по средствам cookie

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

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

    Статья о том, как при помощи нескольких png файлов можно комбинировать различные стильные картинки на сайте

    Как сделать фиксированный фон на сайте, но не знаете как это сделать (кроссбраузерно), конкретный и 100% рабочий пример

    В статье рассматриваются несколько различных фишек при помощи HTML и CSS кодов с приложением примеров

    Описание основных отличий кодировок UTF-8 и cp1251, подробное рассмотрение плюсов и недостатков той или другой кодировки на практике

    Часто встречаются вопросы о том на сколько сильно можно закэшировать тот или иной объект в HTML странице, рассматриваем в данной статье

    В статье разбирается для чего нужен doctype, приводятся примеры использования данного тега

    Чтобы улучшать свой сайт, требуется обрабатывать страницы с ошибками, в статье рассматривается каждый тип ошибки

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

    Статья с описанием, как довольно просто украсить заголовок (тег) h1 дополнительной картинкой, иконкой

    Статья о том, как научится создавать красивые и динамические web интерфейсы на своих сайтах

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

    Статья о правильной оптимизации кода страницы для существенного улучшения позиций в поисковых системах

    Как и любой язык программирования HTML требует своих правил к оформлению не смотря на свою гибкость, давайте их рассмотрим

    Статья для дизайнеров, верстальщиков и заказчиков, о том, как решается извечная проблема о 100% совпадении дизайнерского макета и верстки

    Статья о том, как отличать плохого верстальщика или художника от хорошего и где скрываются подвохи

    Подавляющая часть web мастеров понятия не имеют о правильном использовании шрифтов, и вот рассматриваем самые частые ошибки при использовании шрифтов

    Описание определения «домашняя страница» («home page»), ее основные виды и тенденции развития в будущем

    Статья о самых распространенных ошибках молодых дизайнеров и методах их исправления

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

    41 полезный совет, правил, которые касаются web дизайна и создания качественных страниц в Интернет

    Как можно экономить на создании web сайтов и недорого получить то что нужно — инструкция

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

    Верстка блоками DIV. С самого начала

    15.09.2015 в 12:27, joey

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

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

    Что считать блочным элементом?

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

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

    Добавим значение ширины для каждого блока:

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

    Теперь возникает вопрос, как расположить блоки div на одной строке, друг за другом?

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

    Свойство float имеет следующие значения:

    • left – блок выравнивается по левому краю, обтекание справа
    • right – блок выравнивается по правому краю, обтекание слева
    • none – обтекание не задано, блок ведет себя по умолчанию, как в предыдущих примерах.

    Добавим float:left к нашим блокам, чтобы блоки выровнялись по левому краю:

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

    Видно, что блок добавился как то криво. Кажется, что он добавился с новой строки под Блок 1. На самом деле, Блок 4 занимает место от начала Блока 1 и на 450 пикселов вправа. Вот посмотрите:

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

    • left – запрещает обтекание с левой стороны, все элементы будут показаны с новой строки (под элементом)
    • rigth – запрещает обтекание элемента с правой стороны
    • both – запрещает обтекание элемента с обоих сторон, рекомендуется использовать, когда явно надо показать элемент с новой строки или неизвестно с какой именно стороны возможно обтекание другими элементами

    Добавим Блоку 4 свойство clear:left, которое запретит этому элементу обтекание других плавающих элементов с левой стороны.

    Блок 4 разместился с новой строки, как нам надо.

    В данном случае мы знаем как располагаются другие блоки, потому в примере сразу указали clear:left. Бывают ситуации, когда мы точно не знаем, с какой стороны встретится плавающий блок, поэтому в таких случаях стоит указывать clear:both, отменяющий обтекание с обеих сторон. Теперь мы разобрались как расположить блоки div на одной строке горизонтально.

    Следует помнить, что блоки со значением float располагаются на одной строке, если позволяет ширина родительского элемента. Если блочные элементы не умещаются в ряд, они будут переноситься на новую строку. Если это критично, например, при верстке макетов, нужно это учитывать и у блоков с float обязательно задавать ширину – фиксированную (px) или резиновую (%, rem и т.д.). Дальше посмотрим на такие ситуации.

    Как повлиять на блоки, если мы хотим разместить эти блоки по центру?

    Классическим решением будет добавление блокам родителя и использование свойства margin: 0 auto;

    Почему собственно родителю мы дали класс .wrapper ? «wrapper» в переводе означает «обертка». Это некая общепризнанная практика, определяющая название класса, когда элемент оборачивает другие блоки и тем самым позволяет управлять/влиять на них посредством изменения самого родителя.

    Возьмем разметку из предыдущих примеров и усовершенствуем её.

    Здесь вроде всё просто.

    А если нам не нравится, что текст вплотную прилипает к краю родительского блока и хотим добавить поля без внесения изменений в разметку, только с помощью css. Добавим элементам свойство padding:

    И видим, что наша верстка рассыпалась! Блок 3 куда то уехал. Почему так вышло? Ответ прост. Добавив поля элементам мы увеличили их ширину. Теперь значения таковы:

    Блок 1: 10 + 200 + 10 = 220px

    Блок 2: 10 + 150 + 10 = 170px

    Блок 3: 10 + 100 + 10 = 120px

    Блок 4: 10 + 450 + 10 = 470px

    220 + 170 + 120 = 510px

    Общая ширина трех блоков 510, они не умещаются в ширину родителя (450) и потому переносятся на новую строку.

    Как поправить? Можно сделать следующее:

    1. Задать заново значения ширины для каждого блока с учетом полей. Уменьшив размеры блоков. Все снова аккуратно встанет в одну строку. Согласитесь, это неудобно? Каждый раз лезть в верстку и что-то править.
    2. Использовать свойство box-sizing: border-box. Чтобы расчет брался из общей ширины блока. Советую узнать, что такое блоковая модель сss.

    Используем второй вариант, получается так:

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

    Создаем разметку макета:

    Если что-то непонятно — спрашивайте в комментариях.

    — Egor , 24.06.2020 в 13:37 ответить #

    — Роман , 04.12.2020 в 13:42 ответить #

    — joey , 12.12.2020 в 10:55 ответить #

    — Я новичок , 19.12.2020 в 06:04 ответить #

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL