Выберите любой тип элементов и сделайте сброс CSS
В этой статье мы собираемся продемонстрировать, как использовать универсальный селектор *.
Универсальный селектор * используется для непосредственного выбора всего HTML-тега и внесения изменений в стиль.
Например, у нас есть ‹div›, ‹p› и ‹a› на странице.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div>this is a div</div> <p>This is a paragraph</p> <a href="index.html">This is a link</a> </body> </html>
Мы уже стилизовали ‹div›, а также ‹p›.
div{
background-color: orange;
height: 50px;
width: 100%;
}
p{
background-color: red;
}
Вы можете видеть, что в этих элементах есть стили по умолчанию, например, ‹body› имеет отступы, ‹p› имеет отступ, а ‹a› имеет цвет по умолчанию.
Чтобы сбросить стили, мы можем использовать * для выбора всех этих элементов.
*{
padding: 0;
margin: 0;
color: green;
}
Теперь ‹body› больше не имеет заполнения, а ‹p› больше не имеет поля. У всех есть зеленый текст, и даже у ‹a› есть зеленый текст.
Разница между *, html и телом
При выборе ‹body› и ‹html› другие html-элементы наследуют стиль, но не переопределяют стиль.
Например, если мы нацелимся на ‹body›.
body{
padding: 0;
margin: 0;
color:green;
}
Цвет текста становится зеленым, однако цвет ‹a› по-прежнему использует стиль по умолчанию. И ‹тело› не имеет отступов.
Если вы настроите таргетинг на ‹html›, цвет текста станет зеленым. ‹тело› остается с отступом.
Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter.
