Как изменить цвет текста в html через css: Цвет | htmlbook.ru

Как изменить цвет HTML-элементов | Блог Timeweb Cloud

При работе с веб-страницей часто нужно каким-то образом обогатить разметку — привнести в неё некоторое визуальное разнообразие. Это может диктоваться требованиями дизайна или вашими личными предпочтениями. Вариантов, как разнообразить страницу и сделать её более эстетичной много: от гарнитуры шрифта до динамики поведения контента при прокрутке страницы.

Один из основных графических приёмов — изменение цвета фона или текста на странице. Современные браузеры предоставляют возможность гибко выбрать цвета фона или их сочетания и указать нужное значение в удобном вам формате.

Элементы, которые могут иметь цвет

Практически любой элемент HTML-разметки может иметь свой цвет. Он будет применяться по-разному в зависимости от того, что конкретно вы хотите раскрасить. Например, если вам нужно поменять цвет текста html, используйте атрибут color, а для рамки вокруг него — border-color.

Эти атрибуты вы можете задавать как напрямую в разметке, используя HTML-атрибуты, так и в CSS-файле, который подключаете к разметке. Как это сделать, читайте в блоге cloud.timeweb.com.

При работе с цветом в HTML все элементы можно условно разделить на две группы: текстовые и блочные. В текстовых вы указываете цвета текста и его оформления, а в блочных— цвета фона и границ.

Текстовые элементы

К текстовым элементам относится, например, параграф или поле ввода. Для таких элементов вы можете использовать несколько атрибутов для работы с визуальным оформлением. Рассмотрим, как изменить цвет текста. 

color. Этот атрибут используется для того, чтобы задать цвет текста и его оформлению, заданному через text-decoration, — подчёркивание, надчёркивание и т. д. 

background-color. Кроме изменения цвета текста, часто требуется поменять ещё и цвет фона. Как раз для таких случаев используется этот атрибут.

text-shadow. Иногда дизайн текста на странице предполагает наличие тени. Если её цвет отличается от стандартного, задайте его с помощью атрибута text-shadow.

text-decoration-color. Когда вы задаёте цвет для текстового элемента в атрибуте color, цвет применяется и для сопутствующего оформления. Но если нужно, например, задать подчёркиванию цвет отличный от основного, используйте этот атрибут.

caret-color. В специфических случаях вам может потребоваться стилизовать ещё и поля ввода (input, textarea) или элементы с атрибутом contenteditable. Этот атрибут позволяет раскрасить каретку — вертикальный курсор, который появляется в полях.

Блочные элементы

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

background-color — добавляет заливку на всю площадь блочного элемента. Этот атрибут поможет, если вы не знаете, как изменить цвет фона в html на всей странице сайта. Просто добавьте к стилям body атрибут, в значении укажите нужный цвет.

outline-color задаёт цвет контура вокруг элемента, если указан тип контура outline-style.

border-color — позволяет указать цвет для границ по всему периметру блочного элемента. Чтобы задать цвета каждой отдельной стороны — верхней, нижней, правой, левой, — используйте атрибуты border-top-color, border-bottom-color, border-right-color, border-left-color соответственно. 

Прочие элементы

Кроме элементов HTML, которые перечислены выше, вы можете также работать с визуальным оформлением страницы, используя такие технологии как SVG, Canvas или WebGL.

Как изменить цвет текста в CSS

Чтобы использовать цвет в разметке, в первую очередь нужно определиться с тем, как задавать его так, чтобы браузер мог понять, как красить элемент. В основном то, в какой форме вы указываете цвет, зависит от того, насколько он необычный — существует разница в использовании просто синего цвета или сочетания красного, синего и зелёного в разных пропорциях, да ещё и с прозрачностью.

Ключевые слова CSS

Самый простой способ указать цвет — использовать ключевое слово. Оно представляет из себя просто английское название цвета или цвета с оттенком — green или lightgrey, например. Так, чтобы использовать для текста чёрный цвет, напишите color: black, и браузер сам «поймёт», какой цвет ему отображать.

Полный список резервированных слов вы найдёте в документации.

Модель RGB

RGB — аббревиатура из первых букв слов red, green, blue. Когда вы задаёте цвет в этой модели вы кодируете нужный вам цвет из смешивания трёх цветов — красного, зелёного, синего. Как и в обычной палитре, смешивание цветов в разной пропорции будет создавать для вас новые сочетания и оттенки. 

Все три значения RGB задаются целыми числами в диапазоне от 0 до 255 или в процентах от 0 до 100. Например, когда вы укажете rgb(0, 0, 255), в браузере увидите синий цвет. 

Современные браузеры также поддерживают RGB-модель, в которой вы также можете задать прозрачность цвета. Такая запись выглядит так же, как и rgb, но добавляется ещё один аргумент — прозрачность в процентах. Синий с прозрачностью 50% записывается так — rgba(0, 0, 255, 0.5).

Hex-представление

Цвет в формате HEX — это шестнадцатеричное представление RGB. Обозначение цвета состоит из трёх групп шестнадцатеричных цифр, каждая отвечает за красный, зелёный и синий соответственно. Например, вы можете указать значение #00ff00, на выходе получите зелёный.

Если каждая из трёх групп содержит одинаковые символы, например, #2211dff, вы можете использовать сокращённую запись — #21f.

Система HSL

HSL — аббревиатура из слов Hue (оттенок), Saturation (Насыщенность) и Lightness (яркость). В этой системе цвет не зависит от смешивания трёх параметров, они независимы. Поэтому очень просто сделать цвет насыщеннее или уменьшить яркость, сохраняя тот же оттенок.

Как изменить цвет слова с помощью тега Span и CSS

Главная » Веб-дизайн и разработка

Автор Глеб Захаров На чтение 4 мин. Просмотров 1k. Опубликовано

С помощью CSS легко установить цвет текста в документе. Если вы хотите, чтобы абзацы на вашей странице отображались в определенном цвете, вы просто указываете это в своей внешней таблице стилей, и браузер отображает ваш текст в этом выбранном цвете. Что происходит тогда, когда вы хотите изменить цвет только одного слова (или, возможно, всего нескольких слов) в абзаце текста? Для этого вам нужно будет использовать встроенный элемент, такой как тег.

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

Эта статья для начинающих веб-разработчиков, которые, вероятно, плохо знакомы с HTML и CSS. Это поможет вам узнать, как использовать тег HTML и CSS для изменения цвета определенного текста на ваших страницах. При этом у этого метода есть некоторые недостатки, которые мы рассмотрим в конце этой статьи. А пока читайте, чтобы узнать, как изменить этот цвет текста. Это очень легко и должно занять около двух минут.

Пошаговая инструкция


  1. Откройте веб-страницу, которую вы хотите обновить, в своем любимом текстовом редакторе HTML. Это может быть программа, например Adobe Dreamweaver, или простой текстовый редактор, такой как Notepad, Notepad ++, TextEdit и т. Д.
  2. В документе найдите слова, которые вы хотите отображать другим цветом на странице. Для этого урока давайте используем некоторые слова, которые находятся внутри более крупного абзаца текста. Этот текст будет содержаться в паре тегов. Найдите одно из двух слов, цвет которых вы хотите отредактировать.
  3. Поместите курсор перед первой буквой в слове или группе слов, которые вы хотите изменить цвет. Помните, что если вы используете WYSIWYG-редактор, такой как Dreamweaver, вы сейчас работаете в режиме «просмотра кода».
  4. Давайте обернем текст, цвет которого мы хотим изменить, с помощью тега, включая атрибут класса. Весь абзац может выглядеть так:
     Это текст, на котором сосредоточено предложение. 
  5. Мы только что использовали встроенный элемент,, чтобы придать этому конкретному тексту «крючок», который мы можем использовать в CSS. Наш следующий шаг – перейти к нашему внешнему файлу CSS, чтобы добавить новое правило.
  1. В нашем CSS-файле давайте добавим:
  2.   .focus-text { 
  3.   color: # F00;  
  4.  }  
  5. Это правило установит этот встроенный элемент,, для отображения красным цветом. Если бы у нас был предыдущий стиль, который устанавливал бы текст нашего документа черным, этот встроенный стиль заставлял бы фокусируемый текст выделяться и выделяться другим цветом. Мы могли бы также добавить другие стили к этому правилу, возможно, выделив текст курсивом или жирным шрифтом, чтобы подчеркнуть его еще больше?
  6. Сохраните свою страницу.
  7. Протестируйте страницу в вашем любимом веб-браузере, чтобы увидеть изменения в действии.
  8. Обратите внимание, что в дополнение к некоторым веб-профессионалы предпочитают использовать другие элементы, такие как пары тегов или. Эти теги использовались специально для жирного шрифта и курсива, но были объявлены устаревшими и заменены на и. Тем не менее, теги по-прежнему работают в современных браузерах, поэтому многие веб-разработчики используют их в качестве хуков встроенного стиля. Это не самый плохой подход, но если вы хотите избежать каких-либо устаревших элементов, мы рекомендуем придерживаться тега для таких стилевых нужд.

Советы и вещи, которые нужно остерегаться


Хотя этот подход хорошо работает для небольших задач по стилю, например, если вам нужно изменить только один небольшой фрагмент текста в документе, он может быстро выйти из-под контроля. Если вы обнаружите, что ваша страница изобилует встроенными элементами, каждый из которых имеет уникальные классы, которые вы используете в своем файле CSS, вы можете делать это неправильно, помните, чем больше таких тегов на вашей странице, тем сложнее вероятно, будет поддерживать эту страницу в будущем. Кроме того, хорошая веб-типография редко имеет так много вариантов цвета и т. Д. По всей странице.

html — CSS не может изменить цвет текста в классе div

Задай вопрос

спросил

