Стиль HTML с использованием CSS
Предположим, мы создали нашу веб-страницу, используя простой код HTML, и нам нужно что-то, что могло бы представить нашу страницу в правильном формате и визуально привлекательно. Итак, чтобы сделать это, мы можем стилизовать нашу веб-страницу с помощью свойств CSS (каскадная таблица стилей).
CSS используется для применения стиля на веб-странице, состоящей из элементов HTML. Он описывает внешний вид веб-страницы.
CSS предоставляет различные свойства стиля, такие как цвет фона, отступы, поля, цвет границы и многие другие, для стилизации веб-страницы.
Каждое свойство в CSS имеет пару имя-значение, и каждое свойство отделяется точкой с запятой (;).
Пример:
<h2 style="color: red;">добро пожаловать</h2>
<p style="color: blue; font-size: 25px; font-style: italic ;">наш сайт приветствует вас!</p>
</body>
Три способа применения CSS
Чтобы использовать CSS с документом HTML, есть три способа:
◦ Встроенный CSS: определите свойства CSS, используя атрибут style в элементах HTML.
◦ Внутренний или встроенный CSS: определите CSS с помощью тега <style> в разделе <head>.
◦ Внешний CSS: определите все свойства CSS в отдельном файле.css, а затем подключите внешний файл, используя тег link.
Встроенный CSS:
Встроенный CSS используется для применения CSS в одном элементе. Он может применять стиль уникально в каждом элементе.
Чтобы применить встроенный CSS, вам нужно использовать атрибут style в элементе HTML. Мы можем использовать столько свойств, сколько захотим, но каждое свойство должно быть разделено точкой с запятой (;).
Пример:
Внутренний CSS:
Внутренние таблицы стилей содержат свойства CSS для веб-страницы в разделе <head> HTML-документа. Чтобы использовать внутренний CSS, мы можем использовать атрибуты class и id.
Мы можем использовать внутренний CSS для применения стиля к одной HTML-странице.
Пример:
<html>
<head>
<style>
/*Внутренний CSS с использованием имени элемента*/
body {
background-color: lavender;
text-align: center;
}
h2 {
font-style: italic;
font-size: 30px;
color: #f08080;
}
p {
font-size: 20px;
}
/*Внутренний CSS с использованием имени класса*/
.blue {
color: blue;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<h2>Изучение HTML с помощью внутреннего CSS</h2>
<p class="blue">Это абзац синего цвета</p>
<p class="red">Это абзац красного цвета</p>
<p class="green">Это абзац зеленого цвета</p>
</body>
</html>
Внешний CSS:
Внешний CSS содержит отдельный файл CSS, который содержит только код стиля с использованием имени класса, имени идентификатора, имени тега и т. д. Мы можем использовать этот файл CSS в любом файле HTML, включив его в файл HTML с помощью тега <link>.
Если у нас есть несколько HTML-страниц для приложения, которые используют одинаковый CSS, мы можем использовать внешний CSS.
Для применения внешнего CSS необходимо создать два файла.
◦ Сначала создайте файл HTML
◦ Создайте файл CSS и сохраните его с расширением .css (этот файл будет содержать только код стиля).
◦ Свяжите файл CSS с вашим файлом HTML, используя тег в разделе заголовка HTML-документа.
Пример:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Изучение HTML с помощью внутреннего CSS</h2>
<p class="blue">Это абзац синего цвета</p>
<p class="red">Это абзац красного цвета</p>
<p class="green">Это абзац зеленого цвета</p>
</body>
</html>
css файл
body {
background-color: lavender;
text-align: center;
}
h2 {
font-style: italic;
size: 30px;
color: #f08080;
}
p {
font-size: 20px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.green {
color: green;
}
