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

Учебник CSS — Урок 3 — Свойства background-color, font-style, font-weight, text-align, text-decoration, text-transform.

За время существования HTML придумали много тегов и теперь с повсеместным применением css от некоторых придется отказаться, среди таких тегов <font>, <b>, <i>, <center>. Позже мы рассмотрим другие «запрещенные» теги. Также эти свойства помогут вам избежать лишнего кода в HTML-коде страницы и вынести его в css-файлы.

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

Итак, первое свойство в этом уроке background-color.

Background-color

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

span{
  background-color: yellow;
}

Или для ссылки:

a{
  background-color: blue;
}

Цвета как и в свойстве color можно задавать и цифрами, например так #ff0000 (что будет красным цветом).

Font-style

Возможно вам уже попадались теги <b> или <strong> (выделение жирным), <i> (курсив), font («злой» тег, делает что угодно с текстом). И что не использовать кучу этих и других тегов, придумали свойство css font-style. Среди распространенных значений этого свойства можно выделить следующие:

p{
  font-style: italic; /* курсив */
}

Тем самым мы заменяем тег <i> на свойство font-style со значением italic.

Font-weight

Среди устаревших тегов и <b>, делающий шрифт жирным. Сейчас достаточно использовать свойство font-weight:

body{
  font-weight: normal; /* обычный шрифт */
}
 
p{
 font-weight: 400; /* обычный шрифт */
}
 
span{
  font-weight: 700; /* жирный шрифт */
}
 
a{
  font-weight: bold; /* жирный шрифт */
}

Для свойства font-weight возможны следующие значения 400 или normal — это нормальный шрифт и 700 или bold жирный шрифт.

Text-align

Свойство text-align пришло на смену тегу <center> и HTML атрибуту align. Использовать text-align можно так:

body{
  text-align: left; /* по левому краю */
}
 
p{
  text-align: center; /* по ширине */
}
 
span{
  text-align: right; /* по правому краю */
}
 
div{
  text-align: center; /* по центру */
}

Что всем сразу понятно стало что именно делает это свойство, ответ в картинке ниже:

Text-decoration

Также вместо тегов <strike> (зачеркивание), <u> (подчеркивание) мы можем использовать теперь в css свойство text-decoration:

.underline{
  text-decoration: underline; /* подчеркивание */
}
 
.line-through{
  text-decoration: line-through; /* перечеркивание */
}

Text-transform

Еще одно иногда нужное CSS свойство text-transform. Оно позволяет написать все буквы прописными или наоборот все буквы маленькие.

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

html — Как изменить цвет фона ТЕКСТА в CSS

Задавать вопрос

спросил

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

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

Возьмем, например:

 
Это предложение.
 

заполняют 100% строки.

Сам текст, только небольшая его часть.

Я хочу придать тексту фоновый цвет БЕЗ придания фонового цвета всей строке.

Я могу изменить html и добавить диапазон , конечно. (И используйте этот диапазон с background-color )

 
Это предложение.
 

Но возможно ли это на чистом css без изменения html?

PS: я делаю CSS-код для терминала Hyper .

РЕШЕНИЕ (для всех div):

 div{display:table;}
 

Это полностью разрушит поведение tmux (внутри hyper ), но, может быть, я прошу слишком многого…

echo -e "\n\n" также становится проблемой. :p

РЕШЕНИЕ ЭТОЙ ПРОБЛЕМЫ: (пустой div не занимает места)

 раздел:после{содержание: " ";}
 

• HTML
• CSS

3

Вы можете использовать :before для применения CSS к

 #div1 {
  цвет синий; // скрыть исходный текст
  цвет фона: синий;
  положение: родственник;
}

#div1:до {
  content: 'Это предложение.';
  цвет фона: фиолетовый;
  дисплей: встроенный;
  белый цвет;
  положение: абсолютное;
} 

 
Это предложение.
 

---

Если вам не нужно, чтобы #div1 было полной ширины, просто примените к нему #div1 {display: inline-block} , и оно будет действовать как span элемент

1

Вы можете использовать display:table-cell

table-cell: позволить элементу вести себя как элемент — W3Schools

