Сегодня я бы хотел приступить к изучению такого момента как настройка шрифта и цвета текста. Это очень важные моменты при вёрстке сайта. Иногда надо выделить какой то элемент цветом или размером. Поговорим как нам это сделать и конечно же пример. Для этих целей есть тег <font>. В отличии от предыдущих тегов, он имеет "атрибуты". Что это и какими они бывают мы сейчас и рассмотрим.
Атрибут - параметр дополняющий тег и указывающий на то как тег должен воздействовать на элемент.
Нам с вами нужны только 2 атрибута тега <font>. Это "color" и "size".
Атрибут "color" изменяет цвет текста.
Атрибут "size" влияет на размер текста.
<font size="16" color="green">текст</font>
Простой пример применения атрибутов. Их можно использовать вместе, как указано в примере выше или по отдельности.
Пример отдельного использования атрибутов:
<font color="black"> ваш текст </font> ваш текст станет чёрным.
<font size="12"> ваш текст </font> Ваш текст будет размером 12 единиц.
Основные цвета:
Названия цветов
| Имя цвета | Цвет |
|---|---|
| black | Черный |
| gray | Серый |
| silver | Светло-серый |
| purple | Фиолетовый |
| navy | Темно-синий |
| blue | Синий |
| aqua | Голубой |
| teal | Сине-зеленый |
| green | Зеленый |
| lime | Светло-зеленый |
| maroon | Темно-красный |
| red | Красный |
| fuchsia | Фуксия |
| olive | Оливковый |
| yellow | Желтый |
| white | Белый |
По работе с прочими цветами и их выбору я напишу завтра.
Мои прошлые уроки:
Введение
Позиционирование текста в строке
Спасибо вам за внимание! Как обычно жду ваши вопросы, пожелания и комментарии.
Ваш пост поддержали следующие Инвесторы Сообщества "Добрый кит":
midnight, vika-teplo, lenutsa, nerengot
Поэтому я тоже проголосовал за него!
Если Вы проголосуете за этот комментарий, то поможете сделать "Доброго Кита" сильнее!
Почему не
<div style="font-size:26px; color: black>текст</div>?Может потому что
<font>применяют внутри других блоков? Это не написано. Примеров применения нет в данном контексте, а это было бы полезно.Настройка цвета и размера текста производится не только с помощью этого тега, неправда ли?
Почему не использовать сss для тех же целей? Чаще ведь целесообразнее прописать класс и потом использовать его с тегом
<span>.И ещё проверь как сейчас обрабатывается тем же chrome атрибут size с этого тега. Я бы вообще не рекомендовал использовать этот тег.
@privateer Мы говорим об HTML на данной стадии. И уж тем более не про блочную вёрстку. Всё понемногу. А скрины тут даром не нужны. Кода то нет по сути. Примеры небольшие + даётся полностью готовый пример.
Можно и без блочной верстки задать цвет и размер текста .
<p style="font-size:26px; color: green">текст</p>Вот тебе пожалуйста зеленый текст.
И кстати у тега
<p>есть атрибутalign.Пример не отражает всей сути. Потому что font, например, позволяет внутри предложения выделить отдельное слово другим стилем. Есть у тебя такое? Нет.
А как же пример, когда применяется font для выделения заглавной буквы.
Вот такой пример можно привести и он наглядно покажет как в параграфе можно выделить отдельной слово.
Код:
<p>Некоторые вместо `<font size="5px" color="green">текста</font>` вставляют философскую бессмыслицу. Так как читать такой текст неинтересно, то все внимание переключится на детали оформления.</p>Результат:
И вообще погляди что по твоему совету получается.
https://codepen.io/anon/pen/PjXaZQ
Не хочешь в codepen сверстай html и открой в хроме, получишь тоже самое. В html5 тег этот не используют!
P.s Где в твоем примере css? Почему css в заголовке?
часто бывает, что платформы используют какой-то кастрированный эштэмээл
я чуть не рехнулась, когда настраивала себе на дриме всяко-разно (хотела кнопки репоста сделать, а смогла только ссылки, потому что многие команды запрещены)
статистику ваще уже заебенила в код прямо, как умная )
@piranya Есть такое. Потому предпочитаю работать с чистым кодом, а не всякими надстройками)
а я же не программер еще, просто приспичило, и сидела ночами гуглила все про эштэмеел, команды и прочее )
@piranya Веб дизайн это создание сайтов =)
надо будет хостинг покупать?
так-то можно попробовать - сделать себе сначала персональный, а там уж как пойдет )
@piranya Готовы стать вебдизайнером?) А то научу))
не очень представляю, в чем заключается их работа и на чем они зарабатывают
=)
но в айти работала, даже программки писала на ABAP и формуляры рисовала, так что чем черт не шутит
@piranya Есть бесплатные и весьма неплохие)
Интересно...
А чем они живут?
@piranya У нис свои кормушки на этом)
К сожалению я не могу написать названия цвета, нужным цветом, в силу убогости Markdown и неработоспособности тегов HTML в частности <font>. Если бы мог. Оформил бы всё по науке.