Всем привет, с возвращением.
Одна из вещей, которые я действительно хочу подчеркнуть в этом курсе Введение в CSS, заключается в том, что
есть необходимость остановиться и практиковать и пересмотреть то, что мы узнали до сих пор.
Так что я позабочусь о том, что включу мелочи, которые я буду называть «
Код вместе».
Так что, если вы смотрите это прямо сейчас, и у вас нет своего ноутбука рядом или
того, что вы используете для кодирования, я очень надеюсь, что вы остановитесь, получите это и
кодируете вместе со мной, потому что просто слушать меня не дает вам
истинного опыта, который вам нужен, чтобы ввести его и делать ошибки, когда мы идем вместе.
Ладно, давай продолжим и начнем.
То, что я собираюсь сделать в этом видео, я собираюсь вернуться к старому, но
лакомство, что мы сделали в HTML пять.
И я хочу, чтобы мы пошли вместе и стилизовали его.
Хорошо, давайте начнем с создания нашего CSS-файла.
Я собираюсь пойти вперед и создать новый сейчас,
перейти сюда, чтобы файл, новый файл, или вы можете сделать команду N.
И первое, что вы хотите сделать, это вы хотите сохранить это как CSS-файл, так
что тогда ваш редактор знает, чтобы раскрасить вещи так, как вы хотите его раскрасить.
Теперь, всякий раз, когда я разрабатываю страницы,
я сохраняю все свои HTML-файлы в одной папке, а мои CSS-файлы в другой папке.
И я действительно призываю вас сделать то же самое.
Итак, я собираюсь пойти вперед и пойти в мою папку CSS.
И я назову это, назовём это together-1.css.
Очень важно, чтобы вы помните, чтобы поместить это расширение файла, или
все не будет работать.
Ладно, вот моя старая, скучная страница.
То, что люди обычно делают, это они
стилируют сверху страницы и работают вниз.
Итак, я хочу, чтобы вы выбрали свои собственные значения, но давайте вместе идем вперед и
стиль моего заголовка.
Упс, здесь не так.
И мы можем дать ему предысторию.
Я собираюсь попробовать B3B3B3.
Мы можем дать ему больший шрифт, если хотите.
Я скажу размер шрифта.
Давайте сделаем это 150%.
Просто чуть-чуть другое.
Я собираюсь сохранить это, и я всегда очень призываю студентов внести небольшие изменения
в свой код, а затем проверить и посмотреть, что произошло.
Посмотрим, не изменили ли ли мы что-нибудь здесь.
И теперь я собираюсь перезагрузить его и посмотреть, что произошло, и
если вы заметите, ничего не произошло.
Ну, проблема в том, что я не правильно привязал таблицу стилей к HTML-файлу.
Помнишь, как я говорил тебе, что всегда думаю, что помещаю вещи в папку под названием CSS?
Мне нужно включить это.
Ладно, вернись.
Перезарядить.
О, привет! У меня тут что-то
происходит.
Ладно?
Итак, теперь давайте продолжим и просто добавим еще несколько вещей.
Я знаю, что это не совсем похоже на мой пример.
Но одна из вещей, которые я хочу сделать дальше, я хочу идти вперед и стиль, давайте посмотрим,
мой заголовок.
Давайте придадим всему заголовку цвет фона.
Ладно.
Ты можешь выбрать все, что захочешь.
И я собираюсь выбрать предысторию: думаю, у меня есть 66666, хорошо.
И давайте продолжим, и я действительно хочу выровнять этот текст.
Поэтому я назову это текстовое выравнивание: центр.
Сохраните, обновите.
О, мы добрались туда!
Страница начинает выглядеть немного по-другому все время.
Единственное, что меня смущает, что мне кажется, что мне не нравится мой фон.
Так что, если я вернусь, я пойму, что забыл знак # прямо перед собой.
И сделай один, два, три, четыре, пять, шесть.
Сохраните его здесь.
Обновите.
Там мы идем.
Теперь эти цвета действительно уродливы и очень трудно для вас увидеть.
И я это понимаю.
Так что давайте продолжим и поиграем с вещами, чтобы сделать это немного проще для просмотра.
Давай продолжим и поставим.
Давайте изменим h1 так, что это другой цвет, и
давайте продолжим и изменим навигацию.
Так что у нас есть, я собираюсь изменить шрифт, давайте попробуем вариант шрифта.
Мне нравится вариант шрифта.
Это позволяет помещать вещи в верхний, нижний регистр, разные вещи вроде этого.
У нас также есть размер шрифта.
Я все еще не доволен размером, поэтому я собираюсь сделать его 150%,
и последнее, что я собираюсь сделать, это семейство шрифтов.
Теперь, если вы помните, с семейством шрифтов очень принято давать ему более
одного значения, потому что не каждый браузер поддерживает каждое семейство шрифтов.
Так что в моем случае, я собираюсь пойти вперед и попытаться поставить Arial,
Times New Roman.
Если у вас есть шрифт, состоящий из нескольких слов,
вам нужно поместить их в кавычки.
А потом, наконец, просто Сериф.
Теперь вот как я кодирую.
Я кодирую ошибки.
Я кодирую с опечатками.
Честно говоря, я редко записываю в рубашку на пуговицах, выглядящую так неудобно.
Способ кодирования удобно с коканом и баром Hershey, так
что когда вы закончите, у вас есть эти праздничные маленькие укусы шоколада.
Но пока я сделаю все, что смогу, чтобы привести тебя с собой.
Я многое изменил.
Посмотрим, что случилось.
Ты видишь, что я сделаю немного больше, мы начинаем туда добираться.
У нас есть цвета фона, у нас есть такие вещи.
Так что давайте сделаем еще несколько вещей вместе,
а затем мы продолжим и узнаем немного больше.
Я бы хотел, чтобы вы сами выбирали свои вещи для h2.
Так что h2 я собираюсь выбрать другой цвет,
давайте попробуем тот же цвет 666666 и другой фон.
Я собираюсь использовать 00B7EA.
Значит, это имеет значение?
Имеет ли значение, набираю ли я его в верхнем и нижнем регистре EA?
Это совсем не имеет значения.
Важно, чтобы вы, как правило, были последовательными, чтобы
вы не испортили себя, когда вы идете туда и обратно.
Ладно?
Мы снова освежимся.
Ладно.
Всё начинает выглядеть по-другому.
Это не так много стиля.
Это всего один, два, три, четыре, пять.
Пять правил, и у нас уже совсем другой взгляд.
Я собираюсь идти вперед и сделать экран меньше, потому что, когда я помещаю
этот размер шрифта 150%, это имеет большую разницу.
Ладно.
Одна из последних классных вещей, которые я хотел бы, чтобы вы попытались сделать, это идти вперед и
попытаться стиль резюме в деталях.
Потому что если я хочу сделать только, я вырос в Аштабула Огайо часть,
как вы можете сделать курсив, но не остальное?
Хорошо, поэтому, если вы помните, как выглядит HTML код,
позвольте мне показать вам быстрый пример, это то, что прямо здесь у меня есть мой тег details, и
если вы его не видели раньше, я положил слово open, в
котором означает, что по умолчанию показать, что он открыт, поэтому никто не должен нажимать на него.
У меня есть свои данные.
У меня есть сводка, где появилась часть «Мое детство», а
потом у меня есть вся эта часть.
Так что, если вы хотите сделать курсив, и только это, как вы это делаете?
Ладно.
С чего мы начнем, так это то, что мы будем стилизовать метку деталей.
И я собираюсь прокрутить сюда немного, чтобы вы могли увидеть немного получше,
надеюсь.
И я хочу сказать, что хочу сделать все курсивом, и то,
как вы делаете это, вы идете и напечатаете шрифты: курсивом.
Понял?
Теперь это не будет именно то, чего мы хотели, потому что я сделал это
все курсивом.
Так что теперь ты хочешь вернуться и сказать, но знаешь что?
Я не хочу резюме.
Я не хочу резюме курсивом.
Упс, вернись сюда.
Резюме и я могу сказать шрифт.
Упс, в стиле шрифта.
Ну, как вы делаете это так, что это не курсив,
по умолчанию большинство вещей нет, вы можете на самом деле положить в слово нормальный.
Ладно.
Так вот и всё.
Теперь у нас есть эта часть курсивом, а эта часть выделена жирным шрифтом.
По большей части мы закончили, но я собираюсь добавить одну мелочь,
потому что это действительно обычное для людей стилизовать свой верхний и
нижний колонтитул очень аналогичным образом.
Так что давайте пойдем и добавим стиль моего нижнего колонтитула.
И то, что я хочу сделать, я хочу дать ему тот же цвет фона
, что и мой заголовок.
Итак, фон один, два, три, четыре, пять, шесть, бум.
И вот ты идешь.
Итак, что мы сделали сейчас, это мы перешли от очень простого, базового HTML-файла, и
мы начали добавлять только немного цвета, немного размера шрифта,
немного разных вещей, подобных этому.
Позвольте мне снова показать вам, как выглядел исходный файл, и
мы посмотрим на них рядом друг с другом.
Я прокомментирую свою таблицу стилей.
Я открою его, и вы увидите, что это две очень разные страницы.
Но они точно такие же HTML.
Хорошо, это те вещи, которые тебе нужно сделать для
домашнего задания в этом разделе.
Так что тренируйся здесь, возвращайся и наблюдай за мной,
если это поможет тебе немного пережить горбы.
Но главное - код, код, код, удачи.