Как покрасить абзац в css
Перейти к содержимому

Как покрасить абзац в css

  • автор:

: Элемент текстового абзаца

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

Абзацы являются блочными элементами и, в частности, автоматически закрываются, если другой блочный элемент находится перед закрывающим тегом

. Смотрите ниже «Пропуск тега».

Интерактивный пример

Категории контента Потоковый контент, явный контент.
Допустимое содержимое Фразовый контент.
Пропуск тегов Требуется открывающий тег. Закрывающий тег может быть пропущен, если за элементом сразу следует элемент , , , , , , , , , (en-US), (en-US), (en-US), (en-US), (en-US), (en-US), , , , , , , ,

(en-US), или другой элемент , или если в родительском элементе больше ничего не содержится и родительский элемент не является элементом .
Допустимые родители Любой элемент, который разрешает потоковый контент в качестве содержимого.
Допустимые ARIA-роли Любые
DOM-интерфейс HTMLParagraphElement (en-US)

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание: Атрибут align в тегах

устарел и больше не должен с использоваться.

Пример

HTML

p> Это первый абзац текста. Это первый абзац текста. Это первый абзац текста. Это первый абзац текста. p> p> Это второй абзац текста. Это второй абзац текста. Это второй абзац текста. Это второй абзац текста. p> 

Результат

Стилизация абзацев

По умолчанию браузеры разделяют абзацы одной пустой строкой. Альтернативные методы разделения, такие как отступы в первой строке абзаца, могут быть достигнуты с помощью CSS:

HTML

p> Разделение абзацев пустыми строками удобнее для читателей, но их также можно разделить, сделав отступы в их первых строках. Это часто используется для экономии места, например, чтобы тратить меньше бумаги при печати. p> p> Письмо (имеется ввиду письменность), предназначенное для редактирования, например, школьные записи и черновики, использует для разделения как пустые строки, так и отступы. В готовых работах объединение этих двух способов считается излишним и любительским. p> p> В очень старом письме абзацы были разделены специальным символом: ¶, i>pilcrowi> (знак абзаца). В настоящее время это считается замкнутым и трудно читаемым. p> p> Насколько трудно читать? Посмотрите сами: button data-toggle-text="О нет! Переключи обратно!"> Используем "pilcrow" для абзацев button> p> 

CSS

p  margin: 0; text-indent: 3ch; > p.pilcrow  text-indent: 0; display: inline; > p.pilcrow + p.pilcrow::before  content: " ¶ "; > 

JavaScript

.querySelector("button").addEventListener("click", function (event)  document.querySelectorAll("p").forEach(function (paragraph)  paragraph.classList.toggle("pilcrow"); >); var newButtonText = event.target.dataset.toggleText; var oldText = event.target.innerText; event.target.innerText = newButtonText; event.target.dataset.toggleText = oldText; >); 

Результат

Проблемы доступности

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

Использование пустого элемента

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

Если требуется дополнительное пространство, используйте свойства CSS, например margin , чтобы создать такой эффект:

p  margin-bottom: 2em; // увеличение пустого пространства после абзаца > 

Спецификации

Specification
HTML Standard
# the-p-element

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Как покрасить часть заголовка?

Мне нужно покрасить вторую половину заголовку в красный. Я пытался объеденять в div вторую и первую половину, задавать float для второй половины, но ничего не выходило: html:

.hat < background-color:dimgrey; color: white; >.h11

Отслеживать
задан 16 апр 2023 в 18:47
ykoshevenko ykoshevenko
11 5 5 бронзовых знаков

3 ответа 3

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

Например, разделив его через span:

.hat < background-color:dimgrey; color: white; >.h11 < margin-left: 400px; >.colored
 

Easy*Car*

Отслеживать
4,459 2 2 золотых знака 6 6 серебряных знаков 22 22 бронзовых знака
ответ дан 16 апр 2023 в 18:55
742 2 2 серебряных знака 16 16 бронзовых знаков

Ну как самый простой вариант

.hat < background-color:dimgrey; color: white; >.h11 < margin-left: 400px; >.h11 span
  

Easy*Car*

Отслеживать
ответ дан 16 апр 2023 в 18:55
1,967 4 4 золотых знака 10 10 серебряных знаков 20 20 бронзовых знаков

Ещё один вариант при помощи градиента. Плюс в том, что не нужно захламлять H1 заголовок, а минус в том, что если изменится длина предложения, цвет будет не правильно делить слова по цветам.
Может кому и пригодится.

