Цвет текста, фона, размер шрифта
Откройте прошлый файл index.html и напишите следующий код:
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Стили страницы</title>
<style type="text/css">
h1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333366;
}
</style>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Странца HTML</h1>
<img src="css.png" width="250" title="html5" alt="html5">
<p style="color: blue; font-size: 12px; font-family: Arial">Использование различными способами стилей для элементов.</p>
<p id="id">
Использование индификатора.
</p>
<p class="class">
Использование класса.
</p>
</body>
</html>
Жирным шрифтом я выделил то, что не было в прошлом уроке.
<style type="text/css">...</style>
Стиль внутри head устанавливается для всей страницы.. В данном случае, заголовку h1 присваивается размер текста равный 120% от размера текста браузера по умолчанию
font-size: 120%.
font-family: имя шрифта списком, если браузер не найдёт шрифт Verdana, то он будет искать Arial и так далее, если найдёт – будет его использовать.
color: #333366; - цвет текста в формате RGB.
<p style="color: blue; font-size: 12px; font-family: Arial">
устанавливает для конкретного параграфа цвет текста – синий, размер текста – 12 пикселей, имя текста Arial.
<link rel="stylesheet" href="style.css" />
подключает файл стилей который, браузером, загружается один раз и используется для всех страниц сайта.
Создайте файл style.css рядом с index.html и напишите следующий код:
style.css
body{
background: #cccccc;
}
#id{
color: #ff0000
}
.class{
color: #008800
}
body{
- задаём свело-серый фон для тела страницы.
#id{
у элементов с индификатором id цвет текста красный. <p id="id">.
.class{
- элементы которым присвоен класс class назначен цвет текста зелёный. <p class="class">.