HTML - Стили: Пособие для начинающих

Добро пожаловать, будущие веб-разработчики! Сегодня мы окунемся в красочный мир HTML стилей, также известных как CSS (Каскадные таблицы стилей). Представьте HTML как скелет вашей веб-страницы, а CSS как модную одежду, которая делает ее потрясающе красивой. Давайте отправимся в это захватывающее путешествие вместе!

HTML - Style Sheet

Что такое таблица стилей?

Прежде чем окунуться в深海, давайте поймем, что такое таблица стилей. Таблица стилей - это набор правил стилизации, которые告诉 веб-браузеру, как представить документ, написанный в HTML. Это как指南 fashion-дизайнера для вашей веб-страницы!

Пример CSS в HTML документе

Давайте начнем с простого примера, чтобы увидеть CSS в действии:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
</style>
</head>
<body>
<h1>Добро пожаловать на мой стильный сайт!</h1>
<p>Этот абзац имеет default styling.</p>
</body>
</html>

В этом примере мы добавили тег <style> в секцию <head> нашего HTML документа. Внутри этого тега мы определили некоторые CSS правила:

Мы установили фоновый цвет body в светло-серый (#f0f0f0) и changed шрифт на Arial.
Мы стилизовали тег h1, чтобы он имел синий цвет и был выровнен по центру страницы.

Типы CSS

Теперь, когда мы видели CSS в действии, давайте рассмотрим три типа CSS. Представьте их как разные способы добавить стиль вашему HTML гардеробу:

1. Внутренний CSS

Внутренний CSS похож на добавление модной шляпы напрямую к вашему наряду. Он применяется напрямую к HTML элементам с использованием атрибута style.

<h1 style="color: red; font-size: 24px;">Это красочный заголовок</h1>

В этом примере мы сделали заголовок красным и увеличили его размер до 24 пикселей.

2. Внутренний CSS

Внутренний CSS похож на наличие личного стилиста для одной веб-страницы. Он определен внутри тега <style> в секции <head> HTML файла, как мы видели в нашем первом примере.

3. Внешний CSS

Внешний CSS похож на наличие универсального fashion-гида для всех ваших веб-страниц. Он хранится в отдельном файле .css и链接ается к вашему HTML документу.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Добро пожаловать на мой стильный сайт!</h1>
<p>Эта страница стилизована с использованием внешнего CSS файла.</p>
</body>
</html>

В этом примере мы linked внешний CSS файл с именем styles.css к нашему HTML документу.

Примеры использования таблицы стилей

Давайте рассмотрим еще несколько примеров, чтобы увидеть силу CSS:

Стилизация текста

p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}

Это CSS правило стилизует все абзацы шрифтом Georgia, размером 16 пикселей, высотой строки 1.6 и темно-серым цветом.

Создание кнопки

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

Этот CSS создает стильную зелёную кнопку. Вы можете применить это к любому элементу, дав ему класс "button".

Адаптивный дизайн

@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
}

Этот CSS использует media query для корректировки размеров шрифта, когда ширина экрана составляет 600px или меньше, делая ваш сайт адаптивным.

Таблица методов CSS

Вот удобная таблица, резюмирующая методы CSS, которые мы обсуждали:

Метод	Описание	Преимущества	Недостатки
Внутренний CSS	Применяется напрямую к HTML элементам	Быстро для мелких изменений	Не reusable, загромождает HTML
Внутренний CSS	Определен в теге `<style>` в HTML файле	Применяется к одной странице	Не reusable между страницами
Внешний CSS	Хранится в отдельном .css файле	Reusable, держит HTML чистым	Требует дополнительный HTTP запрос

Запомните,年轻的 падаваны, овладение CSS похоже на обучение рисованию - это требует практики, терпения и немного творческой фантазии. Не бойтесь экспериментировать с различными стилями иを見て何が最善か webpage.

Заканчивая наш урок, я вспоминаю студента, который однажды сказал мне: "CSS превратил мою скучную веб-страницу в цифровое произведение искусства!" И в этом красота CSS - он дает вам силуtransform веб в вашу канву.

Итак, идите смело, стилизуйте смело, и пусть ваши веб-страницы всегда будут великолепны!

Credits: Image by storyset

Предыдущий учебник:

HTML - Блоки

Следующий учебник:

HTML - Форматирование