Font style html color: How to set font color in HTML?

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

Добро пожаловать в HTML

Браузер сначала пытается выяснить, поддерживается ли имя шрифта в списке или нет. Если первый шрифт не поддерживается браузером, то он отображает текст в второй шрифт, иначе будет отображаться следующий. Если в списке нет шрифта поддерживается, то браузер отображает шрифт по умолчанию.

В приведенный выше код, рассмотрите имена шрифтов «Bookman old style1» и «Broadway1». не поддерживаются ни одним браузером. (Потому что имена изменены). Так, текст «Добро пожаловать в HTML» будет отображаться в стиле «Forte».

Учебный материал, Лекционные заметки, Задание, Справочник, Объяснение описания Wiki, краткая информация

11-е Компьютерные приложения: Глава 11: HTML — форматирование текста, создание таблиц, списков и ссылок: изменение стиля, размера и цвета шрифта — HTML |

Как изменить размер и цвет шрифта h2 p в HTML CSS

Здравствуйте, уважаемые веб-дизайнеры. В этом видео мы собираемся перейти от этого к этому. Мы перемещаем фон, добавляем текст, стилизуем текст, смотрим на семейства шрифтов. Мы рассмотрим обивку снаружи и сверху. Мы рассмотрим разницу между padding и margin. Вау, много дел в этом видео, давайте прыгнем и начнем.

Итак, мы хотим вставить наш текст и сделать его примерно таким. Итак, есть h2, а затем есть P-тег. Итак, давайте возьмем копию, я поместил ее в ваши файлы упражнений. Итак, найдите свои файлы упражнений, и в Project1 есть один холодный Project1-Text, откройте его в чем-нибудь. И да, здесь есть кое-что. Итак, чего мы хотим, так это «давайте мясо». И давайте введем это в первую очередь. Все строчные, просто для вида. Вы можете добавить верхний регистр, если хотите. И тогда мы принесем это, через секунду. Давайте перейдем к коду VS.

Где нам это нужно? Я хочу, чтобы это было… мы пропускаем навигацию, вы бы сказали: «Эй, давайте сделаем навигацию». Сначала мы выполним простые части, а затем перейдем к… скажем так, мы развиваем наши навыки. Итак, «h2», табуляция, нажмите «Возврат» и вставьте этот текст. Сохраняем, давайте немного посмотрим в браузере. Вот оно, «давайте мясо». Давайте добавим P-тег и возьмем текст. Скопируйте и вставьте его. Теперь это поднимает хороший вопрос. Итак, давайте сохраним его и просмотрим, убедившись, что он работает.

Теперь в режиме просмотра кода это может… нравится вам это или нет, я покажу вам кое-что, что я делаю. Таким образом, текст как бы исчезает, и посмотрите здесь внизу, там много текста, поэтому вам нужно как бы прокручивать его. Это зависит от вас, хотите ли вы оставить это как есть, потому что я чувствую, что это… есть плюсы и минусы для обоих. Я собираюсь удалить это, так что P-тег, я нажимаю клавишу «Удалить», потому что все в одной строке. Ну вот, хорошо, как и h2, это P-тег, все в одной строке. Вам это может понравиться.

Многие люди, в том числе и я, переворачиваются и переворачиваются, так что я покажу вам обоих. Я хочу там обернуться. Я хочу, чтобы вы заметили одну вещь: каждая новая строка начинается с нового числа, и это делает ее совершенно ясной. Итак, в строке 22, хотя она довольно длинная, все это находится в строке 22, но если я перейду к «Просмотру» и сделаю это здесь, «Переключить перенос слов», вы видите, это открывает пробел в нумерации.

Хорошо, теперь нам нужно стилизовать обоих этих парней, а затем добавить некоторые отступы, потому что это полужирный шрифт, а это белый, и это не Times New Roman, в данном случае мы используем Arial. Вы можете видеть, что есть некоторые отступы от краев, тогда как в данный момент вы видите, что они идут по всему пути, плюс нам нужно отцентрировать их. Итак, давайте сделаем все эти вещи. Итак, здесь, в моем CSS, h2. Я собираюсь поставить фигурные скобки. Мы собираемся сделать… мы начнем с размера шрифта. Когда вы его создаете, вы потратите гораздо больше времени на размышления: «О, это 40 или, может быть, 60?», и просто на тестирование, потому что я уже сделал этот класс для вас, ребята, я уже знаю это 84 точно.

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

На данный момент мы собираемся использовать значения по умолчанию, их не очень много, но мы постараемся расширить их по мере прохождения. Так что я собираюсь использовать с Arial. Я перехожу с Times New Roman на Arial, Helvetica, Sans Serif. Нажмем точку с запятой, сохраним, просмотрим, круто. Так что вместо Times New Roman… Позвольте мне выключить это. Я покажу вам, как я это делаю через секунду. Итак, Times New Roman со всеми маленькими ножками называется шрифтом с засечками. Так что у него есть маленькие кусочки, которые свисают по бокам, и если я перейду на Arial, видите, никаких маленьких ножек. Шрифт без засечек, поэтому без ног.

Я сделал здесь пару вещей, один был, мы прокомментируем через секунду, этот, это немного странно, почему три шрифта? Скажите, что вы хотите Helvetica. Теперь то, что мы здесь делаем, это то, что мы используем так называемый шрифт по умолчанию. Итак, что происходит, вы не ставите Arial на этот веб-сайт, что происходит, скажем, я создал этот сайт, и наш друг, Боб, Боб загружает ваш веб-сайт. Что происходит, так это то, что его браузер заходит и проверяет его систему, поэтому проверяет компьютер Боба, чтобы увидеть, есть ли у него Arial, и загружает его. Если у него нет Arial, он проверит Helvetica, а если не найдет Helvetica, будет искать это.

Каждый компьютер имеет по крайней мере Sans Serif, это как шрифт по умолчанию для ядра машины. Итак, вы предлагаете… Я предлагаю Arial, но если у вас его нет, я предлагаю Helvetica, если у вас его нет, я предлагаю Sans Serif. Вот почему, когда вы видите некоторые из этих более длинных шрифтов, мы выбрали Arial, потому что это просто, но давайте… мы удалим все это, семейство шрифтов, двоеточие. Семья, космос, возврат хита.

Вы заметите, что некоторые из них белые, а некоторые нет. У некоторых из них есть эти маленькие отметины вокруг них, у некоторых нет. Отдельные слова им не нужны. Эти апострофы нужны словам или шрифтам, в которых есть два пробела, например пробел между ними. Я собираюсь с апострофами, маленькие хитрые вещи. Я собираюсь вернуться к Arial. Вы можете писать здесь. Скажем, вы дизайнер и говорите: «Чувак, я бы с удовольствием, я собирался сказать Lust, это шрифт, который я использовал сегодня. Вне контекста это не… вы поняли, что я имею в виду. 

Давайте выберем более, менее наводящий на размышления шрифт, что у нас получилось? Comic Sans, ты как любитель Comic Sans. Вы можете ввести это туда, и оно, вероятно, загрузится на большинстве компьютеров, потому что на большинстве компьютеров есть Comic Sans, но если нет, то будет Gill Sans, а затем Calibri. Теперь вы понимаете, что я имею в виду, верно? Так что я собираюсь избавиться от всего этого и начать печатать в Arial. Убедитесь, что точка с запятой стоит в конце. И это то, что он собирается сделать.

Другая вещь, которую я пробрался туда, и я не хотел, я чувствую, что это должно быть позже в курсе, но мы как бы открыли эту коробку, это то, что я выделил это, и я хотел повернуть это все выключено, потому что на данный момент это работает, это Arial. Поэтому, если я хочу отключить это, я могу сделать хитрый трюк. Вместо того, чтобы удалять его, а затем сохранять, а затем проверять, вы можете отключить его на мгновение. В основном вам нужен этот синтаксис. Перед ним нужно поставить косую черту, это только для CSS, нужно поставить косую черту, затем нужно поставить свои звездочки, которые завязаны с вашей 8, клавишей 8 на клавиатуре. И как-то наоборот в конце.

Так что, если вы поместите это вокруг чего угодно, то косая черта, апостроф и в конце апостроф. Это не апостроф. Это твой астерикс, извини. Астерикс, косая черта, ты видишь? Пока он находится внутри этой небольшой группы символов, он отключит его. Становится зеленым, и браузер больше не знает, что он существует. Это просто удобный трюк. Вы бы также заметили, что это очень быстро, есть ярлык. Так что еще немного рано для этих коротких путей, но мы уже там, верно?

Итак, что мы делаем, так это выделяем бит, который мы хотим отключить, и, удерживая нажатой клавишу Command на Mac или клавишу Ctrl на ПК, нажимаем кнопку с косой чертой Ford. На моей клавиатуре он внизу, в правом нижнем углу моей клавиатуры. Ваш может быть где-то еще, в основном вы ищете этот ключ. Так что удерживайте клавишу Command и щелкните по ней, и она автоматически сделает это. Это очень удобно. Command, косая черта, ‘ Command / ‘ Ctrl косая черта, ‘Ctrl / ‘

Итак, давайте перейдем к P-тегу. Итак, Пи, вот этот, что мы сделали с этим? Мы сделали размер шрифта; Я хочу всего этого. Мой ленивый мозг говорит просто скопировать, но размер будет другим, мы хотим, чтобы размер был 18 пикселей. Мы оставим цвет и шрифт. Давайте проверим это. Теперь это 18 пикселей, шрифт Arial и белый цвет. Теперь следующее, что я хочу вам показать, это то, что теперь мы можем пройти и сказать, поскольку мы хотим, чтобы это было по центру, чтобы соответствовать этому, мы хотим, чтобы все это было посередине. Итак, что я мог сделать, чтобы я мог войти в свой код VS и сказать, что мы сделали это, и это имеет гораздо больше смысла, text-align: center. Отлично, и мы сделали это для h2, и это сделано, но это не сделано для этого нижнего, так что он не по центру.

Итак, что мы сделаем, чтобы быть… потому что все дело в том, чтобы быть экономичным с вашим кодом. Сделайте это один раз, а не 10 раз. Итак, то же самое, помните, ранее мы сделали контейнер, мы сделали Auto влево и вправо для того, что обертывает все. Мы сделаем то же самое для этого. Так что же все это оборачивает? Это основной тег. Так что же это? Главный. Так что, если я сделаю то же самое для этого, я бы сказал, ты, мой друг, все внутри тебя будет text-align:center. Он будет делать то же самое, это не имеет большого значения, но мы ищем, например, очки стиля в качестве Front-end дизайнера. Итак, это работает, это сосредоточено, это сосредоточено.

Давайте поработаем с отступом, потому что мне нужен большой кусок вверху и большой кусок по бокам. Теперь мы могли бы сделать это снова с конкретным типом, но мы сделаем это с контейнером. Итак, мы будем использовать, мы добавим немного поля к этому основному тегу. Итак, мы будем делать Main, мы будем делать Padding. Мы собираемся использовать заполнение сверху. Что я хочу, чтобы это было? Я уже разобрался с этим, это 80 пикселей. И давай проверим. Потрясающие. Таким образом, вверху есть отступ 80 пикселей. Давайте сделаем это для левого и правого, поэтому Padding, Left. В данном случае это 240 пикселей. Убедитесь, что в конце стоит точка с запятой. Сделайте то же самое для права. Красивый. Давайте проверим его, посмотрим, сломали ли мы его; нет.

Набивка сверху, набивка по бокам; красивый. На протяжении всего курса мы будем искать два способа вставки пробелов. Отступы и отступы. Думаю, это действительно хороший способ показать разницу между ними. Итак, что мы будем делать сейчас, это Main, мы сделали Padding, давайте сделаем разницу, поэтому вместо Padding Top мы сделаем Margin Top, потому что это может запутать, например, какой из них я использую? Иногда это не имеет значения, поэтому давайте сейчас покажем, потому что это действительно ясно.

Итак, я сделал Margin Top вместо Padding Top. Посмотрите, что происходит. Это работает, текст находится так же далеко от этого красного поля, как и для заполнения, за исключением того, что поле находится за пределами этого поля, потому что мы сказали, главное, быть оранжевым. Margin top отталкивает его от верхней части поля. Вся оранжевость сходит вниз, тогда как набивка — это внутренняя часть коробки, внутренние части. Таким образом, текст окажется на том же месте, но отступ находится внутри коробки, так что оранжевый, вы понимаете, что я имею в виду? Давайте посмотрим.

Итак, он занимает то же место, но коробка выходит наружу. Margin толкает поле вниз, пока оно не станет немного больше, оно находится в Margin Top и Padding Top, чтобы, надеюсь, прояснить это. Если вы думаете, что я почти все правильно объяснил, мы сделаем это несколько раз, так что давайте сделаем еще 80 пикселей. Просто, надеюсь, закрепите эту идею, понимаете? Там на поле 80 пикселей, а тут еще 80 пикселей сразу после этого. Здесь немного больше, потому что этот шрифт по умолчанию имеет немного больше. Так что, вероятно, по умолчанию в верхней части этого h2 есть отступы, которые мы отключим позже, но вы понимаете, что я имею в виду?

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