Изучите базовые теги HTML, правила написания CSS и практические советы для создания адаптивных и стильных сайтов.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Заголовок страницы</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Контент страницы
</body>
</html>
Тег | Значение |
---|---|
<h1>...</h1> | Заголовок, 1 уровень (на странице только один!) |
<h2> – <h6> | Подзаголовки |
<p> | Параграф текста |
<a href=""> | Ссылка |
<img src="" alt=""> | Картинка |
<ul>, <ol>, <li> | Списки (маркированный, нумерованный, пункт) |
<div> | Блок-контейнер |
<span> | Встроенный контейнер |
<br> | Перенос строки |
<hr> | Горизонтальная линия |
<strong>, <em> | Выделение (жирный, курсив) |
<section>, <article>, <nav>, <aside>, <footer> | Семантические блоки (см. ниже) |
<a>
.data-id="..."
).<div>
!
<main>
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>
<aside>...</aside>
</main>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
<ol>
<li>Первый</li>
<li>Второй</li>
</ol>
<table>
<tr><th>Имя</th><th>Возраст</th></tr>
<tr><td>Анна</td><td>25</td></tr>
</table>
<form action="/submit" method="post">
<label>Имя:
<input type="text" name="name">
</label>
<input type="submit" value="Отправить">
</form>
<input>
<img src="pic.jpg" alt="описание">
<video src="video.mp4" controls></video>
<audio src="audio.mp3" controls></audio>
<picture>
(современные форматы и ретина):
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="описание">
</picture>
<link rel="stylesheet" href="style.css">
(или <style>
прямо в <head>
).селектор { свойство: значение; }
p {
color: #222;
font-size: 1.2rem;
margin-bottom: 1em;
}
h2
— все <h2>
.className
— все элементы с классом className#idName
— элемент по iddiv > p
— все <p>
внутри <div>
(только прямые потомки)ul li
— все <li>
внутри <ul>
(вложенные на любом уровне)p:first-child
— первый <p>
в своём родителеinput[type="text"]
— все <input type="text">
a:hover
— ссылка при наведении
/* Несколько классов через запятую */
.button, .link { color: #0066ff; }
/* Все элементы внутри .block */
.block * { box-sizing: border-box; }
box-sizing: border-box;
чтобы padding и border входили в ширину.
.box {
width: 200px;
padding: 20px;
border: 2px solid #333;
margin: 16px;
box-sizing: border-box;
}
display: flex;
— включить flex-контейнерflex-direction: row | column;
— направление (по умолчанию row — горизонтально)justify-content
— выравнивание по главной осиalign-items
— по поперечной осиgap
— расстояние между элементамиflex-wrap
— перенос по строкам
.flex-row {
display: flex;
gap: 24px;
justify-content: space-between;
align-items: center;
}
flex: 1;
flex-wrap: wrap;
display: grid;
— включить grid-контейнерgrid-template-columns
— задать колонкиgrid-template-rows
— строкиgap
— отступы между ячейкамиgrid-column
, grid-row
— позиционирование ячеек
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
minmax()
, auto-fit
и auto-fill
для адаптива.
:root {
--main-color: #0066ff;
--radius: 10px;
}
.button {
color: var(--main-color);
border-radius: var(--radius);
}
@media (max-width: 900px) {
.block {
padding: 12px 6px;
font-size: 1rem;
}
}
max-width
(для уменьшения экрана).<head>
строку:<meta name="viewport" content="width=device-width, initial-scale=1.0">
<main>
, <nav>
, <footer>
и т.д.alt
к картинкам для доступности.normalize.css
или reset для согласованного отображения.rem
и em
вместо px — удобно масштабировать.
font-size: clamp(1rem, 3vw, 2.2rem);
.img-wrap { aspect-ratio: 16/9; }
@container (min-width: 500px) {
.card { font-size: 1.3rem; }
}
html { scroll-behavior: smooth; }
.modal { backdrop-filter: blur(10px); }
<meta name="viewport">
— сайт "ломается" на телефоне.alt
у картинок — плохо для доступности и SEO.<div>
вместо семантических тегов.height
) там, где нужен авто-рост.box-sizing: border-box
— неудобно считать размеры.display: flex|grid;
родителю.padding
и margin
(внутри/снаружи блока).div
, всё ли понятно по структуре, легко ли менять стили?