Введение
HTML-тег <style> используется для добавления стилей на ваши веб-страницы. Эти стили могут изменить внешний вид и ощущение вашего сайта различными способами. В этом практическом занятии вы научитесь использовать тег <style> для создания собственного стиля, который можно использовать на всей веб-странице.
Примечание: Вы можете практиковать программирование в
index.htmlи изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
Настройка структуры HTML
Сначала давайте настроим базовую структуру HTML. В файле index.html создайте следующий HTML-код:
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to my Webpage</h1>
<p>This is my first paragraph.</p>
</body>
</html>
Этот код настраивает базовую структуру веб-страницы с заголовком и абзацем.
Добавление встроенных стилей
Первый способ добавить стили на вашу веб-страницу - это добавить их непосредственно в атрибут style HTML-элемента. В этом шаге мы добавим встроенный стиль в заголовок h1. Добавьте следующие атрибуты к элементу h1:
<h1 style="color: blue; font-size: 36px;">Welcome to my Webpage</h1>
Этот стиль увеличит размер шрифта и изменит цвет заголовка на синий.
Добавление вложенных стилей
Тег <style> используется для добавления встроенных стилей на вашу веб-страницу. В этом теге можно добавить несколько стилей. В этом шаге мы будем использовать встроенный стиль для добавления стилей к элементу p. Внутри тега <head> добавьте следующий код:
<style>
p {
color: green;
font-size: 18px;
}
</style>
Этот стиль добавляет зеленый цвет к абзацу, а размер шрифта уменьшается до 18 пикселей.
Использование CSS-классов
CSS-классы используются для применения стилей сразу к нескольким элементам. В этом шаге мы создадим класс для общего предупреждающего сообщения, которое можно повторно использовать на всей нашей веб-странице. Добавьте этот код в тег <style>:
<style>
.warning {
color: red;
background-color: yellow;
border: 1px solid black;
padding: 10px;
}
</style>
Этот код создает стиль для предупреждающего сообщения, который включает в себя желтый фон, черную рамку и красный цвет текста.
Далее мы применим этот класс к заголовку h1. Измените элемент h1, чтобы включить класс:
<h1 class="warning">Welcome to my Webpage</h1>
В этом шаге добавляется стиль предупреждения к заголовку.
Добавление внешних таблиц стилей
Внешние стилевые таблицы используются для отделения таблицы стилей от HTML-контента. В этом шаге вы создадите внешнюю таблицу стилей, которая может быть повторно использована на нескольких веб-страницах.
Создайте новый файл с именем style.css. В style.css добавьте следующий код:
h1 {
font-size: 48px;
}
p {
font-size: 24px;
}
.warning {
background-color: green;
}
Этот код настраивает стили для элементов h1 и p и изменяет класс warning на зеленый фон.
Для подключения этой внешней таблицы стилей к вашему файлу index.html, добавьте следующий код в тег <head>:
<link rel="stylesheet" type="text/css" href="style.css" />
Эта строка подключает файл style.css к странице index.html.
Добавление медиа-запросов
Медиа-запросы используются для применения различных стилей для разных размеров устройств. В этом шаге мы будем использовать медиа-запросы для настройки размера шрифта наших элементов. Добавьте этот код в файл style.css:
@media (max-width: 600px) {
h1 {
font-size: 36px;
}
p {
font-size: 18px;
}
}
Этот код настраивает размер шрифта h1 на 36 пикселей и размер шрифта p на 18 пикселей для экранов с шириной менее или равной 600 пикселей.
Добавление селекторов и вложения
В этом шаге мы познакомимся с селекторами и вложением, двумя продвинутыми концепциями CSS.
Создайте новый файл с именем advanced.css. В advanced.css добавьте следующий код:
header h1 {
color: blue;
font-style: italic;
}
main p {
color: red;
}
Этот код выбирает элемент h1 внутри элемента header и применяет к нему синий цвет и курсивный стиль шрифта. Также он выбирает элемент p внутри элемента main и применяет к нему красный цвет.
Для подключения этой внешней таблицы стилей к вашему файлу index.html, добавьте следующий код в тег <head>:
<link rel="stylesheet" type="text/css" href="advanced.css" />
Эта строка подключает файл advanced.css к странице index.html.
Резюме
В этом практическом занятии вы узнали, как использовать различные методы для добавления стилей на свою веб-страницу. Вы начали с использования встроенных стилей и вложенных стилей, а затем перешли к CSS-классам и внешним таблицам стилей. Также вы узнали о медиа-запросах, селекторах и вложении. Используя эти методы, вы можете создать собственную таблицу стилей, которая может быть использована на всей вашей веб-странице, и создать современную и адаптивную веб-сайт.