.h11 < font-weight: bold; font-size: 80px; background: linear-gradient(90deg, black 44%, red 44%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; >body
 

Easy*Car*

Отслеживать
ответ дан 17 апр 2023 в 4:27
Евгений Ли Евгений Ли
1,403 1 1 золотой знак 2 2 серебряных знака 9 9 бронзовых знаков

  • html
  • css
    Важное на Мете
Похожие

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

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

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

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

color

Свойство, чтобы покрасить текст в разные цвета. Богатое разнообразие доступных значений.

Время чтения: 6 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

  • Вадим Макеев ,
  • Егор Левченко ,
  • Светлана Коробцева

Обновлено 20 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство color задаёт цвет текста.

Пример

Скопировать ссылку «Пример» Скопировано

Наследует значение свойства color у ближайшего родителя, у которого оно указано:

 .element  color: currentColor;> .element  color: currentColor; >      

Задаёт значение по названию цвета:

 .element  color: red; color: orange; color: tan; color: rebeccapurple;> .element  color: red; color: orange; color: tan; color: rebeccapurple; >      

HEX-код цвета, 3- или 6-символьные для сплошных и 4- и 8-символьные для полупрозрачных:

 .element  color: #090; color: #009900; color: #090a; color: #009900aa;> .element  color: #090; color: #009900; color: #090a; color: #009900aa; >      

Значение RGB в старом синтаксисе rgb для сплошных и rgba для полупрозрачных:

 .element  color: rgb(34, 12, 64); color: rgba(34, 12, 64, 0.6);> .element  color: rgb(34, 12, 64); color: rgba(34, 12, 64, 0.6); >      

Значение RGB в новом синтаксисе rgb для сплошных и для полупрозрачных:

 .element  color: rgb(34 12 64); color: rgb(34 12 64 / 0.6); color: rgb(34 12 64 / 60%);> .element  color: rgb(34 12 64); color: rgb(34 12 64 / 0.6); color: rgb(34 12 64 / 60%); >      

Значение HSL в старом синтаксисе hsl для сплошных и hsla для полупрозрачных:

 .element  color: hsl(30, 100%, 50%); color: hsla(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 60%);> .element  color: hsl(30, 100%, 50%); color: hsla(30, 100%, 50%, 0.6); color: hsla(30, 100%, 50%, 60%); >      

Значение HSL в новом синтаксисе hsl для сплошных и для полупрозрачных:

 .element  color: hsl(30 100% 50%); color: hsl(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%);> .element  color: hsl(30 100% 50%); color: hsl(30 100% 50% / 0.6); color: hsl(30 100% 50% / 60%); >      

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Чтобы задать фон текста, используйте свойство background — color , а рамки элемента можно раскрасить с помощью border — color .

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Цвет можно задать с помощью названия цвета, в формате HEX, RGB, HSL или с помощью ключевых слов. Подробно о возможных значениях можно прочитать в статье «Цвета в вебе».

Название цвета

Скопировать ссылку «Название цвета» Скопировано

Можно использовать название цвета или его оттенка на английском из списка именованных цветов. Это базовый набор непрозрачных цветов, например, красный red , синий blue , оранжевый orange , чёрный black , тёмно-серый darkgray , светло-серый, lightgrey , белый white , а также смешанные цвета, вроде цвета морской волны lightseagreen , василькового cornflowerblue или томатного tomato .

HEX-код

Скопировать ссылку «HEX-код» Скопировано

Шестнадцатеричный код цвета в цветовой модели RGB, который начинается с # , например, #ff0000 . Сплошные цвета записываются в формате # R R G G B B или в сокращённом # R G B (если символы каждой группы одинаковые). Например #009900 или #090 . Если нужно указать прозрачность, она добавляется в конце в HEX-формате # R R G G B B A A или # R G B A , например #00990055 или #0905 .

Раньше нельзя было задать цвет в нотации # R G B A и приходилось использовать функцию rgba ( ) , но сегодня у этого способа неплохая кроссбраузерность. Проблема одна: мало кто сходу сможет рассчитать 50% в шестнадцатеричном формате, поэтому для указания прозрачности цвета чаще всего используют функцию rgb ( ) , где прозрачность можно задать в дробях или процентах.

Формат RGB

Скопировать ссылку «Формат RGB» Скопировано

Для задания цвета используется функция rgb ( ) , например, rgb ( 0 63 255 ) для синего. Каждое из трёх значений отвечает за отдельный канал RGB и может быть записано числом от 0 до 255 или в процентах. Для добавления прозрачности, после записи каналов нужно поставить слэш и записать нужное значение от 0 до 1 или в процентах, например rgb ( 0 63 255 / 0 . 5 ) для полупрозрачного синего.

Раньше синтаксис RGB отличался от современного и вы всё ещё можете встретить его в коде или выбрать для лучшей кроссбраузерности, см. Can I use. Для разделения каналов внутри функции нужно было использовать запятые rgb ( 0 , 63 , 255 ) , а для добавления прозрачности — специальную функцию rgba ( ) , которая принимала последним параметром прозрачность цвета, например rgba ( 255 , 0 , 0 , 0 . 5 ) .

Формат HSL

Скопировать ссылку «Формат HSL» Скопировано

Цветовая модель HSL описывает те же цвета, что и HSL, но иначе: H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness (светлота). Например, hsl ( 120 100 % 50 % ) для зелёного. Первое значение оттенка задаётся в градусах и его можно записать просто как 120 (как чаще всего и делают) или с указанием единицы 120deg , второе и третье значение указываются в процентах. Прозрачность добавляется так же, как в rgb , с помощью слэша со значением, например hsl ( 120 100 % 50 % / 0 . 5 ) полупрозрачный зелёный.

Синтаксис hsl ( ) отличался от современного точно так же, как rgb ( ) : нужны были запятые и специальная функция hsla ( ) для задания прозрачности цвета. Используйте старый синтаксис для лучшей совместимости и не удивляйтесь, если встретите его в коде.

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

Скопировать ссылку «Ключевые слова» Скопировано

Ключевое слово transparent задаёт прозрачный цвет текста. Технически это равносильно записи любого цвета с нулевой прозрачностью rgb ( 0 0 0 / 0 ) , но бывают случаи, когда просто прозрачность и прозрачность цвета могут работать иначе, например, в градиентах.

Полезные ссылки

Скопировать ссылку «Полезные ссылки» Скопировано

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

  • Material Design Color System
  • Ubuntu Color System
  • Color Hex Color Codes
  • RGBto
  • Colormind

Или создать что-то своё, но под руководством профессионалов. Например:

И отдельно присмотритесь к сервисам, которые умеют подбирать безопасные цвета для людей с особенностями их восприятия:

Подсказки

Скопировать ссылку «Подсказки» Скопировано

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

�� Свойство цвета можно анимировать при помощи transition ��

�� Если вам нужно задать полупрозрачный текст, используй значение с указанием альфа-канала. Не используй для этих целей opacity . Иначе при добавлении в элемент другого контента, например, иконки, он тоже станет полупрозрачным. Это, скорее всего, не входило в ваши планы.

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Цвет текста — наследуемое свойство. Если на странице преобладает какой-то цвет, то его можно задать для селектора html . В этот цвет будет автоматически окрашен весь текст на странице.

�� Ключевое слово current Color нужно, чтобы использовать текущий или унаследованный цвет текста в других местах, где можно указать цвет фона, рамки и прочего, например:

   Мы сделали этот текст зелёным с помощью свойства «color». Рамки блока наследуют цвет от текста. Блок выше �� тоже наследует фоновый цвет от текста, для которого задано свойство «color».  div class="parent"> Мы сделали этот текст зелёным с помощью свойства «color». Рамки блока наследуют цвет от текста. div class="child">div> Блок выше �� тоже наследует фоновый цвет от текста, для которого задано свойство «color». div>      
 .parent  color: #49a16c; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;> .child  background: currentColor; height: 110px;> .parent  color: #49a16c; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; > .child  background: currentColor; height: 110px; >      

Как покрасить абзац в css

В связи с переходом на новый движок. возможны сбои в работе! Простите!
Работы производятся прямо сейчас 20-02-2024! ��

Алгоритм покрасить новый абзац новым цветом!

Для того, чтобы сделать каждый абзац новым цветом, есть несколько вариантов решения данной задачки!

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

С использованием псевдокласса :nth-child -требование, что это будет какой-то блок. и внутри блока будут повторяющиеся теги. И потребуется прописать порядковый номер внутреннего тега с цветом.

И каждый абзац цветом с использование php

Новый абзац новым цветом!

Каждому новому абзацу мы будем добавлять свой собственный цвет, прямо в теге!

style=»color: red»

в сам абзац. И нам нужен цвет, вернее код цвета, или цветной код, в общем идем сюда и выбираем нужный цвет.

Мы, например, хотим, чтобы цвет абзаца был красным…

И у вас должно получиться примерно так:

Пример нового цветного абзаца, который отличается по цвету от основного текста.

Пример цветного абзаца.

Пример нового цветного абзаца, который отличается по цвету от основного текста.

Ну и сделаем второй пример, чтобы было более наглядно. Теперь цвет абзаца хотим, чтобы был зеленым…

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

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

Абзац цветом через css style

Для того, чтобы сделать каждый абзац новым цветом, либо просто покрасить абзац в какой-то цвет, можно каждому тегу абзаца присваивать новый class либо id

Если это делать через тег style прямо на странице, то это может выглядеть так:

Текст с классом , который и будем выводить ниже:

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

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

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

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

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

Абзац цветом через файл css

Как сделать цветной абзац через файл css!? Абсолютно так же, как и выше описанным способом, только стили размещаем в файле стилей css

Абзац цветом через файл css -> псевдокласс :nth-child

Об этом способе покрасить каждый абзац новым цветом, я как-то и позабыл!

Для данного способа покраски абзаца в новый цвет потребуется какой-то div и внутри данного блока должен повторять какой-то другой тег, например:

Далее нам потребуется псевдокласс :nth-child . и каждой строке по порядку прописываем цвет:

.example p:nth-child( 1 ) <
color: red;
>
.example p:nth-child( 2 ) <
color: green;
>
.example p:nth-child( 3 ) <
color: orange;
>

Теперь возьмем тот же текст поместим его в div с классом example, для каждой строки припишем новый цвет. всего строк получились 10:

Результат окрашивания нового абзаца новым цветом через :nth-child

Это уже будет абзац номер 2, хотя порядковый номер будет №1 и цвет будет Yellow.

На самом деле! Я не хотел переделывать эту страницу о цветах абзаца!

Но тут, анализируя поисковые запросы увидел такой интересный запрос… :

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

Вообще! На самом деле я не знаю, что это такое, но было интересным. Как же можно сделать это таким образом. Чтобы каждый абзац автоматически красился в тот цвет, который мы ему назначим!

И тут меня затянуло, вроде бы и подумать-то такая глупая задачка, но я люблю решать задачки – меня хлебом не корми – дай задачку решить!

И дописав до 7 строки, решил сходить посмотреть! И желтый явно не очень, его нужно немного сделать темным!

И еще .. промежуточный цвета для абзацев не очень заметно отличаются от основных!

Чтобы явно было отличие цвета – надо сделать например квадрат с цветом…

И это последний. измененный цветом

Как сделать каждый абзац новым цветом php

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

1). Первое это текст, который и будет выступать экспериментальным, каждый новый абзац отделен от предыдущего переносом строки \n — вот так он выглядит в переменной!

