Введение в CSS
Введение в CSS
«Введение в CSS» — бесплатный урок HTML for Kids на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 1 уроков всего.
Введение 1
Здравствуйте!
В предыдущей главе мы узнали, что такое CSS и зачем его использовать. Теперь я хочу кратко познакомить Вас с ним на простом примере.
Давайте определим простую HTML-страницу.
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>Строчный стиль
Теперь давайте изменим цвет заголовка Hello CSS на красный. Для этого мы воспользуемся атрибутом style , который можно добавить почти к любому тегу HTML.
С помощью этого атрибута мы можем задать стиль для каждого элемента в его строке.
В области предварительного просмотра мы увидим, что цвет заголовка стал красным.
color: red;
Мы задали цвет шрифта элемента с помощью определения стиля.
<h1 style="color:red;">Hello CSS</h1>Строчный стиль 2
Вы помните, что мы говорили: атрибуты используются для назначения тегам HTML поведения и свойств.
Одно из наиболее важных применений атрибута style — использование его для определения стиля тегов.
Строчный стиль 3
Теперь добавим новый стиль. С помощью свойства font-size можно увеличить размер текста.
При определении нескольких стилей их нужно разделять точками с запятой.
В примере ниже стили цвета и размера шрифта разделены точками с запятой.
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>Определение стиля
При добавлении стиля важен синтаксис.
styleName: styleValue;
Ещё раз напомним: стиль нужно назначать так, как показано выше.
Пример
Теперь немного расширим наш пример.
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>Пример 2
В этом примере мы хотим изменить цвет всего текста на красный. Для каждого тега можно определить стиль следующим образом.
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>Селектор CSS
Но так выглядит не очень хорошо, не правда ли?
Теперь на странице у нас 3 элемента, и мы изменили цвет текста каждого из них на красный. Однако если учесть, что их количество увеличилось до 3000, нет особого смысла определять стиль для каждого элемента.
Вместо этого нужно использовать селекторы CSS, а не задавать стиль для каждого элемента отдельно.
Введение 12
Теперь давайте изучим понятие селектора.
Селекторы CSS отвечают за выбор соответствующего HTML-элемента в документе, чтобы стилизовать HTML-элементы.
Итак, как можно понять из названия, они выбирают HTML-элементы. 😂
Селекторы CSS должны быть определены между тегами <style> в HTML-документе или во внешнем файле CSS.
В наших примерах мы будем использовать определения, которые обычно находятся между тегами style. Однако точнее задавать стиль во внешнем файле CSS.
Введение 13
Оператор точки и имя класса используются, чтобы определить класс между тегами style. Определения стилей записываются внутри фигурных скобок.
.class-name {
font-size:22px;
color:red;
}
В примере ниже мы определили класс с именем my-component между тегами style. Для соответствующего класса назначен стиль размера шрифта.
<style>
.my-component{
font-size:22px;
}
</style>
Теперь определим два абзаца
Теперь определим два элемента абзаца с классом my-component.
После этого определения оба абзаца имеют одинаковое имя класса, поэтому они будут выбраны селектором CSS, а их размер шрифта изменится на 22px.
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>Введение 6
Одному селектору можно назначить несколько стилей.
В примере ниже в одном селекторе определены стили размера шрифта и цвета.
<style>
.my-component{
font-size:22px;
color:red;
}
</style>Вложенные селекторы CSS
Давайте проанализируем приведённый ниже код HTML.
Определён элемент абзаца, и в него добавлен элемент span с содержимым 'Hello CSS Selectors'.
В этом случае можно сказать, что элемент абзаца является родительским для span.
С другой стороны, span будет дочерним элементом p.
Подобно живым существам, мы будем использовать HTML-элементы в отношениях родитель—потомок в зависимости от их расположения в блоке кода.
<p>
<span>Hello CSS Selectors</span>
</p>Вложенный селектор CSS 2
Давайте немного расширим пример и ещё раз рассмотрим иерархию между элементами.
- Согласно примеру ниже:
- Элементы <span> и <a> являются соседними.
- Элементы <span> и <a> являются потомками элемента div.
- <span> и <a> являются дочерними элементами <p>.
- Элемент <p> является дочерним элементом <div>.
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>Модель дерева анализа
Давайте внимательнее рассмотрим изображение выше.
Следующий пример кода HTML преобразован в древовидную модель.
Обратите внимание: древовидная модель фактически отражает иерархию родительских и дочерних элементов.
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
Когда же мы используем эту иерархическую связь?
Когда же мы используем эту иерархическую связь?
Сначала разберём пример и сформулируем задачу. Затем посмотрим, как решить её с помощью этой иерархии.
Давайте рассмотрим пример кода ниже.
Предположим, мы хотим окрасить весь текст в красный цвет. На данный момент мы изучили два разных способа.
- Во-первых, что хуже всего, мы зададим атрибут style (style = "color: red") в строке для каждого элемента.
- Во-вторых, мы определим класс с именем red-txt и назначим его каждому элементу как атрибут (class = "red-txt").
Но есть более простой способ. 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>Когда используется эта иерархическая связь? 2
Давайте ещё раз посмотрим на приведённый выше код.
Если обратить внимание на элемент div с классом root, видно, что фактически он является предком всех элементов в нашем примере.
Генетические признаки человека передаются от предков к потомкам. Стиль, назначенный предку в CSS, также отражается на его потомках.
В данном случае, определив стиль, который выбирает соответствующий элемент div, можно ожидать, что это назначение повлияет на всех его потомков.
Давайте проверим это.
Когда используется эта иерархическая связь? 3
Определим класс с именем root с помощью оператора точки и зададим внутри него стиль (color: red).
Он выберет все элементы с классом root и сделает цвет текста красным у них самих и их потомков.
В разделе предварительного просмотра мы увидим, что весь текст станет красным.
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>Наследование
В CSS это понятие называется наследованием. Благодаря этой возможности мы научились писать код короче.
Как и в предыдущем примере, вместо определения одного и того же свойства для каждого элемента по отдельности мы задали его для элемента-предка и избежали повторения кода.
Размещение элемента head
В предыдущих примерах мы добавляли элемент style прямо рядом с написанным нами элементом HTML.
Однако правильное место, куда следует вставлять тег style, находится между тегами head.
Поэтому правильнее использовать следующую структуру.
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>писать код как можно короче и повторно использовать его
При написании кода нам нужно делать его как можно короче и пригодным для повторного использования.
Поздравляем
Поздравляем! 🎉
В этом разделе мы вместе изучили понятия селектора и наследования.
В следующем разделе мы изучим способы определения стилей в CSS.
Часто задаваемые вопросы
Урок «Введение в CSS» бесплатный?
Да — полный текст урока «Введение в CSS» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML for Kids, подпишись на CoddyKit PRO. Курс HTML for Kids содержит 1 уроков всего.
Чему я научусь в уроке «Введение в CSS»?
Введение в CSS Ты практикуешь HTML for Kids с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML for Kids?
Предыдущий опыт не требуется. HTML for Kids на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «Введение в CSS»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML for Kids?
Да. Каждый урок HTML for Kids включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.