Background text css: html — Is there a way to use use text as the background with CSS?

Содержание

background | htmlbook.ru

CSS	Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	2.1+	1.0+
3	9.0+		1.0+	10.5+	1.3+	3.6+	2.1+	1.0+

Краткая информация

Версии CSS

Описание

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Синтаксис

Здесь:

<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit

<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

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

Значения

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

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>background</title>
  <style type="text/css">
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: url(images/hand.png) repeat-y #fc0; /* Цвет фона, 
                                                    путь к фоновому изображению и 
                                                    повторение фона по вертикали */
   }
  </style>
 </head>
 <body>

  <div>
   Duis te feugifacilisi.   Duis autem dolor in hendrerit in vulputate velit esse molestie 
   consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et 
   iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
   te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion 
   ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te 
   feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
  </div>

 </body>
</html>

Результат данного примера показан ниже (рис. 1).

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

Пример 2

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   body {
    background: url(images/hand.png) repeat-y, 
                #fc0 url(images/bg-right.png) repeat-y 100% 0;
   }
  </style>
 </head>
 <body>
 </body>
</html>

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

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

Браузеры

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

Начинаем работу с HTML + CSS

Это краткое руководство предназначено для людей, начинающих свое изучение CSS в первый раз.

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

В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:

Полученная HTML страница с цветами и разметкой сделанной при помощи CSS.

Заметьте, что я не претендую на то, что это очень красиво ☺

Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.

ШАГ 1: написание HTML кода

Для этой статьи я предлагаю использовать простейшие утилиты, например Блокнот от Windows, TextEdit на Mac или KEdit под KDE вполне подойдут под задачу. Как только Вы поймете основные принципы, вы можете переключиться на использование более продвинутых инструментов разработки, например на такие коммерческие программы как Style Master или DreamWeaver. Но для создания первого CSS файла не стоит отвлекаться на множество расширенных возможностей.

Не используйте текстовый редактор наподобие Microsoft Word или OpenOffice. Эти программы обычно создают файлы, которые не могут быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные текстовые файлы без какого-либо формата.

Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.  01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul>
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h2>My first styled page</h2>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

Вам не обязательно это перенабирать — вы можете просто скопировать и вставить текст с этой страницы в редактор.

(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit’у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”. )

Первая строчка нашего HTML файла говорит браузеру о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем случае — это HTML версии 4.01.

Слова между < и > называются тэгами и как вы можете видеть, документ содержится между <html> и </html> тэгами. Между <head> and </head> находится различная информация, которая не отображается в самом документе. Например там содержится заголовок документа. Позже мы добавим туда и связь с CSS файлом.

Тэг <body> это место содержимого документа. В принципе, все что находится внутри этого тэга за исключением текста между <!— и —>, являющегося комментариями, будлет выведено на экран. Комментарий браузером игнорируется.

Тэг <ul> в нашем примере задает отображение “неупорядоченного списка” (Unordered List), т.е. списка, элементы которого непронумерованы. Тэги <li> начинают “элементы списка” (List Item). Тэг <p> является “параграфом”. А тэг <a> — “якорь” (Anchor), с помощью которого создаются гиперссылки.

Код HTML в редактор KEdit.

Если вы хотите узнать какие бывают тэги в скобках <…>, то вы можете изучить Начало работы с HTML. Но сначала пару слов о структуре нашей HTML страницы.

Тэг “ul” — список состоящий из одной ссылки на каждый элемент списка. Эта структура послужит нам “навигацией” по нашему сайту связывая с нами другие страницы нашего гипотетического сайта . Предполагается, что все страницы нашего сайта будут иметь схожее или идентичное меню.
Элементы “h2” и “p” задают содержимое уникальное каждой страницы, в то время как подпись (“address”) снизу снова будет повторяться на всех страницах.

Отметьте, что я не закрыл “li” и “p” элементы. В HTML (но не в XHTML), можно опускать закрывающие тэги </li> и </p>, что я и сделал в данном случае, для того чтобы было проще текст.

Но вы можете добавить их, если считаете необходимым.

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

Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage.html”. Не закрывайте редактор, он нам еще потребуется.

(Если вы используете TextEdit для Mac OS X версии меньше чем 10.4, вы увидите опцию «Don’t append the .txt extension» в диалоговом окне «Save as». Выберите эту опцию, потому что имя файла “mypage.html” уже включает в себя расширение. Более новые версии TextEdit заметят .html расширение автоматически.)

Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем. Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)

Как Вы видите, страница выглядит достаточно скучно…

ШАГ 2: изменяем цвета

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

Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим CSS стили и HTML разметку в разные файлы. Раздельное хранение хорошо тем, что легче использовать те же самые стили для множества HTML файлов: Вам нужно написать CSS стили только один раз. Но на этом шаге мы оставим все в одном файле.

Нам нужно добавить элемент <style> к HTML файлу. Определения стилей будут внутри этого тэга. Возвращаемся к редактору и добавляем следующие пять строчек в заголовок HTML кода между тэгами <head> и </head>. Строки, которые надо добавить выделены красным (с 5-й по 9-ю).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[и т.д.]

Первая строка говорит браузеру о том, что это таблица стилей и что она написана на CSS (“text/css”). Вторая строка говорит, что мы применяем стиль к элементу “body”. Третья устанавливает цвет текста в пурпурный, а следующая устанавливает цвет фона в желто-зеленый оттенок.

Таблицы стилей CSS создаются согласно правилам. Каждое правило состоит из трех частей:

