Как задавать стили?
Как задавать стили?
«Как задавать стили?» — бесплатный урок HTML for Kids на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 1 уроков всего.
Введение
Здравствуйте!
В предыдущем уроке мы частично это объяснили. Теперь давайте повторим.
В CSS стили можно определить тремя способами:
- Строчный стиль
- Между тегами <style>.
- С помощью внешнего файла CSS
Строчный стиль
1. Строчный стиль
Как можно понять из названия, речь идёт о стилях, которые мы определяем, передавая атрибут style каждому элементу в строке.
Такой способ не рекомендуется, поскольку он снижает возможность повторного использования каждого стиля, а его читаемость очень низкая.
В примере ниже стиль межбуквенного интервала задаёт расстояние 15px между каждой буквой текста.
<p style="letter-spacing:15px">
Inline Style
</p>с помощью тега style
2. Между тегами <style>.
Стиль можно определить между тегами style. Такой способ также не рекомендуется, за некоторыми исключениями (например, для содержимого, расположенного в верхней части страницы).
Мы продолжим использовать теги style, чтобы наши примеры оставались упорядоченными. Однако я не рекомендую использовать этот способ в приложениях (за исключением упомянутых особых случаев).
<html>
<head>
<style>
.root {
color:red;
}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>Внешний файл CSS
3. Внешний файл CSS
Теперь давайте узнаем, как использовать внешние файлы CSS.
Это определение стиля мы будем использовать чаще всего. Прежде всего создаётся файл, содержащий только селекторы CSS.
Затем соответствующий файл CSS можно указать для элемента link между тегами head.
В примере ниже файл style.css назначается элементу link с помощью атрибута href.
<link rel = "stylesheet" href = "styles.css">
Эта возможность — лучшее решение, если один и тот же файл CSS должны подключать несколько файлов, а также если нужно повысить возможность повторного использования.
В примере ниже создано определение стиля, которое выбирает внешний класс.
.external{
color:red;
font-size:30px;
letter-spacing:10px;
}
В примере ниже создано определение стиля, которое выбирает внешний класс.
Давайте сохраним это выражение в файле с именем тест 1.css и назначим его элементу link.
<html>
<head>
<link rel="stylesheet"
href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
<div class="external">Hello</div>
</body>
</html>Поздравляем
Поздравляем! 🎉
В этом разделе мы изучили способы определения стилей в CSS.
В следующем разделе мы изучим селектор id.
Часто задаваемые вопросы
Урок «Как задавать стили?» бесплатный?
Да — полный текст урока «Как задавать стили?» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 1 уроков всего.
Чему я научусь в уроке «Как задавать стили?»?
Как задавать стили? Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «Как задавать стили?»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.