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

Каскадные таблицы стилей CSS советы & приёмы

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

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

p < margin-bottom: 0 >p + p

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

На этой странице, например, есть элементы P, которые используются в качестве подписи к изображениям (см. пример “Иллюстрации & подписи”). Мы уже выровняли их по центру, поэтому выделять дополнительно отступом не надо. Простое правило ‘ p.caption ‘ позаботится об этом. Вы можете видеть, что мы действительно использовали это правило в нашем примере.

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

p.stb < text-indent: 0; margin-top: 0.83em >p.mtb < text-indent: 0; margin-top: 2.17em >p.ltb

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

Created 17 January 2001;
Last updated Ср 06 янв 2021 05:40:49

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

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

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

С использованием псевдокласса :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»);

Установка цвета для текста в CSS. Способы представления цветов

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

В нашем примере значение #211C18 означает шестнадцатеричный код цвета. Если вы уже знакомы с шестнадцатеричной системой счисления, то можете пропустить чтение следующего абзаца. Также далее мы расскажем о других способах представления цветов в веб – с помощью цветовых моделей (RGB, HSL) и ключевых слов. Эта информация будет полезна новичкам и рекомендуется к прочтению.

Шестнадцатеричные цвета (hex)

Шестнадцатеричная система счисления (hexadecimal, hex) основывается на числе 16. Для записи шестнадцатеричного значения используется 16 символов: арабские цифры от 0 до 9 и первые буквы латинского алфавита (A, B, C, D, E, F). Цвет в шестнадцатеричном формате записывается в виде трех двузначных чисел от 00 до FF (перед ними обязательно ставится символ решетки #), что соответствует трем компонентам: Red, Green, Blue (цветовая модель RGB). Иными словами, запись цвета можно представить как #RRGGBB , где первая пара символов определяет уровень красного, вторая – уровень зеленого, третья – уровень синего цвета. Результирующий цвет является сочетанием этих трех цветов.

Сокращенная запись hex-цветов

Некоторые шестнадцатеричные значения цветов можно записать сокращенно. Для этого следует превратить запись вида #RRGGBB в #RGB . Это можно сделать в том случае, когда в hex-числе имеется три пары одинаковых символов.

Сокращенная форма записи встречается довольно часто, и для вашего ознакомления мы приведем несколько примеров сокращений. К слову, hex-значения цветов не чувствительны к регистру – вы можете использовать как прописные, так и строчные буквы, всё зависит от вашего желания и вкуса.

Примеры сокращенной записи hex-цветов:

HEX-код	Сокращенная запись
#FFDD66	#FD6
#8833FF	#83F
#333333	#333
#cccccc	#ccc

Цветовая модель RGB

Второй способ указания цвета в CSS – использовать десятичные значения RGB (Red, Blue, Green). Для этого необходимо записать после свойства color ключевое слово rgb , а затем в скобках и через запятую – три числа в диапазоне от 0 до 255, каждое из которых означает интенсивность красного, зеленого и синего цветов (r, g, b). Чем больше число, тем более интенсивен цвет. К примеру, чтобы получить ярко-зеленый цвет, нужно записать:

А вот желтовато-горчичный оттенок имеет такое значение:

color: rgb(94, 81, 3); /* ниже – тот же цвет, записанный в шестнадцатеричном виде: */ color: #5E5103;

Значение черного цвета записывается как (0, 0, 0) , а белого – (255, 255, 255) . Также допускается указывать эти значения в процентах. Так, число 255 соответствует 100%, следовательно, белый цвет можно задать следующим образом:

color: rgb(100%, 100%, 100%);

Где искать значения цветов

Возможно, у вас возник вопрос: откуда же брать все эти значения цветов? Существует множество графических редакторов и онлайн-сервисов, с помощью которых можно подбирать цвета и строить цветовые схемы. Одна из наиболее популярных программ, в которой можно выбрать подходящий цвет и получить его значение RGB, hex и не только – Adobe Photoshop. В качестве альтернативы есть специальные сайты, на которых можно легко подобрать не только цвет, но и целую цветовую схему. Отличный пример – сервис Adobe Color CC.

Цветовая модель RGBA

Задать цвет в формате RGBA можно почти так же, как и в RGB. Отличие RGBA от RGB заключается в наличии альфа-канала, который отвечает за прозрачность цвета. Задается прозрачность с помощью числа в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1 , наоборот, означает полную непрозрачность. Промежуточные значения вроде 0.5 позволяют задать полупрозрачный вид (допускается сокращенная запись, без нуля, но с точкой – .5 ). Например, чтобы сделать текст цветным и слегка прозрачным, нужно записать после свойства color ключевое слово rgba и значение цвета:

Минусом RGBA является то, что его не поддерживает браузер Internet Explorer версии 8 и ранее. Специально для IE8 можно применить следующее решение:

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

Цветовые модели HSL (HSLA)

Задавать цвет в CSS можно также с помощью координат цветовой модели HSL (Hue, Saturation, Lightness – тон, насыщенность, светлота). Записывается это так:

Первое число в скобках означает тон (hue) и задается в градусах (диапазон чисел от 0 до 359). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:

Второе и третье числа в скобках означают насыщенность (saturation) и светлоту (lightness) соответственно. Их значения устанавливаются в процентах от 0 до 100. Чем ниже значение насыщенности, тем более приглушенным становится цвет. Значение saturation, равное нулю, приведет к серому цвету, при этом неважно, какое значение имеет hue. С помощью значения lightness (светлота) можно указать яркость цвета. Низкие значения приводят к темным оттенкам цвета, высокие – к светлым. Значение 100% для lightness означает белый цвет, 0% – черный.

Цветовая модель HSLA работает почти так же, как и HSL, но в ней, аналогично с RGBA, есть альфа-канал, с помощью которого можно задавать прозрачность цвета, указывая необходимое значение в диапазоне от 0 до 1:

HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer версии 8 и ранее.

Стандартные цвета HTML

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

Существует 16 стандартных цветов, которые можно записать в значении свойства color :

Ключевое слово цвета	HEX-код	RGB
red	#FF0000	255, 0, 0
maroon	#800000	128, 0, 0
yellow	#FFFF00	255, 255, 0
olive	#808000	128, 128, 0
lime	#00FF00	0, 255, 0
green	#008000	0, 128, 0
aqua	#00FFFF	0, 255, 255
teal	#008080	0, 128, 128
blue	#0000FF	0, 0, 255
navy	#000080	0, 0, 128
fuchsia	#FF00FF	255, 0, 255
purple	#800080	128, 0, 128
white	#FFFFFF	255, 255, 255
silver	#C0C0C0	192, 192, 192
gray	#808080	128, 128, 128
black	#000000	0, 0, 0

Эти цвета поддерживают все браузеры. Кроме них есть еще порядка 130 дополнительных ключевых слов для различных оттенков цветов. Полную таблицу этих цветов можно увидеть в справочнике W3C.

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

Итоги

В CSS цвет текста задается с помощью свойства color , а его значение можно записать несколькими способами – в шестнадцатеричном (hex) виде, в формате RGB или HSL либо указав ключевое слово. Во избежание неправильного отображения цвета, заданного при помощи ключевого слова, лучше указывать его hex-значение.

Также есть возможность задать элементу прозрачность с помощью альфа-канала (форматы RGBA и HSLA). При этом стоит учитывать, что браузер IE8 и его ранние версии не поддерживают форматы RGBA, HSL и HSLA.

Далее в книге вы узнаете, как задать размер шрифта CSS.

background-color

Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.

Синтаксис

background-color: | transparent | inherit

Значения

transparent Устанавливает прозрачный фон. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Lorem ipsum dolor sit amet
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  

В данном примере для элементов веб-страницы применяется три различных способа задания фонового цвета. Результат примера показан на рис. 1.

Рис. 1. Применение background-color

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundColor

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .