blackhack.ru ОК. Настройки, новости, игры.
Как изменить цвет шрифта в 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.
В этом уроке мы рассмотрим последний атрибут тега , который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html , нужно применить атрибут color тега :
Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:
Текст зеленого цвета
Текст красного цвета
Текст фиолетового цвета
Посмотрим результат в браузере:
Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.
Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:
С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью конвертера цветов HEX , который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:
Текст зеленого цвета
Текст красного цвета
Текст фиолетового цвета
Сохраним файл и посмотрим на результат:
Как вы видите, мы задали тексту те же цвета, как и в первом примере, только здесь мы воспользовались шестнадцатеричной системой исчисления или другими словами, мы задали цвет в формате HEX.
Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега , и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:
Задаем тексту шрифт, размер и цвет
Задаем тексту шрифт, размер и цвет
Хороший дизайн – важная составляющая любого успешного сайта. CSS даёт полный контроль над внешним видом текста. В том числе и над тем, как в HTML изменить цвет текста .
Цвет шрифта можно изменять стилизации внутри HTML-документа . Однако рекомендуется использовать именно внешние таблицы CSS-стилей .
Внутренние стили, которые задаются в заголовке документа, принято использовать на маленьких одностраничных сайтах. В больших проектах лучше избегать внутренней стилизации, так как это сопоставимо с устаревшим тегом font , которым мы пользовались много лет назад. Строчные стили значительно усложняют обслуживание кода, так как они указываются непосредственно перед каждым элементом на странице. Сегодня вы узнаете, как менять цвет шрифта при помощи внешнего CSS и стилизовать тег
Добавляем стили для изменения цвета шрифта
В этом примере понадобится веб-страница с разметкой и отдельный CSS-файл , подключаемый внутри HTML-кода .
В HTML-документе будет несколько элементов, но мы будем работать только параграфом. Вот так меняется цвет текста внутри тегов
При помощи внешней таблицы стилей.
Значения цветов можно указывать при помощи названий, RGB или шестнадцатеричных значений.
- Добавляем атрибут style
к тегу
:
- Добавляем свойство color :
- Добавляем значение цвета после свойства:
p { color: black;}
Элементы
На странице станут чёрными.
Перед тем, как изменить цвет текста в HTML , нужно понимать, что в данном примере используется название цвета black . Несмотря на то, что это один из способов указания цвета в CSS , он имеет определенные ограничения.
Нет ничего страшного в том, чтобы использовать названия black (чёрный ) и white (белый ). Но этот способ не позволяет указывать конкретные оттенки. Поэтому для указания цвета чаще используются шестнадцатеричные значения:
p { color: #000000; }
Этот CSS-код также сделает элементы
Чёрными, так как hex-код #000000 обозначает чёрный цвет. Также можно использовать сокращённый вариант #000 , и результат будет тем же.
Как отмечалось ранее, hex-значения отлично подходят в тех случаях, когда необходимо использовать сложные цвета.
Например:
p { color: #2f5687; }
Данное hex-значение придаст тексту синий цвет. Но в отличие от простого blue этот код позволяет указать конкретные оттенки синего. В данном примере получится тусклый серо-синий цвет.
Перейдём к RGBA-значениям . RGBA поддерживают все современные браузеры, так что этот метод можно использовать, не беспокоясь о запасных вариантах:
p { color: rgba(47,86,135,1); }
Это RGBA-значение обеспечит всё тот же тусклый, серо-синий цвет. Первые три значения отвечают за красный, зелёный и синий, а последняя цифра — за уровень непрозрачности. «1 » означает «100% ». То есть, текст будет полностью непрозрачным.
Если сомневаетесь в поддержке браузерами, то цвета можно указывать следующим образом:
p { color: #2f5687; color: rgba(47,86,135,1); }
В этом синтаксисе сначала идет hex-значение , которое затем переписывается RGBA-значением . Это значит, что устаревшие браузеры, в которых нет поддержки RGBA , будут использовать первое значение и игнорировать второе. Современные браузеры будут использовать второе значение. Это нужно учитывать, чтобы знать, как изменить цвет текста в таблице HTML .
Перевод статьи “How to Change the Font Color with CSS ” был подготовлен дружной командой проекта .
Хорошо Плохо
Шестнадцатеричный цвет указывается в формате: #RRGGBB, где шестнадцатеричные целые числа RR (красный), GG (зеленый) и BB (синий) определяют компоненты цвета. Все значения…
Data-lazy-type="image" data-src="http://excelwords.ru/wp-content/uploads/2015/12/2015-12-05-01-50-04-Скриншот-экрана.png" alt="2015-12-05 01-50-04 Скриншот экрана" width="205" height="79">
Word является самой популярной программой для просмотра, набора и редактирования любого текста. Но разобраться в тонкостях работы этой программы под силу далеко не каждому. Сегодня я научу вас различным способам выделения и изменения цвета текста.
При помощи верхней панели инструментов
Data-lazy-type="image" data-src="http://excelwords.ru/wp-content/uploads/2015/12/2015-12-05-01-33-04-Скриншот-экрана.png" alt="2015-12-05 01-33-04 Скриншот экрана" width="266" height="273">
Открывая текстовой редактор, каждый из нас видит основное рабочее поле, где мы совершаем работу с текстом. Верхняя панель инструментов располагается как раз над рабочим полем и позволяет производить основные манипуляции. Для того чтобы поменять цвет нашего текста нужно выделить его при помощи курсора мыши и выбрать вкладку: «Главная». Именно она, как правило, открывается по умолчанию при начале работы с документом. Меню этой вкладки разбито на разделы. Интересующий нас раздел находится вторым слева и носит название «Шрифт». Здесь нам необходимо обратить внимание на символ буквы «А», носящий название: «Цвет текста». Рядом с этим символом расположена небольшая стрелочка, указывающая вниз, именно на нее нам и следует нажать. В открывшемся меню выбираем наиболее приглянувшийся нам оттенок. Следует иметь в виду, что если вы не стали выделять фрагмент текста при помощи курсора мыши, но проделали все остальные пункты, то все последующие буквы будут выбранного вами цвета.
При помощи мини-панели инструментов
Данный способ считается наиболее быстрым и удобным для начинающего пользователя программы Word. Чтобы открыть мини-панель инструментов следует нажать правую кнопку мыши по рабочей области документа. В появившемся контекстном меню можно пойти двумя путями:
1) Выбрать позицию «Шрифт». Данный выбор приведет к появлению нового диалогового окна, в котором можно будет более детально работать со шрифтом печатного документа. Здесь можно как поменять, так и убрать не только цвет, но и шрифт, начертание букв и их размер. В нижней части окна наглядно покажут, что именно мы меняем на примере названия выбранного шрифта.
Png" alt="2015-12-05 01-37-21 Скриншот экрана" width="458" height="111" srcset="" data-srcset="http://excelwords.ru/wp-content/uploads/2015/12/2015-12-05-01-37-21-Скриншот-экрана..png 300w" sizes="(max-width: 458px) 100vw, 458px">
2) В более новых версиях Word в этом же контекстном меню, которое вызывается щелчком правой кнопки мыши, находится уже знакомый нам символ «А», отвечающий за цвет текста.
Данные действия можно применить как на выбранном фрагменте документа, так и на будущем тексте. Если вы хотите изменит весь текст, следует использовать сочетание клавиш Ctrl + A, которое выделит весь документ.
Выделение текста цветом
Data-lazy-type="image" data-src="http://excelwords.ru/wp-content/uploads/2015/12/2015-12-05-01-39-15-Скриншот-экрана.png" alt="2015-12-05 01-39-15 Скриншот экрана" width="206" height="191">
Думаю, стоит упомянуть и об этой функции в Word, нужна она для того, чтобы выделить наиболее значимую информацию в документе. Операция очень простая, но позволит нам добиться красивого результата. Выглядеть это будет так, как будто мы взяли в руки маркер выделитель. Сначала нужно выделить область документа мышкой, на которую мы хотим применить это действие. Затем потребуются выполнить несколько манипуляций во вкладке «Главная». Обнаружив блок «Шрифт», ищем кнопку под названием «Цвет выделения текста», которая находится левее знакомой нам кнопки «Цвет текста». Стандартно текст будет выделяться желтым цветом, но это можно легко исправить, нажав на стрелочку, указывающую вниз рядом с кнопкой выделения. Иногда возникает необходимость убрать выделение, для этого во вкладке выбора цвета выбираем пункт «Нет цвета».
Использование заливки
Data-lazy-type="image" data-src="http://excelwords.ru/wp-content/uploads/2015/12/2015-12-05-01-40-48-Скриншот-экрана.png" alt="2015-12-05 01-40-48 Скриншот экрана" width="238" height="253">
Эта операция позволит залить фон документа интересующим цветом. Главное отличие заливки от выделения заключается в том, что окрашиваться будет и межстрочный интервал. Делать это следует, если вы хотите, чтобы информация бросалась в глаза. Для заливки потребуется зайти во вкладку «Главная» и найти кнопку похожую на банку с краской, который располагается в блоке «Абзац». После нажатия заливка используется к последнему абзацу документа. Если есть необходимость применить заливку ко всему документу, то следует использовать уже знакомое сочетание клавиш Ctrl+A, которое позволит выбрать весь документ. Чтобы убрать заливку, как в случае с выделением, необходимо выбрать пункт «Нет цвета». Хочется отметить, что получится интересный результат при комбинации всех инструментов с изменением цвета текста.
Наверняка вы замечали, что на многих сайтах размер шрифта очень мелкий, из-за чего приходится напрягать зрение, увеличивать буквы с помощью мыши (Ctrl + крутим колесико мышки) и вообще чувствовать себя некомфортно. Хочется поскорее покинуть такой сайт. Тем более что есть еще один немаловажный момент: в последнее время все больше людей выходят в интернет с мобильных устройств, а там, поскольку экран маленький, графические отображения играют большую роль.
Между тем, решить вопрос, как говорится, раз чихнуть. Для этого откройте любую свою статью, выделите кусочек текста, щелкните по нему правой кнопкой мыши и выберите пункт «Исследовать элемент».После этого в нижней части экрана появится окошко кода, где с правой стороны увидите вот такую картину.
В строке font-size:15px; нужно поменять цифру в большую сторону. Щелкните по ссылке «Style.css:739», окроется файл «Style.css», прокрутите вниз и найдите строку 739, где и поменяйте цифру на нужную вам. Для тех, кто панически боится кодов, скриптов, любых изменений на блоге: на этом этапе вам нечего опасаться, вы просто смотрите, что произойдет, если сделаете так-то и так-то. После того как перезагрузитесь, все изменения исчезнут и страница примет прежний вид.
А чтобы они вступили в силу нужно редактировать сам файл. Для этого пройдите по адресу «Внешний вид» - «Редактор», откройте файл «Style.css», нажмите Ctrl+f и в появившееся окошко введите такую строку кода - #main_content_post p. Внесите изменения и обновите файл. Должен предупредить, что чрезмерно большие буквы тоже плохо влияют на восприятие, все хорошо в меру.
Как изменить размер шрифта заголовка?
Поступаем аналогичным образом - щелкаем непосредственно по названию сайта правой кнопкой мыши - «Исследовать элемент» — в правой колонке, прокручивая вниз, находим строку font-size. Переходим по ссылке в таблицу стилей, находим нужную строку и занимаемся творчеством. Но тут есть один нюанс: при увеличении шрифта заголовка, одновременно с ним увеличиваются на главной странице и другие элементы - автор, рубрики, комментарии. Они как-то связаны между собой и смотрится это, честно говоря, несколько непрезентабельно.
Решение находится в header.php, потому что заголовок относится именно к этому файлу. В строку вывода названия сайта добавим такую команду - padding: 0px;»>. Тем самым мы задали размер только заголовку. Таким же образом можно редактировать и описание сайта. Чтобы при этом чувствовать себя более уверенно, сделайте резервное копирование. Если что пошло не так, можно откатиться назад и в панели управления хостинга.
Как изменить цвет шрифта на сайте?
Порядок действий тот же, что и на примерах выше, единственно, будем искать слово «color». Если из предложенных вариантов вам ничего не подошло, но где-то вы видели приятный для глаза цвет, узнать его html-код поможет замечательная программка Pixie, советую.
И в заключение несколько слов о стиле шрифта, отвечает за это строка «font-family». Обычно указываются 3 различных вида, выстроенные по приоритету, то есть на вашем сайте используется шрифт, стоящий под номером один. Меняйте местами, экспериментируйте, творите.
