Классы в css– удобный путеводитель
Содержание:
Общая структура и логика веб-страницы
Каждая из популярных систем управления сайтами предлагает свой взгляд на фундаментальные позиции в разработке и важные сущности в структуре и содержании страниц сайтов. По старинке все выделяют тегами div в HTML-странице:
- шапку;
- «тело» + меню (вертикальное или горизонтальное);
- левую и/или правую колонки как части тела или его дополнение;
- подвал.
В сложившемся обиходе разработчика все это звучит более прозаично: header, body, footer или «хедер», «контент» и «футер». Добавлять или нет левую и правую колонки, то есть разделять контент сайта на центральный поток данных, левую и правую сторону — компетенция разработчика и особенности решаемой задачи.
Использовать таблицы (table HTML) или дивы (div HTML) — особенной разницы нет. Можно вообще всю страницу «изложить» одним списком (ul и li): это свежо и экстравагантно, но работать будет. Выбор варианта верстки за разработчиком, но по сложившейся традиции все выбирают верстку блоками. Использовать HTML div и style CSS — просто, читабельно и продуктивно.
Используем свойство Display: Contents
Для начала я вас познакомлю с этим значением. Каждый элемент в CSS является блочным; и этот блок содержит контент, границы, внутренние и внешние отступы. Если вы примените display: contents, этот блок будет исключен из потока. Я могу представить это как удаление открывающего и закрывающего тэгов вокруг него.
CSS
<header class="site-header">
<div class="wrapper site-header__wrapper">
<!-- Header content -->
</div>
</header>
CSS
.site-header__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
Возможно, в примере, приведенном выше, вам понадобится растянуть header на всю ширину страницы, вместо того, чтобы вписывать его в контейнер.
CSS
.site-header__wrapper {
display: contents;
}
.site-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
Таким способом элемент wrapper будет скрыт (в каком-то смысле). Теперь, когда мы применили display: flex к элементу site-header, объекты, принадлежавшие контейнеру, станут дочерними для элемента site-header.
Adding and Styling Text in a Container
You can put text inside a container by inserting text in between the opening and closing tags. Try adding text inside each of the elements in your file:
index.html
Save the file and reload it in your browser. You should now have text displayed in each of your containers:
You can add additional HTML elements to your text inside the elements. For example, try adding the HTML heading tags ( to ) to your text inside the tags in your file:
Save the file and reload it in your browser. The text inside the containers should now be styled according to the default properties of the to tags:
Note that the elements have also adjusted their positions slightly. This repositioning is caused by the default margin properties of the through elements. You’ll learn more about margins in the next tutorial on the CSS Box Model, but for now it is fine to ignore them
To style text inside the containers, you can specify text property values in the rulesets for your classes. Try adding the properties and values to your rulesets in your file as highlighted in the in the following code snippet:
styles.css
Save your file and reload the file in your browser. The text inside the containers should now be styled according to the CSS rules in your file:
Кратко о контейнерах
Когда вы слышите слово обёртка или контейнер – это буквально означает, что группа элементов обёрнута другим элементом или содержится в нём. Не используя дополнительные объекты, мы можем добавить обёртку к элементу <body>, как показано ниже.
CSS
body {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
Однако добавлять wrapper к элементу <body> в современных условиях было бы не очень практично. Контейнер не позволяет дочерним элементам выходить за его границы. Посмотрите на следующую фигуру:
У нас есть боковые и центральные элементы, которые существуют внутри другого элемента, оборачивающего их. Конечно, у элемента wrapper есть своя ширина.
HTML
<div class="wrapper"> <aside>...</aside> <main>...</main> </div>
Без контейнера дочерние элементы соприкасались бы с границами экрана. Это выглядело бы довольно раздражающе для пользователя, особенно на большом экране.
Фигура, продемонстрированная выше, показывает, что элементы растягиваются, если их ничто не оборачивает. Пользователю не стоит видеть такую картину. Давайте объясню, почему.
Специфичность 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 были многоразовыми, сделав все селекторами классов. Это исключает возможность возникновения проблем.
Сущность блока информации
Термин «информация» в интернет-программировании имеет свой смысл. Это данные, определенным образом структурированные и представленные. Информация — это значительно более широкое понятие. В программировании веб-ресурсов этот термин несет в себе минимально возможный смысл и объем.
Размер и положение тега HTML div: width/height и left/top могут быть абсолютными и относительными. Вкладывая теги друг в друга, можно манипулировать положением и размерами. Меняя правило CSS position с absolute на relative, можно управлять положением тегов по отношению друг к другу внутри окна браузера.
Браузер как приложение несет в себе наследие от локального программирования: это программа, в которой есть окно, в котором отображается язык гипертекста, дополненный стилями CSS и оживленный работой JavaScript-кода.
Можно вспомнить любимое всеми компаниями (интернет-студиями) разделение разработки на фронтенд и бэкенд, но сути это не меняет
Не суть важно, как блок оказался на HTML-странице: был написан «ручками» или сформирован как результат работы PHP-скрипта на сервере. Важно, что каждый тег div как HTML/CSS-композиция — это положение, размер, цвет (символа/фона), прозрачность, трансформация, движение, границы и пр
Атрибутов и возможностей для описания блока информации правила CSS предоставляют большое множество, а логика HTML дает возможность использовать дивы как по прямому назначению, так и по логике и опыту разработчика.
Например, div HTML — это:
- обертка, то есть место размещения системы тегов;
- область размещения точек для обработчиков JavaScript;
- «массив» тегов для обработки.
Первый вариант удобен, когда нужна стройная композиция тегов, которую можно легко переместить в нужное место, уточнив координаты только обертки: все, что внутри, переедет как есть, автоматом.
Второй вариант, например карта местности или здание, в которой каждой точке на карте назначен свой обработчик, а клик на квартире или окне здания должен дать нужную информацию.
Третий вариант значительно упрощает обработку коллекций тегов: вместо того чтобы перебирать всю коллекцию тегов div (body) HTML-страницы, разработчик может выполнить поиск внутри одного тега, который невидим и не слышим, но включает в себя все актуальные позиции.
Центрируем DIV по нижней границе страницы
Здесь для расположения div по центру по вертикали используется margin: auto и абсолютное позиционирование для внешнего элемента. Метод будет работать во всех современных браузерах.
CSS
.outer-div
{
position: absolute;
bottom: 30px;
width: 100%;
}
.inner-div
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #ccc;
}
HTML
<div class="outer-div"><div class="inner-div"></div></div>
У внутреннего div должна быть установлена ширина. Пространство внизу страницы регулируется с помощью свойства bottom внешнего div. Вы также можете центрировать div по верхней границе страницы, заменив свойство bottom на свойство top.
Другая кнопка
Займемся второй кнопкой. Предполагается, что она имеет желтый фон, но мы изменили это кодом из предыдущего раздела. Наш селектор .button:link более «специфичен», чем текущее правило .call-to-action, поэтому он имеет приоритет.
Исправим такое положение вещей, применив к нашему правилу .call-to-action несколько псевдоклассов. Замените существующее правило следующим (убедитесь, что это определено после новых стилей .button из предыдущего раздела о дочерних селекторах в CSS):
.call-to-action:link,
.call-to-action:visited {
font-style: italic;
background-color: #EEB75A; /* Желтый */
}
.call-to-action:hover,
.call-to-action:visited:hover {
background-color: #F5CF8E; /* Светло-желтый */
}
.call-to-action:active,
.call-to-action:visited:active {
background-color: #EEB75A; /* Желтый */
}
Мы назначили класс .call-to-action только для второй кнопки, поэтому только она станет желтой. Конечно, нам по-прежнему нужно, чтобы класс .button был назначен для обоих элементов <a>, поскольку он определяет общие стили, такие как отступы, радиус границы и размер шрифта.
Стили кнопок
Начнем с :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-элементу, и вы превратите его в интерактивную кнопку.
Классы и идентификаторы блоков
HTML — это совокупность элементов. Стили CSS позволяют создавать их классы. Уникальные элементы обозначаются идентификаторами. Как начинающие, так и опытные программисты могут использовать идентификаторы подобно классам, когда нет потребности искать элементы через обработчики JavaScript.
Гурманы верстки предпочитают классы всегда и во всем. Понять код страницы, описанный классами, часто бывает трудно. Расписать все дивы и другие элементы через идентификаторы — весьма трудоемкая задача, но всегда читабельный результат.
Разработчик вынужден использовать классы, когда сайт разрабатывается на базе системы управления сайтами или использует популярный шаблон. Практика показывает, что знания и умения разработчика всегда подсказывают правильный выход из любой ситуации.
Важно, что любое синтаксически корректное использование div в HTML будет работать, как предписано правилами
Используем переменные 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;
/* это изменит ширину контейнера, установленную по умолчанию */
}
Центрируем DIV внутри DIV-элемента с помощью inline-block
В этом методе центрирования div внутри div необязательно указывать ширину внутреннего элемента. Он будет работать во всех современных браузерах, включая IE8.
CSS
.outer-div
{
padding: 30px;
text-align: center;
}
.inner-div
{
display: inline-block;
padding: 50px;
}
HTML
<div class="outer-div"><div class="inner-div"></div></div>
Свойство text-align работает только в inline-элементах. Значение inline-block позволяет отобразить внутренний div в качестве inline-элемента, а также в качестве блока (inline-block). Свойство text-align во внешнем div-элементе позволит нам центрировать внутренний div.
Повторное использование стилей классов
Один и тот же класс может применяться к нескольким элементам в рамках одного HTML-документа. Это означает, что можно использовать произвольные объявления CSS везде. Чтобы создать еще одну кнопку, нужно добавить еще один HTML-элемент с тем же классом:
<div class='button'>Кнопка Один</div> <div class='button'>Кнопка Два</div>
В результате этого мы получим вторую кнопку, которая выглядит так же, как и первая. Это значительно упрощает работу веб-разработчиков. Если мы когда-нибудь захотим изменить цвет кнопки, нужно будет сделать это только в одном месте, и все наши кнопки автоматически обновятся:
Изменение стилей классов
Что, если мы захотим немного изменить вторую кнопку? К счастью, можно применить несколько классов к одному и тому же HTML-элементу. Стили из каждого класса будут применены к элементу, что даст возможность повторно использовать стили .button и одновременно переопределить некоторые из них новым классом:
Мы добавляем еще один класс к нашей второй кнопке с помощью следующей разметки
Обратите внимание, что несколько классов помещаются в один атрибут класса через пробелы:
<div class='button call-to-action'>Кнопка Два</div>
Этому элементу теперь присвоено два разных класса, и можно использовать любой из них для определения стилей. Это дает некоторые дополнительные возможности. Можно задать для второй кнопки стили класса .button и стили, относящиеся только к этой кнопке класса .call-to-action (обязательно добавьте этот код после правила .button):
.call-to-action {
font-style: italic;
background-color: #EEB75A; /* Желтый */
}
Основные стили ссылок
В отличие от 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;
}
Более полезные div
Атрибут class применяется не только к элементам <p> — он может быть использован для любого элемента HTML. Взяв на вооружение селекторы классов CSS, можно сделать блоки <div> и <span> намного более полезными. Мы можем использовать их для создания, как отдельных элементов, так и произвольных разделов веб-страницы:
Начнем с отдельных элементов. На этот раз мы будем использовать класс вместо CSS селектора div. Добавьте следующий код в файл styles.css:
.button {
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;
}
Конечно, для этого нам нужен соответствующий атрибут класса. Измените <div> в файле selectors.html на следующий код:
<div class='button'>Кнопка Один</div>
Данный код позволяет использовать стили и для других элементов, а не только для кнопок.
Селекторы классов
Селекторы классов позволяют применять стили CSS к определенному элементу HTML. Они дают возможность различать элементы HTML одного и того же типа. Например, когда есть два элемента <div>, но необходимо задать стили только для одного из них. Для селекторов классов нужны:
- Указанный атрибут класса в элементе HTML;
- Соответствующий селектор классов CSS.
Можно использовать селектор классов, чтобы назначить стили для первого абзаца нашей страницы-примера. Сначала добавим к нужному абзацу атрибут класса:
<p class='synopsis'> Селекторы CSS позволяют <em>выбрать</em> отдельный HTML-элемент в документе HTML. Это <strong>супер</strong> полезно.</p>
Теперь стилизуем абзац <p class=’synopsis’> в файле CSS с помощью следующего кода:
.synopsis {
color: #7E8184; /* Светло серый */
font-style: italic;
}
Это правило применяется только к элементам с соответствующим атрибутом класса
Обратите внимание на точку (.) — префикс перед именем класса. Это отличает соседние селекторы CSS классов от селекторов типов:
Добавляем padding слева и справа
Важно не забыть добавить padding с левой и правой стороны. Если размер окна просмотра меньше максимальной ширины контейнера, то края контейнера будут соприкасаться с границами окна просмотра
CSS
.wrapper {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
Добавляя padding, мы можем быть уверены, что слева и справа будет отступ в 16px, даже если ширина окна просмотра меньше максимальной ширины контейнера.
Свойство padding действует как подстраховка, не допускающая прилегания границ контейнера к границам окна просмотра, в случае нехватки места.
Using The class Attribute
The attribute is often used to point
to a class name in a style sheet. It can also be used by a JavaScript to access and
manipulate elements with the specific class name.
In the following example we have three elements
with a attribute with the value of
«city». All of the three
elements will be styled equally according to the
style definition in the head section:
Example
<!DOCTYPE html><html><head><style>
.city { background-color: tomato; color: white;
border: 2px solid black; margin: 20px;
padding: 20px;} </style>
</head><body><div class=»city»>
<h2>London</h2> <p>London is the capital of England.</p>
</div><div class=»city»>
<h2>Paris</h2> <p>Paris is the capital of France.</p></div><div class=»city»>
<h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p></div></body></html>
In the following example we have two elements
with a attribute with the value of
«note». Both
elements will be styled equally according to the
style definition in the head section:
Example
<!DOCTYPE html><html><head><style>.note {
font-size: 120%; color: red;}
</style></head><body><h1>My <span class=»note»>Important</span> Heading</h1><p>This is some <span class=»note»>important</span> text.</p></body></html>
Tip: The attribute can be used on any HTML element.
Note: The class name is case sensitive!
Tip: You can learn much more about CSS in our CSS Tutorial.
DIV-элемент, центрированный при помощи Flexbox
Здесь мы располагаем CSS div по центру с помощью Flexbox. Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, а также Android Browser 40+.
CSS
.container
{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.item
{
background-color: #f3f2ef;
border-radius: 3px;
width: 200px;
height: 100px;
}
HTML
<div class="container"><div class="item"></div><div>
Значение свойства height может быть любым, но только больше размера центрированного div-элемента.
Exploring the Element in Practice
Let’s try a hands-on exercise to study how the element works. Erase everything in your file (if you added content from previous tutorials). Next, add the following CSS rule for the tag selector:
styles.css
Save the file. Next, return to your file, erase everything that’s there (except for the first line of code: ) and add the following code snippet:
index.html
Notice that the element has opening and closing tags but does not require any content. Save the file and reload it in your browser. (For instructions on loading an HTML file, please visit our tutorial step ).
Your webpage should display a green box 100 pixels wide and 100 pixels tall as specified by the CSS rule:
Now that you have a styling rule for your element, every element you add to your page will be styled in the precisely the same manner. However, when creating a website, it is unlikely that you will want all of your HTML elements to be styled in the same way. For this reason, developers often create classes that they can use to style elements in different ways.
To practice creating classes for elements, erase the CSS rule you just created and add the following new three CSS rulesets to the file:
In this code snippet, you have created styling rules for three different classes: , , and . Note that you have added a before the class selector as required when declaring CSS rules for classes.
Save the file and return to your file. Erase the element you just created and, add the three elements to your file, applying a class to each one that corresponds to the CSS class selectors that you defined in :
index.html
Note that you have added the class as an attribute to the tag by adding the class attribute and class name to each opening tag. Save the file and reload it in your browser. You should receive something like this:
Your webpage should display three elements, each styled with a different color and size according to their assigned CSS style rules. Note that each element starts on its own new line as elements are and have this default behavior.
Добавляем ширину
Первая вещь, о которой стоит подумать, создавая wrapper, – это его ширина. Насколько широким вы хотите его видеть? Это зависит от вашего дизайна. Как правило, чаще всего используется ширина контейнера в диапазоне 1000px – 1300px. Самый популярный фреймворк Bootstrap, например, использует ширину в 1170px.
CSS
.wrapper {
width: 1170px;
}
Однако не рекомендуется использовать свойство width, так как из-за этого может появиться горизонтальная прокрутка экрана, если его размер меньше 1170px. Но вы можете от неё избавиться, добавив свойство max-width.
CSS
.wrapper {
width: 1170px;
max-width: 100%;
}
Это будет работать, но вы также можете убрать свойство width и использовать только max-width, как показано ниже:
CSS
.wrapper {
max-width: 1170px;
}
Теперь, когда мы добавили контейнеру ширину, давайте расположим его в центре.
