样式化文本

本文章记于2021.04.22

1.伪元素

::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)

2.属性

color
font-family
font-size，元素的 font-size 属性是从该元素的父元素继承的
font-style
font-weight
text-transform
text-decoration
text-shadow
text-align:left,right,center,justify
line-height，设置文本每行之间的高，无单位的值乘以 font-size来获得 line-height
letter-space
word-space

text-transform相关取值：

none: 防止任何转型
uppercase: 将所有文本转为大写
lowercase: 将所有文本转为小写
capitalize: 转换所有单词让其首字母大写
full-width: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐

text-decoration取值：

注意text-decoration 是一个缩写形式，它由text-decoration-line, text-decoration-style和 text-decoration-color构成

none: 取消已经存在的任何文本装饰
underline: 文本下划线
overline: 文本上划线
line-through: 穿过文本的线 strikethrough over the text

text-shadow

text-shadow: 4px 4px 5px red;
四个属性如下:
1).  阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的，这个值必须指定
2).  阴影与原始文本的垂直偏移;效果基本上就像水平偏移，向上/向下移动阴影，必须指定
3).  模糊半径 - 更高的值意味着阴影分散得更广泛
如果不包含此值，则默认为0，没有模糊
可以使用大多数的 CSS 单位 length and size units
4).  阴影的基础颜色，可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定，默认为 `black`

通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本
text-shadow: -1px -1px 1px #aaa,
             0px 4px 1px rgba(0,0,0,0.5),
             4px 4px 5px rgba(0,0,0,0.7),
             0px 0px 7px rgba(0,0,0,0.4);

font其他属性
文本布局

说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用

3.font简写

font-style,font-variant,font-weight,font-stretch,font-size,line-height,font-family
使用 font 的简写形式，在所有这些属性中，只有 font-size 和 font-family 是一定要指定的
font-size和line-height属性之间必须放一个正斜杠
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

4.样式化列表

列表默认值

*   `<ul>`和  `<ol>`元素设置`margin`的顶部和底部: 16px(1em) 0;和 `padding-left: 40px(2.5em)`; （在这里注意的是浏览器默认字体大小为16px）
*   `<li>` 默认是没有设置间距的
*   `<dl>`元素设置 margin的顶部和底部: 16px(1em) ，无内边距设定
*   `<dd>`元素设置为： `margin-left` `40px` (`2.5em`)
*   在参考中提到的 `<p>`元素设置 margin的顶部和底部: 16px(1em)，和其他的列表类型相同

列表具有的特定属性：

• list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字，由于某种原因导致图像无法加载，则 type 将用作回退
• list-style-position：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外
• list-style-image：允许为项目符号使用自定义图片，而不是简单的方形或圆形
  （1）start 属性允许从1 以外的数字开始计数，<ol start="4">//4 5 6 7
  （2）reversed属性将启动列表倒计数，<ol start="4" reversed>//4 3 2 1
  （3）value属性允许设置列表项指定数值，示例如下:

<ol>
  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

CSS计数器提供用于自定义列表计数和样式的高级工具，但它们相当复杂

• @counter-style
• counter-increment
• counter-reset

5.样式化链接

记忆方法：LoVe Fears HAte.

• Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用:link伪类来应用样式
• Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 :visited伪类来应用样式
• Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用 :hover伪类来应用样式
• Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus() 它可以使用 :focus伪类来应用样式
• Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用:active伪类来应用样式
  链接中包含图标：a[href*="http"]，background属性url添加图片

6.web字体（Web字体作为一种技术从 Internet Explorer 4 开始就得到了的支持）

@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器
字体一般都不能自由使用
必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在站点上)提供字体创建者
不应该在没有适当的授权的情况下偷窃字体

• 免费的字体经销商：这是一个可以下载免费字体的网站(可能还有一些许可条件，比如对字体创建者的信赖)
  比如： Font Squirre，dafont 和 Everything Fonts
• 收费的字体经销商：这是一个收费则字体可用的网站，例如fonts.com或myfonts.com
  也可以直接从字体铸造厂中购买字体，例如Linotype，Monotype或 Exljbris
• 在线字体服务：这是一个存储和为提供字体的网站，它使整个过程更容易