Чтобы изменить направление оси flexbox-контейнера, нужно использовать свойство CSS
flex-direction. Это свойство определяет основную ось контейнера и направление размещения flex-элементов. Основная ось — горизонтальная, элементы располагаются слева направо. Это значение по умолчанию.
Основная ось — горизонтальная, элементы располагаются справа налево.
Основная ось — вертикальная, элементы располагаются сверху вниз.
Основная ось — вертикальная, элементы располагаются снизу вверх.
Горизонтальное направление (слева направо):
.container {
display: flex;
flex-direction: row; /* или просто не указывать, так как это значение по умолчанию */
}Горизонтальное направление (справа налево):
.container {
display: flex;
flex-direction: row-reverse;
}Вертикальное направление (сверху вниз):
.container {
display: flex;
flex-direction: column;
}Вертикальное направление (снизу вверх):
.container {
display: flex;
flex-direction: column-reverse;
}Пример HTML и CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Direction</title>
<style>
.container {
display: flex;
flex-direction: row; /* Измените значение на row-reverse, column, или column-reverse для проверки разных направлений */
border: 1px solid #000;
height: 200px;
}
.item {
flex: 1;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤5🔥1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍53❤3🔥3🤯1💊1
HTML предоставляет множество типов
<input> элементов, которые можно использовать для различных целей в веб-формах. Каждый тип <input> элемента определяет, какие данные могут быть введены пользователем и как эти данные будут отображаться в браузере.Однострочное текстовое поле для ввода обычного текста.
<input type="text" name="username">
Однострочное текстовое поле для ввода пароля, где введенные символы скрыты.
<input type="password" name="password">
Поле для ввода адреса электронной почты. Проверяет правильность формата введенного значения.
<input type="email" name="email">
Поле для ввода поискового запроса.
<input type="search" name="search">
Поле для ввода телефонного номера.
<input type="tel" name="phone">
Поле для ввода URL-адреса. Проверяет правильность формата введенного значения.
<input type="url" name="website">
Поле для ввода чисел. Может включать стрелки для увеличения или уменьшения значения.
<input type="number" name="quantity" min="1" max="10">
Ползунок для выбора значения из заданного диапазона.
<input type="range" name="volume" min="0" max="100">
Поле для выбора даты.
<input type="date" name="birthday">
Поле для выбора даты и времени (без часового пояса).
<input type="datetime-local" name="meeting-time">
Поле для выбора месяца и года.
<input type="month" name="expiry">
Поле для выбора недели и года.
<input type="week" name="week">
Поле для выбора времени.
<input type="time" name="alarm">
Поле для загрузки файлов с компьютера.
<input type="file" name="resume">
Поле для выбора цвета с помощью цветовой палитры.
<input type="color" name="favcolor">
Флажок для выбора/отмены выбора опции.
<input type="checkbox" name="subscribe" value="newsletter">
Радиокнопка для выбора одного значения из группы.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Кнопка для выполнения действия.
<input type="button" value="Click me">
Кнопка для отправки формы на сервер.
<input type="submit" value="Submit">
Кнопка для сброса формы до исходных значений.
<input type="reset" value="Reset">
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥32👍17❤6
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍70🔥5❤3
В CSS Flexbox, свойства
justify-content и align-items используются для управления выравниванием и распределением элементов внутри flex-контейнера.Свойство
justify-content определяет, как flex-элементы должны быть распределены вдоль основной оси (main axis) контейнера. Основная ось по умолчанию — это горизонтальная ось для flex-direction: row и вертикальная ось для flex-direction: column.Элементы прижаты к началу контейнера.
.container {
display: flex;
justify-content: flex-start;
} Элементы прижаты к концу контейнера.
.container {
display: flex;
justify-content: flex-end;
} Элементы выровнены по центру контейнера.
.container {
display: flex;
justify-content: center;
} Элементы равномерно распределены, первый элемент прижат к началу, последний элемент — к концу контейнера.
.container {
display: flex;
justify-content: space-between;
} Элементы равномерно распределены с равным отступом вокруг них.
.container {
display: flex;
justify-content: space-around;
} Элементы равномерно распределены с равными отступами между ними и краями контейнера.
.container {
display: flex;
justify-content: space-evenly;
} Свойство
align-items определяет, как flex-элементы должны быть выровнены вдоль поперечной оси (cross axis) контейнера. Поперечная ось перпендикулярна основной оси: вертикальная ось для flex-direction: row и горизонтальная ось для flex-direction: column.Элементы прижаты к началу поперечной оси контейнера.
.container {
display: flex;
align-items: flex-start;
} Элементы прижаты к концу поперечной оси контейнера.
.container {
display: flex;
align-items: flex-end;
} Элементы выровнены по центру поперечной оси контейнера.
.container {
display: flex;
align-items: center;
} Элементы выровнены по их базовой линии текста.
.container {
display: flex;
align-items: baseline;
} Элементы растянуты, чтобы заполнить контейнер вдоль поперечной оси (по умолчанию).
.container {
display: flex;
align-items: stretch;
} Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22❤1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥14🤯10❤1
Чтобы убрать маркер у списка, используйте свойство CSS
list-style-type со значением none. Это свойство применяется к элементам списка <ul> (ненумерованный список) или <ol> (нумерованный список) и убирает маркеры (буллеты) у элементов списка <li>.Пример использования HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Список без маркеров</title>
<style>
.no-marker {
list-style-type: none; /* Убирает маркеры */
padding: 0; /* Убирает отступы */
margin: 0; /* Убирает внешние отступы */
}
</style>
</head>
<body>
<ul class="no-marker">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
</body>
</html>
Пример использования CSS
.no-marker {
list-style-type: none; /* Убирает маркеры */
padding: 0; /* Убирает отступы */
margin: 0; /* Убирает внешние отступы */
}Убирает маркеры у элементов списка
<li>.Убирает внутренние отступы у списка. Это полезно, поскольку некоторые браузеры добавляют отступы по умолчанию.
Убирает внешние отступы у списка.
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20😁5❤1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍35🔥10❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Программист — лекарство от больных тимлидов, тупых багов и тех самых митов в 10 утра ☠️
Здесь собирают лучшие мемы про айтишников, чтобы спасти вашу психику от died'осов на работе.
Идеально зачиллить вечерком и скинуть друзьям: @progeri
Здесь собирают лучшие мемы про айтишников, чтобы спасти вашу психику от died'осов на работе.
Идеально зачиллить вечерком и скинуть друзьям: @progeri
💊5👍1😁1
Свойство CSS
background-size определяет размеры фонового изображения элемента. Это свойство позволяет контролировать, как фоновое изображение масштабируется и располагается внутри элемента. Исходный размер фонового изображения. Это значение по умолчанию.
background-size: auto;
Масштабирует фоновое изображение так, чтобы оно полностью покрывало контейнер. Изображение будет обрезано, чтобы сохранить свои пропорции.
background-size: cover;
Масштабирует фоновое изображение так, чтобы оно полностью помещалось внутри контейнера, сохраняя свои пропорции. Изображение будет уменьшено или увеличено, чтобы вписаться в контейнер без обрезки.
background-size: contain;
Определяет конкретные размеры изображения в пикселях.
background-size: 100px 50px;
Определяет размер изображения в процентах от размера контейнера.
background-size: 50% 25%;
Устанавливает ширину изображения, высота будет автоматически установлена для сохранения пропорций.
background-size: 100px;
Устанавливает ширину и высоту одновременно.
background-size: width height;
Масштабирование изображения с
cover.element {
background-image: url('example.jpg');
background-size: cover;
}Масштабирование изображения с
contain.element {
background-image: url('example.jpg');
background-size: contain;
}Конкретные размеры в пикселях
.element {
background-image: url('example.jpg');
background-size: 100px 50px;
}Процентные значения
.element {
background-image: url('example.jpg');
background-size: 50% 50%;
}Одно значение (ширина)
.element {
background-image: url('example.jpg');
background-size: 100px;
}Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍30🔥9❤2💊1
Для повышения приоритета конкретного правила, чтобы оно переопределяло все другие правила для данного элемента, даже если другие правила имеют более специфичные селекторы.
Чтобы применить
!important, добавьте его в конце свойства и перед точкой с запятой:selector {
property: value !important;
}В этом примере текст в параграфе с классом
important будет зеленым, несмотря на то, что есть другие правила, определяющие цвет текста для <p> и <p class="special">./* Без использования !important */
p {
color: red;
}
p.special {
color: blue;
}
/* С использованием !important */
p.important {
color: green !important;
}
Иногда вам нужно, чтобы определенное правило CSS применялось независимо от других стилей, которые могут быть установлены для этого элемента.
!important позволяет вам это сделать.В крупных проектах
!important может быть полезен для временного исправления или обхода конкретных стилей без необходимости изменять существующие файлы стилей.В этом примере текст в первом параграфе будет красным, так как применится правило
.normal. Во втором параграфе текст будет синим, так как правило .override с !important переопределяет правило .normal.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style>
.normal {
color: red;
}
.override {
color: blue !important;
}
</style>
</head>
<body>
<p class="normal">This text is red.</p>
<p class="normal override">This text is blue.</p>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14❤2🔥1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍34🔥14
Используются для создания адаптивного дизайна веб-страниц, который корректно отображается на различных устройствах, включая мобильные телефоны. Они позволяют применять разные стили в зависимости от характеристик устройства, таких как ширина экрана, высота экрана, ориентация и разрешение. Это особенно важно для обеспечения удобного пользовательского опыта на мобильных устройствах.
Один из наиболее часто используемых параметров для медиа-запросов — ширина экрана устройства.
@media (max-width: 600px) {
/* Стили для мобильных устройств */
} Медиа-запросы могут применяться в зависимости от ориентации устройства: портретная (вертикальная) или альбомная (горизонтальная).
@media (orientation: portrait) {
/* Стили для портретной ориентации */
}
@media (orientation: landscape) {
/* Стили для альбомной ориентации */
} Медиа-запросы могут основываться на разрешении экрана, что полезно для ретина-дисплеев и других устройств с высоким разрешением.
@media (min-resolution: 2dppx) {
/* Стили для экранов с высоким разрешением */
} Изменение стилей для мобильных устройств
/* Основные стили для всех устройств */
body {
font-size: 16px;
background-color: white;
}
/* Стили для мобильных устройств (максимальная ширина 600px) */
@media (max-width: 600px) {
body {
font-size: 14px;
background-color: lightgrey;
}
}
Адаптация макета для планшетов и мобильных устройств
/* Основные стили для десктопов и планшетов */
.container {
display: flex;
flex-direction: row;
}
/* Стили для планшетов (ширина 601px до 1024px) */
@media (max-width: 1024px) {
.container {
flex-direction: column;
}
}
/* Стили для мобильных устройств (максимальная ширина 600px) */
@media (max-width: 600px) {
.container {
flex-direction: column;
font-size: 12px;
}
}
В этом подходе основные стили пишутся для мобильных устройств, а затем добавляются медиа-запросы для планшетов и десктопов.
/* Основные стили для мобильных устройств */
body {
font-size: 14px;
}
/* Стили для планшетов и десктопов */
@media (min-width: 600px) {
body {
font-size: 16px;
}
}
@media (min-width: 1024px) {
body {
font-size: 18px;
}
}
В этом подходе основные стили пишутся для десктопов, а затем добавляются медиа-запросы для планшетов и мобильных устройств.
/* Основные стили для десктопов */
body {
font-size: 18px;
}
/* Стили для планшетов */
@media (max-width: 1024px) {
body {
font-size: 16px;
}
}
/* Стили для мобильных устройств */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25❤3🔥2
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍38🔥5❤1😁1
Используется свойство
text-transform. Это свойство управляет преобразованием текста и может принимать несколько значений для изменения регистра букв.Оставляет текст в его первоначальном виде, без преобразований.
p {
text-transform: none;
} Преобразует первую букву каждого слова в заглавную.
p {
text-transform: capitalize;
} Преобразует все буквы текста в заглавные.
p {
text-transform: uppercase;
} Преобразует все буквы текста в строчные.
p {
text-transform: lowercase;
} .uppercase {
text-transform: uppercase;
}<p class="uppercase">Этот текст будет заглавными буквами.</p>
.lowercase {
text-transform: lowercase;
}<p class="lowercase">ЭТОТ ТЕКСТ БУДЕТ СТРОЧНЫМИ БУКВАМИ.</p>
.capitalize {
text-transform: capitalize;
}<p class="capitalize">этот текст будет с заглавными буквами у каждого слова.</p>
.none {
text-transform: none;
}<p class="none">Этот текст останется в исходном виде.</p>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16❤3
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39
В HTML используются для хранения пользовательских данных в элементах страницы. Они предоставляют способ добавления информации к элементам HTML, не вмешиваясь в стандартные атрибуты и структуру HTML. Эти атрибуты позволяют разработчикам ассоциировать произвольные данные с элементами и использовать их в JavaScript для создания более динамичных и интерактивных веб-приложений.
Позволяют хранить пользовательские данные непосредственно в HTML-элементах. Это особенно полезно, когда необходимо передавать данные между HTML и JavaScript.
<div id="user" data-user-id="123" data-user-role="admin">...</div>
Можно легко передавать и использовать данные для динамического изменения содержимого страницы.
<button data-action="save" data-target="#form">Save</button>
Помогают разделять данные и логику от представления, сохраняя HTML-код чистым и структурированным.
JavaScript может легко извлекать и использовать данные из атрибутов
data-, что упрощает манипулирование элементами страницы.const user = document.getElementById('user');
const userId = user.getAttribute('data-user-id');
const userRole = user.getAttribute('data-user-role');
console.log(`User ID: ${userId}, Role: ${userRole}`); <div class="product" data-product-id="101" data-product-price="29.99">
<h2>Product Name</h2>
<p>Product Description</p>
</div>
const product = document.querySelector('.product');
const productId = product.getAttribute('data-product-id');
const productPrice = product.getAttribute('data-product-price');
console.log(`Product ID: ${productId}, Price: ${productPrice}`);<button data-action="submit" data-target="#form">Submit</button>
const button = document.querySelector('button');
button.addEventListener('click', function() {
const action = this.getAttribute('data-action');
const target = this.getAttribute('data-target');
console.log(`Action: ${action}, Target: ${target}`);
});<div id="toggle" data-state="collapsed">Click to Expand</div>
const toggle = document.getElementById('toggle');
toggle.addEventListener('click', function() {
const state = this.getAttribute('data-state');
if (state === 'collapsed') {
this.setAttribute('data-state', 'expanded');
this.textContent = 'Click to Collapse';
} else {
this.setAttribute('data-state', 'collapsed');
this.textContent = 'Click to Expand';
}
});Легко добавлять и изменять данные без изменения HTML-структуры.
Атрибуты
data- не влияют на стандартные функции браузеров и инструментов разработки.HTML5 атрибуты
data- валидны и не нарушают спецификацию.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17❤6
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27🔥7💊2
Элемент
<input type="file"> может быть сложно из-за его специфичного и нестандартного поведения в разных браузерах. Однако, с помощью CSS и небольшого количества JavaScript, можно создать стилизованный компонент для загрузки файлов, который будет выглядеть и работать одинаково во всех браузерах.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom File Input</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="file-input">
<input type="file" id="file" class="file-input__input">
<label for="file" class="file-input__label">
<span class="file-input__button">Choose a file</span>
<span class="file-input__name">No file chosen</span>
</label>
</div>
<script src="scripts.js"></script>
</body>
</html>
/* Стили для контейнера файла */
.file-input {
position: relative;
display: inline-block;
width: 100%;
max-width: 400px;
font-family: Arial, sans-serif;
}
/* Скрыть стандартный инпут для файла */
.file-input__input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
/* Стили для кастомного лейбла */
.file-input__label {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f8f8f8;
cursor: pointer;
}
/* Стили для кнопки выбора файла */
.file-input__button {
background-color: #007bff;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
margin-right: 10px;
}
/* Стили для отображения имени файла */
.file-input__name {
color: #999;
}
document.addEventListener('DOMContentLoaded', function () {
const fileInput = document.querySelector('.file-input__input');
const fileName = document.querySelector('.file-input__name');
fileInput.addEventListener('change', function () {
if (fileInput.files.length > 0) {
fileName.textContent = fileInput.files[0].name;
} else {
fileName.textContent = 'No file chosen';
}
});
});Создается структура с элементом
<input type="file">, который скрыт с помощью CSS. <label> используется для создания пользовательского интерфейса. Лейбл связан с инпутом через атрибут for.Скрывается стандартный элемент инпута для файла с помощью
opacity: 0 и position: absolute. Стилизуются кастомные элементы лейбла, кнопки и отображения имени файла.Слушает событие
change на инпуте для файла. При выборе файла обновляет текст внутри элемента с классом .file-input__name на имя выбранного файла.Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18❤8🔥1