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

Как добавить текст в css

  • автор:

Псевдоэлемент after

Псевдоэлемент after вставляет текст после элемента. Используется только совместно со свойством content , которое задает текст, который следует вставить.

Синтаксис

селектор::after < content: 'текст'; >

Пример

Давайте сделаем так, чтобы по наведению на li в его конец вставился текст:

  • list item
  • list item
  • list item
  • list item
  • list item

Пример

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

  • list item
  • list item
  • list item
  • list item
  • list item

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

  • псевдоэлемент before ,
    который делает вставку после текста тега
  • функцию attr ,
    которая получает значение атрибута тега
  • свойство counter-increment ,
    которое задает автоматическую нумерацию

Свойства текста в CSS

Наряду с несколькими свойствами font- *, CSS предлагает множество свойств text-*.

text-align

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

body

Наиболее используемые значения:

Эти значения соответствуют тем же кнопкам выравнивания, что вы найдёте в Microsoft Word или Photoshop:

Не рекомендуется использовать значение justify . Хотя это может выглядеть визуально привлекательно, поскольку формируется прямоугольник текста, но усложняет чтение.

Значение text-align по умолчанию равно start . В принципе, start может быть как left , так и right , в зависимости от направления текста, заданного direction для HTML-документа.

direction — это свойство CSS, которое может быть ltr (слева направо) или rtl (справа налево):

  • если выбран ltr , start равен left ;
  • если выбран rtl , start равен right .

text-decoration

Свойство text-decoration применяется для добавления линии к вашему тексту.

Значение по умолчанию: none .

.deleted
  • overline
  • underline
  • line-through

text-indent

Свойство text-indent позволяет добавить пространство перед первой буквой первой строки блочного элемента.

Значение по умолчанию: 0 (ноль).

blockquote

Обратите внимание, что отступ есть только в первой строке. Если вы хотите сдвинуть весь блок текста, используйте padding .

Как и для свойства font-size , вы можете использовать px, em или даже %.

text-shadow

Если вы когда-либо использовали Photoshop, то, вероятно, применяли инструмент для добавления тени. В CSS вы можете добавить тень к тексту, чтобы сделать его более причудливым или удобным для чтения.

  • х — горизонтальное смещение;
  • у — вертикальное смещение;
  • размытие;
  • цвет.

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

Это свойство сложное, так что используйте его осторожно и не сходите с ума!

2.12. CSS content

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

Содержимое, вставляемое с помощью свойства content , появляется внутри элемента, до или после его содержимого. С помощью CSS можно генерировать содержимое следующими способами:
— с помощью свойства content в сочетании с псевдоэлементами ::before и ::after ;
— с помощью свойств counter-increment и counter-reset .

Добавление генерируемого содержимого на веб-страницу

  • Содержание:
  • 1. Свойство content
  • 1.1. Добавление специального символа
  • 1.2. Добавление текста
  • 1.3. Добавление изображения
  • 1.4. Добавление блочного содержимого
  • 1.5. Добавление значения атрибута
  • 1.6. Добавление кавычек
  • 2. Форматирование кавычек: свойство quotes

1. Свойство content

Поддержка браузерами

IE: 9.0, не поддерживает анимацию и переходы псевдоэлементов
Firefox: 4.0
Chrome: 4.0, анимация и переходы псевдоэлементов — с 26.0
Safari: 4.0, не поддерживает анимацию и переходы псевдоэлементов
Opera: 4.0, не поддерживает анимацию и переходы псевдоэлементов
iOS Safari: 7.1
Opera Mini: 8
Android Browser: 4.1
Chrome for Android: 44

В основе генерируемого содержимого лежат псевдоэлементы ::before или ::after . Псевдоэлементы создают абстракции о дереве документа помимо тех, которые определены языком документа, в данном случае — HTML. Например, HTML не предлагает механизмы доступа к первой букве или первой строке содержимого элемента. Псевдоэлементы CSS позволяют ссылаться на эту не имеющую доступа информацию. Псевдоэлементы также предоставляют дизайнерам стилей способ присвоить стиль содержимому, которого нет в исходном документе.

h1:before, h1:after

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

content
Значения:
normal Значение по умолчанию, означает отсутствие добавляемого содержимого.
none Не добавляет содержимое. Используется в случае, когда нужно удалить генерируемое содержимое для одного элемента из группы элементов (например, элементы списка), для которых уже задано это свойство.
counter() Даёт возможность создавать счётчики, задавая для них точку отсчёта и приращение на некоторую величину с помощью свойства counter-reset . Для прямого увеличения счёта необходимо использовать свойство counter-increment .
attr() Добавляет до или после элемента значение атрибута, заключённого в скобки. Чтобы вставить пробел между основным содержимым и генерируемым, нужно добавить пробел перед скобкой или после нее, например, content: attr( href);
» « Текст, который добавляется на веб-страницу, должен быть заключен в двойные или одинарные кавычки. Пустые кавычки можно использовать для добавления блочного содержимого.
open-quote Добавляет к содержимому открывающую кавычку.
close-quote Добавляет к содержимому закрывающую кавычку.
no-open-quote Удаляет открывающую кавычку, при этом уровень их вложенности продолжает учитываться.
no-close-quote Удаляет закрывающую кавычку.
url() Добавляет медиа-содержимое, например, изображение, звук, видео. В качестве значения атрибута в скобках указывается адрес внешнего ресурса, который вставляется в выбранное место документа.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
1.1. Добавление специального символа

