Основы CSS
Введение в стилизацию с помощью CSS (необязательный обзор)
«Основы CSS» — бесплатный урок HTML for Kids на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 4 уроков всего.
Основы CSS: введение в стилизацию с помощью CSS
Добро пожаловать в мир CSS! Сегодня мы узнаем, как использовать каскадные таблицы стилей (CSS), чтобы стилизовать веб-страницы и сделать их потрясающими.
Что такое CSS?
CSS расшифровывается как каскадные таблицы стилей. Это язык, который используется для управления внешним видом веб-страниц.
С помощью CSS можно изменять цвета, шрифты, расположение элементов и многое другое!
Как работает CSS
CSS выбирает элементы HTML и применяет к ним стили. Использовать CSS можно тремя способами:
- Встроенный: добавлять стили непосредственно внутрь элементов HTML.
- Внутренний: добавлять стили внутрь тега
<style>в элементе<head>. - Внешний: использовать отдельный файл CSS.
На этом уроке мы сосредоточимся на внутренних и внешних стилях.
Внутренний CSS
Внутренний CSS записывается внутри тега <style> в элементе <head> HTML-документа.
Пример:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This page has styles applied using internal CSS.</p>
</body>
</html>
Внешний CSS
Внешний CSS записывается в отдельном файле с расширением .css. Связать его с HTML-документом можно с помощью тега <link>.
Пример:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
Селекторы в CSS
Селекторы используются для выбора определённых элементов HTML, к которым нужно применить стили. К распространённым селекторам относятся:
- Селектор тега: выбирает все элементы с определённым тегом. Пример:
p. - Селектор класса: выбирает элементы с определённым классом. Пример:
.myClass. - Селектор ID: выбирает элемент с определённым ID. Пример:
#myID.
Давайте посмотрим, как их использовать!
Селекторы класса и ID
Используйте класс, если хотите стилизовать несколько элементов. Используйте ID для одного уникального элемента.
Пример:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
#unique {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<p id="unique">This text is unique.</p>
</body>
</html>
Попробуйте сами
Давайте создадим веб-страницу с использованием внутреннего CSS. Вот пример, с которого можно начать:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkmagenta;
}
p {
color: gray;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This is an example of using internal CSS to style a page.</p>
</body>
</html>
Отличная работа!
Поздравляем! Вы изучили основы CSS и научились использовать его для стилизации веб-страниц. CSS делает страницы профессиональными и привлекательными. На следующем уроке мы подробнее рассмотрим цвета и фоны, чтобы сделать страницы ещё более яркими. Приготовьтесь дать волю своему творчеству!
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 16
- Уроки
- 35
Часто задаваемые вопросы
Урок «Основы CSS» бесплатный?
Да — полный текст урока «Основы CSS» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 4 уроков всего.
Чему я научусь в уроке «Основы CSS»?
Введение в стилизацию с помощью CSS (необязательный обзор) Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Основы CSS»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.