Свой reset.css для сброса стилей и задание базовых стилей style.css
Сброс базовых стилей reset.css
В данной статье рассмотрим создание своего файла reset.css для сброса базовых стилей браузеров. А также рассмотрим файл стилей, который послужит базовым набором стилей для создания адаптивного и отзывчивого интерфейса.
- Пожалуй, лучше всего свойство box-sizing устанавливать в border-box, что является определенным стандартом при разработке.
html,
*,
*::after,
*::before {
box-sizing: border-box;
}
Свойство box-sizing
box-sizing: content-box (размеры не включают margin, padding, border) и border-box (размеры включают только padding и border). Свойство по-умолчанию — content-box значит, что если задаем блоку фиксированные размеры, то на самом деле размеры этого блока будут ширина и высота + padding + margin + border. Фактический размер будет больше.
2. Для тега body определенно стоит обнулить значения padding и margin в силу того, что в разных браузерах они могут быть по разному определены.
body {
padding: 0;
margin: 0;
}
3. Пожалуй, с ul и ol все понятно и никто не хочет работать со стандартным отображением списков.
ul,
ol {
list-style: none;
padding: 0;
margin: 0;
}
4. Убираем у ссылок стандартное поведение — подчеркивание снизу.
a {
text-decoration: none;
}
5. Заголовки H1, H2 и т.д. В зависимости от браузера они могут быть разными.
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit;
font-size: inherit;
}
Таким образом итоговый файл reset.css будет выглядеть примерно таким образом:
html,
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
ul,
ol {
list-style: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit;
font-size: inherit;
}
Базовые стили style.css
Рассмотрим создание файла с базовым набором стилей style.css. Для body добавил базовые стили, которые позволят интерфейсу быть на всю высоту и контролировать блоки header, main и footer (прижать к подвалу). Задать базовый шрифт, цвет текста и цвет фона. Также здесь указывается минимальная ширина интерфейса (можно ориентироваться на ширину макета (figma) мобильной версии).
body {
display: flex;
justify-content: space-between;
flex-direction: column;
min-height: 100vh;
min-width: 320px;
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.2;
background-color: #ffffff;
color: #000;
}
Далее базовые стили, которые позволяют сделать все изображения на сайте отзывчивыми.
img {
max-width: 100%;
height: auto;
}
Контейнер есть и должен быть на всех сайта. Именно контейнер позволяет является первым шагом к адаптивному интерфейсу.
.container {
max-width: 1440px;
padding: 0 92px;
margin: 0 auto;
}
@media (max-width: 1024px) {
.container {
padding: 0 43px;
}
}
@media (max-width: 768px) {
.container {
padding: 0 29px;
}
}
@media (max-width: 560px) {
.container {
padding: 0 16px;
}
}
Также применим в базовых стилях сброс стилей кнопок.
button {
background-color: transparent;
border: 0;
cursor: pointer;
}
Адаптивная сетка с использованием flexbox
Вам также может понравиться
