Если HTML – это "каркас" веб-страницы, то CSS (Cascading Style Sheets) – это "краска и декор", которые делают ваши сайты не только функциональными, но и визуально привлекательными.
CSS играет ключевую роль в разработке современных веб-приложений и сайтов. Он отвечает за дизайн, адаптивность, анимации и позволяет создавать профессиональные пользовательские интерфейсы.
Основные способы подключения CSS-стилей к HTML-странице:
1. Внешний CSS-файл (рекомендуемый способ)
Создайте отдельный файл с расширением .css и подключите его к HTML-документу с помощью тега <link> в разделе <head>.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример страницы</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Привет, мир!</h1>
</body>
</html>
В файле styles.css:
h1 {
color: blue;
}
2. Внутренние стили (внутри <style>)
CSS-стили можно прописать непосредственно в HTML-документе внутри тега <style>, который обычно размещается в разделе <head>.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример страницы</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
</body>
</html>
3. Инлайн-стили (атрибут style)
Стили можно задать непосредственно для конкретного элемента с помощью атрибута style.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример страницы</title>
</head>
<body>
<h1 style="color: red;">Привет, мир!</h1>
</body>
</html>
4. Импорт CSS-файла внутри другого CSS-файла
Вы можете импортировать один CSS-файл в другой с помощью директивы @import.
Например, в файле styles.css:
@import url('additional-styles.css');
h1 {
color: blue;
}
В файле additional-styles.css:
p {
font-size: 16px;
}
Внешний CSS-файл — это самый предпочтительный способ, так как он позволяет разделить структуру (HTML) и стили (CSS), упрощает поддержку и кэширование браузером.
Инлайн-стили и внутренние стили лучше использовать только для специфических случаев, так как они усложняют поддержку кода.