CSS позволяет создавать красивые и отзывчивые веб-дизайны. Однако написание кода CSS может отнимать много времени и сил, особенно если вы не знакомы с новейшими методиками и лучшими практиками.
К счастью, есть несколько однострочников, помогающих оптимизировать CSS-код и создавать более эффективные проекты.
В этой статье представлены 10 CSS-однострочников — блоков кода, сжатых до одной строки. Их использование преобразит проект и поможет без проблем создавать потрясающие веб-дизайны.
1. Центрирование div
Центрирование div подразумевает размещение элемента div в центре страницы или внутри элемента, выступающего в качестве его контейнера. Существует несколько способов центрирования div с помощью CSS, включая использование свойств text-align, position и display.
- Центрирование по горизонтали: выровнять div по горизонтали позволит следующий код CSS.
.container {
display: flex;
justify-content: center;
}Этот код создаст flex-контейнер, который расположит свои дочерние элементы в ряд и отцентрирует их по горизонтали.
- Центрирование по вертикали: выровнять div по вертикали позволит следующий код CSS.
.container {
display: flex;
align-items: center;
}Этот код создаст flex-контейнер, который расположит свои дочерние элементы в столбец и отцентрирует их по вертикали.
- Центрирование по горизонтали и вертикали: выровнять div по горизонтали и вертикали позволит следующий код CSS.
.container {
display: flex;
justify-content: center;
align-items: center;
}Этот код создаст flex-контейнер, который расположит свои дочерние элементы в ряд и отцентрирует их по горизонтали и вертикали.
2. Создание свободно перемещающихся элементов
display: flex — это свойство CSS, позволяющее создать flex-контейнер. Оно используется для создания свободно перемещающихся элементов, которые можно располагать в ряд или столбец и изменять их размер в соответствии с имеющимся пространством.
Вот пример использования display: flex для создания ряда элементов:
.container {
display: flex;
}Этот код создаст flex-контейнер, который расположит свои дочерние элементы в ряд. Используя другие свойства CSS, такие как justify-content, align-items и flex-wrap, можно дополнительно настроить размещение элементов.
3. Позиционирование элементов в любом месте DOM
Относительное позиционирование (relative positioning) используется для изменения конечной позиции элемента, в том числе для того, чтобы он перекрывал другие элементы на странице. Оно работает путем установки свойства position элемента в значение relative. После того как элемент займет свое место в обычном потоке, можно изменить его конечную позицию с помощью свойств top, bottom, left и right. Вот пример:
.element {
position: relative;
top: 10px;
left: 20px;
}Этот код переместит элемент на 10 px вниз и 20 px вправо от исходного положения.
Абсолютное позиционирование (absolute positioning) используется для размещения элемента относительно его ближайшего позиционированного предка. Оно работает, если установить свойство position элемента в значение absolute. Вот пример:
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Этот код позволит отцентрировать элемент как по горизонтали, так и по вертикали в пределах его ближайшего позиционированного предка.
4. Универсальное свойство box-sizing
Одна из самых распространенных ошибок при написании кода CSS — забыть установить свойство box-sizing. Это свойство определяет, как вычисляется ширина и высота элемента. По умолчанию для свойства box-sizing установлено значение content-box, что означает: ширина и высота элемента включают только его внутренний отступ (padding) и границу (border). Это может привести к неожиданным проблемам с версткой страницы.
Чтобы исправить ситуацию, можно просто добавить в CSS-код следующий однострочник:
{
box-sizing: border-box;
}Такая строка установит свойство box-sizing в border-box для всех элементов на странице. Это означает, что ширина и высота элемента будут включать, помимо внутреннего отступа и границы, его контент.
5. Адаптивные изображения
Изображения — важная часть любого сайта, но сделать их адаптивными бывает непросто. Изображения, для которых был написан некорректный код, могут выглядеть растянутыми или искаженными на экранах разных размеров.
Чтобы сделать изображения адаптивными, можно воспользоваться следующим однострочником:
img {
max-width: 100%;
height: auto;
}Благодаря этому коду изображения не будут занимать более 100% доступного пространства и сохранят соотношение сторон.
6. Центрирование элементов
Центрирование элементов по горизонтали и вертикали может оказаться довольно сложным в CSS. Тем не менее существует простой прием, который можно использовать для центрирования любого элемента на странице:
.center {
margin: 0 auto;
}Этот код позволит отцентрировать элемент по горизонтали на странице. Можно также добавить следующий код для центрирования элемента по вертикали:
.center {
text-align: center;
}7. Создание пользовательских стилей флажков
Флажки, часто используемые в формах, могут иметь довольно скучный вид. С помощью CSS можно легко создать пользовательские стили флажков, соответствующие внешнему виду и атмосфере сайта.
Вот однострочник, позволяющий создать простой стиль флажка:
input[type="checkbox"] {
-webkit-appearance: none;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 3px;
width: 16px;
height: 16px;
display: inline-block;
}
input[type="checkbox"]:checked {
background-color: #ddd;
}Этот код создаст флажок с серым фоном и синей рамкой. Когда флажок будет отмечен, цвет фона изменится на светло-серый.
8. Выравнивание текста
Иногда текст на экране может выглядеть неровным или размытым. Это связано с тем, как отображаются шрифты. Можно выправить текст, используя следующий однострочник:
text-rendering: optimizeLegibility;Этот код позволит браузеру использовать технику рендеринга, благодаря которой текст будет выглядеть более выровненным даже на экранах с низким разрешением.
9. Очистка float-элементов
Float-элементы, часто применяемые при CSS-верстке, могут вызвать проблемы, если вы не будете бдительны. Одна из распространенных проблем заключается в том, что float-элементы перекрывают другие элементы на странице.
Чтобы этого не произошло, можно воспользоваться следующим однострочником, который очистит float-элементы:
.clearfix:after {
content: "";
display: block;
clear: both;
}Этот код добавит класс clearfix к любому элементу, после которого надо очистить float-элементы.
10. Сброс всех стилей
Иногда может понадобиться начать работу с CSS с нуля. Сбросить все стили на странице позволит следующий однострочник:
{
margin: 0;
padding: 0;
border: 0;
font-size: 16px;
font-family: sans-serif;
}Этот код вернет все поля, внутренние отступы, границы, размеры и семейства шрифтов к значениям по умолчанию.
Заключение
Используя эти 10 CSS-однострочников, вы сможете изменить внешний вид и поведение веб-приложения всего за несколько минут!
Читайте также:
- Как оформить поле ввода: советы и техники
- Как написать переключатель темы на базе файлов cookie с помощью CSS и ванильного JavaScript
- Анимация границ с помощью свойств CSS
Читайте нас в Telegram, VK и Дзен
Перевод статьи Nipuni Arunodi: 10 CSS One-Liners to Transform Your Web App