селектор (в нашем примере: “body”), которые говорит о том, к какой части документа применить правило;
свойство (в нашем примере свойствами являются ‘color’ и ‘background-color’), которое указывает что именно мы устанавливаем у данного элемента, выбранного селектором;
и значение (‘purple’ и ‘#d8da3d’), которое устанавливает значение атрибута.

Наш пример показывает что правила могут быть скомбинированы. Мы установили два свойства, так же мы могли задать их раздельно:

body { color: purple }
body { background-color: #d8da3d }

но поскольку оба правила относятся к body мы записали “body” один раз и поместили свойства и значения вместе. Для получения большей информации о селекторах смотрите главу 2 из Lie & Bos.

Фон элемента body так же является фоном целого документа. Мы явно не назначили другим элементам (p, li, address…) фона, так что по умолчанию у них его нет (или он прозрачный). Свойство ‘color’ устанавливает цвет текста элемента body, но все остальные элементы внутри body наследуют этот цвет, пока для них не задан другой в виде другого правила. (Мы добавим другие цвета позже.)

Теперь сохраните этот файл (используйте команду “Сохранить” или “Save” из файлового меню) и переключитесь обратно в браузер. Если вы нажмете кнопку “обновить” , то изображение сменится со “скучной” страницы на разукрашенную (но все еще однообразную) страницу. Кроме ссылок сверху, весь текст должен быть пурпурный на желто-зеленом фоне.

Теперь браузер показывает страницу к которой мы добавили цвет.

В CSS можно задавать цвета несколькими способами. Наш пример показывает два из них: по имени (“purple”) и по шестнадцатиричному коду (“#d8da3d”). Существует порядка 140 имен цветов и 16 шестнадцатиричных значений. Добавляя прикосновение стиля объясняет детали относительно этих кодов.

ШАГ 3: изменяем шрифты

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

Поскольку в Web никогда нельзя быть целиком уверенным в том, какие шрифты установлены на компьютерах посетителей, мы добавим альтернативные способы отображения: если Georgia не найдена, то мы будем использовать Times New Roman или Times, а если и он не найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы можем попробовать использовать Geneva, Arial или SunSans-Regular поскольку они очень похожи по начертанию, ну а если у пользователя нет таких шрифтов, то браузер может выбрать любой другой шрифт без засечек.

В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.

Сейчас шрифт заголовков и основного текста различается.

ШАГ 4: добавляем навигацию

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

Навигация уже на странице. Это список <ul> вверху. Ссылки в нем не работают, потому что наш “сайт” пока что состоит только из одной страницы, но это неважно в данный момент. Конечно же, на настоящем сайте не должно быть неработающих ссылок.

Нам нужно переместить список налево и сдвинуть остальное содержимое немного вправо, чтобы создать пространство для него. Свойства CSS которые мы будем использовать для этого — ‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’ (для сдвига меню).

Есть и другие пути. Если вы поищете термины “столбец” или “верстка” на странице изучая CSS, вы найдете несколько готовых к использованию шаблонов. Но для наших целей сгодится и такой.

В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[и т.д.]

Если вы снова сохраните файл и обновите его в браузере то список ссылок получится у вас слева от основного текста. Это уже смотрится интереснее, не так ли?

В отличии от предыдущего файла, в этом главный текст переместился направо а навигация налево

Свойство ‘position: absolute’ говорит что элемент ul расположен независимо от любого текста который предшествовал или будет следующим за этим элементом, а свойства ‘left’ и ‘top’ обозначают это расположение. В нашем случае это 2em сверху и 1em от левого края окна.

‘2em’ обозначает 2 раза по растоянию, равному размеру текущего шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em будет равняться 24 пунктам. `em` очень полезная единица измерения в CSS, поскольку может адаптироваться автоматически к шрифту, используемому браузером. Большинство браузеров имеют возможность изменять размеры шрифта: вы можете попробовать увеличить или уменьшить размер и увидеть, что меню будет изменяться в зависимости от размера шрифта, чего бы не случилось, если бы мы указали отступ в пикселях

ШАГ 5: украшаем ссылки

Навигационое меню все еще по-прежнему выглядит как список, вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и переместим элементы налево, где были маркеры. Так же мы нарисуем каждый элемент списка на белом фоне в своем черном квадрате (зачем? просто так, потому что можем).

Мы так же не сказали какими должны быть цвета ссылок, так что давайте добавим и это свойство: синими будут ссылки которые пользователь еще не смотрел, пурпурными — те которые он уже посещал. (строки 13-15 и 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

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

В HTML гиперссылки создаются тэгами <a> поэтому для указания цвета нам надо создать правило в CSS для “a”. Для того, чтобы различать посещенные и непосещенные ссылки, CSS предоставляет два “псевдо-класса” (:link и :visited). Они называются “псевдо-классами” для отличия от HTML атрибутов, которые указываются в HTML напрямую, т.е. в нашем случае class="navbar".

ШАГ 6: добавляем горизонтальные линии

Последним добавлением к нашей таблице стилей станет горизонтальная полоса для разделения текста и подписи снизу. Мы используем свойство ‘border-top’ для того чтобы добавить прерывистую линию над элементом <address> (строки 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul. navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h2 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[и т.д.]

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

ШАГ 7: внешний CSS

Сейчас у нас есть HTML файл со встроенной таблицей стилей. Но если наш сайт будет разрастаться, возможно, нам потребуется множество страниц, использующих один и тот же стиль оформления. Есть метод получше, чем вставка таблицы в каждую страницу — мы можем вынести стили в отдельный файл, на который будут указывать все страницы.

Для создания отдельного файла таблицы стилей нам нужен другой пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню «Файл» в редакторе , для создания пустого файла. (Если вы используете TextEdit, не забудьте сделать его текстовым снова, используя меню Format.)

Затем вырежьте и вставьте все содержимое внутри <style> из HTML в это новое окно. Не копируйте элементы разметки <style> и </style>. Они принадлежат HTML коду, а не CSS. В новом окне у вас теперь должен быть полная таблица стилей:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h2 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той же директории/папке что и файл mypage.html, и сохраните таблицу стилей под именем “mystyle.css”.

Теперь вернитесь к HTML коду. Уберите все содержимое от <style> до </style> включительно и замените убранное элементом <link> как показано (строка 5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

Такая конструкция скажет браузеру о том, что таблица стиле располагается в файле под названием “mystyle.css”, и поскольку директория не упомянута, браузер будет искать этот файл там же, где лижит HTML файл.

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

Конечный резульат

Следующий шаг — положить оба файла mypage.html и mystyle.css на ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…) Как положить файлы на сайт зависит от вашего интернет провайдера.

CSS-Div «background-text» вместо фонового изображения

Я хочу, чтобы мой div-блок имел позицию «raquo» (») вдоль правого края div-блока, внутри него, но не часть гиперссылки.

Мой div-бокс предназначен для гиперссылки, вот мой CSS

.episode-nav .alignright a {
    margin-bottom:7px;
    margin-top:7px;
    width:274px;
    padding:5px 0px;
    background:#2A2A2A;
    text-align:center;
    border:1px solid #1B1B1B;
    float:right;
}

Что можно сделать?

css html
Поделиться Источник GreatestSwordsman 23 августа 2010 в 07:33
4 ответа
Получить XY coords & Height/Width фонового изображения div, при использовании background-size:contain
Я разрабатываю веб-страницу, на которой есть фотография для фонового изображения главной страницы. Изображение должно охватывать как можно большую часть доступного размера окна, сохраняя при этом правильное соотношение сторон. С этой целью у меня есть container div со следующим CSS: div.background…
css контрольное положение фонового изображения в div
Как часть UI, я пытаюсь создать виджет ‘compass’, используя html, css & jquery. Я хочу добиться следующего: при заданном значении от 0 до 360 расположите изображение таким образом, чтобы оно представляло соответствующее положение компаса. Например, значение 0 должно выглядеть следующим…

2

Если вы пытаетесь создать меню, то правильный markup, который вы должны использовать, — это список, например такой
<ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> </ul>
Теперь, чтобы действительно заставить » работать. Есть два способа сделать это. Вы можете либо добавить дополнительный span с » внутри него и поместить его внутри якоря или списка, либо вы можете использовать псевдоэлемент CSS :after для создания контента для вас. Обратите внимание, что этот второй метод имеет меньшую поддержку браузера и может быть спорным. Взгляните на псевдо-элемент :after здесь: http://reference.sitepoint.com/css/ псевдоэлемент-после
Посмотрите демонстрацию обоих методов в действии здесь: http://jsfiddle.net/aQSVp/
Обратите внимание, как вы используете свойство content для создания содержимого.
#after a:after { content: '»'; float: right; margin-right: 10px; }
Поделиться Yi Jiang 23 августа 2010 в 09:04

1

Сделайте себе небольшое растровое изображение raquo и используйте его в качестве фонового изображения.
Поделиться fmalina 23 августа 2010 в 22:17

0

Я не уверен, что понимаю, чего ты хочешь от 31. Если вам просто нужна ссылка с > > спереди, почему бы вам просто не сделать это внутри вашего div?
<span>»<a href="...">This is a link</a></span>
Возможно, добавьте «white-space:nowrap»к стилю пролета.
Поделиться Karman Kertesz 23 августа 2010 в 08:28
Заставьте div иметь размер фонового изображения
При использовании фонового изображения на Div я не могу отобразить полную высоту изображения, ни используя height:auto; , ни height: 100% . Почему же так? Как я могу решить эту проблему? Я создал JS Fiddle здесь: https://jsfiddle.net/2d0npz2v/5 / body, html { height: 100%; margin: 0px; }…
WordPress Настройщик CSS для фонового изображения
Я использую приведенный ниже код, чтобы добавить некоторые CSS в заголовок страницы с настройками из настройщика WordPress: public static function header_output() { ?> <!—Customizer CSS—> <style type=text/css> <?php self::generate_css(‘#site-title a’, ‘color’,…

0

Я знаю, что это старый вопрос и уже есть ответ, но есть решение CSS для этого вопроса.
Используя :before на li, можно получить » , используя шестнадцатеричный код для него \BB . Демо здесь.
HTML:
<ul> <li>List element 1</li> <li>List element 2</li> <li>List element 3</li> <li>List element 4</li> </ul>
CSS:
ul { list-style: none; } li:before { content: '\BB '; }
Поделиться Bojangles 22 июля 2011 в 20:39
Похожие вопросы:

jQuery CSS анимация для фонового изображения
У меня есть этот код javascript : $(.linksColl a li).hover(function () { $(this).css({ background-image : url(images/links/linkHover1.png), background-position : center center, background-repeat :…

Граница вокруг фонового изображения CSS
Я хочу нарисовать границу вокруг фонового изображения CSS, которое изменяется в соответствии с размером окна в контейнере div. Я могу нарисовать границу вокруг div, но не вокруг самого изображения….

Установите ширину Div на ширину фонового изображения Css?
Есть ли чистый способ css установить ширину вашего div на ширину фонового изображения, которое вы используете для этого div? например, прямо сейчас я делаю это… #homeNav{…

Получить XY coords & Height/Width фонового изображения div, при использовании background-size:contain
Я разрабатываю веб-страницу, на которой есть фотография для фонового изображения главной страницы. Изображение должно охватывать как можно большую часть доступного размера окна, сохраняя при этом…

css контрольное положение фонового изображения в div
Как часть UI, я пытаюсь создать виджет ‘compass’, используя html, css & jquery. Я хочу добиться следующего: при заданном значении от 0 до 360 расположите изображение таким образом, чтобы оно…

Заставьте div иметь размер фонового изображения
При использовании фонового изображения на Div я не могу отобразить полную высоту изображения, ни используя height:auto; , ни height: 100% . Почему же так? Как я могу решить эту проблему? Я создал JS…

WordPress Настройщик CSS для фонового изображения
Я использую приведенный ниже код, чтобы добавить некоторые CSS в заголовок страницы с настройками из настройщика WordPress: public static function header_output() { ?> <!—Customizer CSS—>…

Поворачивая фонового изображения внутри div в ссылку
Хотя существует ряд вопросов, касающихся превращения фонового изображения в ссылку или создания ссылки в div, мне трудно найти решение для связывания фонового изображения в div. В частности:…

Как использовать значок в качестве ‘background-image’ вместо изображения в CSS
Я хочу использовать значок в качестве фонового изображения вместо использования любого изображения. Есть ли какой — нибудь способ сделать это? Обычно мы пишем ‘background-image’ как:…

CSS-как получить div поверх фонового изображения?
У меня есть фоновое изображение на половину страницы, и у меня есть div под ним, который я также хочу поместить на четверть выше фонового изображения. Я попытался поместить padding-top в класс…
Свойство content • Про CSS
С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов :before и :after, но не менее важную роль в этом играет свойство content.
Оно определяет содержимое псевдоэлементов. И даже больше, псевдоэлементы не отобразятся, если у них не задано свойство content. Достаточно такой строки:
Спецификация тут: w3.org/TR/css3-content/
Снеговики в примере добавлены с помощью content для псевдоэлементов, сами снеговики — символы юникода:
DIV:before { content: "\2603"; }
Возможные значения свойства:
normal, none — содержимое псевдоэлемента не отображается. Полезно, если нужно скрыть ранее заданный псевдоэлемент.
<string> — текстовый контент. Можно вставлять простой текст и символы юникода, как в примере выше. Для практических целей очень пригодятся разные варианты стрелок. Символы юникода можно найти, например, тут или тут.
DIV:before { content: "Hello"; }
<uri> — адреса картинок.
DIV:before { content: url(//img-fotki.yandex.ru/get/5413/5091629.67/0_5ba12_81d03a82_XS.png); }
Практическое применение — иконки перед ссылкам на профили в соцсетях, иконка для обозначения внешней ссылки, буллеты списков.
Правда, тут появляется проблема лишних запросов к серверу.
Варианты решений:
спрайт, иконки из которого вставляются фоном в саму ссылку или в псевдоэлемент. Второе предпочтительней, потому что тогда псевдоэлемент ограничит область видимости спрайта, таким образом иконки в спрайте могут быть расположены не только вертикально, но и рядами.
Количество запросов к серверу уменьшается до одного, но при этом картинка кешируется у пользователя;
закодировать отдельные картинки в base-64 и вставлять через content: url();
закодировать весь спрайт в base-64 и использовать его как фон для псевдоэлемента.
В двух последних вариантах вообще не будет запросов к серверу, но картинки не кешируются и, кроме того, закодированное изображение может весить больше исходного. Способ имеет смысл использовать только для небольших изображений.
Закодировать картинку в base64 можно с помощью онлайн-сервисов. Полученный код вставляется в url() с информацией о формате содержимого, например data:image/png;base64.
Вот так будет выглядеть код для иконки Instagram:
[href*="instagram.com"]:before { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQTgwMTE3NDA3MjA2ODExODA4Mzk4RDI3RDIwODg4MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NjAxNEU1NjQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NjAxNEU1NTQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk3MDc3Njg4MTUyMDY4MTE4MDgzOThEMjdEMjA4ODgyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBBODAxMTc0MDcyMDY4MTE4MDgzOThEMjdEMjA4ODgyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++UbndwAAArdJREFUeNqUk0tME1EUhr+ZDoW2tBS0vLQCkqgLE4X4DBoBFxIXBqNCQI0rF8TEhS5MNC4MLkxcGRb4jonxFVApKBJNZCG+giJddAEoUEEWAikI9t2OMxeKJLrhZE7mPv7vv3fmniud2lN0EKjTspylxWstGxVVVU+szywoNRFkcHMa7nAxiqEYJjo5vtLwX1JjGBkZLXf3fJEVSZJKDcEwUSlELBIiHAkTisYxBkP4ff5/4BPX28X70pFydFbRO9FIBEWJEY/HialxpKkh+NFP0+CMEGdazazJyiDLZsFss6NqY+FAUMwJg0g4jCLFtb3FUIb7yQp+Zn/tYXz+KMHfs+QsT+Pp4wc4fk5SX7lJgNOTE3MGssXIwO9pCECwM0Ce00pZ5TFOnbuIxWpjwjeprTbL5frzdHe94nV3LynaQnrorJLqsLKv7igGay5Njx5SuruCutMXKCutITcnh9Rlybzpc3O24SZ3Lp7hZXsL1TW1xGbGaG2+i6wYZBwZNpwrsvF6h/H0DeFcvY5u93s8X0doedeLkreW6YAk5rxer9DqjM4q8wcjjkZ7SLXbGR8fIxhSCclx+j99YSZ7Pct2HSLZZNbPUGgRv3L+J4q2Npi/yklBpo3v3zyoRgujz64ip6Tz7cVtMvIzKdx7gOH8PKGd55EThaHn9i2baWtzcf/GFaKzPuQkI/6JAZga5NbJI7S6ngiNurAL/n6CnhuKNuLxeGhtacJ1twGf7xfJaQ7Mcpjme9cozHMKTUK/yGAujCkpVFVX8eFtF89dLYz7psS4I91OWclWtpXsEJrFIQzUWAQ1HkOWDVhsNnaWlVNUXEzAP1fKJrOZ1DS7gLXyFVqdSRh0DPX1VBRoDcmQtOBs0u6RyZro+YnN+tHqicSCGqM3O3SDxq6PbrSsWOJ17tDZPwIMAKAIId5/sWegAAAAAElFTkSuQmCC) }
Код длинный и заканчивается где-то за горизонтом. Кроме того, по коду непонятно что за картинка в нём лежит, и, при необходимости отредактировать, картинку надо будет каждый раз кодировать и вставлять заново, хотя в случае с обычным изображением его надо будет просто перезалить. В то же время есть плагин для гранта, который автоматически кодирует картинки и заменяет в коде адреса картинок на base64.
Подобным же образом можно вставлять SVG.
DIV:before{ content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><path d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0-0.781 0.781-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h29.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z" fill="#FFF" /></svg>'); }
Это очень удобно, но пока что работает не во всех браузерах. Например, Chrome такое поймет и отобразит, а Firefox — нет.
Upd: SVG в CSS будет работать во всех браузерах, если закодировать его как адресную строку. Это можно сделать с помощью URL Encoder.
<counter> — счетчик. С помощью этого значения можно пронумеровать не только списки, но и любые элементы на странице. Например, разделы статьи.
BODY { counter-reset: h3-counter; counter-reset: p-counter; } DIV { counter-increment: h3-counter; } h3:before { content: counter(h3-counter) ". "; } P:before { content: counter(p-counter) ". "; counter-increment: p-counter; }
counter-reset задает имя счетчика.
counter-increment увеличивает значение заданного счетчика.
content: counter(имя счетчика) выводит значение счетчика в качестве содержимого псевдоэлемента.
attr(<identifier>) — это значение выводит содержимое заданного атрибута. Удобно использовать для вывода атрибутов href в версии для печати и для разных интересных эффектов.
A:before { content: attr(title); }
Много эффектов можно найти тут: tympanus.net/Development/CreativeLinkEffects/
open-quote, close-quote — значения для вывода открывающих и закрывающих кавычек. Символы, которые будут использованы, определяются свойством quotes. Если оно не задано, будут использованы значения по умолчанию, которые зависят от браузера.
BLOCKQUOTE { quotes: '"' '"' "'" "'"; } BLOCKQUOTE:before { content: open-quote; } BLOCKQUOTE:after { content: close-quote; }
no-open-quote, no-close-quote — значение отключает отображение кавычек, но при этом продолжает учитываться уровень их вложенности.
В спецификации есть ещё много интересного вроде псевдоэлемента, представляющего обертку для всего элемента или множественные псевдоэлементы, но в данный момент это нигде не реализовано.
Как изменить цвет текста и фона в CSS
Изменить цвет текста на веб-странице легко с помощью свойства цвета CSS.
Прежде чем мы рассмотрим, как это сделать, важно понять, как можно задать значение свойства различными способами. Вы можете использовать:
Названия цветов HTML: CSS поддерживает 140 названий цветов. Желтый, фуксия, бордовый и небесно-голубой — лишь несколько примеров.
Шестнадцатеричные цветовые коды: эти коды состоят из трех пар символов, которые представляют интенсивность трех основных цветов.Возможные значения варьируются от 00 (самая низкая интенсивность основного цвета) до FF (самая высокая интенсивность основного цвета). Шестнадцатеричный код цвета для черного — # 000000, красного — # FF0000, а синего — # 0000FF.
значений RGB: RGB — это еще одна цветовая модель, основанная на комбинации основных цветов: красного, зеленого и синего. Состоит из трех чисел, разделенных запятыми, каждое из которых представляет интенсивность соответствующего основного цвета в виде целого числа от 0 до 255. Черный — это rgb (0, 0, 0), красный — это rgb (255, 0, 0), а синий — rgb (0, 0, 255).
Хотя вы можете использовать любое из этих значений, имена цветов не рекомендуются. Мало того, что их трудно запомнить за пределами стандартной радуги, они также вносят неточность. Фуксия одного человека может быть пурпурным, у другого ярко-розовым и так далее.
Чтобы цветовая схема вашего веб-сайта выглядела так, как вы хотите, используйте вместо нее шестнадцатеричные цветовые коды или значения RGB. Они позволяют подобрать точный оттенок желаемого цвета. В приведенных ниже примерах мы будем использовать шестнадцатеричные цветовые коды, потому что они более удобны для изучения новичками.
Теперь давайте рассмотрим, как изменить цвет и цвет фона встроенного текста в CSS.
Изменение цвета встроенного текста в CSS
Чтобы изменить цвет встроенного текста, перейдите в раздел своей веб-страницы. Просто добавьте соответствующий селектор CSS и определите свойство цвета с желаемым значением. Например, вы хотите изменить цвет всех абзацев на вашем сайте на темно-синий. Затем вы добавляете p {color: # 000080; } в заголовок вашего HTML-файла.
Вам может быть интересно, что произойдет, если вы не установите свойство цвета в своем CSS. Это хороший вопрос. Цвет текста по умолчанию для страницы определяется в селекторе основного текста. Вот пример селектора основного текста, который устанавливает синий цвет текста:
кузов { цвет: синий; }
Если в селекторе тела не задан селектор тела или цвет, то цвет по умолчанию, скорее всего, черный.
Допустим, я хочу изменить цвет абзацев на темно-синий, как указано в примере выше, и все ссылки на моем веб-сайте на голубой. Затем я использовал бы селектор типа p и селектор атрибутов a [href] и установил бы свойство цвета на # 000080 и # 00FFFF соответственно.
Вот код CSS:
п { цвет: # 000080; } a [href] { цвет: # 00FFFF; }
Вот HTML:
Это абзац.Цвет текста по умолчанию был черным, но я добавил селектор абзацев и определил свойство цвета так, чтобы он был темно-синим. Вы увидите, что абзац ниже также темно-синий, за исключением ссылки. С помощью отдельного селектора цвет ссылок изменен на голубой. Другой абзац, содержащий ссылку.
Вот результат:
См. Перо, изменяющее цвет встроенного текста в CSS от Кристины Перриконе (@hubspot) на CodePen.
Вы можете использовать этот же процесс для изменения цвета заголовков, тегов диапазона, копии кнопки и любого другого текста на странице. Теперь давайте посмотрим, как изменить цвет фона текста.
Изменение цвета фона текста в CSS
Чтобы изменить цвет фона встроенного текста, перейдите в раздел вашей веб-страницы. Просто добавьте соответствующий селектор CSS и определите свойство color и background-color с желаемыми значениями. Допустим, вы хотите изменить цвет фона ссылок на желтый.Затем вы должны добавить следующий код:
a [href] { цвет: # 000000; цвет фона: # FFFF00; }
Цвет фона CSS
Свойство CSS background-color позволяет изменять цвет фона элемента HTML. Вы можете установить цвет фона для многих элементов, включая таблицу, div, заголовок и элемент диапазона.
При определении свойства цвета вы также должны определить цвет фона.Необходимо соответствовать W3C CSS и другим фреймворкам, иначе это не повредит.
Проверка цветового контраста
Изменение цвета и цвета фона текста также важно для предотвращения проблем веб-доступности на вашем веб-сайте.
Взгляните еще раз на демонстрацию выше. Хотя используемые цвета могут быть слишком похожими для людей, которые не видят разные оттенки цветов, подчеркивание поможет указать, что это ссылка. Но что, если я уберу подчеркивание со ссылок на моем сайте? Тогда я полагался бы только на цвет, чтобы передать, что это связь.В этом случае мне нужно будет определить и использовать доступные в Интернете цвета для моего веб-сайта.
Это потребует времени и исследования. Если вы только начинаете исследовать дальтонизм, тогда такой инструмент, как Contrast Checker, может помочь вам сделать доступный выбор при изменении цвета текста на вашем сайте.
Вы можете ввести цвет и цвет фона, и он скажет вам «пройден», если у пары коэффициент контрастности 4,5: 1. Все, что ниже, не удастся. Мы воспользуемся этим инструментом, чтобы определить цвета в примере ниже.
Допустим, я хочу, чтобы текст был красным, а фон — серым. Я мог бы начать с подключения # FF0000 и # 808080 к Contrast Checker и увидеть, что у него коэффициент контрастности только 1: 1. Это не хорошо.
Чтобы улучшить соотношение, я переместу ползунок цвета переднего плана влево, а ползунок цвета фона вправо, пока не достигну минимального значения 4,5: 1.
Поскольку я хочу, чтобы мой дизайн был как можно более четким, я выберу цвет # 940000 и цвет фона # E0E0E0, что соответствует соотношению 7: 1.
Я использую их, чтобы оформить ссылку, чтобы она действительно выделялась на фоне остального абзаца.
Вот код CSS:
a [href] { цвет: # 940000; цвет фона: # E0E0E0; текстовое оформление: нет; }
Вот HTML:
Это абзац. Цвет текста по умолчанию - черный. Вы увидите, что нижеследующий абзац также черный, за исключением ссылки.С помощью селектора атрибутов я установил цвет, цвет фона и свойство оформления текста так, чтобы он отображался с красноватым цветом шрифта, серым фоном и без подчеркивания. Другой абзац, в котором есть ссылка .
Вот результат:
См. «Ручка, изменяющая цвет фона текста в CSS» Кристины Перриконе (@hubspot) на CodePen.
Добавление цвета на ваш веб-сайт
Изменить цвет и цвет фона текста на вашем веб-сайте очень просто.Независимо от того, создаете ли вы свой сайт с нуля или используете Bootstrap CSS, вам просто необходимы некоторые знания HTML и CSS. Однако потребуется время, чтобы изучить названия цветов и коды, а также способы их комбинирования, чтобы сделать ваш веб-сайт и другие маркетинговые материалы доступными. Еще одна причина начать добавлять цвета на свой сайт уже сегодня.
CSS фоновый клип-текст | Майкл Гирон
«background-clip: text» поддерживается во всех основных браузерах с префиксом Webkit, он позволяет обрезать фоновое изображение текстовым элементом.В этом руководстве мы рассмотрим примеры использования свойства background-clip и различных значений, которые вы можете использовать. Свойство background-clip было введено в Webkit в 2008 году.
Значения для фонового клипа
Помимо значения текста для свойства background clip мы также можем использовать следующие значения:
border-box — значение по умолчанию. Это позволяет фону простираться до внешнего края границы элемента.
padding-box закрепляет фон по внешнему краю заполнения элемента и не позволяет ему выходить на границу.
content-boxclips фон на краю поля содержимого.
начальный устанавливает для этого свойства значение по умолчанию.
наследовать применяет настройку фонового клипа родительского элемента к выбранному элементу.
Код для клипа
Чтобы замаскировать изображение вокруг текста, вам понадобится следующий код:
фон: () без повтора; -webkit-background-clip: текст; фон-клип: текст; цвет: прозрачный;
Демонстрация фонового ролика: текст
В демонстрации ниже изображение обрезается по тексту с помощью CSS-свойства background-clip
.
См. Маскировку изображений CSS Pen от Майкла Гирона (@michaelgearon) на CodePen.
В приведенной выше демонстрации GIF-изображение вырезано из текста. См. Маскировку Pen GIF от Майкла Гирона (@michaelgearon) на CodePen.
Связанные руководства CSS
Автор
Майкл Гирон
Майкл Гирон — старший дизайнер взаимодействия в Companies House в Кардиффе. Ранее Майк был дизайнером продуктов в GoCo Group, включая GoCompare, MyVoucherCodes и WeFlip. Также хорошо работает для таких брендов в Южном Уэльсе, как BrandContent и HEOR.
Как выделить текст в цвете с помощью HTML и CSS
Обновлено: 27.02.2019 компанией Computer Hope
Выделение текста на веб-странице помогает сразу привлечь внимание читателя к важной информации.Например, этот текст выделен желтым и, вероятно, первым бросится в глаза. Есть несколько методов выделения текста. Чтобы продолжить, выберите метод из списка ниже и следуйте инструкциям.
Выделите с помощью тега HTML5
Если вы работаете на странице HTML5, тег может быстро выделить текст. Ниже приведен пример использования тега mark и его результат. Если ваш браузер поддерживает тег , «выделенный текст» должен иметь желтый фон.
Пример кода
Вот пример выделенного текста с использованием тега & lt; mark & gt; тег.
Пример результата
Вот пример выделенного текста с использованием тега .
Выделите текст только с помощью HTML-кода
Чтобы выделить текст с помощью кода HTML и поддержать все браузеры, установите стиль цвета фона, как показано в примере ниже, с помощью тега HTML .
Пример кода
Этот текст выделен желтым.
Пример результата
Этот текст выделен желтым цветом.
Кончик
В приведенном выше примере тег HTML имеет код цвета фона # FFFF00, который является желтым. В этом случае слово «желтый» может использоваться вместо цветового кода или любого другого названия цвета, если на то пошло.
Кончик
С тем же кодом вы также можете выделить одно или несколько слов в абзаце, чтобы привлечь внимание к определенному разделу текста.
Выделите текст с помощью CSS и HTML
Вы также можете создать класс CSS и установить атрибут «background-color», как показано в примере ниже.
Пример кода
<стиль> тело {цвет фона: синий; } .highlightme {цвет фона: # FFFF00; } п {цвет фона: #FFFFFF; }
В приведенном выше коде CSS определены три элемента. Во-первых, цвет фона основного текста устанавливается на синий, во-вторых, новый класс с именем «highlightme» с желтым фоном и, наконец, тег абзаца имеет белый фон.
Если вы хотите использовать класс «highlightme» для выделения текста, вы можете создать тег в своем HTML, который ссылается на класс CSS.
Пример кода
тест
Как выделить полный абзац
Класс CSS или класс стиля, упомянутые выше, также можно применить к тегу абзаца, если вы хотите выделить весь абзац, как показано ниже.
Пример кода

Весь абзац текста выделен желтым.

Пример результата
Весь абзац текста выделен желтым цветом.
Как добавить цвет фона к текстовому блоку в Squarespace — Big Cat Creative

Первый метод…
Я рекомендую этот метод для большинства случаев.Мы пользуемся универсальным редактором CSS, который доступен каждому на индивидуальной подписке. Кроме того, добавление CSS в одной области, а не по всему сайту в разных областях (как другой метод, описанный ниже), в целом лучше для SEO.
Использование идентификатора блока и добавление базового CSS

Шаг 1. Идентифицируйте свой блок
Каждый блок на вашем сайте имеет свой идентификационный номер. Если у вас есть идентификационный номер определенного блока, вы можете легко внести в него изменения CSS в редакторе CSS Squarespace.
Самый простой способ найти номер блока:
Если вы используете Google Chrome, загрузите это расширение Squarespace Block Identifier для Chrome. Это расширение разработано, чтобы помочь вам найти идентификационный номер блока для каждого блока на вашем сайте Squarespace.
Откройте страницу с блоком, который вы хотите идентифицировать, нажмите Инструмент идентификации в расширениях Chrome, и он сразу же покажет идентификационные номера блоков (которые будут примерно такими: # block-53c818fd6d3f39517aed или # block-yui_3_17_2_1_1556302617094_72323) 9029
Нажмите на блок, который хотите использовать, и он автоматически скопирует номер блока для вас!
Если вы не используете Google Chrome:
Во-первых, я рекомендую загрузить его, даже если он предназначен только для использования этого расширения, это сэкономит вам кучу времени.Squarespace также рекомендует использовать Google Chrome для максимального удобства при редактировании в Squarespace, так что это беспроигрышный вариант.
В противном случае вы можете щелкнуть блок правой кнопкой мыши, а затем нажать «Проверить». Где-то в коде этого определенного объекта будет сказано, что ID = блок и т. Д. Хотя существует много «идентификаторов», поэтому убедитесь, что вы ищете правильный, он должен начинаться с блока .
СОВЕТ: Убедитесь, что номер блока начинается с блока.Если он начинается с чего-то еще, это неправильный идентификатор.

Шаг 2: Добавьте свой CSS
После того, как вы нашли правильный идентификатор блока, убедитесь, что вы его скопировали. Затем перейдите в Дизайн> Пользовательский CSS.
СОВЕТ: Я рекомендую открыть страницу, над которой вы планируете работать (с указанным блоком), пока вы работаете над CSS, потому что, когда вы вносите изменения CSS, вы сможете увидеть, что они происходят. страница.
Вставьте свой идентификатор блока в редактор CSS и убедитесь, что он имеет решётку (#) в начале.
Используйте следующий код для добавления фона в текстовый блок:
# block-53c818fd6d3f39517aed {
background: # f0f0f0;
отступ: 50 пикселей;
выравнивание текста: по центру;
}

Просто замените Block Id (тем, который вы скопировали / нашли ранее), шестнадцатеричный код цвета , значение заполнения и значение выравнивания текста . Вы должны увидеть изменения, которые происходят, пока вы настраиваете это в своем редакторе CSS.Если вы не можете, вероятно, у вас неправильный идентификатор блока (или, возможно, вы изменили код, сравните его с кодом выше, чтобы убедиться, что вы случайно не удалили или не изменили что-то)
Когда вы будете счастливы с тем, как выглядит ваш CSS, не забудьте нажать Сохранить в верхнем левом углу!
Как добавить цвет фона для ширины текста вместо всей ширины элемента
В этом руководстве мы продемонстрируем некоторые методы, которые вы можете использовать для установки цвета фона, который соответствует ширине текста, а не ширина всего элемента.Вам также понадобятся свойства CSS.
Решение со встроенным элементом¶
В следующем примере у нас есть заголовок в
, внутри которого мы добавляем встроенный элемент (
). Следующим шагом является установка цвета фона для элемента .
Размер встроенного элемента равен размеру его содержимого, и это решит проблему.
Пример установки цвета фона для ширины текста со встроенным элементом: ¶
Название документа <стиль> h2 { выравнивание текста: центр; цвет: #fff; } h2 span { цвет фона: # 43d9cf; } Lorem Ipsum - это просто фиктивный текст
Попробуйте сами »
Результат
Lorem Ipsum — это просто фиктивный текст
Решения со свойством CSS display¶
Другой способ решения проблемы — использовать свойство display, для которого установлено значение« table » .Обратите внимание, что родительский элемент не требуется.
Пример установки цвета фона для ширины текста при отображении, установленном на «таблица»: ¶
Название документа <стиль> h2 { дисплей: таблица; маржа: 0px авто 0px авто; отступ: 3 пикселя; размер шрифта: 24 пикселя; цвет фона: # 30cf52; цвет: #fff; } Lorem Ipsum - это просто фиктивный текст
Попробуйте сами »
В следующем примере требуется родительский элемент, поэтому мы используем элемент
в качестве контейнера.Здесь мы устанавливаем отображение «inline-flex» для элемента
и выравнивание текста по «центру» для контейнера.
Пример установки цвета фона для ширины текста с отображением, установленным на «inline-flex»: ¶
Название документа <стиль> .container { выравнивание текста: центр; } h2 { дисплей: встроенный гибкий; отступ: 3 пикселя; размер шрифта: 24 пикселя; цвет фона: # 4451b3; цвет: #fff; } Lorem Ipsum - это просто фиктивный текст
Попробуйте сами »
В следующем примере отображение и контейнера, и текста настроено на« гибкий ».Для контейнера мы также используем свойство justify-content со значением «center».
Пример установки цвета фона для ширины текста с отображением, установленным на «гибкий»: ¶
Название документа <стиль> .container { дисплей: гибкий; justify-content: center; } h2 { дисплей: гибкий; отступ: 3 пикселя; размер шрифта: 24 пикселя; цвет фона: # 000; цвет: #fff; } Lorem Ipsum - это просто фиктивный текст
Попробуйте сами »
Или вы также можете использовать значение« block »свойства display.Здесь также требуется гибкий родительский контейнер.
Пример установки цвета фона для ширины текста при отображении, установленном на «блок»: ¶
Название документа <стиль> .container { дисплей: гибкий; justify-content: center; } h2 { дисплей: блок; отступ: 3 пикселя; размер шрифта: 24 пикселя; цвет фона: # 000; цвет: #fff; } Lorem Ipsum - это просто фиктивный текст
Попробуйте сами »
HTML Test Suite для UAAG 1.0 (черновик)
HTML Test Suite для UAAG 1.0 (Черновой вариант)
Это устаревший проект.
Текущая информация доступна по ссылке с веб-сайта WAI: w3.org/WAI
Некоторая информация за 2020 год о контрасте текста и фона находится в Понимание критерия успеха 1.4.3: контраст
На этой странице: Контрольная работа 1 | Рекомендации | Об этих тестах
Рядом: Больше HTML 4.01 Тесты | Набор тестов UAAG 1.0
UAAG 1.0 Требование
Пропускной пункт 4.3 Настроить цвета текста (Приоритет 1 )
Обеспечение 1 : Разрешить глобальную настройку цвета переднего плана и фона всего визуально отображаемого текстового содержимого.
Обеспечение 2 : В рамках выполнения условия одной из этой контрольной точки предоставьте параметр конфигурации для переопределения цветов переднего плана и фона, заданных автором или пользовательским агентом по умолчанию.
Процедура
Настройте пользовательский агент для визуализации следующего тестового текста с использованием заданных пользователем цветов и цветов фона.
Выполнить тест
Цвет текста: черный, цвет фона: белый
Цвет текста: белый, цвет фона: черный
Цвет текста: красный, цвет фона: белый
Цвет текста: синий, цвет фона: белый
Цвет текста: зеленый, цвет фона: желтый
Цвет текста: белый, цвет фона: красный
Ожидаемые результаты
Пользовательский агент позволяет пользователю выбирать цвет шрифта и цвет фона, которые будут использоваться для визуализации текста.
Пользовательский агент делает доступным пользователю диапазон цветов шрифта и фона.
Исходный код

Цвет текста: черный, цвет фона: белый

Цвет текста: белый, цвет фона: черный

Цвет текста: красный, фон -color: white

Цвет текста: синий, цвет фона: белый

Цвет текста: зеленый, цвет фона: желтый

Цвет текста : белый, цвет фона: красный

HTML 4.01 спецификация для СТИЛЯ
Спецификация CSS2 для цветов и фона
Этот тест является частью тестирование для Руководство по обеспечению доступности агента пользователя (UAAG) 1.0 . Эту работу проводит Рекомендации по обеспечению доступности агента пользователя Рабочие Группа , который является частью W3C Инициатива веб-доступности (WAI) .Присылайте комментарии к этому тесту по адресу [email protected] ( публичный архив ).
Тест создан:
Последнее изменение: $ Дата: 2020/11/04 18:27:50 $ автор: $ Автор: shawn $
Авторские права © 1999 — 2003 W3C ^® ( MIT , INRIA , Кейо ), Все права защищены.W3C обязанность , торговая марка , использование документов а также лицензирование программного обеспечения применяются правила.
цветов · Bootstrap
Передайте смысл через цвет с помощью нескольких вспомогательных классов цвета. Также включает поддержку стилизации ссылок с помощью состояний наведения.
Цвет
.текст первичный
.text-вторичный
.text-success
. Текст-опасность
. Текст-предупреждение
.text-info
. Текстовый свет
.темный текст
. Без звука
. Текст-белый
.text-primary .text-secondary .text-success . текст-опасность . текст-предупреждение .text-info .text-light .темный текст . текст без звука .text-white
Классы контекстного текста также хорошо работают с привязками с предоставленными состояниями наведения и фокуса. Обратите внимание, что классы .text-white и .text-muted не имеют стиля ссылки.
Основная ссылка Дополнительная ссылка Ссылка на успех Ссылка на опасность Предупреждающая ссылка Информационная ссылка Легкая ссылка Темная ссылка Ссылка отключена Белая ссылка
Цвет фона
Подобно классам цвета контекстного текста, легко установить фон элемента для любого контекстного класса.Компоненты привязки будут темнеть при наведении курсора, как и классы текста. Фоновые утилиты не устанавливают цвет , поэтому в некоторых случаях вы захотите использовать утилиты .text- * .
.bg-primary
.bg-вторичный
.bg-success
.bg-опасность
.bg-warning
.bg-info
.bg-светлый
.bg-темный
.bg-белый
.bg-primary .bg-вторичный .bg-success .bg-dangerous .bg-warning .bg-info .bg-light .bg-dark .bg-white
Фоновый градиент
Если для $ enable-gradient установлено значение true, вы сможете использовать служебные классы .bg-gradient- . По умолчанию $ enable-gradient отключено, а приведенный ниже пример намеренно нарушен. Это сделано для упрощения настройки с момента начала использования Bootstrap. Узнайте о наших опциях Sass, чтобы включить эти и другие классы.
.bg-gradient-primary
.bg-gradient-вторичный
.bg-gradient-success
.bg-gradient-dangerous
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark
.bg-gradient-primary .bg-gradient-вторичный .bg-gradient-success .bg-gradient-dangerous .bg-gradient-warning .bg-gradient-info .bg-gradient-light .bg-gradient-dark
Работа со спецификой
Иногда контекстные классы не могут быть применены из-за специфики другого селектора. В некоторых случаях достаточным обходным путем является обертывание содержимого вашего элемента в
с классом.
Передача смысла вспомогательным технологиям
Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .
No related posts.