Блочная модель
Содержание:
- Пример блочной вёрстки
- Краткий обзор элемента
- Конвенция имен классов
- Настройка
- Стили кнопок
- Использование процентной ширины для контейнера
- Изменение стилей
- Изменение атрибутов
- Используем переменные CSS для вариаций контейнеров
- Ширина блока
- Когда используется class, а когда id?
- Специфичность CSS
- How to style tag?
- Единица rem: смесь px и em
- Основные стили ссылок
- Как задаются размеры
- В зависимости от размеров экрана — гибко, но надо перепроверять на разных экранах
- Фрагменты URL-адресов
- Изменение классов
- Способ отображения контейнера
- Заключение
Пример блочной вёрстки
Но, сколько не теоретизируй, а понимать всё проще на примере.
Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.
Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».
Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:
<!DOCTYPE html>
<html>
<head>
<title>Блочная вёрстка</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h2>header (шапка сайта)</h2>
</div>
<div id="navigation">
<h2>Блок навигации</h2>
</div>
<div id="sidebar">
<h2>Левая панель</h2>
</div>
<div id="content">
<h2>Основной контент страницы</h2>
</div>
<div id="clear">
</div>
<div id="footer">
<h2>footer (низ сайта)</h2>
</div>
</div>
</body>
</html>
Разберём некоторые моменты.
<div id=»container»> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div id=»clear»>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.
Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.
Теперь добавим файл CSS, код которого приведён ниже.
body {
background: #FFF;
color: #000;
font-family: Arial, sans-serif;
font-size: 14px;
}
#header {
background: #F5DEB3;
width: 100%;
height: 55px;
}
#container {
background: #FFD700;
margin: auto auto;
text-align: center;
width: 80%;
height: 400px;
}
#navigation {
background: #FE9798;
width: 100%;
height: 25px;
}
#sidebar {
background: #40E0D0;
float: left;
width: 20%;
height: 280px;
}
#content {
background: #DCDCDC;
float: right;
width: 80%;
height: 280px;
}
#clear {
clear: both;
}
#footer {
background: #00BFFF;
width: 100%;
height: 40px;
}
С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.
#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.
CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.
Вот и весь смысл блочной структуры. Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу. Также посмотрите статью про вёрстку сайта из PSD макета, там эти принципы показаны более наглядно.
Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Краткий обзор элемента
Давайте посмотрим на практике, как работает элемент <div>. Сотрите все, что есть в файле styles.css (если вы добавляли в него код из предыдущих мануалов серии). Затем добавьте следующее CSS правило для селектора тега <div>:
Сохраните файл styles.css. Затем откройте файл index.html, сотрите все, что там есть (кроме первой строки кода: <link rel=”stylesheet” href=”css/styles.css”>), и добавьте следующий фрагмент:
Обратите внимание, элемент состоит из открывающего и закрывающего тега, но не требует какого-либо контента. Сохраните файл index.html и перезагрузите его в браузере
Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»)
Сохраните файл index.html и перезагрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).
На вашей веб-странице должно появиться зеленое поле шириной 100 пикселей и высотой 100 пикселей, согласно CSS-правилу:
Теперь, когда у вас есть правило стиля для элемента <div>, каждый элемент <div> на вашей странице будет оформлен точно так же. Но чаще всего на элементы <div> должны быть стилизованы по-разному. По этой причине для стилизации элементов <div> разработчики часто используют классы.
Чтобы попрактиковаться в создании классов для <div>, удалите из файла styles.css только что созданное CSS-правило и добавьте следующие три новых набора правил:
В этом фрагменте содержатся правила стиля для трех разных классов: div-1, div-2 и div-3
Обратите внимание, имена селекторов классов начинаются с точки
Сохраните файл styles.css и перейдите в файл index.html. Сотрите только что созданный элемент <div> и добавьте три новых элемента, применив к каждому из них класс, который соответствует селекторам CSS из файла styles.css:
Обратите внимание, класс добавляется в качестве атрибута к тегу : для этого нужно указать атрибут class и имя класса в открывающем теге . Сохраните файл и перезагрузите его в своем браузере
Вы должны получить такой результат:
На вашей веб-странице будет три элемента
, каждый из которых отличается по цвету и размеру в соответствии с присвоенным ему правилом стиляОбратите внимание, каждый элемент указывается с новой строки, поскольку элементы являются блочными элементами и это их поведение по умолчанию
Конвенция имен классов
Значение атрибута класса HTML может представлять собой почти все, что угодно, если оно соответствует селектору в коде CSS. Стандартная конвенция имен классов — это использование прописных букв и дефисов вместо пробелов, как в именах файлов и папок.
Добавление атрибута class не изменяет смысловое значение HTML-документа и служит для подключения CSS. Рекомендуется избегать имен классов, основанных на том, как они отображаются. Использование чего-то более семантического, например, .synopsis, дает больше свободы в действиях. Что позволяет настроить отображение этого абзаца.
Настройка
Для примера нам нужен только один HTML-файл и таблица стилей CSS. Создайте папку css-selectors и веб-страницу под названием selectors.html со следующей разметкой:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<title>Селекторы CSS</title>
<link rel='stylesheet' href='styles.css'/>
</head>
<body>
<h1> Селекторы CSS</h1>
<p>Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML.
Это <strong>супер</strong> полезно.</p>
<p>Классы чрезвычайно важны, так как они позволяют выбрать
произвольные блоки на странице.</p>
<p>Мы так же рассмотрим в этом примере ссылки, поэтому вот ссылка
<a href='https://internetingishard.com'>Interneting Is Hard</a>, для которой нам нужно задать стили.</p>
<div>Кнопка Один</div>
</body>
</html>
Теперь создадим в той же папке файл styles.css. Это все, что понадобится для изучения CSS селекторов.
Стили кнопок
Начнем с :link и :visited. Мы используем аналогичный подход, что и в предыдущем разделе о CSS селекторах родителя. Но поскольку это кнопки, то мы сохраним одинаковые цвета для состояний посещенная и не посещенная. Измените существующие правила .button следующим образом:
.button:link, /* Измените это */
.button:visited { /* Измените это */
display: block; /* Добавьте это */
text-decoration: none; /* Добавьте это */
color: #FFF; /* Все остальное остается без изменений */
background-color: #5995DA;
font-weight: bold;
padding: 20px;
text-align: center;
border: 2px solid #5D6063;
border-radius: 5px;
width: 200px;
margin: 20px auto;
}
Обратите внимание на новые псевдоклассы :link и :visited в селекторе. Без них стиль браузера по умолчанию для a:link не изменился бы
Теперь оформим состояние при наведении курсора.
.button:hover,
.button:visited:hover {
color: #FFF;
background-color: #76AEED; /* Light blue */
}
Обе наши кнопки при наведении курсора будут окрашиваться в более светлый голубой цвет. Сделаем так, чтобы кнопки становились темнее, когда пользователь нажимает на них с помощью псевдокласса :active:
.button:active,
.button:visited:active {
color: #FFF;
background-color: #5995DA; /* Blue */
}
Стили, которые мы только что определили, готовы к повторному использованию. Назначьте класс .button любому HTML-элементу, и вы превратите его в интерактивную кнопку.
Использование процентной ширины для контейнера
Я получил ответ об использовании процентной ширины (типа max-width: 90%) для контейнера, вместо добавления padding-left и padding-right.
В случае использования этого метода, ширина, равная 90% от окна просмотра, будет слишком крупной на больших экранах. Это можно исправить, используя медиа-запросы.
CSS
.wrapper {
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
/* Медиа-запрос для большого экрана */
@media (min-width: 1170px) {
.wrapper {
max-width: 1170px;
}
}
Применяя процентную ширину, мы совершаем дополнительный шаг. Можно легко избежать этот шаг, используя фиксированное значение ширины. Другое решение говорит, что мы можем совместить width: 90% со свойством max-width: 1170px.
CSS
.wrapper {
width: 90%;
max-width: 1170px;
margin-left: auto;
margin-right: auto;
}
Это довольно интересный подход, но я бы предпочел самостоятельно добавить padding, вместо того чтобы полагаться на процентную ширину.
Изменение стилей
Свойство style отражает вложенные стили элемента HTML. Часто стили будут применяться к элементам через таблицу стилей, как мы делали ранее в этой статье, но иногда нам будет нужно добавить или изменить вложенный стиль напрямую.
Мы создадим небольшой пример для демонстрации редактирования стилей с помощью JavaScript. Ниже представлен новый файл HTML с блоком , который имеет вложенные стили, применяемые для отображения квадрата.
styles.html
После открытия в браузере, будет выглядеть примерно следующим образом:
Один из вариантов редактирования стилей подразумевает использование .
Однако при этом будут удалены все существующие вложенные стили для элемента. Поскольку это вряд ли является желаемым результатом, рекомендуется использовать напрямую атрибут
Свойства CSS записаны в кебаб-регистре, т.е. в нижнем регистре, разделенные тире
Важно отметить, что свойства CSS в кебаб-регистре не могут использоваться для свойства стиля JavaScript. Вместо этого они будут заменены на их эквивалент в верблюжьем регистре, когда первое слово имеет нижний регистр, а все последующие слова начинаются с заглавной буквы
Иными словами, вместо мы будем использовать для свойства стиля JavaScript.
После внесения описанных выше изменений стиля итоговый рендеринг будет представлять собой круг:
Если для элемента применяется много стилистических изменений, лучше всего будет применять стили для класса и добавить новый класс. Однако в некоторых случаях необходимо использовать изменение атрибута вложенного стиля или более простой формат.
Изменение атрибутов
Атрибуты — это значения, которые содержат дополнительную информацию об элементах HTML. Обычно они идут в паре название/значение и могут быть обязательными в зависимости от элемента.
Среди самых распространенных атрибутов HTML необходимо отметить атрибут тега , для тега , , и . Полный список атрибутов HTML см. в списке атрибутов в Mozilla Developer Network. Пользовательские элементы, которые не являются частью стандарта HTML, будут сопровождаться префиксом .
В JavaScript есть четыре метода для изменения атрибутов элементов:
| Метод | Описание | Пример |
|---|---|---|
| Возвращает или | ||
| Возвращает значение определенного атрибута или | ||
| Добавляет или обновляет заданный атрибут | ||
| Удаляет атрибут элемента |
Давайте создадим новый файл HTML с тегом с одним атрибутом. Мы привяжем открытое изображение через URL, но вы можете использовать другое локальное изображение, если вы работаете оффлайн.
attributes.html
При загрузке указанного выше файла HTML в современном веб-браузере и открытии консоли разработчика, вы должны получить примерно следующий вывод:
Теперь мы можем протестировать все методы атрибутов на ходу.
К этому моменту вы удалите атрибут и значение, связанное с тегом , но вы можете сбросить этот атрибут и присвоить значение другому изображению с помощью :
Наконец, мы можем изменить атрибут напрямую, присвоив новое значение атрибуту в качестве свойства элемента, установив обратно для файла .
Любой атрибут можно изменить таким образом, а также с помощью описанных выше методов.
Методы и обычно используются с условными операторами, а методы и используются для прямого изменения DOM.
Используем переменные CSS для вариаций контейнеров
Редко случается так, что вам нужен контейнер только одного размера. Ширина контейнера может быть большой или маленькой, в зависимости от содержимого и варианта использования. Применяя переменные CSS, мы можем по-новому взглянуть на wrapper и сделать его максимально пластичным
Обратите внимание на следующее:
HTML
<div class="wrapper"></div>
CSS
.wrapper {
max-width: var(--wrapper-width, 1170px);
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
Возможно, вы заметили, что у функции var есть два значения: первое – —wrapper-width, и второе – 1170px. Вторая переменная является резервной, то есть используется, если значение переменной —wrapper-width не установлено.
Что это значит? Это значит, что вы можете создать вариацию контейнера, установив свойство —wrapper-width, как показано ниже.
HTML
<div class="wrapper" style="--wrapper-width: 720px"></div>
Таким образом, я создал вариацию контейнера:
- Без добавления новых классов;
- Не копируя и не вставляя стили;
- Более надежную и легко редактируемую с помощью DevTools.
Если вам не нравится использовать встроенные стили для изменения переменной CSS, вы можете вместо этого добавить новый класс. Смотрите пример, приведенный ниже:
HTML
<div class="wrapper wrapper--small"></div>
CSS
.wrapper--small {
--wrapper-width: 720px;
/* это изменит ширину контейнера, установленную по умолчанию */
}
Ширина блока
Ширина блока представляет собой сумму значений следующих свойств:
- width — ширина содержимого;
- padding-left и padding-right — поле слева и справа от содержимого;
- border-left и border-right — толщина границы слева и справа;
- margin-left и margin-right — отступ слева и справа.
На рис. 1 схематично изображены свойства, влияющие на ширину блока. При этом какие-то свойства могут отсутствовать и на размер влияние не оказывают.
Рис. 1. Ширина блока
Обратите внимание, что свойство width задаёт ширину содержимого, а не всего блока целиком. Если значение width не задано, то оно по умолчанию устанавливается как auto
В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений padding, border и margin. Под доступной шириной в данном случае подразумевается ширина содержимого родительского блока, а если родителя нет, то ширина окна браузера.
В примере 1 показано создание блока, занимающего всю доступную ширину. При изменении ширины окна браузера ширина блока будет соответствующим образом подстраиваться.
Пример 1. Ширина блока
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Ширина</title>
<style>
.block {
background: #FFFAC0; /* Цвет фона */
padding: 20px; /* Поля вокруг текста */
border: 2px solid #EF8031; /* Параметры рамки */
margin: 10px; /* Отступы */
}
</style>
</head>
<body>
<div class=»block»>Лев ревёт только в том случае, когда сообщает, что
территория принадлежит ему или провозглашает себя царём природы.</div>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Блок, занимающий всю ширину
Если свойство width задано, то его значение добавляется к общей ширине блока. В качестве примера рассмотрим следующий стиль.
Ширина блока в данном случае будет равна 442 пикселя; эта величина получается складыванием значения ширины содержимого плюс поле слева, граница слева и отступ слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.
Ширина = 400 + 10 + 10 + 4 + 4 + 7 + 7 = 442
Ширину содержимого можно задавать в процентах, но в этом случае общая ширина блока может превысить ширину веб-страницы, что приведёт к появлению горизонтальной полосы прокрутки.
Когда используется class, а когда id?
ID используется для отдельных элементов, которые встречаются на странице только один раз. Например, заголовок, подвал, меню и т. д. Селектор class используется для одного или нескольких элементов, которые встречаются на странице несколько раз. Например, абзацы, ссылки, кнопки, элементы ввода. И хотя вы можете использовать class для отдельного элемента, но лучше использовать эти селекторы по назначению.
Также следует учитывать, что у HTML-элемента может быть указан и id, и class. Предположим, что на странице имеется два блока с одинаковым размером и стилизацией, но с разным позиционированием. В таком случае можно применить один и тот же класс к этим блокам для изменения размеров и стилизации, а затем использовать отдельный ID-селектор к каждому блоку, чтобы задать им разное позиционирование.
Элементы также можно привязывать одновременно к нескольким классам. Это очень удобно, когда нужно применить стилизацию к отдельной группе элементов определенного типа. Например, имеется класс .content, который применен ко всем абзацам. Если нужно будет добавить границу или любую другую стилизацию к нескольким отдельным абзацам, то можно сделать это при помощи дополнительного CSS p class .bordered:
<p class="content">Этот пункт не имеет границ.</p> <p class="content bordered">Этот пункт имеет границы.</p>
Обратите внимание на пустое пространство между двумя именами классов в атрибуте class второго абзаца. Ниже приведен пример CSS-кода:
.content { margin: 10px; font-size: 15px; color: blue }
.bordered { border: 2px solid #222 }
Важно правильно применять id и CSS class, так как их неправильное использование может привести к ошибкам в отображении HTML-кода. Пожалуйста, оставьте свои мнения по текущей теме статьи
Мы крайне благодарны вам за ваши комментарии, дизлайки, лайки, подписки, отклики!
Пожалуйста, оставьте свои мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, дизлайки, лайки, подписки, отклики!
Валентин Сейидовавтор-переводчик статьи «CSS Class vs ID: Which One to Use»
Специфичность CSS
Порядок имеет значение, когда речь идет о свойствах, прописанных во внешней таблице стилей. При прочих условиях правила применяются сверху вниз. Это позволяет переопределять правила CSS селекторов атрибутов предсказуемым образом:
Но не все селекторы CSS равнозначны. «Специфичность CSS» — это значимость, установленная для различных категорий селекторов. Это означает, что некоторые селекторы всегда будут переопределять другие независимо от того, какую позицию они занимают в таблице стилей.
Если вы добавите следующий код после существующих правил .call-to-action, он переопределит заданный ранее цвет фона. Если вы разместите его в верхней части файла, он сам будет переопределен, и наша кнопка не станет красной. Это ожидаемое поведение:
.call-to-action:link,
.call-to-action:visited {
background-color: #D55C5F; /* Красный */
}
Теперь посмотрите, что происходит, когда мы пытаемся сделать то же самое с помощью селектора идентификатора. Во-первых, обязательно удалите предыдущий фрагмент кода, а затем попробуйте добавить приведенный ниже код до существующих правил .call-to-action:
#button-2 {
background-color: #D55C5F; /* Красный */
}
CSS селекторы идентификаторов имеют более высокую специфичность, чем селекторы классов, поэтому вторая кнопка будет красной, даже если мы зададим фоновый цвет с помощью .call-to-action:link ниже. Концепция «порядок имеет значение» работает только тогда, когда все правила имеют одинаковую специфичность:
Специфичность селекторов, которые мы рассматривали в этой статье, показана ниже: от максимальной до минимальной:
• #button-2 • .button:link и .synopsis em (они равнозначны) • .button • a:link • a
Иногда это приводит к путанице. Это настолько серьезная проблема, что была разработана целая методология под названием «BEM». Суть BEM заключается в попытке обеспечить то, чтобы правила CSS были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.
How to style tag?
Common properties to alter the visual weight/emphasis/size of text in <div> tag:
- CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
- CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
- CSS font-size property sets the size of the font.
- CSS font-weight property defines whether the font should be bold or thick.
- CSS text-transform property controls text case and capitalization.
- CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
Coloring text in <div> tag:
- CSS color property describes the color of the text content and text decorations.
- CSS background-color property sets the background color of an element.
Text layout styles for <div> tag:
- CSS text-indent property specifies the indentation of the first line in a text block.
- CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
- CSS white-space property specifies how white-space inside an element is handled.
- CSS word-break property specifies where the lines should be broken.
Other properties worth looking at for <div> tag:
Единица rem: смесь px и em
Итак, мы рассмотрели:
- – абсолютные, чёткие, понятные, не зависящие ни от чего.
- – относительно размера шрифта.
- – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).
Может быть, пора уже остановиться, может этого достаточно?
Э-э, нет! Не все вещи делаются удобно.
Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.
Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl++, но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?
Какую единицу использовать для задания шрифтов? Наверно не , ведь значения в абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.
Следующие кандидаты – и .
Разницы между ними здесь нет, так как при задании в процентах, эти проценты берутся от родителя, то есть ведут себя так же, как и .
Вроде бы, использовать можно, однако есть проблема.
Попробуем использовать этот подход для .
Протестируем на таком списке:
Пока это обычный вложенный список.
Теперь уменьшим размер шрифта до , вот что получится:
Проблема очевидна. Хотели, как лучше, а получилось… Мелковато. Каждый вложенный получил размер шрифта от родителя, в итоге уменьшившись до нечитаемого состояния. Это не совсем то, чего мы бы здесь хотели.
Можно уменьшить размер шрифта только на одном «корневом элементе»… Или воспользоваться единицей , которая, можно сказать, специально придумана для таких случаев!
Единица задаёт размер относительно размера шрифта элемента .
Как правило, браузеры ставят этому элементу некоторый «разумный» (reasonable) размер по умолчанию, который мы, конечно, можем переопределить и использовать для задания шрифтов внутри относительно него:
Получилось удобное масштабирование для шрифтов, не влияющее на другие элементы.
Элементы, размер которых задан в , не зависят друг от друга и от контекста – и этим похожи на , а с другой стороны они все заданы относительно размера шрифта .
Единица не поддерживается в IE8-.
Основные стили ссылок
В отличие от CSS селекторов псевдоклассы начинаются с двоеточия, за которым следует имя класса. Наиболее распространенными псевдоклассами ссылок являются:
- :link — ссылка, по которой пользователь еще не переходил;
- :visited — ссылка, по которой пользователь переходил раньше;
- :hover — ссылка, на которую пользователь навел курсор мыши;
- :active — ссылка, нажатая мышью (или пальцем).
Рассмотрим эти псевдоклассы, добавив следующие правила в CSS (также обратите внимание на то, что мы используем для обозначения цветов ключевые слова, а не шестнадцатеричные коды):
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: purple;
}
a:hover {
color: aqua;
text-decoration: underline;
}
a:active {
color: red;
}
Как задаются размеры
У большинства элементов в CSS есть такие параметры для работы с размером:
height, width — высота и ширина;
max-height, max-width — высота и ширина, больше которых элемент не может быть (а меньше — может);
min-height, min-width — минимальная высота и ширина;
margin — размер поля вокруг элемента. Другие элементы не должны влезать в это поле;
padding — отступы внутри элемента, например, если внутри будет написан текст.
Например, нам нужно нарисовать кнопку, внутри которой будет текст. Описание стиля кнопки может быть таким:
Перевод: кнопка должна занимать от 300 до 600 пикселей в ширину, а в этом диапазоне быть 75% ширины от содержащего ее контейнера; внутри кнопки отступи сверху 15 пикселей, справа 15, снизу 19, слева 15 (по часовой стрелке). Саму кнопку от ближайшего элемента сверху отодвинь на 20 пикселей, слева и справа отодвинь одинаково, чтобы она встала по центру, а снизу отступи еще 50 пикселей до следующего элемента.
Запись в стиле padding: 15px 15px 19px 15px — это короткий способ задать отступы по часовой стрелке. Первое значение — отступ сверху, второе — справа, третье — снизу, четвёртое — слева. Вместо короткой записи можно ещё так:
padding-top: 15px;
padding-right: 15px;
padding-bottom: 19px;
padding-left:15px;
Но так обычно не пишут, потому что много текста.
В зависимости от размеров экрана — гибко, но надо перепроверять на разных экранах
Чтобы не зависеть от размера пикселей, а масштабировать элементы в зависимости от размера экрана, придумали другие единицы измерения:
- vh — это 1% от высоты окна;
- vw — это 1% от ширины окна.
Получается, программисту уже не надо думать, сколько пикселей надо сделать картинку, чтобы она занимала половину ширины экрана на разных экранах. Вместо этого достаточно указать так:
В этом случае браузер сделает так:
- Посмотрит, что за единица измерения — vw, значит нужна ширина экрана.
- Узнает, какой ширины в пикселях окно, в котором открывается эта страница.
- Поделит её на 100, чтобы узнать размер одного vw в пикселях.
- Умножит это значиние на 50, чтобы понять размер в пикселях нужного нам элемента.
- Установит это значение в пикселях при вёрстке.
- Если в процессе просмотра у браузера поменяется размер экрана — он сам всё пересчитает и отрисует заново.
Используем страницу из предыдущего раздела и немного переделаем её — установим такой размер блоков:
- первый блок — 10vw
- второй блок — 20vw
- третий — 50vw
Если нам нужно, чтобы блоки по высоте занимали всю высоту экрана, то для этого достаточно указать в стилях div такой параметр:
Блоки стали такой же высоты, как и экран
Ещё есть vmin и vmax, которые работают так:
- vmin находит минимальное значение из пары (vh, vw);
- а vmax находит максимальное значение из пары (vh, vw).
Это нужно, например, для адаптивной вёрстки, когда вам требуется привязаться к короткой стороне экрана и в зависимости от её размеров построить всю остальную страницу.
Фрагменты URL-адресов
Атрибуты id должны быть уникальными, поскольку на них указывают «фрагменты URL-адресов». Фрагменты — это элементы, с помощью которых можно указать пользователям на определенную часть веб-страницы. Они выглядят как селекторы идентификаторов, расположенные в конце URL-адреса:
Например, если мы хотим указать пользователю на вторую кнопку, можно использовать следующий код
Обратите внимание, что можно полностью опустить URL-адрес, если он указывает на другой раздел той же веб-страницы:
<!-- С той же страницы --> <a href='#button-2'>Go to Button Two</a> <!-- С другой страницы --> <a href='selectors.html#button-2'>Go to Button Two</a>
Если вы добавите первый вариант ссылки в разметку страницы selectors.html и кликните по ней, то увидите, что данный URL-адрес значится в адресной строке браузера. Чтобы увидеть, как осуществляется переход ко второй кнопке, нужно добавить на страницу немного произвольного контента или сделать высоту окна маленькой:
Этот пересекающийся функционал является веской причиной для того, чтобы избегать использования идентификаторов. Они создают зависимость между URL-адресами сайта и стилями CSS. Представьте, что вы используете в заголовках кучу атрибутов id в качестве как фрагментов URL-адресов, так и идентификаторов. Если вы забудете обновить таблицу стилей, когда отредактируете URL-адрес, то сломаете свой сайт.
Изменение классов
Атрибут class соответствует селекторам класса CSS. Не путайте с классами ES6, особым типом функции JavaScript.
Классы CSS используются для применения стилей для нескольких элементов, в отличие от идентификаторов, которые могут существовать только один раз на странице. В JavaScript есть свойства и для работы с атрибутом класса.
| Метод/Свойство | Описание | Пример |
|---|---|---|
| Получает или устанавливает значение класса | ||
| Добавляет одно или несколько значений класса | ||
| Включает или отключает класс | ||
| Проверяет, существует ли значение класса | ||
| Заменяет существующее значение класса на новое значение класса | ||
| Удаляет значение класса |
Мы создадим другой файл HTML для работы с методами класса, с двумя элементами и несколькими классами.
classes.html
При открытии файла в браузере вы должны получить примерно следующий результат:
Свойство было введено для предотвращения конфликтов с ключевым словом в JavaScript и другими языками, которые имеют доступ к DOM. Вы можете использовать для присвоения значения напрямую в классе.
Мы присвоили класс , определенный в значениях CSS в , для первого . Вывод должен выглядеть следующим образом:
Обратите внимание, что если любые классы уже существуют в элементе, это действие будет перезаписывать их. Вы можете добавить несколько классов с разделителями-пробелами с помощью свойства или используйте его без операторов присвоения для получения значения класса в элементе
Другой способ изменения классов — это свойство , которое имеет несколько полезных методов. Эти методы аналогичны методами , и в jQuery.
После использования описанных выше методов ваша веб-страница будет выглядеть следующим образом:
В отличие от примера , использование будет добавлять новый класс в список существующих классов. Также вы можете добавить несколько в виде разделенной запятыми строки. Также вы можете использовать для изменения класса элемента.
Способ отображения контейнера
Так как контейнер – это <div>, он по умолчанию является блочным элементом. Вопрос в том, что делать, если мы хотим, чтобы он отображался в виде сетки, и всё его содержимое располагалось на сетке?
Что ж, я бы не рекомендовал так делать, потому что это противоречит концепции разделения обязанностей. «Обёртка» оборачивает другие элементы, и на этом всё. Если вам нужен контейнер с сеткой, добавьте в существующий контейнер элемент <div> со свойством display: grid. Это более простой, понятный и доступный способ.
HTML
<div class="wrapper"> <!-- Содержимое --> </div>
Так делать не рекомендуется, потому что использование элемента wrapper на другой странице может случайно повредить вашу вёрстку.
CSS
.wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 16px;
}
Лучшим решением будет следующее:
HTML
<div class="wrapper">
<div class="featured-news">
<!-- Элементы, которые должны находиться в сетке -->
</div>
</div>
CSS
.featured-news {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 16px;
}
Заметьте, что я добавил отдельный элемент <div>, чтобы он содержал контент. Пожалуйста, не обращайте внимания на классы и соглашения по именованию в этом примере. Мы можем найти гораздо лучшее решение, создав названия классов, которые могут быть использованы повторно на разных страницах сайта. Однако соглашения по именованию выходят за рамки этой статьи.
Заключение
В этой статье вы получили практический опыт работы с CSS селекторами классов, селекторами потомков, псевдоклассами, стилями ссылок и селекторами идентификаторов. Цель всех, описанных в этой статье приемов – обеспечить возможность указать определенный HTML-элемент из CSS-кода. Селекторы классов являются самыми универсальными и имеют наименьшее количество недостатков.
Пожалуйста, оставьте свои комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, подписки, отклики, лайки, дизлайки!
Вадим Дворниковавтор-переводчик статьи «css selectors»
