Резюме
Вы, возможно, уже знаете, что CSS — это ключевая технология для стилизации веб-страниц. Но не обязательно использовать его, чтобы ваш сайт выглядел привлекательно.
Как CSS и HTML Взаимодействуют?
Если вы давно изучаете веб-технологии или делаете это самостоятельно, возможно, вы привыкли использовать HTML и CSS, не особо задумываясь о их функции.
HTML (Язык Разметки Гипертекста) отвечает за содержание. Это описательный язык, позволяющий вам аннотировать контент тегами, такими как p и table. Эти теги определяют структуру и смысл текста внутри них:
Что Такое HTML?
HTML играет ключевую роль в работе интернета.
CSS (Каскадные Таблицы Стилей) служит для представления. Он задает форматирование вашего контента, используя такие свойства, как размер шрифта и цвет:
Ясное разделение между HTML и CSS приносит несколько преимуществ:
Это разделение также означает, что веб-страница может отображаться и без CSS. В былые времена веб-страницы вообще не использовали CSS. Веб-браузеры применяют разумные значения по умолчанию для отображения HTML, основываясь на смысле его тегов.
Например, даже без явного стиля элемент H1 будет иметь стандартное оформление. Поскольку это основной заголовок на странице, логично, что он будет крупнее и жирнее с достаточным вертикальным пространством:
Как Создать Надежный Сайт С Помощью Пошагового Улучшения?
При создании дизайна важно учитывать семантику вашего HTML. Всегда используйте тот тег, который лучше всего передает суть вашего контента, независимо от того, как это будет выглядеть в браузере. Если вы используете правильные теги, ваш контент будет читаемым даже без CSS.
Возможно, вам кажется, что предоставленный вами CSS всегда будет доступен, но есть исключения, которые стоит учитывать. К ним относятся сетевые проблемы, серверные ошибки или неправильная конфигурация, системные сбои (включая расширения) или если пользователь решит отключить CSS. Также уделите внимание пользователям с нарушениями зрения; чем более независимыми будут ваш HTML и CSS, тем легче им будет воспринимать ваш контент.
Например, представьте, что у вас есть несколько абзацев, которые вы хотите превратить в маркированный список:
Один из способов — использовать CSS для добавления маркера в начале каждого абзаца:
Это может выглядеть как маркированный список, и на первый взгляд все кажется в порядке:
Но когда CSS отключен, браузер просто вернется к отображению обычных абзацев:
В этом случае решение простое: используйте правильный тег для маркированного списка (ul), который предоставляет HTML:
Это немного сложнее, чем разметка абзаца, но эта небольшая деталь приносит свои плоды: ваш HTML становится более описательным и передает смысл контента. В результате браузер может отобразить вашу страницу так, как задумано, даже без CSS:
Вы все равно можете использовать CSS для настройки дизайна, возможно, изменяя стиль маркеров, добавляя дополнительное пространство или применяя другой шрифт. Но это оформление должно накладываться на чистый, надежный HTML, чтобы обеспечить крепкую основу.
Советы по Началу Работы с Современным CSS
Стили, которые всегда будут актуальны.
Приведенный выше пример немного запутан, поэтому давайте рассмотрим другой: ссылки. Часто вам нужно будет включить ряд ссылок на странице, возможно, в виде списка или в подвале:
По умолчанию ссылки отображаются как встроенные блоки, и длинный набор будет размещаться в одной строке, пока не перейдет на следующую:
Возможно, именно так вы и хотите их расположить в подвале, так что с помощью немного CSS можно добиться нужного визуального эффекта:
Базовое оформление делает ссылки похожими на вкладки, с изменением шрифта, фоном и отступами:
Однако без CSS страница будет отображаться как сплошной блок текста в одну строку, что не очень удобно для чтения. Если ссылки состоят из нескольких слов, с ними еще труднее справляться:
Стандартное встроенное отображение, отступы и размер шрифта делают эти ссылки слаборазличимыми друг от друга, усложняя восприятие. Однако эту проблему можно решить с помощью более семантического HTML:
Теперь даже без CSS список длинных ссылок читается гораздо легче:
Вам может понадобиться одно или два дополнительных правила CSS, чтобы отменить стандартное оформление списков, но это небольшая цена за более чистый HTML и лучший пользовательский опыт без CSS.
Методы Чистого HTML и CSS
Использование минимального, семантического HTML приносит множество преимуществ, помимо надежного отображения страниц без CSS. Поисковые системы часто вознаграждают чистую разметку, что также помогает инструментам доступности, таким как программы чтения с экрана, работать более эффективно.
Изучите HTML Теги
Станьте знакомы со стандартным стилем HTML для различных тегов. Этот проект на GitHub является отличным примером, который включает множество различных тегов. Вы можете просмотреть результирующую страницу, чтобы увидеть их стандартное отображение.
Избегайте Устаревших Тегов
Некоторые теги, такие как font, являются устаревшими, раз их единственная функция заключалась в стилизации контента, прежде чем появился CSS. Следует избегать таких тегов, так как они не несут семантической ценности.
Проверьте Ваш Код
Убедитесь, что вы валидируете свой HTML и CSS, используя такие сервисы, как валидатор W3C. Это позволит вам обнаружить устаревшие теги и другие ошибки, которые могут сделать ваш HTML менее надежным.
Вы также можете воспользоваться ресурсом Can I use, который предоставляет подробные данные о поддержке браузерами различных HTML-тегов и свойств CSS.
Тестируйте Ваши Страницы Без CSS
Рассмотрите возможность использования расширения, такого как Web Developer, которое позволит вам просто включать и отключать CSS. Это отличный способ проверить, как будет выглядеть версия вашего сайта без CSS, всего нажатием кнопки.
Вы также можете протестировать свои страницы в текстовом браузере, таком как Lynx, чтобы оценить их читабельность без CSS.
Если вам понравилась эта статья, подпишитесь, чтобы не пропустить еще много полезных статей!
Вы также можете найти наши материалы в:
- Telegram: https://t.me/gergenshin
- Youtube: https://www.youtube.com/@gergenshin
- Яндекс Дзен: https://dzen.ru/gergen
- Официальный сайт: https://www-genshin.ru