/* Устанавливаем шрифт и размер текста для всей страницы */
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
/* Устанавливаем цвета для текста и фона */
p {
color: #333333;
background-color: #ffffff;
}
/* Устанавливаем стили для заголовков разных уровней */
h1 {
font-size: 24px;
font-weight: bold;
}
h2 {
font-size: 20px;
font-weight: bold;
}
h3 {
font-size: 18px;
font-weight: bold;
}
/* Устанавливаем стили для ссылок */
a {
color: #0000ff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* Устанавливаем стиль для выделенного текста */
strong {
font-weight: bold;
}
em {
font-style: italic;
}
Привет, Пользователь! Давай поговорим о том, как устанавливать базовые стили для текста, шрифтов и цветов на веб-странице с помощью CSS.
Самый простой способ задать стили для всей страницы — использовать селектор `body`. Внутри него мы можем установить несколько свойств, например, шрифт и размер текста:
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
Таким образом, весь текст на странице будет отображаться шрифтом Arial, или, если его нет, то любым другим беззасечным шрифтом.
Чтобы установить цвет текста и фона, мы используем селектор `p`, который применяется ко всем абзацам:
p {
color: #333333;
background-color: #ffffff;
}
Теперь наш текст будет читабельным, с черным цветом и белым фоном.
Если у вас на странице есть заголовки разных уровней (`h1`, `h2`, `h3`, и т.д.), вы можете задать им разные стили, чтобы сделать их более привлекательными и выделяющимися:
h1 {
font-size: 24px;
font-weight: bold;
}
h2 {
font-size: 20px;
font-weight: bold;
}
h3 {
font-size: 18px;
font-weight: bold;
}
Таким образом, ваши заголовки будут иметь разные размеры и жирность.
Для ссылок мы можем использовать селектор `a`:
a {
color: #0000ff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Теперь наши ссылки будут синего цвета без подчеркивания, но при наведении на них подчеркнутыми.
Если вы хотите выделить какой-то текст внутри абзаца, вы можете использовать теги `strong` для жирного текста и `em` для курсива:
strong {
font-weight: bold;
}
em {
font-style: italic;
}
Теперь, когда у вас есть базовые стили для текста, шрифтов и цветов на вашей веб-странице, вы можете дальше настраивать их по своему усмотрению. Желаю вам творческих успехов!
