Добро пожаловать в четвертую часть серии. Этот сериал становится все более и более приятным для меня. Повторяю, ваши комментарии мотивируют меня еще больше. Я хотел бы поблагодарить всех, кто поддержал меня. В конце серии вы можете поделиться со мной тем, что вы сделали.

Давайте начнем прямо сейчас.

Файлы HTML содержат множество тегов и типов. Встроенные элементы являются одними из таких элементов. Некоторые из них известны как блоки. Теперь давайте посмотрим на различия между этими двумя.

  • Встроенные элементы располагаются рядом в браузере и не занимают больше места, чем нужно содержимому. Итак, давайте сделаем несколько примеров встроенных элементов. Тег изображения, тег ссылки, сильный текстовый тег (Storng), если вы поместите их в html-файл, они будут оставаться рядом до тех пор, пока на странице не останется места.

‹span› ‹a› ‹stong› ‹img›

Элементы блочного уровня, с другой стороны, занимают всю ширину страницы и не располагаются рядом друг с другом, они всегда начинаются с новой строки. Приведем несколько примеров на блочном уровне. Div , блок, h1 h2 h3 и т. д. Берет выдержки из абзаца, чтобы создать Если бы мы написали ряд элементов уровня блога в файле HTML и открыли его в браузере

<p>

‹див›

Тег ‹p› — это тег абзаца, и когда мы видим его в браузере, мы видим, что он занимает все место. Кроме того, каждый будет появляться на новой строке.

Теперь я объясню логику наличия этих двух разных типов элементов на уровне строк и блоков.

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 Ut enim ad minim veniam, <a href=”hakanbudak.com”> hakan </a> quis nostrud
 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Давайте представим, что у нас есть абзац прямо здесь. Открываем и закрываем абзац. ‹p› ‹/p›. Внутри у нас есть тег привязки. Элемент здесь является встроенным, поэтому он не начинается с новой строки. Он просто занимает место, которое занимает контент. Это имеет смысл, потому что мы не хотим, чтобы это появлялось на новой строке. Если бы мы добавили сюда новый абзац, мы бы хотели, чтобы он отображался на новой строке. Потому что это элемент уровня блога. Вот почему вы обычно видите встроенные элементы, подобные этому, вложенными в элементы блочного уровня. Но вы также можете увидеть элементы уровня блока на другом уровне блога. Давайте посмотрим, как это будет выглядеть в коде.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Css Learning</title>
</head>
<body>

    <h2>Incline Elements</h2>

    <span>span tag</span>
    <em>em tag </em>
    <a href="">anchor tag</a>
    <span>span tag</span>

</body>
</html>

То, что вы видите здесь, так просто

У нас есть h2 с заголовком встроенных элементов. Будет иронично, потому что это не встроенный элемент 🙂

Чуть ниже у нас есть тег span, em, тег привязки и снова тег span.

Если бы мы сохранили его, он выглядел бы так, как показано ниже.

Я также удалил содержимое папки styles.css, потому что она больше не нужна. Если мы посмотрим на то, что происходит в браузере, мы увидим, что они расположены рядом на странице и занимают столько же места, сколько и сами.

Мы можем увидеть, сколько занимает каждый элемент, щелкнув его в браузере.

Теперь давайте посмотрим на элементы блочного уровня.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <title>Css Learning</title>
</head>
<body>

    <h2>Incline Elements</h2>

    <span>span tag</span>
    <em>em tag </em>
    <a href="">anchor tag</a>
    <span>span tag</span>

    <h2>Block-level Elements</h2>

    <div>div tag</div>
    <div>another div tag</div>
    <h3>h3 tag </h3>
    <p>paragraph tag</p>
    <ul>
        <li>li tag</li>
        <li>another li tag</li>
    </ul>

</body>
</html>

Теперь у нас есть уровень блога h2, у нас есть 2 отсортированных списка div, тег h3, абзац и ul. Все элементы здесь будут занимать всю ширину и начинаться с новой строки. Теперь давайте посмотрим, как это выглядит, когда я его сохраняю.

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

Я хочу показать эту часть прямо здесь. Когда мы нажимаем на тег h3, мы видим, что Css автоматически записывает для нас display: block во вкладке Styles. Сами мы этого не делали. Авто сделано css. автоматически применил абзац под ним как блок таким же образом. Таким образом, браузер помечает элементы блочного уровня как блоки.

Если мы посмотрим на раздел «Элементы наклона» выше, мы ничего здесь не увидим. Поскольку значение по умолчанию кажется встроенным. Элемент наклона и элементы уровня блока контролируются функцией отображения на вкладке, которую мы только что видели здесь.

Мы можем сделать это, чтобы сделать встроенный элемент элементом уровня блока.

span{
    display: block;
}

Мы можем перейти к представлению Styles.css и обновить span как блок, а затем увидеть в браузере, что предполагаемый spa теперь является блочным элементом.

Мы также можем сделать обратное. Мы можем превратить элемент с блочным элементом во встроенный элемент. Давайте попробуем это

span{
    display: block;
}
div{
  display: incine;
}

Как вы можете видеть ниже, div теперь стоит рядом, так мы можем изменить элементы.

И когда мы наводим на него курсор, мы видим, что он занимает ровно столько места, сколько ему нужно. Таким образом, мы можем ссылаться на эти различные элементы, особенно когда речь идет о полях, поскольку эти два типа отображения также влияют на свойства Css.

Маржа § Заполнение

Представьте, что у нас есть элемент блочного уровня, подобный этому тегу div. В css есть свойство margin. Элемент позволяет нам указать поля или пробелы за пределами границы.

