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
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37🔥14❤3
Позволяют выбирать элементы HTML на основе наличия, значения или частичного соответствия атрибутов. Это мощный инструмент, который делает стилизацию элементов более гибкой и точной.
Выбирает элементы, которые содержат указанный атрибут, независимо от его значения.
/* Выбирает все элементы с атрибутом title */
[title] {
color: blue;
}
Выбирает элементы, атрибут которых имеет точное указанное значение.
/* Выбирает все элементы с атрибутом type, равным "submit" */
input[type="submit"] {
background-color: green;
}
Выбирает элементы, атрибут которых содержит указанное значение в списке, разделенном пробелами.
/* Выбирает все элементы с классом, включающим "btn" */
[class~="btn"] {
font-weight: bold;
}
Выбирает элементы, атрибут которых начинается с указанного значения.
/* Выбирает все элементы, значение атрибута href которых начинается с "https" */
a[href^="https"] {
color: red;
}
Выбирает элементы, атрибут которых заканчивается на указанное значение.
/* Выбирает все элементы, значение атрибута href которых заканчивается на ".pdf" */
a[href$=".pdf"] {
text-decoration: underline;
}
Выбирает элементы, атрибут которых содержит указанное значение в любом месте.
/* Выбирает все элементы, значение атрибута href которых содержит "example" */
a[href*="example"] {
color: orange;
}
Стилизация всех изображений с атрибутом alt
img[alt] {
border: 2px solid blue;
}Стилизация ссылок, ведущих на внешние сайты
a[href^="http"] {
color: red;
}Стилизация полей ввода с определенным типом
input[type="text"] {
border: 1px solid gray;
}Стилизация элементов с определенным классом
[class~="button"] {
padding: 10px;
background-color: lightgray;
}Селекторы атрибутов можно комбинировать с другими типами селекторов для создания более специфичных правил.
/* Выбирает все кнопки с классом btn и типом submit */
button.btn[type="submit"] {
background-color: green;
color: white;
}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍33🔥6
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥35👍16
C атрибутом
disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.Этот селектор выбирает все элементы, у которых присутствует атрибут
disabled.button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
opacity: 0.6; /* Уменьшает непрозрачность */
}Этот селектор выбирает все элементы, которые находятся в состоянии
disabled.button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}С HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Button Styling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button>Active Button</button>
<button disabled>Disabled Button</button>
</body>
</html>
С CSS
/* Стили для активных кнопок */
button {
background-color: blue;
color: white;
border: 1px solid #000;
padding: 10px 20px;
cursor: pointer;
}
/* Стили для кнопок с атрибутом disabled */
button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}
/* Альтернативный способ с использованием псевдокласса :disabled */
button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}
Вы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.
/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
background-color: darkgray;
color: black;
border: 1px dashed #999;
cursor: not-allowed;
opacity: 0.7;
}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17❤1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍46🔥5
Для изменения стилей элемента
<span> в CSS можно использовать селекторы классов, идентификаторов, селекторы по атрибутам или селекторы по типу элемента. Если элементу
<span> присвоен класс, вы можете использовать класс-селектор для его стилизации.HTML
<span class="highlight">Этот текст будет выделен.</span>
CSS
.highlight {
color: red;
font-weight: bold;
background-color: yellow;
}Если элементу
<span> присвоен идентификатор, вы можете использовать идентификатор-селектор для его стилизации.HTML
<span id="unique-span">Этот текст уникален.</span>
CSS
#unique-span {
color: blue;
font-style: italic;
background-color: lightgray;
}Вы можете использовать селекторы атрибутов для стилизации элементов
<span>, основанных на наличии определенного атрибута или его значения.HTML
<span data-custom="example">Этот текст имеет пользовательский атрибут.</span>
CSS
span[data-custom="example"] {
color: green;
text-decoration: underline;
}Вы можете использовать селектор по типу элемента для стилизации всех элементов
<span> на странице. Однако будьте осторожны с этим подходом, так как он затронет все <span> элементы.HTML
<span>Этот текст будет стилизован.</span>
<span>И этот текст тоже.</span>
CSS
span {
color: purple;
font-size: 18px;
}Вы можете комбинировать различные типы селекторов для более точной стилизации.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Span Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<span class="highlight">Этот текст будет выделен.</span>
<span id="unique-span">Этот текст уникален.</span>
<span data-custom="example">Этот текст имеет пользовательский атрибут.</span>
<p>Текст с <span class="highlight">выделением</span> внутри абзаца.</p>
<p id="unique-paragraph">Абзац с <span class="highlight">выделением</span> и уникальным идентификатором.</p>
</body>
</html>
CSS
/* Стили для класса */
.highlight {
color: red;
font-weight: bold;
background-color: yellow;
}
/* Стили для идентификатора */
#unique-span {
color: blue;
font-style: italic;
background-color: lightgray;
}
/* Стили для пользовательского атрибута */
span[data-custom="example"] {
color: green;
text-decoration: underline;
}
/* Стили для всех span */
span {
color: purple;
font-size: 18px;
}
/* Комбинированные стили */
p span.highlight {
color: red;
font-weight: bold;
}
#unique-paragraph span.highlight {
color: blue;
background-color: yellow;
}
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤1
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥17💊5❤1
Это процесс в CSS, когда вертикальные внешние отступы (margins) двух или более блоков объединяются в один. Это поведение касается только вертикальных отступов (margin-top и margin-bottom) и не касается горизонтальных (margin-left и margin-right).
Схлопывание границ помогает избежать ненужных больших отступов между элементами. Например, если у двух соседних элементов установлены верхний и нижний отступы, то без схлопывания они бы суммировались и создавали избыточное пространство между элементами.
Если у одного блока снизу есть margin-bottom, а у другого блока сверху есть margin-top, то итоговый отступ между этими блоками будет равен большему из двух значений, а не их сумме. Если у элемента задан margin-top и он находится первым в контейнере, его верхний отступ может схлопнуться с верхним отступом контейнера. Если у элемента установлен margin-bottom и он является последним в контейнере, его нижний отступ может схлопнуться с нижним отступом контейнера. В этом примере между блоками будет отступ не 50px (20px + 30px), а 30px, потому что сработает схлопывание границ и возьмется большее значение.
<!DOCTYPE html>
<html>
<head>
<style>
.block1 {
margin-bottom: 20px;
background-color: lightblue;
}
.block2 {
margin-top: 30px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="block1">Блок 1</div>
<div class="block2">Блок 2</div>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍29