0Pricing
HTML for Kids · Урок

Наиболее используемые свойства CSS

Наиболее используемые свойства CSS

«Наиболее используемые свойства CSS» — бесплатный урок HTML for Kids на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML for Kids, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML for Kids содержит 1 уроков всего.

Введение

Здравствуйте!

В этом разделе мы изучим наиболее распространённые свойства CSS.

До сих пор мы обычно создавали примеры с простыми свойствами, такими как color и font-size.

Ширина и высота

Высота — ширина

Свойства ширины и высоты используются для задания ширины и высоты элементов.

Здесь нужно учитывать два момента.

  • Нельзя задавать ширину и высоту для строчных элементов.
  • Назначенные нами свойства ширины и высоты по умолчанию не зависят от других свойств, таких как внешний отступ, внутренний отступ и граница. Они применяются только к области внутри элемента.

Дополнительную информацию об этих исключениях мы предоставим позже.

<!DOCTYPE html>
<html>
<head>
<style>

.my-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
}

</style>
</head>
<body>

<div class="my-box">My Box</div>

</body>
</html>

Ширина и высота 2

В предыдущем примере мы задали ширину и высоту как статические значения. Однако доступные для задания значения не ограничиваются фиксированными числами.

Теперь посмотрим, как задать ширину в процентах в нашем примере.

<style>

.box1 {
  height: 200px;
  width: 200px;
  background-color: #1cac84;
}

.box2 {
  height: 200px;
  width: 70%;
  background-color: powderblue;
}

.box3 {
  background-color: #c974af;
}

</style>

<div class="box1">First Box</div>

<div class="box2">Second Box</div>

<div class="box3">This box takes 
the auto value for the width and height 
properties by default.</div>

Content-box и Border-box

По умолчанию свойство box-sizing принимает значение content-box.

При этом значения width и height по умолчанию относятся к содержимому.

Значения границы и внутренних отступов добавляются к значениям ширины и высоты.

Предположим, ширина блока равна 100px.

Если добавить к этому блоку внутренний отступ 10px и границу 20px, итоговая ширина элемента составит 100px + 10px + 20px = 130px.

Максимальная ширина

С помощью свойства max-width можно задать максимальную ширину элемента.

В примере ниже значение max-width равно 100px. Поэтому, хотя значение width по умолчанию равно auto (элемент должен занимать 100% ширины родителя), он занял 100px, и содержимое вышло за пределы блока.

<style>

.box {
  height: 200px;
  max-width: 100px;
  background-color: #1cac84;
}

</style>

<div class="box">
Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>

Оформление текста

С помощью свойства text-decoration можно задать оформление текста.

Думаю, будет понятнее рассмотреть это свойство на примере. Посмотрите на результат выполнения нашего примера в окне предварительного просмотра.

<style>

.head1 {
  text-decoration: overline;
}

.head2 {
  text-decoration: line-through;
}

.head3 {
  text-decoration: underline;
}

.head4 {
  text-decoration: underline overline;
}

</style>

<h1 class="head1">
   Text-decoration is overline
</h1>
<h1 class="head2">
   Text-decoration is line-through
</h1>
<h1 class="head3">
   Text-decoration is underline
</h1>
<h1 class="head4"> 
   Text-decoration is both underline 
    and overline
</h1>

text-indent

Иногда нужно добавить отступ в начале текста. Для этого используется свойство text-indent.

<style>
.indent-txt{
  text-indent: 20px;
}
</style>

<p class="indent-txt">Lorem ipsum dolor 
sit amet, consectetur adipiscing elit, sed 
do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat
</p>

text-align

С помощью свойства text-align задаётся горизонтальное выравнивание текста.

Зададим пример HTML.

<style>

.h1-center {
  text-align: center;
}

.h1-left {
  text-align: left;
}

.h1-right {
  text-align: right;
}
</style>

<h1 class="h1-center">
   Lorem ipsum (center)
</h1>
<h1 class="h1-left">
   Lorem ipsum  (left)
</h1>
<h1 class="h1-right">
   Lorem ipsum (right)
</h1>

font-family

С помощью стиля font-family задаётся тип шрифта, который будет использоваться для текста.

Здесь нужно знать несколько важных моментов.

  • Заданный шрифт должен быть установлен в системе пользователя. Поэтому следует использовать один из шрифтов, называемых безопасными веб-шрифтами.
  • Если мы собираемся использовать пользовательский шрифт, его нужно добавить между тегами head как стороннюю зависимость. При добавлении font-family следует определить предпочтительный основной и запасной шрифты.
  • Если браузер не может найти основной выбранный шрифт в системе пользователя, он показывает текст с использованием запасного шрифта.

семейство шрифтов 2

В приведённом ниже примере для основного класса назначен шрифт Times New Roman.

Шрифты Times и serif назначены соответственно как вторичный и третичный варианты.

Сначала браузер пытается использовать шрифт Times New Roman; если этот шрифт не найден в системе, используются другие заданные варианты.

Если назначенные нами шрифты недоступны, браузер использует шрифт по умолчанию.

<style>
.header {
  font-family: "Times New Roman", Times, serif;
}
</style>

<h1 class="header">
    Hello Font Family
</h1>

стиль шрифта

Как можно понять из названия, это свойство задаёт стиль используемого текста.

Теперь рассмотрим свойство стиля шрифта на примере.

<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>

<p class="normal">
    Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
     consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum 
     dolor sit amet. consectetur 
     adipiscing elit
</p>

Поздравляем

Поздравляем! 🎉

В этом разделе мы изучили наиболее часто используемые свойства CSS.

В следующем разделе мы изучим внешние отступы CSS.

Наиболее используемые свойства CSS — иллюстрация 12

Часто задаваемые вопросы

Урок «Наиболее используемые свойства 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 — локальная установка не требуется.

← Назад к HTML for Kids