В современном мире веб-разработки HTML и CSS являются основными инструментами для создания привлекательных и функциональных веб-страниц. Эти технологии не только формируют структуру и внешний вид ваших проектов, но и позволяют создавать адаптивные, надежные и эстетически приятные пользовательские интерфейсы.
Введение в CSS
HTML отвечает за структуру страницы, а CSS (Cascading Style Sheets, каскадные таблицы стилей) специализируется на её оформлении. CSS предоставляет набор правил для изменения внешнего вида элементов на веб-странице. Эти правила управляют тем, как HTML-элементы отображаются: их цветом, размером, шрифтами и многим другим.
CSS (Cascading Style Sheets, каскадные таблицы стилей) — это язык для описания внешнего вида веб-страницы. Это набор правил.
Селекторы
Селектор — это ключевой элемент CSS, который используются для поиска и применения стилей к HTML-элементам. Например, селектор по тегу <body> применяет указанные стили ко всем элементам типа <body> на странице.
Селектор - это выражение, с помощью которого браузер находит HTML- элементы и применяет к ним CSS.
Стилизация текста
CSS предлагает множество свойств для стилизации текста, делая его более читабельным и эстетически привлекательным:
font-family: Определяет семейства шрифтов для текста. Свойство с помощью, которого можно указать название шрифта. Важно указывать несколько резервных вариантов, чтобы обеспечить корректное отображение шрифта, например:
body {
font-family: Arial, sans-serif;
}
Если Arial не загружается, браузер попробует использовать альтернативный шрифт из того же семейства sans-serif.
Свойство font-family позволяет указывать несколько шрифтов через запятую:
Семейства шрифтов
Семейства шрифтов позволяют группировать шрифты по их характеру:
- serif: Шрифты с засечками (Times).
- sans-serif: Рубленные шрифты (Arial).
- cursive: Курсивные шрифты.
- fantasy: Декоративные шрифты.
- monospace: Моноширинные шрифты (Courier).
Пример использования:
Вы указываете браузеру использовать для всего содержимого тега <body> сначала шрифт Arial. Если Arial недоступен на устройстве пользователя, тогда применяется ближайший доступный шрифт из семейства sans-serif (то есть любой системный рубленный шрифт, например, Helvetica, Segoe UI, Roboto и т.д.).
Пояснения:
font-family принимает список через запятую, где первым идет предпочтительный шрифт, дальше — запасные варианты и/или семейство.
sans-serif — это универсальное семейство рубленых шрифтов, которые не имеют засечек. Оно гарантирует, что даже при отсутствии указанных выше шрифтов текст будет выглядеть современно и лаконично.
Преимущества такого подхода:
- Гибкость: если основной шрифт не найден, всегда есть резервное решение.
- Универсальность: почти каждый браузер понимает и корректно отображает семейство sans-serif.
- Кросс-платформенность: обеспечивается схожий внешний вид текста на разных устройствах и операционных системах.
Пример работы правила:
Если у пользователя есть Arial — текст будет отрисован им.
Если Arial нет — будет выбран следующий из семейства sans-serif, доступный на устройстве.
Свойства применяются ко всему, что находится внутри <body>.
Таким образом, ваш текст всегда будет выглядеть аккуратно и читабельно на всех платформах.
Свойство font-family указывает название шрифта
font-style
Свойство определяет начертание шрифта, а именно обычное, курсивное или наклонное. Для этого существуют следующие значения:
- normal: Обычное начертание.
- italic: Курсивный шрифт.
- oblique: Наклонный текст — образуется путем наклона обычных знаков вправо.
Свойство font-style определяет начертание шрифта
font-weight
font-weight: Управляет толщиной шрифта, используя числовые значения от 100 до 900 или ключевые слова (normal, bold и т.д.).
Это CSS свойство которое позволяет управлять толщиной шрифта.
Существует несколько способов задать значение свойства.
Приведём в качестве примера первый из них:
— 100 — тонкое начертание;
— 200 — сверхсветлое;
— 300 — светлое;
— 400 — нормальное;
— 500 — среднее;
— 600 — полужирное;
— 700 — жирное;
— 800 — сверхжирное;
— 900 — тяжёлое.
Это условные единицы насыщенности, где 400 — это стандартная насыщенность текста.
Продемонстрируем второй способ — это использовать ключевые слова:
— normal — нормальное начертание — то же, что и 400;
— bold — полужирное начертание — то же, что и 700;
— lighter — изменяет начертание относительно насыщенности родительского элемента (сверхтонкое начертание);
— bolder — изменяет начертание относительно насыщенности родителя элемента (сверхжирное начертание).
Свойство font-weight позволяет управлять толщиной шрифта
font-size
font-size: Устанавливает размер шрифта, выражаемый в пикселях (px) или других единицах.
Пиксель — это специальная единица, придуманная для CSS. Под пикселем понимается одна визуально различимая точка экрана. Обозначается он как px .
Например, чтобы задать размер шрифта в 100 пикселей, нужно записать:
font-size: 100px;
Свойство font-size позволяет задать размер шрифта
color
color: Устанавливает цвет текста, может использоваться в ключевых словах или в форме шестнадцатеричных значений (например, #ffffff для белого).
Свойство позволяет установить цвет текста. Значение для свойства можно задать несколькими способами.
Первый, это использовать ключевые слова:
— white;
— gray;
— black;
— и т.д.
Этот способ используется очень редко.
Hex
Чаще всего используют шестнадцатеричный формат.
Благодаря этим свойствам, текст в веб-дизайне может быть легко адаптирован к эстетическим и функциональным требованиям.
Свойство color позволяет установить цвет текста
Пример кода стилизации
В следующем примере мы подключаем шрифт Arial, делаем текст жирным, размером 100px и белого цвета:
Что делает этот код:
font-family: Arial, sans-serif;
Задаёт для всего текста на странице основной шрифт Arial. Если Arial недоступен, браузер выберет любой другой доступный рубленый (sans-serif) шрифт.
font-weight: 700;
Делает весь текст жирным. Цифра 700 соответствует значению bold (полужирное начертание).
font-size: 100px;
Указывает размер текста — 100 пикселей. Это очень крупный размер, который обычно используют для заголовков или визуальных акцентов.
color: #ffffff;
Устанавливает цвет текста белым (hex-код #ffffff).
Результат:
Всё содержимое вашего <body> будет крупным, жирным, белого цвета и написано шрифтом Arial (или альтернативой из семейства sans-serif).
Практическое применение:
Такую стилизацию можно использовать, например, для создания яркой “шапки” сайта, крупного приветственного сообщения или отдельного блока, которому вы хотите придать максимальное визуальное внимание.
Совет:
При использовании белого текста убедитесь, что цвет фона страницы достаточно контрастен (например, чёрный или тёмно-серый), чтобы текст был хорошо виден пользователю.
После применения этих стилей, вы можете проверить их в инструментах разработчика вашего браузера. Вкладка «Styles» покажет все стили, которые вы указали, а «Computed» отобразит полный набор стилей, включая наследуемые.
Свойство text-decoration позволяет декорировать текст
Заключение
HTML и CSS совместно создают мощный инструмент для развития интерфейсов. Эти технологии позволяют разработчикам строить все от простых блогов до сложных интерактивных приложений. Понимание того, как они взаимодействуют друг с другом, и знание того, как применять их возможности, значительно повышает качество и производительность веб-проектов. В современном интернете качество пользовательского интерфейса и визуальная эстетика играют ключевую роль, и овладение инструментами HTML и CSS является обязательным для любого успешного фронтенд-разработчика.
Полезные ресурсы:
Премиум контент:
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
---------------------------------------
Донат для автора блога