Изменено 5 лет, 11 месяцев назад

Просмотрено 6к раз

Я сделал кнопку с помощью div. Я пытаюсь сделать текст белым, однако стиль ведет себя странно.

Вот часть CSS:

 .
button a { выравнивание текста: по центру; дисплей:блок; цвет фона: #FF0000; высота: 40 пикселей; высота строки: 40 пикселей; цвет:#FFFFFF; текстовое оформление: нет; } .кнопка: наведите курсор { цвет фона: #000000; }

Страницу можно посмотреть здесь: http://www.clccomputing.net/comf413/01/menu.html

Как видите, текст на кнопке не белый.

Странно, если добавить типы a:ссылка , a:посетили в CSS, макет заголовка сворачивается, а стиль применяется к виджету TripAdvisor на правой боковой панели, например:

Ссылка на изображение

HTML до кнопки:

 
<дел>
    <заголовок>
            Логотип кафе Red 16
    
    <навигация>
        <ул>
            
  • Меню
  • Специальные предложения
  • Карта
  • Отзывы
  • <статья> <дел>

    Наше меню


    <дел> Загрузить .PDF для печати
    • HTML
    • CSS

    5

    Приведенный ниже код css имеет приоритет над color:#FFFFFF;

    В файле style.css строка 138

     #articletext a, a:link, a:visited {
        цвет: #000000; /* Css строка 138
    }
     

    Вы можете удалить этот код и использовать этот (

    будет черным ).

     #статьятекст h2 {
            цвет: #000000;
    }
     

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя адрес электронной почты и пароль

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Изменить цвет текста аккордеона, когда он активен — HTML и CSS — Форумы SitePoint

    dave8794

    , 7:23

    #1

    Привет. У меня аккордеон с двумя панелями. Первая панель открывается при загрузке страницы. Моя проблема связана с текстом, который нужно щелкнуть, чтобы открыть вторую панель. Я хочу, чтобы текст, имеющий класс .open-close, менялся с #FFA500 на #000 при наведении курсора, что сработало. Когда этот текст щелкнут и откроется вторая панель, я хочу, чтобы цвет текста изменился на #FFF. Я не могу изменить текст на #FFF при открытии второй панели. Ниже мой css. Опять же, ховер работает, а актив нет. Заранее спасибо.

     .открыть-закрыть: навести {
    цвет:#000;
    }
    .открыть-закрыть: активный {
    цвет:#FFF;
     

    ТехноМедведь

    #2

    Я просто хочу убедиться, что мы говорим об одном и том же. «активный» влияет только на ссылку в момент ее активации; это то, что вы хотите, и что не происходит? (Я спрашиваю, потому что формулировка вашего вопроса звучит так, как будто вы хотите, чтобы изменение цвета оставалось после открытия панели.)

    ПолОБ

    #3

    Как указал Technobear, :active относится только к состоянию ссылки в момент ее нажатия, но исчезает, как только мышь/клавиша отпускается.

    Мне кажется, что вы хотите стилизовать что-то на панели, которая в данный момент открыта, и для этого вам нужно будет использовать специальный класс для родителя этого элемента, который, скорее всего, уже делает ваш скрипт (если только это не жесткое кодирование). встроенные стили в тег).

    Если у вас есть ссылка на сайт, мы можем определить, можно ли это сделать с помощью вашего существующего кода или вам нужно будет добавить дополнительный скрипт, чтобы помочь.

    Дэйв8794

    #4

    У меня было ощущение, что это не активное состояние. Мой сайт здесь. Это домашняя страница с прокруткой на всю страницу. Аккордеон находится на 8-й секции полной прокрутки вниз. Пять горизонтальных значков находятся на первой панели аккордеона, которая открывается при загрузке. Текст «НАЖМИТЕ ЗДЕСЬ ДЛЯ ПОДРОБНОСТИ» — это то, что заставляет первую панель закрыться, а вторая панель сдвинется вверх, чтобы открыть содержимое. Текст выделен оранжевым цветом. При нажатии я хочу, чтобы этот текст менялся с оранжевого на белый после того, как он скользит вверх. Пожалуйста, дайте мне знать, понятно ли мое объяснение, и спасибо за помощь!

    ПолОБ

    #5

    Привет,

    Если предположить, что мы говорим о тексте «Нажмите здесь, чтобы узнать подробности», то я немного запутался, потому что, если вы измените текст на белый, он будет соответствовать белому фону и будет невидимым?

    Это сделает практически невозможным повторное закрытие аккордеона, разве что случайно.

    js добавляет класс к этому тексту, поэтому вы можете изменить его на белый, если хотите, вот так:

     .open-close.current a{color:#fff}
     

    Однако, если вы действительно хотите его скрыть, используйте вместо этого значение visible:hidden (чтобы сохранить пространство) или display:none (чтобы свернуть пространство).

    Дэйв8794

    #6

    Это именно то, что я хочу! Спасибо, ПавелОБ!

    система закрыто