Привет, в сегодняшней лекции, мы поговорим о стилизации вашего текста на ваших веб-страницах. Один из лучших и простых способов действительно заставить вашу страницу выглядеть немного иначе, чем стандартный по умолчанию, это думать о том, как вы можете захотеть стиль своего текста, чтобы принести максимальное влияние. Так много, много вариантов, и мы поговорим о некоторых из них сегодня. Один из этих вариантов - думать в основном о вашем шрифте. Некоторые из вещей, которые вы можете стилизовать, это семейство шрифтов, стиль шрифта, вариант шрифта и размер шрифта. Мы также можем подумать о стилизации цвета и фона вашего шрифта. Мы также можем говорить о выравнивании. И, наконец, мы очень кратко поговорим о высоте линии. Это все четыре вещи, которые вы можете сделать, чтобы просто действительно вид подчеркнуть или подчеркнуть различные вещи, которые вы хотели бы ваш стиль принести о. Итак, сначала давайте поговорим о семействе шрифтов. Семейства шрифтов представляют собой различные типы текста. Поэтому, если вы использовали Word раньше, вы вошли, вы перешли к семейству шрифтов и вы можете выбрать Arial или Wingdings или все эти различные типы шрифтов. Вы можете сделать то же самое на своей веб-странице. Итак, у меня есть несколько примеров для вас из более распространенных. У вас есть Helvetica, Курьер, Курьер Новый, Комик без, курсивный или Вердана. Я попытался поместить тип шрифта здесь, на слайде, но вам может быть трудно увидеть. И я сделал это нарочно, потому что то, что кажется очевидным для вас, когда вы разрабатываете, не всегда выглядит очевидным для людей, которые смотрят на вашу страницу. Я также выбрал эти конкретные, потому что хотел показать вам , что некоторые - это одно слово, например Helvetica. Но Comic Sans MS - это несколько слов, поэтому мне пришлось поместить его в кавычки. Ладно. Итак, как это работает, снова вы используете свое синтаксическое правило. У вас есть свой селектор, ваша собственность, а затем ваша ценность. Поэтому в этом случае я сказал, что всякий раз, когда вы видите заголовок h1, не используйте заголовок браузера по умолчанию, вместо этого я хочу, чтобы вы использовали шрифт Arial. Таким образом, он немного меняет шрифт, чтобы выглядеть как этот пример здесь. Теперь каждый браузер не поддерживает все. Мы видели это даже с HTML 5. Некоторые браузеры поддерживают некоторый текст, некоторые - нет. Точно так же некоторые браузеры поддерживают некоторые шрифты, а другие - нет. Так что вы можете сделать, вы можете предоставить альтернативы. В этом примере я дал браузеру три различных альтернативы для использования. Я в основном говорю, что всякий раз, когда вы приходите к тегу h1, я действительно хочу, чтобы вы использовали шрифт Courier. Но если у вас нет шрифта Courier, используйте шрифт Impact. Если у вас нет этого, идите вперед и используйте Arial. Один из вопросов, который вы можете задать себе: что, если у него нет трех этих шрифтов? У него нет «Курьера», «Влияние» или «Ариала». Ну, если вы помните, когда мы впервые говорили о каскадных таблицах стилей, мы сказали, что если вы дадите ему правило, и он не может его поддерживать, он всегда вернется к браузеру по умолчанию. Поэтому вам не нужно беспокоиться о том, что шрифт исчезает, потому что вы дали ему плохое семейство шрифтов. Она всегда будет проходить. Поэтому, когда вы выбираете свои семейства шрифтов, есть несколько вещей, о которых вы должны подумать. Первый, возможно, самый важный, некоторые шрифты гораздо более удобны для пользователя, чем другие. Существует в основном две категории. У вас есть шрифты с засечками и шрифты без засечек. Шрифты с засечками - это те, которые имеют вид причудливых краев вдоль той стороны , которую вы использовали при изучении каллиграфии или других вещей, подобных этому. Шрифты без засечек очень чистые, нет выпадающих окон или чего-то в этом роде. Так что, когда приходит время, чтобы кто-то взорвал твою страницу, вроде бы встал, и я пытаюсь придумать правильное слово, когда они хотят войти, и они хотят, чтобы это выглядело больше. Шрифты Serif действительно могут стать грязными, поэтому избегайте их, когда это возможно. Я лично не использую пользовательские шрифты, но я никогда не был искусным типом человека. Поэтому, если вы решите, что хотите иметь свой собственный шрифт или какой-то специальный пользовательский шрифт, вам нужно использовать что-то особенное здесь, называемое правилом шрифтов. И то, что мы делаем, так это вы видите в первом примере, вы говорите, эй, я собираюсь определить свое собственное шрифтовое лицо. Я назову это «Мой СпецальФонт». Вы можете называть его любым, что хотите, чтобы назвать его, и тогда вам нужно дать ему источник. Так что этот источник, это новый, которого вы не видели раньше. Мы не используем href, мы не используем источник, мы используем url. И URL-адрес говорит, что здесь вы можете найти файл, который определяет мой специальный шрифт. И как только вы это сделаете, как только вы напишете правило шрифта лицо один раз, на протяжении всей остальной части вашей таблицы стилей вы можете идти вперед и ссылаться на него. Поэтому теперь каждый раз, когда я использую шрифт h1, вы будете использовать MySpecialFont. Итак, теперь давайте поговорим о стиле шрифта. Это гораздо более причудливое слово, чем вы могли бы ожидать, но мы просто говорим о том, хотите ли вы, чтобы ваш шрифт выглядел нормально, что по умолчанию, или вы хотите, чтобы он был курсивом? Или вы хотите, чтобы он был косой, что в основном просто особый вид курсива. Таким образом, обычный шрифт будет происходить независимо от того, что, если это будет просто так. Если кто-то другой написал таблицу стилей, и они сделали ее курсивом, тогда вы можете сказать: нет, нет, я перезаписать ее и сделать ее нормальной. Курсив всегда является определенным видом постного, в основном, к вашему шрифту. Косой - это когда вы действительно хотите быть дополнительным специальным и точно определить, какой угол вы хотите, чтобы ваш текст наклонялся. Вариант шрифта, у нас действительно есть только два варианта здесь. У нас нормальные и маленькие колпачки. Люди используют это довольно немного, когда они пытаются сделать очень последовательный и еще несколько причудливый взгляд на это. Поэтому здесь я снова сказал, всегда используя h1, я хочу, чтобы мой вариант шрифта был маленькими шапками. Так что теперь, когда вы смотрите на мой текст, мой текст h1 внизу, я написал <h1>вариацию Small caps. Но когда браузер отображает его, он будет отображать его в маленьких крышках. Таким образом, это удерживает вас от необходимости возвращаться назад и вперед, чтобы помнить, чтобы изменить весь ваш текст на верхний или нижний регистр. Не имеет значения, как вы его пишете, браузер всегда будет показывать его в верхнем регистре. Теперь размер шрифта - это то, о чем мы будем говорить в значительной степени на протяжении всего этого курса и в других курсах, которые мы будем делать, как, например, отзывчивый дизайн, потому что это действительно много разных способов сделать это. Так что давайте начнем с самого простого. Ваши параметры: вы можете использовать размер шрифта, равный экстра-маленькому, экстра-маленькому, маленькому и меньшему. Мне это не очень нравится, потому что это на самом деле не дает мне ориентира. У вас может быть средний, у вас может быть большой, очень большой, xx-большой, и больше. Очень немногие люди используют эти варианты, но они там, поэтому я хотел рассказать вам, что они были. Вместо этого многие люди используют пиксели. Итак, я собираюсь включить на сайте этот хороший вид таблицы для вас, который касается количества пикселей на дюйм, сколько пикселей на пико, чтобы вы могли почувствовать это. Но большинство людей делают что-то по линии 20 пикселей, 35 пикселей, 80 пикселей. И это очень последовательный взгляд, и это то, что люди могут чувствовать, как он должен выглядеть. Однако вместо этого я склонен использовать проценты. Проценты позволят нам изменить размер шрифта, как мы изменяем размер экрана гораздо легче. Поэтому, если вы сказали, что используйте 100%, это будет размер по умолчанию. Если вы говорите, что используйте 110%, он будет немного больше. Если бы вы использовали 75%, это было бы три четверти от размера. Далее поговорим о цвете и цвете фона. Атрибут цвета - это цвет переднего плана, который является причудливым словом только для самого текста. Ладно. Цвет фона - это цвет фона за шрифт, который мы смотрим на. И в зависимости от того, какой текст вы стиль, он может выглядеть очень по-другому. Итак, здесь я выполнил одно правило, а ты этого раньше не видел. Я собираюсь идти вперед и стиль двух разных селекторов. Я собираюсь стиль h1 и span. Поэтому, если вы положите запятую прямо там, у меня есть это прямо здесь, между h1 и span, вы можете поставить столько запятых, сколько хотите, и написать столько селекторов, сколько хотите. В этом случае я сказал: эй, я хочу, чтобы мой цвет был синим, и я хочу, чтобы мой цвет фона был серым. И если вы не знаете, откуда взялись эти странные цифры, идите посмотреть видео цвета. Это всё объяснит тебе. Итак, теперь я вошел, и в моем HTML у меня есть цвета в теге h1, и у меня есть слово inline внутри тега span. И я хочу, чтобы вы заметили, что для h1 , элемента блока, цвет фона охватывает всю ширину страницы. Но для диапазона, для встроенных элементов, цвет фона обойдет только элемент и сам текст. Далее поговорим о выравнивании текста. Выравнивание текста является простым. Это, вероятно, одна из самых простых вещей, которые вы можете сделать в HTML. И ты будешь очень счастлива. Потому что позже, когда ты решишь, что хочешь выровнять другие вещи, это так сложно, и ты просто захочешь поместить все в текст. Таким образом, ваши параметры - когда вы используете выравнивание текста, вы можете использовать влево, что означает просто выровнять текст влево. Это то, что мы уже делаем. Вы можете иметь право, что означает выравнивание все по правому, центру и выравнивание. Центрируйте все так же, как и вы, посреди этого подразделения. Обоснование пытается распространить его, чтобы использовать как можно больше места. Так что позвольте мне показать вам несколько примеров, потому что это действительно лучший способ понять , что здесь происходит. Здесь у меня есть выравнивание по левому краю. Все выстраивается вдоль левой стороны экрана. Следующий, который я использовал текст в строке, равен правильному. И вы можете видеть, что все выстроилось вправо. Выглядит очень странно. Есть очень мало причин, по которым ты собираешься использовать это. Если только у вас нет чего-то другого в стороне посередине здесь. Следующий, который мы собираемся сделать, это центр. Люди используют центр довольно немного. Они почти используют его слишком много, но это хороший способ разбить ваш текст и выглядеть немного по-другому. Так что оправдание очень трудно объяснить, и даже когда вы впервые посмотрите на него, вы можете не заметить, что происходит. Но с оправданием браузер вкладывает немного дополнительного пространства, чтобы помочь вам распространить его, так что он имеет ту же ширину на протяжении всего пути. Так что я покажу тебе оправданное с левой стороны. И я думаю, что это лучший способ увидеть разницу в том, что у вас в основном нет пустого пространства здесь. Они распространили его здесь, так что ни в одном месте не было слишком много свободного места. Далее мы поговорим о высоте строки, и высота линии действительно отличается, потому что это не влияет на сам шрифт. Это не влияет на ваше сообщение. Это влияет на то, сколько пространства вокруг вашего текста. Некоторые из вас, возможно, использовали Word раньше, и вы можете пойти и просто, сколько пространства между строками. Может быть, вы хотите, чтобы это была одна строка, полтора строки, двойной шаг. Вот о чем мы здесь говорим. Итак, мой первый пример я сказал, что высота линии равна 50%. И следующий, я сказал, что высота линии равна 200%. Итак, в первом правиле, это странное правило писать, потому что я говорю, что хочу, чтобы вещи пересекались друг с другом. Во втором правиле я говорю, что хочу, чтобы ты действительно расходилась далеко. Упс, ладно, я собираюсь пойти дальше и привести пример позже в Интернете, где я могу показать вам, как именно эти вещи будут выглядеть. Или даже лучше, я просто собираюсь превратить это в учебный момент и заставить вас войти туда и напечатать его самостоятельно и посмотреть, как эти два разных правила влияют на текст. Итак, давайте рассмотрим. Я знаю, что я многое пережил, и это может быть подавляющим. Так что одна из самых важных вещей - это все, что мы делаем в этом курсе, это займет пять, десять минут, введите некоторые вещи, взгляните и посмотрите, что произойдет. Сделай столько ошибок, сколько сможешь, потому что пришло время делать ошибки, когда я и остальная часть толпы здесь, чтобы ответить на вопросы на разных досках. Практика по игрушечным проблемам. Не создавайте огромную веб-страницу и старайтесь ее стилизовать. Создайте страницу с тремя или четырьмя абзацами, пару ссылок и потренируйтесь на них, потому что это не имеет значения, вам не нужно практиковать на большой странице, вы можете практиковать на небольших проблемах, и это действительно имеет большое значение. И, наконец, если вы решите, что готовы кодировать и готовы сделать этот большой проект, убедитесь, что вы сначала разрабатываете свои более крупные проекты на бумаге. Я не могу подчеркнуть достаточно, что если вы начнете кодирование и стиль, не имея четкого плана, вы просто будете очень расстроены и , надеюсь, не надеюсь, вы будете очень расстроены и вы уволитесь. И я не хочу, чтобы ты это делал. Так что сначала спланируйте все свои проекты на бумаге. Если вы будете следовать этим предложениям, если будете тренироваться, тренироваться, если вы делаете проблемы с игрушками, если перед тем, как впрыгнуть в большие проблемы, вы сначала нарисуете их, я думаю, вам будет очень весело, и у вас будет действительно отличная страница, которой вы будете гордиться.