2). Теперь нам нужно этот текст разбить в массив с помощью explode:

$text = explode(«\n» , $text) ;

3). Далее нам потребуется массив с цветами:

$array_color = array(«red»,»orange «,»yellow «,»green «,»blue «,»indigo «,»violet «,»#78ff00″,»#00ffd2″,»#ff8300»);

Цвета в данном массиве:

0.Красный – red
1.Оранжевый – orange
2.Желтый . Yellow
3.Зеленый Green
4.Голубой Blue
5.Синий indigo
6.Фиолетовый – violet
7.Между зеленым и желтым – 78ff00
8.Между зеленым и голубым – 00ffd2
9.Между красным и желтым – ff8300

4). Далее нам потребуется цикл for

Здесь наверное все понятно, как будет добавляться цвет каждому новому абзацу, единственная часть цикла, которая наверное вызывает проблему для понимания это :

$array_color[substr($i, -1)]

Что это значит!? Давайте прямо здесь поэкспериментируем чтобы понимать, как это работает — нет ничего лучше примера:

echo «Это будет последняя цифра :

ну и далее, думаю вы догадались, здесь будет название цвета :

И результат вы приведенного примера:

Это будет последняя цифра :

ну и далее, думаю вы догадались, здесь будет название цвета :

Теперь возьмите число и цвет и подымитесь наверх и посмотрите Цвета в данном массиве

