P style size font: How to change font size in HTML?

Leave a Comment / Разное / By /

Свойство font-size, размер шрифта — Оформление текста — HTML Academy

Загрузка…
Через несколько секунд всё будет готово

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Дневник начинающего верстальщика</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <header> <p>Блог</p> <nav> <a href=»index.html»>На главную</a> </nav> </header> <main> <article> <h2>День второй. Хочу быть верстальщиком</h2> <p>Сегодня весь вечер просидел в интернете. Читал про преимущества работы верстальщиком. Часто отвлекался на видео с котиками, конечно, но кое-что я запомнил:</p> <ul> <li>ты делаешь полезное дело</li> <li>можешь работать удалённо</li> <li>интересные люди</li> <li>хорошая зарплата</li> </ul> <p>Желания учиться резко прибавилось.

</p> </article> <aside> Тут могла быть ваша реклама </aside> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: «Arial», sans-serif; color: #222222; background: #ffffff url(«img/bg-page.png») no-repeat top center; } h2 { font-size: 36px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h3 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } .blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .

skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

Что в задании вам не понравилось?

Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)

Другое (сейчас напишу)

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

ЗадачиВыполнено

  1. Для заголовка h2 измените font-size на 24px,
  2. затем добавьте абзацу <p>Блог</p> класс page-title
  3. и создайте правило для этого класса с заданием размеру шрифта значения 36px.

Как изменить шрифт в HTML

html

4 месяца назад

Аднан Шаббир

В более ранних версиях HTML тег font использовался для определения и изменения размера, цвета и стиля шрифта. Однако HTML5 не рекомендует использовать тег шрифта.
HTML5 добавил свойства шрифта в качестве атрибута элемента. Свойства включают стиль шрифта, размер шрифта и цвет. Эти свойства улучшают эстетику шрифта в HTML. Цель этой статьи — предоставить различные способы изменения шрифтов в HTML. Итоги этой статьи:

  1. Как изменить цвет шрифта в HTML
  2. Как изменить размер шрифта в HTML
  3. Как изменить стиль шрифта в HTML

Как изменить шрифт в HTML

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

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

Чтобы изменить цвет шрифта в HTML, добавьте атрибут стиля в открывающий тег и используйте свойство цвета, а затем назначьте значение цвета, которое может быть «Hex», «RGB» или «ключевое слово» цвета имени.

В следующем коде HTML используется атрибут «Color» для изменения цвета шрифта:

Код

1
2
3


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

Код Изображение

Вывод

Цвет шрифта по умолчанию изменился на красный, мы использовали атрибут font-color и задали красный цвет.

Как изменить размер шрифта в HTML

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

Давайте изменим размер шрифта в HTML, используя код, который написан ниже:

Код

1
2
3


Мы изменили размер шрифта на 30px


В вышеупомянутом коде. размер шрифта до 30 пикселей с использованием свойства font-size, мы применили этот код к открывающему тегу тега абзаца, который равен

.

Изображение

Вывод

Размер текста абзаца изменен со значения по умолчанию на 30 пикселей с использованием свойства размера шрифта.

Как изменить стиль шрифта в HTML

Стиль шрифта определяет стиль шрифта в HTML. Всякий раз, когда мы используем тег стиля в элементе HTML, он перезаписывает все параметры, которые были установлены по умолчанию.

Давайте посмотрим, как мы можем изменить стиль шрифта или семейство шрифтов в HTML на следующем примере.0007

Стиль шрифта изменен на Verdana


Здесь мы использовали тег Font-family и присвоили ему свойство Verdana, которое установило стиль шрифта заголовка по умолчанию на вердана.

Изображение

Вывод

Стиль шрифта изменен с по умолчанию на Verdana с помощью свойства font-style.

Вы научились изменять стиль шрифта, размер шрифта и цвет шрифта в HTML.

Заключение:

Шрифт HTML можно изменить с помощью трех различных атрибутов: «цвет», «размер шрифта» и «стиль шрифта». В этой статье представлены различные способы изменения шрифтов в HTML. Свойство «color» изменяет цвет шрифта, «размер шрифта» используется для управления размером шрифта, а «семейство шрифтов» добавляет к шрифтам некоторый стиль.

Об авторе

Аднан Шаббир

Посмотреть все сообщения

HTML Как изменить шрифты — семейство шрифтов CSS

  • Время чтения:

Arial Lorem ipsum dolor sit amet, consectetur adipiscing elit. Меценат сидит amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi.
Вердана Lorem ipsum dolor sit amet, consectetur adipiscing elit. Меценат сидит amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi.
Гельветика Lorem ipsum dolor sit amet, consectetur adipiscing elit. Меценат сидит amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi.
Тахома Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Меценат сидит amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi.
Требюше MS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Меценат сидит amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi.
Times New Roman Lorem ipsum dolor sit amet, consectetur adipiscing elit. Меценат сидит amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi.
Грузия Lorem ipsum dolor sit amet, consectetur adipiscing elit. Меценат сидит amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi.
Гарамонд Lorem ipsum dolor sit amet, consectetur adipiscing elit. Меценат сидит amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi.
Курьер Новый Lorem ipsum dolor sit amet, consectetur adipiscing elit. Меценат сидит amet magna ut nunc ornare lacinia. Etiam sed ex sit amet massa congue varius quis eget mi.