Как изменить цвет текста в HTML. Форматирование текста html-страницы (ч.2)
Урок 7. Цвет текста и фона в HTML.
Дата: 2008-12-05
Как задать цвет фона и текста на web-странице?
По умолчанию цвет текста и вообще любого шрифта на web-страницах всегда черный (#000000 ). Но мы всегда можем задать абсолютно любой цвет, который нам нравится и прилично смотрится или же больше подходит под дизайн конкретного сайта.
Задаем цвет текста
В HTML цвет текста, шрифта, фона и других элеменотов можно задать двумя способами:
1. Способ 1-й.
В парных тегах
прописывается атрибут
Комментарии к этой статье (уроку):
Андрей! Какой у Вас замечательный сайт! Я уже вторую неделю регулярно им пользуюсь: изучаю Ваши уроки, и видеоуроки; читаю Вашу литературу и скачиваю программы; делаю первые шаги в веб-программировании! И, что самое главное, у меня получается!!! А я ведь совсем не физик, а лирик! И в этом может убедиться каждый, кто посетит мой литературный сайт: " СТИХИ ОЛЕГ ГУЗЬ " Мои реквизиты: электронная почта: [email protected] сайт: http://sites.google.com/site/stihiolegguz/
внимательно проверьте код
Я пробовал изменять цвет фона, и у меня не получается! Как изменить цвет фона?
Как изменить цвет шрифта в html
Если вы хоть немного разбираетесь в веб-технологиях, то должны знать, что вся разметка и содержимое документа содержатся в html-файле, а в файле стилей css при этом хранятся стили, определяющие внешний вид различных элементов. Так вот, именно css нам нужно использовать для изменения цвета шрифта и всего остального.
В html существуют теги, которые позволяют применить к тексту определенные эффекты, но согласитесь, что придумывать сотни тегов для каждого оттенка было бы не совсем разумно. В css можно управлять этим гораздо более удобно. Например, вот так можно задать цвет шрифта html-элементу body, то есть тегу, включающему в себя все содержимое странички, которое выводится на экран.
body{ color: red; }
body { color : red ; |
Мы записали телу страницы красный цвет. Его получат абзацы, списки, заголовки и все остальные элементы. Это будет до тех пор, пока стили для этих элементов не будут переопределены на другие.
Форматы записи цвета
Возможно, у вас имеются небольшие познания в области веб-дизайна? В таком случае вы должны знать о том, что существуют разные цветовые режимы. Например, rgb, rgba, hsl, hex и т.д. Конечно, самый простой способ задать оттенок – просто написать ключевое слово. Мы так и сделали в примере выше, значение red делает буквы красными, blue – синими, brown – коричневыми. Это просто названия цветов по-английски.
Единственное, что вам нужно знать в этом случае – название нужного цвета. Их вы можете посмотреть в интернете в любой таблице. Следующий популярный способ задать цвет – записать его шестнадцатеричный код. Это так называемый hex-формат. Примеры:
p{ color: #000; } /* Текст в абзацах будет черным. */ table{ color: #fff; } /* Содержимое в таблицах будет белым. */
Как видите, нужно записать решетку, после чего код цвета. Как его узнать? Например, можно открыть фотошоп или любой другой графический редактор, в котором при подборе цвета отображается его hex-код. Также можно воспользоваться онлайн-сервисом.
Rgb – еще один популярный формат записи. Он расшифровывается просто – red, green, blue. Цвет в этом формате задается так:
#footer{ color: rgb(234, 22, 56); }
#footer{ color : rgb (234 , 22 , 56 ) ; |
Элемент с идентификатором footer получит указанный цвет. Доля красного составит 234, зеленого – 22, синего – 56. Эти значения можно писать от 0 до 255. Соответственно наш оттенок получится ближе к красному. В Paint вы можете добавлять цвета в палитру с помощью изменения насыщенности трех основных цветов.
Преимущества этого способа в том, что вы выбираете из миллионов цветов, просто изменяя три числа. При записи с помощью ключевых слов в вашем арсенале будет всего лишь несколько сотен цветов.
Rgba – полупрозрачный текст!
Да, это новый режим записи, который в графических редакторах есть давно, но именно в веб-дизайне появился относительно недавно. Записывается так:
a{ rgba(255, 12, 22, 0.5); }
rgba (255 , 12 , 22 , 0.5 ) ; |
Последнее число в записи задает прозрачность. Ее можно записывать от 0 до 1, где 1 – полностью непрозрачный текст, то есть поведение по умолчанию. В этом случае все ссылки станут красными, но из-за прозрачности яркость цвета будет значительно меньше, а если под ссылкой есть другой фон или элемент, то его будет видно.
Неправильный способ задания цвета
В html есть устаревший атрибут color и с его помощью можно было записать цвет текста с помощью ключевого слова. Сейчас это может даже не сработать в современных браузерах, да и вообще этот метод нарушает общепринятые веб-стандарты. А еще он неудобен.
Как определить цвет для произвольного фрагмента
Ну ладно, мы тут говорим о цвете шрифта для абзацев, ссылок и таблиц, но это цельные элементы, а что, если вам надо определить цвет для одного предложения, одного слова, одной буквы, в конце концов?
Просто заключаем нужный фрагмент в теги span. Прописываем внутри тега атрибут class, которому задаем произвольное, но понятное нам значение. Например, так:
Все, теперь остается только обратиться к селектору в css.
14.01.17 4.4KВ HTML цвет текста меняется с помощью тега font , но в HTML5 этот метод не поддерживается, Чтобы задать цвет фона HTML для различных элементов страницы, вместо указанного тега нужно использовать CSS . Использование CSS гарантирует, что веб-страница будет совместима с любым браузером.
Метод 1: Использование CSS
- Откройте HTML-файл . Лучший способ изменить цвет текста – это воспользоваться CSS . Тег не поддерживается в HTML5 . Поэтому воспользуйтесь CSS , чтобы определить стиль элементов страницы.
- Этот метод также работает с внешними таблицами стилей (отдельными файлами CSS ). Приведенные ниже примеры предназначены для HTML-файла с внутренней таблицей стилей:
- Поместите курсор внутри тега . Стили определяются внутри этого тега, если используется внутренняя таблица стилей:
- Введите
- Введите элемент, цвет текста которого нужно изменить
. Используйте раздел
- В селекторе элемента введите атрибут color: . Это свойство определяет цвет текста выбранного элемента. За HTML цвет фона текста отвечает свойство background-color . В нашем примере этот атрибут изменит цвет основного текста, который является элементом, включающим весь текст на странице:
- Введите цвет текста . Это можно сделать тремя способами: ввести название, шестнадцатеричное значение или значение RGB . Например, чтобы сделать текст синим, введите blue , rgb(0, 0, 255) или #0000FF :
- Добавьте другие селекторы, чтобы изменить цвет различных элементов . Чтобы поменять цвет текста у разных элементов страницы или HTML цвет фона текста, можно использовать различные селекторы:
Этот заголовок будет зеленым.
Этот параграф будет синим.
Этот основной текст будет красным.
- Укажите стилевой класс CSS вместо того, чтобы менять элемент . Перед тем, как сделать цвет фона в HTML или изменить стиль элемента, можно указать стилевой класс, а затем применить его к любому элементу страницы. Например, класс .redtext окрасит текст элемента в красный цвет:
Этот заголовок будет красным
Этот параграф будет стандартным.
Этот параграф будет красным
Метод 2: Использование атрибутов встроенного стиля
- Откройте HTML-файл . Чтобы изменить стиль одного элемента страницы или цвет фона HTML , можно воспользоваться атрибутами встроенного стиля. Это может быть полезно, если нужно внести одно-два изменения, но не рекомендуется для масштабного применения. Чтобы полностью изменить стиль, воспользуйтесь предыдущим методом:
- Найдите элемент, который нужно изменить . С помощью атрибутов встроенного стиля можно изменить цвет текста любого элемента страницы. Например, чтобы изменить цвет текста определенного заголовка, найдите его в файле:
Этот заголовок нужно заменить
- Добавьте к элементу атрибут стиля . Внутри открывающегося тега изменяемого элемента введите style=»» :
В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.
Теги и атрибуты при роботе со шрифтами html
Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .
Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.
Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта:- color – устанавливает цвет текста;
- size – размер шрифта в условных единицах.
Поддерживается положительное значение атрибута от 1 до 7.
- face – используется для установки семейства шрифтов текста, которые будут использованы внутри тега . Поддерживается сразу несколько значений перечисленных через запятую.
Форматируется только тот текст, который расположен между частями парного тега font. Остальной текст отображается стандартным шрифтом, установленным по умолчанию.
Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:- — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
- — размер больше установленного по умолчанию;
- — меньший размер шрифта;
- — наклонный текст (курсив ). Аналогичный ему тег ;
- — текст с подчеркиванием;
— зачеркнутый;- — отображение текста только в нижнем регистре;
- — в верхнем регистре.
Обычный текст
Жирный текст
Жирный текст
Больше обычного
Меньше обычного
Курсив
Курсив
С подчеркиванием
Зачеркнутый
Возможности атрибута style
Кроме описанных тегов существует еще несколько способов, как изменить шрифт в html . Одним из них является применение универсального атрибута style . С помощью значений его свойств можно задавать стиль отображения шрифтов:
1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .Синтаксис написания:
font-family: имя шрифта [, имя шрифта[, ...]]
2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:font-size: абсолютный размер | относительный размер | значение | проценты | inherit
Размер шрифта можно также задать:
- В пикселях;
- В абсолютном значении (xx-small, x-small, small, medium, large );
- В процентах;
- В пунктах (pt ).
Font-size:7
Font-size:24px
Font-size: x-large
Font-size: 200%
Font-size:24pt
3) font-style – устанавливает стиль написания шрифта. Синтаксис:font-style: normal | italic | oblique | inherit
Значения:
- normal –нормальное написание;
- italic – курсив;
- oblique – шрифт с наклоном вправо;
- inherit – наследует написание родительского элемента.
Пример того, как поменять шрифт в html с помощью этого свойства:
font-style:inherit
font-style:italic
font-style:normal
font-style:oblique
4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:font-variant: normal | small-caps | inherit
Пример того, как изменить шрифт в html этим свойством:
font-variant:inherit
font-variant:normal
font-variant:small-caps
5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис:font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Значения:
- bold – устанавливает полужирный шрифт html;
- bolder – жирнее относительно normal;
- lighter –менее насыщенное относительно normal;
- normal – нормальное написание;
- 100-900 – задается толщина шрифта в числовом эквиваленте.
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100
Свойство font и цвет шрифта html
Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :
font: font-size font-family | inherit
Также в качестве значения могут быть заданы шрифты, используемые системой в надписях на различных элементах управления:
- caption – для кнопок;
- icon – для иконок;
- menu – меню;
- message-box –для диалоговых окон;
- small-caption – для небольших элементов управления;
- status-bar – шрифт строки состояния.
font:icon
font:caption
font:menu
font:message-box
small-caption
font:status-bar
font:italic 50px bold "Times New Roman", Times, serif
Наконец, добрались руки, как изменить шрифт заголовка сайта . Не люблю сложных вещей, поэтому всегда все упрощаю, насколько возможно . Предлагаю Вам простой, быстрый и не требующий глубоких знаний html способ изменить шрифт, размер и цвет заголовка Вашего сайта.
Всего три строчки в редакторе, и Вы получите настоящее удовольствие от собственного творчества на сайте. К тому же, если Вы используете бесплатный шаблон, сайт начнет приобретать индивидуальные черты.
Меры предосторожности для тех, кто не уверен
- Для начала определимся? что речь идет о темах (шаблонах) WordPress. Если тема блога установлена на этот движок, то это статья для Вас.
- Если Вы не уверены в своих силах, лучше сначала поэкспериментировать на тестовом поддомене. Убедившись в своей дееспособности, можно перенести навык на основной сайт. Впрочем, действия, которые требуются для того, чтобы изменить шрифт заголовка сайта , настолько просты, что напортачить там сложно. Лично я все всегда сначала делаю на тестовом. Чуть больше времени, но надежнее.
- В случае, если сайт все-таки сломался, читайте, >>. Но, если все делать аккуратно, никаких катастроф не произойдет.
В разных шаблонах строчка кода может выглядеть по-разному. Чтобы уточнить, как в вашем шаблоне, изучите статью, . Там есть подробное видео, как найти любую строчку кода, — после чего вы сможете вносить практически любые изменения в шаблон своего сайта. Навык освободит вас от необходимости рыться в кодах и развяжет руки.
Если же не разберетесь сами и хотите найти хорошего фрилансера, разбирающегося в кодах, то в статье о есть полезная ссылка, куда обратиться в случае чего.
Инструкция по смене шрифта в заголовке сайта
А если времени разбираться нет, но хочется быстрее На все про все нам понадобится наш сайт и программа word (для подбора шрифта).
- Входим в админпанель своего сайта. Далее, в левом сайдбаре находим Консоль — Внешний вид — Редактор .
- В правой части находим Список стилей (style.css) и открываем его.
- Заголовок сайта — это header h1 . Находится ближе к началу. Чтобы не искать глазами, можно нажать Ctrl+F — появится строка поиска. Наберите в поиске. У меня эта часть выглядит так:
Верхний квадрат: строка изменения шрифта.
Нижний квадрат: строка изменения размера шрифта.
Позже мы еще поменяем размер и цвет шрифта, если есть такая необходимость.
Как изменить шрифт заголовка сайта
- Теперь открываем чистый документ Word, копируем на главной странице сайта название и переносим его в вордовский документ, выделяем и начинаем играться с разными шрифтами. Находятся они на верхней панели в левом углу. Почему удобно делать именно в этой программе — потому что сразу видны все изменения шрифта в Вашем названии. Выбирайте шрифт, который будет сочетаться с названием Вашего сайта. Шрифт, который Вам безусловно понравится. Когда выберите, скопируйте в Worde название шрифта.
- Возвращаемся в админпанель сайта. В строку изменения шрифта (на рис. — верхний синий квадрат) вносим название выбранного шрифта вместо того, что стоит по умолчанию.
- Внизу страницы нажимаем «Обновить файл».
- Переходим на сайт и смотрим, хорошо ли встал шрифт в общем контексте. Если нет, возвращаемся в Word и выбираем другой. Все.
Как изменить размер шрифта заголовка сайта
Это делается в том же шаблоне редактора. На картинке выше — второй синий квадрат. Все, что там нужно сделать, это поставить другие цифры — шрифт станет больше или меньше в зависимости от того, какой Вам нужен. Сохраняем изменения, переходим на сайт и смотрим, все ли нас устраивает.
Как изменить цвет шрифта заголовка сайта
Делается это там же. Находится строчка в следующем блоке за тем, где мы меняли сам шрифт и его размер. Выглядит примерно таким образом:
Чтобы подобрать цвет, можно использовать одну из опций темы: Консоль — Внешний вид — Фон . В строке «Цвет фона» можно выбрать цвет, скопировать его буквенно-числовое значение и вставить вместо того, что был (в моем случае #11006а). Изменения сохранить. Переходим на сайт и любуемся.
Итак, чтобы изменить шрифт, цвет и размер , нужно внести изменения всего в 3 строчки редактора. При небольшом навыке занимает очень мало времени.
Красивый, хорошо читаемый заголовок,
сочетающийся с общим духом темы,
сделает Ваш блог более привлекательным и запоминающимся.
Экспериментируйте, выбирайте то, что Вам по душе!
P.S. Когда я вношу даже незначительные изменения в файлы редактора темы, то на всякий случай копирую измененный текст целиком в блокнот — в папку, где хранится zip установленной на моем сайте темы. В том случае, если сайт вдруг сломается и придет необходимость переустанавливать тему, у меня сохранены все измененные на мой вкус файлы. Останется только при переустановке wordpress или темы перенести файлы в соответствующие папки на хостинге.
В следующих статьях, по ходу преобразования моего блога, мы будем так же легко менять цвет фона, шрифты заголовков в рубриках, статьях, цвет ссылок — словом, любых элементов
- Введите элемент, цвет текста которого нужно изменить
. Используйте раздел
