Всем привет, с возвращением. Еще раз, я попрошу тебя прекратить учиться и начать программировать и практиковать. И мы будем использовать тот же пример, который мы использовали в нашем первом перерыве кодирования. Поэтому я хотел показать вам, какая наша старая страница, прямо здесь. И посмотрите, как мы можем превратить его в нечто, что выглядит немного больше, как наша новая страница здесь, где мы реализуем некоторые из наших полей, отступов, а также ширины и высоты. Ладно, давай продолжим и начнем. Первое, что я хочу сделать, это использовать ту же таблицу стилей, что и для первого. Нет абсолютно никакой необходимости воссоздавать таблицу стилей, когда вы можете либо просто использовать эту и изменить ее, либо, если хотите, использовать две таблицы стилей. Я буду использовать только один. И первое, что я собираюсь исправить, это то, что я сделал то, что вы могли бы назвать ошибкой в моей предыдущей версии. У меня есть два правила стилизации h1. Это не проблема. Браузер будет применять все эти стили. Но то, что я действительно хотел сделать, это я имел в виду стиль тега тела. Итак, давайте взглянем на то, как это выглядит прямо сейчас. И вернемся к нашей текущей версии. И там мы идем. Это уже выглядит немного лучше, чем то, что у нас было раньше. Ладно, теперь, когда я нахожусь в хорошем месте для начала, давайте поговорим о разных вещах, которые мы можем стилизовать на нашей странице, хорошо? Одна из первых вещей, которые я хочу сделать, это я хочу добавить немного запаса на свою страницу. Если вы посмотрите здесь, между краем страницы и фактическим браузером не так много места. Я хочу добавить немного. Вы можете добавить немного, вы можете добавить много. На самом деле, пока мы кодируем сегодня, я добавлю много, чтобы вы могли увидеть эффекты. Так как ты это делаешь? Как добавить это пространство между элементом и его соседями? Ты зайдешь, и мы добавим запас. И, как я уже сказал, я думаю, что сделаю это немного более ярко, чем в коде, который я показал прямо там. Я собираюсь идти вперед и сделать это 4%. Поэтому, когда мы это сделаем, я вернусь на страницу. Я перезаряжусь. И ты видишь, что все переехало, ясно? Маржа просто добавляет немного места и делает его более привлекательным для ваших пользователей, хорошо? Давайте подумаем о других вещах, которые мы хотим сделать. Очевидно, что я, вероятно, хочу добавить немного пространства между моими ссылками и нижней частью текста. Так что это немного другое. Я не говорю, чтобы разделить элементы, я говорю, что мне нужно больше пространства между моей границей и самим элементом. Так что в этом случае, то, что мы хотим использовать, - это не маржа, мы хотим изменить отступы. Так что давайте зайдем и посмотрим, где мы думаем, мы это сделаем. Хорошо, поэтому мне нужно добавить заполнение внутри всего заголовка. Так что давайте пойдем прямо здесь, и я собираюсь изменить его на, обивка, снова вы можете выбрать все, что вы хотите. Вы можете использовать пиксели, вы можете использовать проценты. Я пойду вперед в этом случае, я просто поставлю в пиксели. И я хочу сказать, пожалуйста, добавьте 15 пикселей пространства между границей и дном. Так что, освежись, убедись, что я спасу. И обновите, и вы можете видеть, что я добавил заполнение весь путь вокруг всей вещи. Если бы я действительно хотел, чтобы отступ был внизу, я мог бы сказать, что отступ снизу, или отступ справа или отступ влево. Ладно, давай сделаем что-нибудь еще. Одна из больших вещей, которые я изменил, это то, что вместо того, чтобы иметь один под собой, я изменил их, чтобы они были рядом друг с другом. Поэтому помните, что по умолчанию разделы являются блоками, они представляют собой блок отображения, а это означает, что не позволяйте никому другому приходить рядом со мной. Чтобы изменить его так, чтобы они были рядом друг с другом, мы можем использовать встроенный или встроенный блок. Почти всегда, когда этот выбор задан, вы собираетесь использовать inline, потому что когда вы используете inline, вы можете включить высоту и ширину. Ладно, вернитесь к моему CSS-файлу. Я не хочу менять заголовок. Я думаю, что я довольно хорош с h1. Навигатор, h2, о, знаешь что? У меня нет ничего, что я могу изменить здесь, так что давайте продолжим и положим новый тег. Раздел, ладно, я хочу, чтобы все три раздела были рядом друг с другом. Так что я мог бы сделать, я мог бы выбрать по 400 пикселей каждый. Ну, это означало бы, что браузер должен быть не менее 1200 пикселей. Я мог бы выбрать по 150 пикселей каждый. Ну, это значит, что они будут очень худыми, даже если им не нужно. Итак, давайте используем проценты. Я буду использовать 30%, а не 33%, потому что я хочу дать немного локтя для отступов, полей, границ и т.д. Ладно, давайте посмотрим на это прямо сейчас, я хочу посмотреть, как это выглядит. Видите ли, я сделал это 30%, но они все еще не рядом друг с другом. Это потому, что они все еще в блоке. Давайте изменим их на встроенный блок, Display. И будем надеяться на лучшее. Там мы идем. У меня есть все три вещи рядом друг с другом. Все еще не выглядит точно так, как мы хотим, но это шаг за шагом. Он делает этот небольшой прогресс за раз. Я собираюсь пойти вперед и исправить тот факт, что они не все выстроились на вершине. И я скажу: float: left; освежайте, и мы приближаемся, мы становимся ближе, но здесь что-то еще немного не так. Во-первых, они искривлены. Мне не нравится, что они все срывались вместе. Итак, как вы отделяете разные элементы друг от друга? Как добавить немного пространства между элементами? Ладно, если бы мы были в классе, у меня был бы один студент, который как оооооу, я знаю, да, это маржа, ясно? Маржа, я собираюсь поставить маржу только с одной стороны, скажем, маржа справа. И я сделаю это что-то маленькое вроде 2%. Ладно, мы приближаемся. Мы приближаемся. До сих пор не совсем то, что мы хотели, но вот как это работает. Вы добавляете немного. Ты подстраиваешься. Вы добавляете немного. Поэтому одна из больших проблем здесь заключается в том, что когда вы плаваете вещи влево или когда вы плаваете вещи, как только вы закончите плавать, когда вы не хотите, чтобы эти следующие элементы плавали. Ты действительно должен пойти и сказать: «О, но я не хочу плыть по этой части. Итак, как только мы закончим с этими тремя секциями, мы не хотим, чтобы нижний колонтитул тоже был рядом с ними. Так что давайте зайдем и откорректируем код нижнего колонтитула. Здесь внизу. Хорошо, если вы помните, если вы не хотите, чтобы вещи плыли рядом с вами, мы будем использовать ясно: оба, что означает, что не позволяйте ничего плавать по обе стороны от меня. О, намного лучше, верно? Выглядит намного, намного лучше. И кроме того, что у меня странные цвета, мы очень близки прямо здесь. Мне на самом деле нравится серый на верхних и нижних колонтитулах, так что я оставлю его. Но то, что я хочу сделать, так это сделать, я хочу сделать эту фотографию меньше. Этот маленький значок прямо здесь, давайте сделаем его более похожим на это. И это очень просто для подхода, который мы будем использовать прямо сейчас. Давай продолжим. Я собираюсь добавить изображение. И я собираюсь идти вперед и просто закодировать его прямо сейчас. Итак, я сделаю это 75 пикселей. Упс, придется сказать ширину: 75px. Давайте посмотрим, как мы это сделали. Да, это выглядит хорошо. Если бы мне это не понравилось и я хотел поиграть с ним, я бы не пошел сюда и не пробовал 100, а потом 80, а потом 52. Что бы я сделал, так это я бы пошел сюда и снова сделал «Инспект Элемент». И я бы сделал это намного больше, потому что иначе все выглядит действительно безумно. И я бы пошел в изображение и сказал бы, хорошо, как это выглядит, если бы вместо этого я сделал его 150 пикселей? Это выглядит лучше? Или упс, не хочу этого делать. Или что, если я сделаю это 125 пикселей? Мне это нравится? Выберите нужное значение, и как только вы найдете что-то, что выглядит хорошо для вас, скопируйте это значение в таблицу стилей. Потому что, если я обновлю его прямо сейчас, мои значения элементов проверки исчезнут. Ладно, пойдем сюда, починим, сохраним и обновим. Ладно, это здорово, это те вещи, которые я хочу, чтобы ты делал в этом классе. Я хочу, чтобы вы захватили HTML-файл и сказали оо, могу ли я изменить это? Что я могу сделать, чтобы сделать его другим? Очевидно, что эта страница, которую мы создали здесь, не является готовым продуктом. Это не совсем так, как вы хотели бы, чтобы он был там в Интернете. Так что мы будем продолжать изучать новые вещи, и мы будем продолжать стилизовать вещи по-разному. И по мере того, как вы продолжаете тренироваться, вы уверены, и ваши способности действительно будут расти. И это то, чего я хочу. Я хочу, чтобы ваша уверенность была очень, очень высокой к концу четвертой недели, что вы можете это сделать. Так что удачи.