AtoZ CSS屏幕录像：CSS Quotes属性

傷城~ 2022-12-03 09:53 143阅读 0赞

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series [here][].

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在[此处][here]找到该系列的其他条目。

## 成绩单 **(**Transcript**)** ##

Single and double quotes appear frequently when writing code.

编写代码时，单引号和双引号经常出现。

However, when displaying any quoted text like the `q` element or when using apostrophes, we should use smart quotes.

但是，当显示任何带引号的文本(例如`q`元素)或使用撇号时，我们应使用智能引号。

These are often added by the browser, but we can control their appearance and the choice of character from CSS.

这些通常是由浏览器添加的，但是我们可以通过CSS控制它们的外观以及字符的选择。

In this episode about we’ll learn all about:

在这一集中，我们将学习以下所有内容：

*  the difference between dumb quotes and smart quotes
    
    哑引号和智能引号之间的区别
 *  the different styles of quotes used internationally
    
    国际上使用不同风格的报价
 *  and the somewhat under-used CSS `quotes` property
    
    以及未得到充分使用CSS `quotes`属性

### 聪明还是笨？ **(**Smart or Dumb?**)** ###

When we create a string of text in a code editor, we use “dumb quotes”.

在代码编辑器中创建文本字符串时，我们使用“哑引号”。

These are either ‘single quotes’ or “double quotes” and are straight. The same character is used at the beginning of the string as at the end.

这些是“单引号”或“双引号”并且是直的。 在字符串的开头和结尾使用相同的字符。

Smart quotes are the correct typographic choice for any quotes or apostrophes that are displayed in the browser. They are often curly or sloped and the start and end quotes are often different.

对于在浏览器中显示的任何引号或撇号，智能引号都是正确的印刷选择。 它们通常是卷曲的或倾斜的，并且开始和结束引号通常是不同的。

If your document uses the `utf-8` character set you can add smart quotes directly into the HTML with the following keyboard shortcuts on a Mac:

如果您的文档使用`utf-8`字符集，则可以在Mac上使用以下键盘快捷键将智能引号直接添加到HTML中：

‘ ⌥+]
    ’ ⌥+⇧+]
    “ ⌥+[
    ” ⌥+⇧+[

And on Windows:

在Windows上：

‘ alt+0145
    ’ alt+0146
    “ alt+0147
    ” alt+0148

Alternatively, the character entities can be used:

或者，可以使用字符实体：

‘ ‘
    ’ ’
    “ “
    ” ”

### 国际行情 **(**International Quotes**)** ###

When researching this episode, it came as a bit of a surprise to me that there is so much variation in the style of quote marks from country to country.

在研究此情节时，让我感到惊讶的是，不同国家之间的引号样式存在很大差异。

English quotes look “like this” – with left and right double (or single) quotes.

英文引号看起来“像这样” –左右双引号(或单引号)。

French quotes use right and left «angle quotes».

法语引号使用左右“角引号”。

And »Danish quotes« use the same characters but the other way round.

而“丹麦引号”则使用相同的字符，但反之。

Bulgarian, Czech, Estonian, Georgian, Icelandic, Russian, Slovak, Slovene and in Ukrainian quotes use the bottom double quote as the open quote and the right double quote to close.

保加利亚语，捷克语，爱沙尼亚语，格鲁吉亚语，冰岛语，俄语，斯洛伐克语，斯洛文尼亚语和乌克兰语中的报价均使用底部双引号作为开放报价，并使用右双引号将其关闭。

Other countries use a combination of these styles and a [table of quote marks can be found on Wikipedia][].

其他国家/地区使用这些样式的组合，并且[可以在Wikipedia上找到引号表][table of quote marks can be found on Wikipedia] 。

### CSS中的`quotes` **(**`quotes` in CSS**)** ###

In CSS, there’s a `quotes` property that allows us to control how the browser generates `quotes` for elements like `q` which is for inline quotations.

在CSS中，有一个`quotes`属性，使我们能够控制浏览器如何生成`quotes`对于类似的元件`q`这是内嵌报价。

q {
      quotes: "“" "”";
    }

The two space separated strings specify the characters to use for the opening `quote` and the closing `quote` mark.

两个用空格分隔的字符串指定用于开头`quote`和结尾`quote`字符。

It’s possible to use two sets of strings to specify how nested `quotes` appear.

可以使用两组字符串来指定嵌套`quotes`显示方式。

q {
      quotes: "“" "”" "‘" "’";
    }

With this snippet, any nested `quotes` will use single curly quotes instead of double curly quotes.

使用此代码段，所有嵌套`quotes`都将使用单卷引号而不是双卷引号。

> “the quote contained a ‘nested’ quote”
> 
> “报价包含“嵌套”报价”

The `q` element will have quote marks generated by the browser but the `blockquote` element will not. We can add in `quotes` using pseudo elements and the `content` property.

`q`元素将具有浏览器生成的引号，而`blockquote`元素则不会。 我们可以使用伪元素和`content`属性添加`quotes` 。

blockquote {quotes:"“" "”" "‘" "’";}
    blockquote: before {content:open-quote;}
    blockquote: after {content:close-quote;}

These can be styles with any other CSS properties to achieve the desired design result.

这些可以是具有任何其他CSS属性的样式，以实现所需的设计结果。

Finally, we can combine our knowledge of international quote characters with CSS by changing the `quotes` property based on the language of the document or part of the document.

最后，我们可以通过基于文档或文档一部分的语言更改`quotes`属性来将我们对国际引号字符的了解与CSS结合起来。

We can do this using the `:lang` pseudo class.

我们可以使用`:lang`伪类来做到这一点。

:lang(en) q {quotes: "“" "”";}
    :lang(fr) q {quotes: "«" "»";}
    :lang(pl) q {quotes: "„" "”";}

Now by changing the language attribute of the `html` element, our quote marks are corrected for the corresponding language.

现在，通过更改`html`元素的language属性，我们的引号针对相应的语言进行了更正。

I like the idea of getting subtle details like this right in web design, I’m sure it’s something often overlooked but anything that can be done, big or small, to improve user experience sounds good to me.

我喜欢在网页设计中获得像这样的微妙细节的想法，我敢肯定这是经常被忽略的事情，但是可以做的，大大小小的改善用户体验的一切事情对我来说都是件好事。

> 翻译自: [https://www.sitepoint.com/atoz-css-screencast-quotes/][https_www.sitepoint.com_atoz-css-screencast-quotes]

[here]: https://www.sitepoint.com/tag/atoz-css/
[table of quote marks can be found on Wikipedia]: http://en.wikipedia.org/wiki/International_variation_in_quotation_marks
[https_www.sitepoint.com_atoz-css-screencast-quotes]: https://www.sitepoint.com/atoz-css-screencast-quotes/