Как задать цвет заголовку?

Обратите внимание на ответ @entithat, на такой способ внесения стилей, это один из способов, он тоже верный. Также можно внести изменения в стили с помощью JavaScript.

Отслеживать
ответ дан 11 фев 2018 в 7:39
user262779 user262779

html,body < width:100%; height:100%; >div < background:red; width:100px; height:30px; >/*а это на будущее)))) есть теги которым стили не подвласты*/ br

 
div1
 
 
div2
 
 
div3
 
  
div4
  

Отслеживать
ответ дан 11 фев 2018 в 7:57
14.5k 6 6 золотых знаков 33 33 серебряных знака 71 71 бронзовый знак

Если вам зачем-то нужен именно атрибут или контейнер (обозреватель древний или движок оформления не поддерживает CSS), можете воспользоваться тегом . Однако:

• сейчас принято разделять структуру документа и его оформление, поэтому настоятельно рекомендуется перейти на стили при первой же возможности (как указано в других ответах),
• новые стандарты (HTML5 и будущие) не поддерживают теги, подобные . Даже HTML4 поддерживает этот тег только в переходной версии (из-за чего в примере ниже пришлось явно прописать необходимый doctype).

   обязателен --> 
Hello, World!
  

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

и т. д.). То есть комбинация корректна, а — уже нет (тег заголовка автоматически закроет предшествующий тег).

Определяем HTML цвет текста и его фон

Попробуем изменить цвет текста в HTML:

Заголовок 1-го уровня Первый параграф Второй параграф Третий параграф

Строка style=»color:#000000″ является линейным CSS включением — устанавливает цвет HTML текста в режиме HEX. HEX — шестнадцатеричная система счисления (цифры от 0 до 9 и латинские буквы от a до f), которая по структуре сравнима с RGB (Red Greеn Blue).

Посмотреть в новом окне: HTML цвет текста

Заголовок 1-го уровня Первый параграф Второй параграф Третий параграф

Содержимое сектора по сути есть все то, что мы видим на интернет-странице. Таким образом, добавляя к его первому тегу строчку style=»color:#ff6c36″ , мы делаем текст всей страницы оранжевым (черный по умолчанию), за исключением третьего параграфа, где он — текст определен как синий. Атрибут align=»» определяет горизонтальное выравнивание. Возможны значения: center, left, right, justify . В следующем уроке подробно рассматриваются способы горизонтального выравнивания текста.

Посмотреть в новом окне: цвет HTML текста

Значение #000000 определяет черный цвет, #ffffff – белый. Цвет также может быть задан словом, например, style=»color:Red» .

HTML цвет представлены в одной из глав HTML справочника.

Как изменить HTML цвет и фон текста

Попробуем изменить фон текста в HTML:

HTML Фон текста оранжевый Цвет HTML текста белый, фон красный

Атрибут background-color определяет фон, в данном случае изменения затрагивают текст.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML текст и шрифт HTML, цвет, фон, текст HTML текст справа

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Изменить HTML цвет, фон, текст? – Не вопрос!

Как изменить размер фона текста?

При наведении на текст у него должен меняться цвет и появляться что-то типа рамки. Пробовал через padding , но не хочу чтобы остальные слова тоже отодвигались. Должно быть как на скриншоте

Отслеживать
13.7k 12 12 золотых знаков 43 43 серебряных знака 75 75 бронзовых знаков
задан 27 мар 2020 в 9:01
Максим Филимонов Максим Филимонов
85 1 1 серебряный знак 9 9 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

li < list-style: none; display: inline-block; padding: 5px 10px; text-transform: uppercase; background-color: transparent; color: gray; transition: all 0.5s; >li:hover

Отслеживать
ответ дан 27 мар 2020 в 9:58
Sevastopol’ Sevastopol’
28.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака

 body < font-family: Roboto, Arial, sans-serif; >.menu < display: flex; flex-direction: row; >.menu__item < padding: 0.2rem 0.9rem; margin-right: 0.5rem; font-size: 1em; text-transform: uppercase; color: gray; border: 1px solid transparent; border-radius: 3px; transition: 0.4 all ease-in-out; cursor: pointer; >.menu .menu__item:last-child < margin-right: 0; >.menu__item:hover 

  
Home
 
