css属性 - 文本

text-decoration

text-decoration用于设置文字的装饰线
decoration是装饰/装饰品的意思;

常见属性值如下：

nano：无任何装饰线
underline：下划线
overline：上划线
line-through：中划线（删除线）

a元素有下划线的本质就是被添加了text-decoration属性

text-transform

text-transform用于设置文字的大小写转换
Transform单词是使变形/变换(形变);

text-transform有几个常见的值：

capitalize：将每个单词的首字符变为大写
uppercase：将每个单词的所有字符变为大写
lowercase：将每个单词的所有字符变为小写
none：没有任何影响

在实际开发中用JavaScript代码转化的更多

text-indent

text-indent用于设置第一行内容的缩进
text-indent: 2em; 表示缩进2个文字

text-align

text-indent用于设置文本的对齐方式

常用的值如下：

left: 左对齐
right：右对齐
center：正中间显示
justify：两端对齐

letter-spacing、word-spacing

letter-spacing、word-spacing分别用于设置字母、单词之间的间距
默认是0，可以设置为负数

css属性 - 字体

font-size

font-size决定文字的大小

常用设置：

具体数值 + 单位
如10px，也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%
百分比
基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

font-family

font-family用于设置文字的字体名称

可以设置1个或者多个字体名称;
浏览器会选择列表中第一个该计算机上有安装的字体;
或者是通过 @font-face 指定的可以直接下载的字体。

font-weight

font-weight用于设置文字的粗细（重量）

常见的取值:

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
normal：等于400
bold：等于700

strong、b、h1~h6等标签的font-weight默认就是bold

font-style

font-style用于设置文字的常规、斜体显示

normal: 常规显示
italic(斜体)：用字体的斜体显示(通常会有专门的字体)
oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)

em、i、cite、address、var、dfn等元素的font-style默认就是italic

font-variant

font-variant可以影响小写字母的显示形式

variant是变形的意思;

可以设置的值如下：
normal：常规显示
small-caps：将小写字母替换为缩小过的大写字母

line-height

line-height用于设置文本的行高

可以理解为一行文字所占据的高度

注意区分height和line-height的区别

height：元素的整体高度
line-height：元素中每一行文字所占据的高度

应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中

让line-height等同于height

css常见选择器

选择器的种类繁多，大概可以归类为：

通用选择器（universal selector）
元素选择器（type selectors）
类选择器（class selectors）
id选择器（id selectors）
属性选择器（attribute selectors）
组合（combinators）
伪类（pseudo-classes）
伪元素（pseudo-elements）

通用选择器

通用选择器即所有元素都会被选中。
一般用作给所有元素作一些通用性的设置，如如内外边距和重置一些内容。

效率较低，尽量不使用。

简单选择器

简单选择器是开发中用的最多的选择器：

元素选择器（type selectors）, 使用元素的名称;
类选择器（class selectors）, 使用 .类名 ;
id选择器（id selectors）, 使用 #id

简单选择器

一个HTML文档里面的id值是唯一的，不能重复;
id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识;
最好不要用标签名作为id值
中划线又叫连字符（hyphen）

属性选择器

拥有某一个属性 [att]
属性等于某个值 [att=val]
属性选择器
其它了解的
[attr*=val]:属性值包含某一个值val;
[attr^=val]:属性值以val开头;
[attr$=val]:属性值以val结尾;
[attr|=val]:属性值等于val或者以val开头后面紧跟连接符-;
[attr~=val]:属性值包含val, 如果有其他值必须以空格和val分割；

后代选择器

后代选择器一: 所有的后代(直接/间接的后代)

选择器之间以空格分割

后代选择器二: 直接子代选择器(必须是直接自带)

选择器之间以 > 分割;

兄弟选择器

兄弟选择器一:相邻兄弟选择器

使用符号 + 连接

兄弟选择器二: 普遍兄弟选择器 ~

使用符号 ~ 连接

选择器组 – 交集选择器

交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)

在开发中通常为了精准的选择某一个元素;

并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)

在开发中通常为了给多个元素设置相同的样式;

伪类选择器

什么是伪类呢?

Pseudo-classes: 翻译过来是伪类;
伪类是选择器的一种，它用于选择处于特定状态的元素;

常见的伪类有：
1.动态伪类（dynamic pseudo-classes）

:link、:visited、:hover、:active、:focus

使用举例：

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接（鼠标在链接上长按住未松开）
:focus指当前拥有输入焦点的元素（能接收键盘输入）
- 文本输入框一聚焦后，背景就会变红色
  因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素

使用注意：

:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效

动态伪类编写顺序建议为

:link、:visited、:focus、:hover、:active

直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了

相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red
除了a元素，:hover、:active也能用在其他元素上

2.目标伪类（target pseudo-classes）

:target
3.语言伪类（language pseudo-classes）
:lang( )
4.元素状态伪类（UI element states pseudo-classes）
:enabled、:disabled、:checked
5.结构伪类（structural pseudo-classes）
:nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
:first-child、:last-child、:first-of-type、:last-of-type
:root、:only-child、:only-of-type、:empty
6.否定伪类（negation pseudo-classes）
:not()
所有的伪类：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes