Frontend | Вопросы собесов

button[disabled] {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
    opacity: 0.6; /* Уменьшает непрозрачность */
}

button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

<!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>

/* Стили для активных кнопок */
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;
}

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;
}

<!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';
        }
    });
});

<div id="user" data-user-id="123" data-user-role="admin">...</div>   

<button data-action="save" data-target="#form">Save</button>  

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';
    }
});

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>

@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;
}
}

selector {
    property: value !important;
}

/* Без использования !important */
p {
    color: red;
}

p.special {
    color: blue;
}

/* С использованием !important */
p.important {
    color: green !important;
}

<!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>