Так это будет выглядеть так. Также элемент позволяет нам установить интервал внутри, и это выглядит так.

Когда мы добавляем поле, появляется функция, называемая полем и отступом. Эта функция позволяет дополнять элемент на уровне блога до конца. Но теперь, если мы попытаемся снова добавить отступ и попытаемся добавить отступ таким образом, чтобы поля не было

Представьте, что у нас есть встроенный элемент, например тег span. Он прекрасно добавит справа и слева, но не сверху и снизу. Поэтому нам полезно помнить, что элементы блочного уровня имеют поля вокруг себя. Но встроенные элементы могут иметь поля только справа и слева от элемента. Заполнение может быть добавлено полностью только в обоих случаях. Вместо этого давайте немного поиграем.

Два разных свойства встроенных элементов и элементов блочного уровня. Маржа и отступы (margin and padding). Мы начнем с div здесь. Мы знаем, что все должно работать на блочном элементе. Первое, что я бы сделал, это дал ему границу.

span{
    display: block;
}
div{
    /* display: inline; */
    border: 2px solid crimson;
}

Это сделает края этого элемента кратными 2px и красными. Далее мы добавим поле в 20 пикселей, то есть оно будет иметь поле в 20 пикселей от начала до конца.

span{
    display: block;
}
div{
    /* display: inline; */
    border: 2px solid crimson;
  margin: 20px;
  padding: 20px;
}

Давайте сделаем то же самое с отступом и дадим ему 20px. Теперь давайте запишем это и посмотрим, как это выглядит.

Выше мы видим теги div. У них обоих есть поле. У зеленого есть отступ, а у синего - div.

Теперь давайте попробуем тот же процесс на части со встроенным элементом.

Прямо здесь у нас есть теги span

  <h2>Incline Elements</h2>

    <span>span tag</span>
    <em>em tag </em>
    <a href="">anchor tag</a>
    <span>span tag</span>

Теперь давайте добавим к ним отступы и поля. Итак, давайте перейдем к styles.css и проделаем некоторые операции над диапазоном.

span{
    /*  display: block; */
    margin: 20px;
 }

Допустим, мы хотим, чтобы поле было 20 пикселей. Давайте посмотрим на это в браузере, чтобы лучше понять.

Как видите, мы видим, что теги span имеют поля справа и слева. Обратите внимание, что сверху и снизу нет поля, потому что это встроенный элемент. У них нет полей сверху и снизу. Теперь давайте вместе посмотрим, что произойдет, если мы добавим отступы.

span{
    /*  display: block; */
    margin: 20px;
  padding: 20px;
 }

Я думаю, вы постепенно лучше понимаете. Как вы можете видеть, когда мы добавили отступы, они были повсюду, и это работает абсолютно нормально.

Теперь есть еще одна часть, которую я покажу вам, что делает ее еще лучше. Элементы уровня блока и встроенные элементы, и последнее, что я покажу, это встроенный блок (встроенный блок).

Встроенный блок — это тип отображения, и он смешивает два типа. Например, если бы я показал поле span как встроенный блок, что бы он сделал?

Это оказалось бы лучшим из обоих. Я имею в виду, что он по-прежнему находится рядом, как встроенные элементы, и не занимает все пространство, у него просто есть столько места, сколько ему нужно. Как только он не пропускал очередь, он продолжал стоять в той же очереди. Но это позволило бы нам обращаться с ним как с блочным элементом.

span{
    /*  display: block; */
    display: inline-block;
    margin: 20px;
    padding: 20px;
 }

Обычно встроенные элементы могут добавлять поля только слева и справа. Таким образом, мы бы сделали возможным добавление полей. Мы можем добавить верхнее, нижнее, правое и левое поля.

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

Теперь я могу навести на него курсор и увидеть отступы и поля более четко.

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

Я предпочитаю использовать элементы наклонного блока, если я хочу добавить верхние и нижние поля, как и выше. Эта неделя была очень напряженной, дайте своему разуму отдохнуть. Потому что в следующей главе мы начнем больше говорить о наследовании селекторов Cascade.

Наша цель здесь не запомнить все, а просто понять, что мы делаем. Мы движемся вперед, и чем больше мы используем разных селекторов, тем больше мы используем разных тегов HTML. Это так укореняется в вашем мозгу и становится вашей природой.

Что мы узнали на этой неделе;

  • что такое css и как добавить его на веб-страницу
  • базовые селекторы и некоторые другие объявления
  • шестнадцатеричные коды и палитра цветов webstorm
  • встроенные и блочные элементы (и встроенные блоки)
  • Маржа § Заполнение
  • Стили браузера по умолчанию

Постепенно мы все больше и больше знакомимся с основами Css. Я действительно хочу сделать еще один шаг вперед. Мы рассмотрим некоторые селекторы, которые немного сложнее, чем те, что мы видели раньше. До сих пор мы выбирали такие элементы, как p, div, li, один за другим. На следующих занятиях мы поговорим.

Как и каждую неделю, вы можете проверить последнюю версию нашего кода по ссылке на github.



GitHub — hakanbudak/HTML-CSS-COURSE: обновленная версия кода будет обновляться каждую пятницу.
Вы не можете выполнить это действие в настоящее время. Вы вошли в другую вкладку или окно. Вы вышли на другой вкладке или…github.com



Türkçe seçeneği ile birlikte 🙂



Bir Jr.Frontend'cinin gelişim serüveni #4
Herkese merhabalar serinin 4. bölümüne hoşgeldiniz. Bu seri oldukça hoşuma gitmeye başladı. Çünkü hem tekrar etmiş…secret-impulse-16a.notion.site



Всем хорошей недели. Я вас очень люблю.