Что такое таблица стилей?
Таблица стилей (или CSS – Cascading Style Sheets) — это язык, используемый для описания визуального оформления веб-страниц, созданных с использованием HTML или XML. CSS позволяет разработчикам отделять содержимое документа (HTML) от его визуального представления (стили). Это позволяет достичь большей гибкости и управляемости, а также улучшает совместимость с различными устройствами.
Основные понятия CSS
Пример базовой таблицы стилей
/* Это комментарий в CSS */
/* Селектор по тегу для заголовков h1 */
h1 {
color: blue; /* Цвет текста заголовка */
font-size: 24px; /* Размер шрифта заголовка */
}
/* Селектор по классу для параграфов */
p {
font-family: Arial, sans-serif; /* Шрифт текста параграфа */
line-height: 1.5; /* Высота строки */
}
.button {
background-color: green; /* Цвет фона для кнопок */
color: white; /* Цвет текста для кнопок */
padding: 10px 20px; /* Отступы кнопки */
border: none; /* Убираем рамку */
border-radius: 5px; /* Скругляем углы кнопки */
cursor: pointer; /* Меняем курсор на указатель при наведении */
}
.button:hover {
background-color: darkgreen; /* Изменение цвета кнопки при наведении */
}
Подключение CSS к HTML
Существует несколько способов подключить таблицы стилей к вашему HTML-документу:
style.<h1 style="color: red;">Это заголовок с встроенным стилем</h1>
<style> внутри тега <head> вашего HTML-документа.<head>
<style>
body {
background-color: lightgrey; /* Цвет фона */
}
</style>
</head>
.css и подключение его через тег <link>.<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Заключение
CSS является мощным инструментом для создания красивых и адаптивных веб-страниц. Освоив его основы, вы сможете улучшить визуальное представление ваших проектов и сделать их более привлекательными для пользователей. Проходите к практике, экспериментируйте с селекторами и свойствами, и вы сможете создавать стильные веб-интерфейсы!