CSS - Цитаты: Добавление的性格а вашему тексту

Здравствуйте, будущие веб-дизайнеры! Сегодня мы погрузимся в有趣的 и часто упускаемый из виду CSS-свойство: цитаты. Как ваш доброжелательный сосед по компьютеру, я с радостью делюсь с вами этой маленькой жемчужиной. Поверьте мне, к концу этого урока вы будете цитировать как профессионал!

Что такое цитаты в CSS?

Прежде чем мы начнем, давайте поймем, что такое цитаты в CSS. Это не только для выделения речи или цитирования источников; в CSS цитаты — это мощный инструмент для автоматического добавления кавычек в ваш контент. Это как если бы у вас был крошечный робот, который следует за вашим текстом и добавляет эти小小的 изогнутые знаки wherever вы告诉他 делать это!

Possible Values (Возможные значения)

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

Значение	Описание
none	Не использовать кавычки
<string>	Указывает, какие кавычки использовать
initial	Устанавливает значение по умолчанию
inherit	Наследуется от родительского элемента
auto	Браузер решает на основе языка

Теперь давайте рассмотрим их по одному.

Применяется к

Before we dive deeper, it's important to note that the quotes property applies to all elements. However, it's most commonly used with the <q> and <blockquote> elements. Think of it as a universal seasoning - you can add it to any element, but it tastes best with certain dishes!

Синтаксис

Основной синтаксис для использования цитат прост:

селектор {
quotes: значение;
}

Просто, правда? Теперь давайте рассмотрим каждое значение подробно.

CSS quotes - none Value (Значение none)

Когда вы устанавливаете quotes: none, вы essentially telling CSS, "No quotes, please!" This is useful when you want to override default quotation marks. Давайте посмотрим пример:

q {
quotes: none;
}

<p>Она сказала <q>Hello, world!</q></p>

В этом случае текст внутри тега <q> не будет иметь кавычек. Это как шепот, не снижая голоса!

CSS quotes - <string> Value (Значение )

Это где начинается веселье! Вы можете указать exactly какие символы вы хотите для ваших кавычек. Синтаксис следующий:

селектор {
quotes: "open-quote1" "close-quote1" "open-quote2" "close-quote2";
}

Давайте попробуем пример:

q {
quotes: "<<" ">>" "(" ")";
}

<p>Она закричала <q>Какой <q>прекрасный</q> день!</q></p>

Это будет отrendered как: She exclaimed <<What a (wonderful) day!>>

Не правда ли это классно? Это как если бы ваш текст сделал facelift!

CSS quotes - initial Value (Значение initial)

Значение initial устанавливает свойства на значение по умолчанию. Это как если бы вы нажали кнопку сброса на ваших кавычках. Для большинства браузеров это эквивалентно:

q {
quotes: '"' '"' "'" "'";
}

Это дает вам стандартные английские кавычки: двойные кавычки для внешнего уровня, одинарные кавычки для внутреннего уровня.

CSS quotes - auto Value (Значение auto)

Значение auto как smart assistant для ваших кавычек. Он выбирает подходящие кавычки на основе языка вашего документа. Например:

:root {
quotes: auto;
}

Теперь, если ваш HTML имеет lang="fr", он может использовать «guillemets» для французского текста. Это как если бы у вас был polyglot typesetter в вашей команде!

CSS quotes - Using :lang pseudo-class (Использование псевдокласса :lang)

Here's where we can get really fancy. The :lang pseudo-class allows us to specify different quotes for different languages. Check this out:

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

This sets up different quote styles for English, French, and German. It's like teaching your website to speak multiple languages!

Putting It All Together (Соединение всего вместе)

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

<p lang="en">She said, <q>I love <q>CSS</q>!</q></p>
<p lang="fr">Elle a dit, <q>J'adore <q>CSS</q> !</q></p>
<p lang="de">Sie sagte, <q>Ich liebe <q>CSS</q>!</q></p>

:root { quotes: auto; }
:lang(en) q { quotes: '"' '"' "'" "'"; }
:lang(fr) q { quotes: "«" "»" "‹" "›"; }
:lang(de) q { quotes: "„" """ "‚" "'"; }

q::before { content: open-quote; }
q::after { content: close-quote; }

This will render each sentence with language-appropriate quotation marks. It's like having a polyglot typesetter working on your website!

Заключение

И вот мы arrived, друзья! Мы совершили путешествие через мир CSS цитат, от простого к сложному. Помните, цитаты — это не только о пунктуации; они добавляют性格 и культурный контекст вашему тексту. Они — специи в вашей textual cuisine!

While вы продолжаете свое путешествие в веб-дизайне, не забывайте экспериментировать с цитатами. Попробуйте разные стили, mix языки и посмотрите, что лучше всего подходит для вашего сайта. Кто знает? Вы можете quote yourself к звезде веб-дизайна!

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

Credits: Image by storyset