Кроме того, если вы не хотите вернуться в темные века, это хорошо поддерживается

 #дел1 {
  фон: красный;
  белый цвет;
  отображение: таблица-ячейка;
} 

 
Это предложение. 
Lorem ipsum dolor sit amet, pri cu quod audiam molestie, sit an modo probo conceptam, vim nemore quodsi no. Postea possit ne pro. Ne mel mollis oportere Laboramus. Eu dico eius omnes ius. Id vis nibh adipiscing, maiorum suscipit ius eu. Сонет вирис антиопам
nec in, est id equidem omnesque cotidieque, tritani detraxit qui cu. 

2

[Элемент блока всегда принимает ширину за 100%, в то время как встроенный блок принимает ширину самого элемента. поэтому попробуйте использовать встроенный блочный CSS для элемента внутри div] Дисплей: встроенный блок;

1 Например:

 [https://codepen.io/nazarbecks/pen/GEMdaG][1]
 

Ссылка Codepen

вы можете установить #div1 как встроенный блок .

 #дел1 {
  отображение: встроенный блок;
  цвет фона: цвет;
}
 

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

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

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

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

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

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

Обязательно, но не отображается

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

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

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

Как добавить фоновый цвет для ширины текста вместо ширины всего элемента ширина всего элемента.

Вам также понадобятся свойства CSS.

В следующем примере у нас есть заголовок в

, внутри которого мы добавляем встроенный элемент (

). Следующим шагом является установка цвета фона для элемента .

Строковый элемент имеет такой же размер, как и его содержимое, и это решит проблему.

Пример установки цвета фона для ширины текста со встроенным элементом:

  

  <голова>
    
    <стиль>
      ч2 {
        выравнивание текста: по центру;
        цвет: #fff;
      }
      h2 диапазон {
        цвет фона: #43d9cf;
      }
    
  
  <тело>
    

      
Lorem Ipsum — это просто фиктивный текст
    
  
 

Попробуй сам »

Результат

Lorem Ipsum — просто фиктивный текст

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

Пример установки цвета фона для ширины текста с отображением, установленным на «таблицу»:

 

  <голова>
    
    <стиль>
      ч2 {
        дисплей: таблица;
        поле: 0px авто 0px авто;
        отступ: 3px;
        размер шрифта: 24px;
        цвет фона: #30cf52;
        цвет: #fff;
      }
    
  
  <тело>
     
Lorem Ipsum — это просто фиктивный текст
 
  
 

Попробуй сам »

В следующем примере требуется родительский элемент, поэтому мы используем элемент

в качестве контейнера. Здесь мы устанавливаем отображение на «inline-flex» для элемента

и выравнивание текста на «центр» для контейнера.

Пример установки цвета фона для ширины текста с отображением, установленным на «inline-flex»:

 
 
  <голова>
    
    <стиль>
      .контейнер {
        выравнивание текста: по центру;
      }
      ч2 {
        дисплей: встроенный гибкий;
        отступ: 3px;
        размер шрифта: 24px;
        цвет фона: #4451b3;
        цвет: #fff;
      }
    
  
  <тело>
    <дел>
       
Lorem Ipsum — это просто фиктивный текст
 
    

Попробуй сам »

В следующем примере для отображения как контейнера, так и текста установлено значение «flex». Для контейнера мы также используем свойство justify-content со значением «центр».

Пример установки цвета фона для ширины текста с отображением, установленным на «flex»:

 

  <голова>
    
    <стиль>
      .контейнер {
        дисплей: гибкий;
        выравнивание содержимого: по центру;
      }
      ч2 {
        дисплей: гибкий;
        отступ: 3px;
        размер шрифта: 24px;
        цвет фона: #000;
        цвет: #fff;
      }
    
  
  <тело>
    <дел>
       
Lorem Ipsum — это просто фиктивный текст
 
    

Попробуй сам »

Или вы также можете использовать значение «блок» свойства отображения. Здесь также требуется гибкий родительский контейнер.

Пример установки цвета фона для ширины текста с отображением, установленным на «блок»:

  <голова> <стиль> . 
No related posts.