Service
 
About us
 
 

Отслеживать
ответ дан 27 мар 2020 в 9:22
103 4 4 бронзовых знака

• html
• css
• веб-программирование

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Красивый цветной текст в CSS: как это сделать

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

А что, если покраска не должна быть связана со словами? Например, если нужно покрасить текст по диагонали или сделать так, чтобы через буквы просвечивалась картинка? Оказывается, это тоже можно сделать довольно просто. Сейчас за 10 минут разложим вот такую красоту.

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

Готовим страницу

Так как вся магия будет происходить в CSS-файле, то всё, что нам нужно сделать, — это добавить на страницу блок с заголовком и подключить файл со стилями:

       
Привет, это журнал «Код»
 
  

Настраиваем стили

Чтобы можно было быстро менять и подбирать цвета для раскрашивания, сделаем их переменными в CSS:

/* задаём глобальные переменные для цветов, в которые будем окрашивать текст */ :root

Теперь зададим параметры блока, внутри которого лежит наш текст. В нём всё просто и предсказуемо:

/* настройки блока с текстом */ .colored < /* фон */ background: #000; /* межстрочное расстояние */ line-height: 1; /* подключаем сетку */ display: grid; /* ставим содержимое в центр */ place-items: center; >

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

Последнее, что осталось сделать, — наложить цвета поверх текста. Сделаем это так:

1. Используем линейный градиент и повернём его для красоты по диагонали.
2. Градиент — это переход от одного цвета к другому.
3. Чтобы были цветные полосы, сделаем не плавный градиент, а полосками.
4. Ширина каждой полоски будет 19%, а один процент оставим на зазор между ними.
5. Чтобы полоски градиента были видны только на тексте, обрежем этот градиент по контуру букв.
6. А чтобы буквы стали цветными, установим им прозрачный цвет — через него станет виден наш градиент.

Добавим это к стилям заголовка h1:

/* делаем цветные полосы по тексту */ background: linear-gradient(219deg, var(--color-1) 19%, transparent 19%,transparent 20%, var(--color-2) 20%, var(--color-2) 39%, transparent 39%,transparent 40%, var(--color-3) 40%,var(--color-3) 59% , transparent 59%,transparent 60%, var(--color-4) 60%, var(--color-4) 79%, transparent 79%, transparent 80%, var(--color-5) 80%); /* обрезаем фон по контуру букв */ background-clip: text; -webkit-background-clip: text; /* делаем заголовок прозрачным, чтобы был виден цветной фон */ color: transparent;

Что дальше

Таким приёмом можно раскрасить любой текст в любые цвета. Но можно пойти дальше и положить фото под текст, чтобы картинка проступала сквозь буквы. Этим займёмся в другой раз.

Готовый файл index.html

       
Привет, это журнал «Код»
 
  

Готовый файл style.css

/* задаём глобальные переменные для цветов, в которые будем окрашивать текст */ :root < --color-1: #186cb8; --color-2: #2a9a9f; --color-3: #f1b211; --color-4: #e83611; --color-5: #f9002f; >/* настройки блока с текстом */ .colored < /* фон */ background: #000; /* межстрочное расстояние */ line-height: 1; /* подключаем сетку */ display: grid; /* ставим содержимое в центр */ place-items: center; >h1 < /* настраиваем внешний вид шрифта */ font-family: sans-serif; font-size: 15vw; font-weight: 900; /* подстраиваем ширину заголовка под самое длинное слово*/ width: -webkit-min-content; width: -moz-min-content; width: min-content; /* делаем автоматические отступы */ margin: auto; /* переводим все буквы в заглавные */ text-transform: uppercase; /* делаем цветные полосы по тексту */ background: linear-gradient(219deg, var(--color-1) 19%, transparent 19%,transparent 20%, var(--color-2) 20%, var(--color-2) 39%, transparent 39%,transparent 40%, var(--color-3) 40%,var(--color-3) 59% , transparent 59%,transparent 60%, var(--color-4) 60%, var(--color-4) 79%, transparent 79%, transparent 80%, var(--color-5) 80%); /* обрезаем фон по контуру букв */ background-clip: text; -webkit-background-clip: text; /* делаем заголовок прозрачным, чтобы был виден цветной фон */ color: transparent; >