Введение
HTML (HyperText Markup Language) — это язык разметки, который задаёт структуру веб-страниц. Именно с него начинается любая фронтенд-разработка: вы определяете заголовки, списки, ссылки, изображения, формируете семантику и обеспечиваете доступность контента.
1. Основы HTML
• Доктайп и структура
• Теги и атрибуты
Каждый элемент в HTML — это тег с опциональными атрибутами. Например:
• Семантические теги
header, nav, main, article, section, aside, footer — помогают строить понятную и доступную структуру.
2. Встроенные (user‐agent) стили
Браузеры по умолчанию применяют к элементам стили, чтобы страница выглядела читаемо даже без подключения CSS. Эти стили называются встроенными или «user‐agent styles».
• Проблема отступов
У разных браузеров у <body> могут быть отступы по умолчанию. У списков <ul>, <ol> — свои margin и padding. Это мешает точному позиционированию при верстке.
Решение: сбрасывать отступы
Селектор * (универсальный) охватывает каждый элемент на странице.
В нашем примере показаны два подхода к «сбросу» встроенных отступов браузера:
1. Сброс только для конкретных элементов
– Убирает «неожиданные» отступы именно у <body> и у списков.
– Позволяет сохранить значения по-умолчанию для остальных тегов (например, у заголовков, параграфов, форм).
2. Глобальный сброс через универсальный селектор
– Сбрасывает отступы у всех элементов на странице.
– Заставляет все блоки считать ширину/высоту вместе с внутренними отступами (box-sizing: border-box), что упрощает расчёт размеров.
– Должен идти самым первым в вашем CSS, чтобы не «скрыть» более приоритетные правила.
Чего стоит помнить и о чём задуматься:
- Порядок важен
– Сначала глобальный сброс (* {…}), затем— ваши «базовые» стили для конкретных тегов, компонентов, утилит.
– Если же вы напишите глобальный сброс после «специфичных» правил, вы их «отмените».
- Производительность
– Универсальный селектор довольно «тяжёлый»: при большом количестве элементов он чуть тормозит рендер в старых браузерах, но в большинстве современных случаев проблем не создаёт.
– Если вас беспокоит перфоманс, можно сбрасывать не всё подряд, а только «группу тегов» через перечисление:
html, body, div, ul, ol, h1, h2, p, … { margin:0; padding:0; }
- box-sizing: border-box
– Очень популярная практика: padding и border «включаются» в заданную ширину/высоту.
– Без этого некоторые макеты ломаются из-за того, что элемент «вылазит» за пределы контейнера.
- Альтернатива — normalize.css или reset.css
– Готовые решения, которые «подчищают» стили браузера более избирательно, сохраняя полезные типографические настройки и обеспечивая кроссбраузерность.
Итоговая структура вашего CSS может выглядеть так:
Таким образом, вы надёжно «обнуляете» ненужные отступы браузера и задаёте удобную модель расчёта размеров, а потом постепенно наращиваете свои собственные стили.
3. Система ссылок
Ссылка — один из ключевых элементов HTML.
• Внешние переходы
Чтобы при клике пользователь переходит на другую страницу, обязательно прописываем атрибут href:
<a href="https://antonkozlov.tilda.ws/">Перейти на сайт Креативный дизайн</a>
• Якорные (внутренние) ссылки
Переход внутри страницы организуется так:
<a href="#contacts">Перейти к блоку «Контакты»</a>
…
<div id="contacts">Контакты</div>
Тег <a>:
Элемент a предназначен для создания ссылок.
4. Свойство text-decoration
По умолчанию браузеры подчёркивают ссылки. Управлять этим позволяет CSS-свойство text-decoration:
– none — без украшений;
– underline — подчеркивание;
– line-through — зачеркивание;
– overline — надчеркивание.
Пример: убрать подчеркивание у всего текста
Однако этот код к тексту внутри <a> не применится: браузер уже содержит встроенные стили для ссылок, которые имеют более высокий приоритет внутри этого контекста.
5. Правильная стилизация ссылок
Чтобы гарантированно убрать подчёркивание и задать цвет именно ссылкам, пишем CSS для селектора a:
Теперь ссылки будут белыми и без подчеркивания.
Совет: обращайте внимание в инструментах разработчика на зачеркивания и «блеклые» строки в панели стилей — так браузер показывает, какие правила были переопределены или не применились.
Заключение
HTML — это не просто набор тегов, а основа семантики, доступности и структуры веб-страниц. Понимание встроенных стилей браузера и умение их сбрасывать позволяет создавать здоровую и предсказуемую основу для ваших CSS. А грамотная работа с тегом <a> и свойством text-decoration сделает ваши ссылки аккуратными и адаптивными. Овладейте этими приёмами — и каждый ваш проект будет выглядеть единообразно и профессионально во всех браузерах!
Полезные ресурсы:
Премиум контент:
https://dzen.ru/grafantonkozlov?tab=premium
Сообщество дизайнеров в VK
https://vk.com/grafantonkozlov
Телеграмм канал сообщества
https://t.me/grafantonkozlov
Архив эксклюзивного контента
https://boosty.to/antonkzv
Канал на Дзен
https://dzen.ru/grafantonkozlov
---------------------------------------
Бесплатный Хостинг и доменное имя
https://tilda.cc/?r=4159746
Мощная и надежная нейронная сеть Gerwin AI
https://t.me/GerwinPromoBot?start=referrer_3CKSERJX
GPTs — плагины и ассистенты для ChatGPT на русском языке
https://gptunnel.ru/?ref=Anton
---------------------------------------
Донат для автора блога