Можно оживить текст с помощью добавления специальных символов. В качестве значения используется символ Юникода.

h1 < font-family: 'Niconne', cursive; font-size: 50px; color: #e12527; >h1:before, h1:after < content: "\2746"; display: inline-block; font-size: 60px; color: #38afaa; -webkit-animation: my 4s infinite alternate; animation: my 4s infinite alternate; >h1:before < margin-right: 0.5em; >h1:after < margin-left: 0.5em; >@-webkit-keyframes my < 0% 25% 50% 75% 100% > @keyframes my < 0% 25% 50% 75% 100% >
1.2. Добавление текста

content_text

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

h1:before, h1:after < content: "Yay!"; font-family: 'Dancing Script', cursive; color: #f7b21c; text-shadow: 1px 1px 2px grey; >h1:before < margin-right: 30px; >h1:after
1.3. Добавление изображения

content_image

h1:before < content: url(https://html5book.ru/images/left-twig.png); display: inline-block; margin-right: 10px; >
1.4. Добавление блочного содержимого

content_block

* div < position: relative; width: 680px; height: 100px; border: 1px solid #C2C9D5; margin-top: 40px; background: linear-gradient(to top,#D7DFED, #F5FCFD, #D7DFED) >/*Кружок*/ div:nth-child(1):before < content: ""; display: inline-block; position: absolute; left: calc(50% - 11px); left: -webkit-calc(50% - 11px); top: -11px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #AC170E; background: orangered; box-shadow: 0 2px 4px #292825; >/*Треугольник*/ div:nth-child(2):before < content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 0 20px 20px 20px; border-color: transparent transparent hotpink transparent; position: absolute; left: calc(50% - 15px); left: -webkit-calc(50% - 15px); top: -21px; >/*Зебра*/ div:nth-child(3):before < content: ""; display: inline-block; position: absolute; height: 10px; width: 100%; background: repeating-linear-gradient(45deg, turquoise, turquoise 10px, #D7DFED 10px, #D7DFED 20px); >/*Треугольник с обводкой*/ div:nth-child(4) < border: 3px solid #3E3A40; >div:nth-child(4):before
1.5. Добавление значения атрибута

Функция attr() позволяет добавить любое значение атрибута, например, url-адрес ссылки, который будет выводиться при печати текста.

a:after
1.6. Добавление кавычек

content_quotes

С помощью значений open-quote и close-quote можно генерировать открывающие и закрывающие кавычки. Внешний вид кавычек указывается в свойстве quotes . Если оно не задано, то будут использованы значения браузера по умолчанию.

Some text
blockquote < quotes: "\2039" "\203A"; font-size: 40px; font-family: 'Sigmar One', cursive; >blockquote:before < content: open-quote; color: mediumvioletred; margin-right: 10px; >blockquote:after

2. Форматирование кавычек quotes

Свойство задаёт тип кавычек, используемых в документе для вложенных цитат. По умолчанию кавычками оформляется текст, заключенный в тег . Также кавычки можно сгенерировать помощью свойства content , задав ему значения open-quote и close-quote . В качестве значения используется специальный символ HTML или символ Юникода. Наследуется.

quotes
Значения:
[символ символ]+ Определяет вид открывающей и закрывающей кавычек. Первая пара используется для отображения внешнего уровня цитирования, вторая и последующие — для вложенных уровней цитирования.
none Текст отображается без кавычек.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
Таблица 1. Кавычки в HTML

Описание Внешний вид Юни код HTML- код
Двойная кавычка « \0022 "
Апостроф \0027 '
Открывающая одинарная кавычка \2018
Закрывающая одинарная кавычка \2019
Закрывающая двойная кавычка \201C
Правая двойная кавычка \201D
Двойная нижняя кавычка \2E42
Открывающая левая кавычка «ёлочка» « \00AB «
Закрывающая правая кавычка «ёлочка» » \00BB »
Нижняя одинарная открывающая кавычка \201A
Верхняя одинарная обратная кавычка \201B
Нижняя двойная открывающая кавычка \201E
Двойная верхняя обратная кавычка \201F
Одинарная открывающая (левая) французская угловая кавычка \2039
Одинарная закрывающая (правая) французская угловая кавычка \203A

Как вставить текст css в html?

5e8f7bd037396755159661.png

Всем привет! я прохожу задание здесь
По заданию я должен скачать образец текста и css и написать код как на образце скриншота .
В общем по заданию -Предоставленный CSS должен быть включён в соответствующий тег. Сам код css выглядит так как на скрине

body < max-width: 800px; margin: 0 auto; >.sender-column < text-align: right; >h1 < font-size: 1.5em; >h2 < font-size: 1.3em; >p,ul,ol,dl,address < font-size: 1.1em; >p, li, dd, dt, address

Код моей работы выглядит так

  • First semester: 9 September 2016
  • Second semester: 15 January 2017
  • Third semester: 2 May 2017
  1. Turning H2O into wine, and the health benefits of Resveratrol (C14H12O3.)
  2. Measuring the effect on performance of funk bassplayers at temperatures exceeding 30°C (86°F), when the

    audience size exponentially increases (effect of 3 &times 103 increasing to 3 &times 104.)

  3. HTML and CSS constructs for representing musical scores.

Собственно вопрос: куда мне вставить код css в моем html документе ?

  • Вопрос задан более трёх лет назад
  • 2764 просмотра

14 комментариев

Средний 14 комментариев

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

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