Этот урок HTML посвящен выбору цвета, размера и шрифта текста с помощью тега «font». Это устаревшая тема , потому что форматирование текста на всех современных сайтах определяется с помощью таблиц стилей.
Использование тега также не рекомендуется W3C и поэтому перестает использоваться. В любом случае, это тема, которую хороший веб-мастер не может игнорировать: как уже упоминалось, будет время для изучения таблиц стилей, и в любом случае это шаг, который следует за знанием HTML.
- HTML шрифты
- цвет текста в HTML
- Размер текста HTML
HTML шрифты
Тип шрифта (то есть «font»), который браузер отображает по умолчанию, — «Times».
Чтобы выбрать другой шрифт, с которым должен отображаться текст, просто используйте синтаксис:
| текст в Arial | текст в Arial |
| текст в Verdana | текст в Verdana |
| текст в Женеве | текст в Geneva |
цвет текста в HTML
После того, как мы выбрали шрифт для написания нашего текста, мы можем выбрать цвет, вот код в соответствии с разметкой HTML :
Выбор цвета может быть сделан одновременно с выбором шрифта (поскольку «face» и «color» являются атрибутами тэга ):
Размер текста HTML
Размер текста определяется атрибутом тега size . Есть два способа задать размеры текста через тег :
- целые значения от 1 до 7
- значения, относящиеся к базовому размеру тега шрифта (по умолчанию «3»)
В случае целочисленных значений вот шкала величин:
В случае значений относительно базового размера возможно «перемещение» по шкале величин с использованием знаков « + » и « — ».
Мы сказали, что базовый размер шрифта в браузере по умолчанию — 3 .
Поэтому, если мы используем size=»+2″ , то это будет означать, что размер шрифта должен быть на 2 размера больше, чем размер основного шрифта, поэтому у нас будет шрифт размером 5.
Приветствую вас на «Планете Успеха»! Начну сразу с вопроса. У вас возникало желание в своих статьях на блоге изменить цвет шрифта в определенных местах текста? Уверен, что да! Этим мы сегодня и будем заниматься.
Предыдущие занятия по ручной html верстке текста:
Тег html изменения цвета текста через атрибут style
Html атрибут style совместим абсолютно с любыми тегами: абзаца
Но помимо атрибута style, нам для изменения цвета текста необходимо знать html коды цветов, и в этом нам поможет специальная таблица html цветов с кодами 147 различных цветовых оттенков.
Переходим на сайт этой таблицы ColorScheme.Ru и сразу сохраняем в закладки своего браузера, если в дальнейшем собираетесь менять цвет текста в своих статьях на блоге.
А теперь давайте творить и вытворять. Начнем с абзаца, который мы не хотим видеть в стандартном черном цвете. Верстаем.
Изменение цвета текста абзаца
В открытый тег абзаца
будем вставлять атрибут style и html код самого цвета, который нам нужен color: #FF0000 (я выбрал Red — красный). Для этого заходим на сайт ColorScheme.Ru и копируем код необходимого цвета:
Теперь собираем атрибут изменения цвета текста и вставляем в открытый тег абзаца:
(кавычки должны быть именно такого вида — » «, иначе цвет не поменяется)
Верстаем сам абзац:
Итак, у нас остался не оформленным раздел ”Рубрики”. По умолчанию на сайте он выглядит обычным списком. Что же можно сделать и как оформить рубрики, чтобы было приятно глазу посетителей, и они заметив этот раздел, переходили по рубрикам и на статьи, подольше находясь на блоге?
Смотрим как будет выглядеть на блоге:
Итак, у нас остался не оформленным раздел ”Рубрики”. По умолчанию на сайте он выглядит обычным списком. Что же можно сделать и как оформить рубрики, чтобы было приятно глазу посетителей, и они заметив этот раздел, переходили по рубрикам и на статьи, подольше находясь на блоге?
Изменение цвета текста списков
и
Верстаем, к примеру маркированный список, код необходимого цвета также берем в таблице html цветов:
Администратор в социальных сетях
Специалист по контекстной рекламе
Дизайн и Photoshop
На сайте будет в таком виде:
-
Администратор в социальных сетях
Специалист по контекстной рекламе
Дизайн и Photoshop
А на примере нумерованного списка изменим цвета строк:
-
Администратор в социальных сетях
Специалист по контекстной рекламе
Дизайн и Photoshop
Видео монтаж
Вёрстка сайтов
Специалист по продвижению Вконтакте
На сайте список будет отображаться таким образом:
-
Администратор в социальных сетях
Специалист по контекстной рекламе
Дизайн и Photoshop
Изменение цвета текста таблицы
Верстаем таблицу с изменением цвета текста всей таблицы:
На блоге получаем таблицу в таком виде:
| ячейка 1 | ячейка 2 | ячейка 3 |
| ячейка 4 | ячейка 5 | ячейка 6 |
| ячейка 7 | ячейка 8 | ячейка 9 |
Теперь изменим цвет текста построчно:
И на сайте увидим такую таблицу:
| ячейка 1 | ячейка 2 | ячейка 3 |
| ячейка 4 | ячейка 5 | ячейка 6 |
| ячейка 7 | ячейка 8 | ячейка 9 |
В каждой ячейке таблицы, также можно изменить цвет текста:
На блоге увидим в таком варианте:
| ячейка 1 | ячейка 2 | ячейка 3 |
По такому же принципу меняется цвет текста в открытых тегах жирного, курсивного шрифта и подчеркивания текста.
Применяйте на своих блогах атрибут style для изменения цвета текста в своих публикациях, там, где это действительно необходимо.
Успехов вам и до новых встреч!
Дневник начинающего художника
Любите рисовать? Тогда наши материалы для вас! Поверьте, не боги горшки обжигают. Каждый крутой художник начинал с малого — точка, точка, два крючочка. Нет ничего невозможного! Помните, терпенье и труд все перетрут! Смотрите, обучайщесь, тренируйтесь. И все у вас получится!
Цвет текста
А можно ли сделать текст цветным? Да ради бога! Для этого существует атрибут . Вот с этим колером мы сейчас и поработаем. Вообще, цвета можно задавать двумя разными способами. Первый — можно использовать словесное обозначение цвета: blue, black, yellow, green, white и т.д. А можно — и их цифровое обозначение, только не забывайте перед цифровым эквивалентом ставить «решетку» — «#»! Так, цвет blue (голубой) имеет свое числовое значение #0000ff, цвет red (красный) — значение #FF0000 и так далее. То есть если мы напишем:
Обе эти записи идентичны. Приведу значения некоторых цветов:
Таблица цветов
| Название цвета | Color | Код | Цвет |
|---|---|---|---|
| aква | Aqua | #00FFFF | |
| Черный | black | #000000 | |
| Синий | blue | #0000FF | |
| Фуксия | fuchsia | #FF00FF | |
| Серый | gray | #808080 | |
| Зеленый | green | #008000 | |
| Известь | lime | #00FF00 | |
| Темно-бордовый | maroon | #800000 | |
| Темно-синий | navy | #000080 | |
| Оливковый | olive | #808000 | |
| фиолетовый | purple | #800080 | |
| Красный | red | #FF0000 | |
| Серебряный | silver | #C0C0C0 | |
| Чирок | teal | #008080 | |
| Белый | white | #FFFFFF | |
| желтый | yellow | #FFFF00 |
Ну а теперь от слов к практике?
Возьмем то же самое стихотворение, и поставим перед собой задачу:
- Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.
- Каждый куплет стихотворения раскрасим в свой цвет: первый — в синий, второй — в зеленый, ну а третий — в желтый. Причем, цвет первого куплета дадим в простом названии blue, второй и третий — в числовом эквиваленте зеленого и желтого цветов.
- Первый куплет напишем шрифтом Impact
- Размер второго куплета дадим размером в абсолютном размере 4 пункта
- Размер третьего куплета дадим в относительном размере +1 пункт
- Ну и автора задвинем в тег ADDRESS
Задача ясна? Ну тогда поехали! Открываем наш незаменимый шаблон shablon.html и вставляем туда то, что нам надо:
Листинг 10. Стихотворение
Стертые лица,
Забытые профили
И многоточий упрямая нить.
Свет разливается
И проявляется
То, что уже никогда не забыть.
Сохраним наш файл под именем «text4.html» и затем откроем этот файл в окне браузера:
Вот они, цвета радуги!
Прошу прощенья за дизайн. Вряд ли он может выдержать даже самую мягкую критику. Но, согласитесь, зато сразу стало многое понятно. Не только как правильно форматировать текст, но и то, что не нужно смешивать в одном тексте разные стили, размеры и цвета.
Вот и подошел к концу наш очередной урок. Он был не таким уж и легким, согласитесь! Но зато мы теперь знаем самое необходимое, чтобы красиво оформить любой текст.
А в следующем уроке мы научимся работать с фоном. И это будет последнее, что необходимо для нашей первой странички.
Тренировка!
Введите в форму любой текст, необходимые теги, нажмите на «посмотреть» и любуйтесь на свою работу!
Изменить цвет текста можно несколькими способами.
С помощью тега font
Тег font имеет 3 атрибута, которые меняют цвет текста, размер и шрифт. Общая формула выглядит так:
Частные случаи форматирования выглядят таким образом:
- уменьшаем текст уменьшенный текст на 2 единицы
- увеличиваем текст увеличить текст на 2 единицы
- изменяем цвет текста красный текст или
красный текст - изменить размер и цвет текста красный текст
- Изменить шрифт Ваш текст
Для изменения цвета вам пригодится Таблица html кодов цветов
С помощью тега span
Этот способ предпочтителен, так как работает в большинстве случаев и там, где тег font оказывается несостоятельным.
- Вы можете изменить размер текста:
Ваш текст
Ваш текст - Изменяем цвет текста
Ваш текст
Ваш текст - Изменяем шрифт:
Ваш текст
Ваш текст - Изменить одновременно шрифт, цвет и размер текста:
Ваш текст
Ваш текст
- Чтобы подобрать шрифт, воспользуйтесь шрифтами html
- для подбора цвета — таблицей цвета HTML
Через стили CSS
Самый лучший способ задать форматирование текста — применить стили css. Примеры «текстовых» стилей:
Что получим:
Пример изменения цвета теста абзаца в CSS
Пример изменения цвета текста с помощью класса CSS
- Создание сайта
- Контакты
- Rimoyt.com
- Регистрация на Narod
- Создание сайта
- Редактирование сайта
- Редактирование страниц
- Создание сайта
- Редактирование сайта
- Редактирование страниц
- Создание сайта
- Редактирование сайта
- Уроки, FAQ
- Учебник по html (основы)
- Учебник по css (основы)
- Подбор, покупка домена
- Покупка хостинга
- Перенос сайта на хостинг
- Выбор cms
- Установка Денвера
- Заметки, темы, модули
- Подбор, покупка домена
- Покупка хостинга
- Перенос сайта на хостинг
- Общие сведения
- Разные статьи
- Виды заработка
- Разные статьи
Цвета в html. Цвет фона, текста, фона ячейки таблицы
При желании вы всегда можете поменять цвет текста или фона.
Цвет текста
Необходимо указать в значении атрибута color (цвет) тега font (шрифт) нужный цвет. Для задания цвета мы будем использовать шестнадцатеричный код — обычно используют именно его, с его помощью можно задавать значительно большее количество цветов.
Давайте зададим серый цвет для текста:
Текст серого цвета
Вот список некоторых цветов с кодами. В значении атрибута color для них можно писать как шестнадцатеричный код, так и именной.
Яркое оформление вашего сайта — залог привлечения постоянного внимания гостей страницы и увеличения конверсии. Правильно подобранная гамма цветов повлияет в том числе и на восприятие информации читателем. Речь идет не только о цветах фона или отдельных элементах интернет-страницы, но и в большей степени цвете самого текста, размещенного на сайте.
Использование CSS для оформления сайта
Для оформления HTML-документа и изменения настроек текста в нем используется CSS (Cascading Style Sheet — каскадные таблицы стилей).
Для внесения корректировок в цвет текста HTML в более ранних версиях можно было воспользоваться тегом . . После выхода версии HTML5, программисты и владельцы сайтов для этих целей начали пользоваться только CSS. Это отвечает всем стандартам и можно будет не беспокоиться о том, как сайт будет отображаться в разных браузерах.
Внести изменения цвета текста в HTML, применяя CSS, можно несколькими способами:
- при помощи режима HEX: color:#0000ff;
- с использованием слова, обозначающего требуемый цвет (на английском языке): color:blue.
Прямое включение CSS в документ HTML
Использование атрибута style для изменения цвета текста в HTML коде разберем на примере.
Вставив данный код в редактор, который вы обычно используете для написания HTML-кода, отобразится текст, окрашенный в цвета, которые мы рассматриваем ниже.
Начало любого нового HTML- документа выглядит следующим образом:
Изменяем цвет текста в HTML
Включение атрибута style (style=»цвет в формате hex или цвет, заданный словом») с определенным значением цвета, изменит цвет текста в соответствии с Вашими пожеланиями. Текст этого заголовка-синий.
В предыдущем параграфе и в данном случае мы задали цвет текста в режиме HEX, который представляет собой шестнадцатеричную систему исчисления. Цвета зашифрованы в сочетаниях цифр от 0 до 9 и латинских букв от a до f. Цвет этого текста-зеленый.
Запоминать номера цветов не нужно. Существует таблица цветов в HEX-формате. Найти ее очень просто, написав в поисковике соответствующий запрос. Данный параграф на сайте будет окрашен в красный цвет.
Легче представляется определение цвета текста английским словом. Цвет текста в этом примере коричневый. Основные цвета легко узнать и запомнить. Также любой сайт по изучению английского языка подскажет вам нужные слова.
Использование цветов в hex-формате нужно в случае необходимости изменения цвета нераспространенного оттенка. Здесь мы применили цвет Indigo согласно таблице цветов.
Рассмотрим, как можно задать цвет текста в HTML. Текст различного цвета порой позволяет создать более привлекательную страницу, однако, здесь необходимо знать меру, поскольку очень важно сочетание цвета текста и фона. Некоторые веб-мастера порой совершенно забывают про «юзабилити» и пренебрегают хорошей читабельностью текстов на своем сайте.
Рассмотрим несколько способов, позволяющих изменить цвет текста в HTML.
Цвет текста непосредственно в html-коде страницы. Данный способ предполагает использовать HTML-теги, как раз предназначенные для решения данной задачи. Пример задания цвета текста:
Как видите, мы использовали «словесное» обозначение цвета. Однако чаще всего применяется «шестнадцатеричный» код цветов, позволяющий создавать намного большее количество всевозможных цветов. Например, кодовое обозначение белого цвета будет таким:
#ffffff
#000000.
В случае, если все 6 букв или цифр в коде одинаковы, то, чтобы задать цвет шрифта в html можно использовать сокращенную форму кода: #fff.
Использование css-свойств для изменения цвета текста в HTML.
Изменять цвет текста в html можно также через css-свойство «color». Например:
Задать цвет текста всей страницы можно, присвоив элементу body свойство color с нужным значением.
Вместо атрибута style мы можем присвоить нужному элементу определенный класс, для которого в css-файле можно прописать необходимые свойства.