样式化文本

本文章记于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.样式化列表

列表默认值

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

列表具有的特定属性：

list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字，由于某种原因导致图像无法加载，则 type 将用作回退
list-style-position：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外
list-style-image：允许为项目符号使用自定义图片，而不是简单的方形或圆形
（1）start 属性允许从1 以外的数字开始计数，


  Toast pitta, leave to cool, then slice down the edge.
  Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  Wash and chop the salad.
  Fill pitta with salad, humous, and fried halloumi.

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
在线字体服务：这是一个存储和为提供字体的网站，它使整个过程更容易