Результат работы скрипта, который делает каждый абзац новым цветом!:

И так!
Погнали!
Это уже будет абзац номер 2, хотя порядковый номер будет №1 и цвет будет Yellow.
На самом деле! Я не хотел переделывать эту страницу о цветах абзаца!
Но тут, анализируя поисковые запросы увидел такой интересный запрос… :
на странице с абзацами сделать так, чтобы абзацы были цветами радуги, а ссылки великие на описаниях цветов в википедии.
Вообще! На самом деле я не знаю, что это такое, но было интересным. Как же можно сделать это таким образом. Чтобы каждый абзац автоматически красился в тот цвет, который мы ему назначим!
И тут меня затянуло, вроде бы и подумать-то такая глупая задачка, но я люблю решать задачки – меня хлебом не корми – дай задачку решить!
И дописав до 7 строки, решил сходить посмотреть! И желтый явно не очень, его нужно немного сделать темным!
И еще .. промежуточный цвета для абзацев не очень заметно отличаются от основных!
Чтобы явно было отличие цвета – надо сделать например квадрат с цветом…
И это последний. измененный цветом

Код скрипта, который сделает каждый абзац новым цветом!

Для скрипта php, который сделает все абзацы другим цветом, выделим отдельный пункт:

$text = «здесь текст с переносами»;

$text = explode(«\n» , $text) ;

$array_color = array(«red»,»orange «,»yellow «,»green «,»blue «,»indigo «,»violet «,»#78ff00″,»#00ffd2″,»#ff8300»);

ruweb

Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru!
© 2015 — 2024 Контакты. Реклама на сайте
Лучший хостинг : RUWEB + помощь по RUWEB

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *