Введение в HTML и CSS
Стас Мельников
Наставник по HTML-верстке
HTML — это язык гипертекстовой разметки, с помощью которого создают структуру документов
Теги — это специальные слова для браузера, с помощью которых он отображает страницу
Парные теги
Непарные теги
<!DOCTYPE html>
<html lang="ru">
<head>
<!-- установил кодировку документа-->
<meta charset="utf-8">
<!--заголовок страницы-->
<title>Заголовок страницы</title>
<!--подключил внешний CSS-файл-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--основная разметка страницы-->
</body>
</html><!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="welcome">
<a href="http://yandex.ru">
Перейти на страницу Яндекса
</a>
</div>
</body>
</html>
CSS(Cascading Style Sheets) — это язык, служащий для описания внешнего вида веб-страниц
CSS-каскад
CSS-каскад – это сгруппированные правила, которые применяются к элементам.
Основные селекторы:
— Универсальный селектор
— Селектор типа
— Класс
— Идентификатор
— Дочерний селектор
Селектор — это "ключ", с помощью которого браузер находит HTML-элементы и применяет к ним CSS.
Например, с помощью ".link" браузер найдет все элементы с классом link
Универсальный селектор
<body>
<div class="welcome">
<a href="#">...</a>
</div>
</body>
* {
margin: 0;
}HTML
CSS
С помощью универсального селектора браузер применит CSS ко всем элементам на странице
Селектор типа
<body>
<div class="welcome">
<a href="#">...</a>
</div>
</body>
a {
color: #000;
}HTML
CSS
С помощью селектора типа браузер применит CSS к определенному типу тега
Класс
<body>
<div class="welcome">
<a href="#" class="link">...</a>
</div>
</body>
.link {
color: #000;
}HTML
CSS
С помощью класса браузер применит CSS ко всем элементам, у которых существует этот класс
Идентификатор
<body>
<div class="welcome">
<a href="#" id="link">...</a>
</div>
</body>
#link {
color: #000;
}HTML
CSS
С помощью идентификатора браузер применит CSS к элементу, у которого существует этот идентификатор
Дочерний селектор
<body>
<div class="welcome">
<a href="#" id="link" class="link">...</a>
</div>
</body>
.welcome a { color: #000; }
.welcome #link { color: red; }
.welcome .link { color: green; }HTML
CSS
Специфичность — это коэффициент, согласному которому браузер определяет приоритет селектора
.link{
color: #000;
}a{
color: #000;
}#link{
color: #000;
}
div .link{
color: #000;
}<a style="color: #000">.welcome .link{
color: #000;
}
<a id="link" class="link any-link">
Перейти на страницу Яндекса
</a>a{
color: red;
}
.link{
color: #000;
}
#link{
color: green;
}
.any-link{
color: pink;
}Какого цвета будет ссылка?
a{
color: red !important;
}
.link{
color: #000;
}
#link{
color: green;
}
.any-link{
color: pink;
}!important
Полезности
Стас Мельников
Введение в HTML и CSS
By Stas Melnikov
