Frontend | Вопросы собесов
Сайт easyoffer.ru Реклама @easyoffer_adv ВП @easyoffer_vp Тесты t.me/+T0COHtFzCJkwMDUy Задачи t.me/+_tcX2w2EmvdmMTgy Вакансии t.me/+CgCAzIyGHHg0Nzky
Ko'proq ko'rsatish📈 Telegram kanali Frontend | Вопросы собесов analitikasi
Frontend | Вопросы собесов (@easy_javascript_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 18 272 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 345-o'rinni va Rossiya mintaqasida 36 940-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 18 272 obunachiga ega bo‘ldi.
15 Iyun, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -134 ga, so‘nggi 24 soatda esa -7 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 9.73% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 5.72% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 778 marta ko‘riladi; birinchi sutkada odatda 1 046 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 9 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent ставь, браузер, html, border, flex kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Сайт easyoffer.ru
Реклама @easyoffer_adv
ВП @easyoffer_vp
Тесты t.me/+T0COHtFzCJkwMDUy
Задачи t.me/+_tcX2w2EmvdmMTgy
Вакансии t.me/+CgCAzIyGHHg0Nzky”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 16 Iyun, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
<!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>
🚩Когда схлопывание границ не происходит
🟠Если элементы имеют display:flex или display:grid.
🟠Если между элементами есть элемент с padding или border.
🟠Если у одного из элементов установлено свойство overflow со значением отличным от visible.
🟠Если один из элементов плавающий (float).
Ставь 👍 и забирай 📚 Базу знаний<span> в CSS можно использовать селекторы классов, идентификаторов, селекторы по атрибутам или селекторы по типу элемента.
🚩Как стилизовать <span> элемент
🟠Селекторов классов
Если элементу <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;
}
Ставь 👍 и забирай 📚 Базу знанийdisabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.
🚩Пример использования
🟠Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут disabled.
button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
opacity: 0.6; /* Уменьшает непрозрачность */
}
🟠Псевдокласса :disabled
Этот селектор выбирает все элементы, которые находятся в состоянии 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;
}
Ставь 👍 и забирай 📚 Базу знаний/* Выбирает все элементы с атрибутом 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;
}
Ставь 👍 и забирай 📚 Базу знаний<input type="file"> может быть сложно из-за его специфичного и нестандартного поведения в разных браузерах. Однако, с помощью CSS и небольшого количества JavaScript, можно создать стилизованный компонент для загрузки файлов, который будет выглядеть и работать одинаково во всех браузерах.
🚩Для загрузки файлов HTML
<!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>
🚩Для загрузки файлов CSS
/* Стили для контейнера файла */
.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;
}
🚩Для загрузки файлов JavaScript
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';
}
});
});
🟠HTML
Создается структура с элементом <input type="file">, который скрыт с помощью CSS. <label> используется для создания пользовательского интерфейса. Лейбл связан с инпутом через атрибут for.
🟠CSS
Скрывается стандартный элемент инпута для файла с помощью opacity: 0 и position: absolute. Стилизуются кастомные элементы лейбла, кнопки и отображения имени файла.
🟠JavaScript
Слушает событие change на инпуте для файла. При выборе файла обновляет текст внутри элемента с классом .file-input__name на имя выбранного файла.
Ставь 👍 и забирай 📚 Базу знаний<div id="user" data-user-id="123" data-user-role="admin">...</div>
🟠Создание более гибких и интерактивных приложений
Можно легко передавать и использовать данные для динамического изменения содержимого страницы.
<button data-action="save" data-target="#form">Save</button>
🟠Разделение данных и представления
Помогают разделять данные и логику от представления, сохраняя HTML-код чистым и структурированным.
🟠Работа с JavaScript
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- не влияют на стандартные функции браузеров и инструментов разработки.
➕Поддержка валидации HTML
HTML5 атрибуты data- валидны и не нарушают спецификацию.
Ставь 👍 и забирай 📚 Базу знаний
Endi mavjud! Telegram Tadqiqoti 2025 — yilning asosiy insaytlari 
