CSS基础——CSS基础（下）
目录
继承
选择器的优先级
优先级规则
a的伪类优先级
文本标签及样式
文本标签
em、strong、i、b
small
cite
q
blockquote
sup、sub
ins、del
code、pre
文本样式
text-transform
text-decoration
letter-spacing
word-spacing
text-align
text-indent
长度单位
像素px
百分比%
em
颜色单位
十六进制
字体样式
颜色
大小
字体格式
粗体和斜体
font-style
font-weight
font-variant
font
字体分类
行间距
line-height
继承
像儿子可以继承父亲的遗产那样，在CSS中，祖先元素的样式，他是可以被其后戴园所继承的
利用继承功能，可以将一些基本样式设计放到父元素的样式中，这样其所有的后代元素都可以自动的继承其基本样式了
并不是所有的样式，都会被子元素所继承，比如我们背景相关的样式是不会被继承的
选择器的优先级
当我们使用了不同的选择器来选中同一个元素值的时候，并且设置相同样式的时候，我们的样式之间便会产生冲突，这个时候就会出现我们选择器优先级的决定权。
优先级规则
内链样式：优先级1000
id选择器：优先级100
类和伪类：优先级10
元素选择器：优先级1
通配选择器：优先级0
继承的样式，他是没有优先级的
注意：当选择器中包含了多种选择器的时候，需要将多种选择器的优先级相加之和，然后再比较。
但是，选择器优先级计算不会超过他的最大的数量级。如果选择器的优先级一致，则谁靠后，选择谁。
并集选择器的优先级是单独计算的。
注意：可以再样式的最后添加一个 !important ，这个时候该样式则会优先使用，他的优先级会超过内链样式。在开发中避免使用这个 !important
a的伪类优先级
:link
:visited
:hover
:active
a的4个伪类优先级是一样的，我们在使用的时候要按照上面的顺序定义其样式即可。
文本标签及样式
文本标签
em、strong、i、b
这两个标签都是用来表示一个强调的内容。
em：主要用来表示语气上的强调。（浏览器中默认使用斜体）
strong：主要表示强调的内容，比em更强烈（浏览器中默认使用粗体）
h5中规定，对于不需要着重的内容，而是单纯地加粗和斜体就可以使用i和b，他们两个没有任何语义
i：浏览器中默认使用斜体
b：浏览器中默认使用粗体
small
标签中的内容要比父元素中的文字要小一些。
h5中使用small标签来表示细则一类的内容。比如：合同中的小字体，网站中的版权声明文字
cite
用来表示网页中加书名号的内容，都可以使用cite标签，比如：书名、电视剧名……
q
用来表示一个短的应用（也就是行内引用）
标签应用的内容，浏览器会给我们自动添加双引号，不同浏览器中会不一样
blockquote
块元素，用来表示一个长引用。
sup、sub
使用sup标签来设置一个上标。比如2的三次方
使用sub标签来设置一个下标。
ins、del
del标签中的内容，会自动的添加删除线
ins标签标识插入内容，标签的内容会自动添加下划线
code、pre
pre预格式标签，会将代码中的格式保留，不会忽略其中的空格。
code用来表示代码的。我们一般结合使用pre和code来表示一段代码。
文本样式
text-transform
可以用来设置文本的大小写。（对中文没有任何意义）
可选值：
none，默认值，该怎么显示就怎么显示，不做任何处理；
capitalize,单词首字母大写，通过单词边界（空格也不准去）来识别的单词的；
uppercase，所有字母大写；
lowercase，所有字母都小写。
text-decoration
可以用来设置文本进行修饰
可选值：
none：默认值，不添加任何修饰动作，正常显示
underline：为文本添加了下划线
overline：为文本添加上划线
line-through：为文本添加删除线
注意：超链接a会默认添加下划线，也就是超链接的text-decoration默认设置了underline
letter-spacing
可以用来指定字符间距
word-spacing
可以用来设置单词之间的间距，实际上就是设置词与词之间的空格的大小，对中文没啥意义。
text-align
用来设置文本对齐方式。默认左对齐
可选值：
left：默认值，文本靠左对齐
right：文本靠右对齐
center：文本居中对齐
justify：文本两端对齐（通过调整文本之间的空格大小，来达到两端对齐的目的的）
text-indent
用来设置首行缩进的。当给制定一个正值时候，则会自动向右侧缩进指定的像素。，如果为他制定一个负值，则会向左移动指定的单位像素。
通过这种方式可以将一些不想显示的文字隐藏起来。
可选值：
长度单位
像素px
像素是我们在网页开发中经常使用的单位。一个像素就相当于我们屏幕中的一个点，我们的屏幕实际上就是由这些像素点构成的。但是这些像素点，是不能直接显示看见的。
注意：不同的显示器一个像素的大小也不相同，显示效果越是好的越清晰，像素越小，则像素越大。
百分比%
也可以将单位设置一个百分比的样式。 这样浏览器就会根据父元素的的样式来计算此值
好处：使用百分比的时候，当父元素的属性值发生变化的时候，子元素他会按照比例自动的发生变化；在我们创建一个自适应的页面时，经常使用到百分比作为单位的。
em
和我们上面说说的百分比类似，他是相当于当前元素的字体大小来计算的。，1em=1font-size；em是跟随字体大小来变化的（也就是使用em的时候，当字体大小发生变化时，em也会随之变化。）
当设置字体相关的样式时，经常会有人使用em
颜色单位
十六进制
用十六进制的rgb来表示颜色，原理上和RGB是一致的。只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示。
每组指表示一个颜色。语法：#红色绿色蓝色
十六进制：0 1 2 3 4 5 6 7 8 9 a b c d e f
用来表示的就是 00 - ff之间
00 表示没有，相当于rgb中国你的0
ff表示最大，相当于表示rgb中的255
黑色：#000000
像上面这种两位重复的颜色，我们可以简写，上面的黑色就可以写成 #000
字体样式
颜色
设置字体颜色的时候，使用color；
大小
设置文字大小（浏览器一般默认文字大小是16px），使用font-size，他设置的并不是文字本身的大小。
页面中，每一个文字都是处在了一个看不见的框中，我们设置的font-size，其实是框的高度，并不是字体的大小；一般情况下，文字都要比框小一些。也有的时候会比他打，根据字体的不同显示的效果不同。
字体格式
通过font-family可以指定文字字体格式。当采用某种字体时，如果浏览器支持则使用，不支持的话则使用默认文字字体。
该样式可以同时指定多个字体。多个字体之间使用逗号隔开，有显示有关前面的字体，如果前面没有，则尝试下一个字体
浏览器使用的字体默认就是我们计算机中的字体，如果计算机中有，则使用，没有的话，就无法使用了。
开发中尽量使用正常的字体。小众字体不要使用！！！！
粗体和斜体
font-style
可以用来设置文字的斜体
可选值：normal，默认值，文字正常显示；italic，文字会以斜体显示；oblique，文字会以倾斜的效果显示。
大部分浏览器都不会对斜体和倾斜去做区分，也就是我们设置italic和oblique的效果基本一致，看不出来不同的效果。一般只会去使用italic
font-weight
用来设置文字的加粗的效果
可选值：normal，默认值，文字正藏系那是；bold，文字加粗显示
样式也可以使用100-900之间的9个数值来表示粗细。由于用户的计算机系统中往往没有这么多级别的字体，因此可能会达不到我们的效果。
font-variant
可以用来设置小型大写字母
可选值：normal，默认值，文字正常显示；small-caps，文本已小型大写字母显示
小型大写字母：将所有的字母都以大写形式显示，但是小写字母的大写，要比大写字母的大小小一些。
font
CSS中还未我们提供了一个font的样式，使用这个样式可以同事设置相关字体的所有样式信息
语法：font:加粗 斜体 小型大写 大小/行高 字体
注意：这里前边几个加粗、斜体和小型大写的顺 序无所谓，也可以不写，但是大小和字体 必须写且必须写到他的最后两个
字体分类
网页中将字体分为大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
我们可以将字体设置为这些大的分类
以上这些分类都是一些大的分类，并没有 涉及具体的类型，如果将字体指定为这些 格式，浏览器会自己选择指定类型的字体。
行间距
在css中并没有为我们提供一个设置行间距的样式，我们只能通过设置行高来设置行间距，行高越大行间距越大。
line-height
行高类似于我们上学时候使用的单线本，单线本是一行一行的，线与线之间的距离就是行高，网页中的文字，他其实是在一个看不见的线中，我们饿的文字是默认在行高中垂直居中显示的
通过这个属性可以间接设置行高，可以接收值：
1、直接接收一个大小；
2、可以指定一个百分数。（相对于字体来计算行高）
3、可以直接传一个正整数，则我们的行高会设置字体大小的响应倍数
行间距 = line-height – font-size
对于单行文本来说，可以将行高设置为和父元素的高速一致，这样可以使得单行文本在父元素中垂直居中
好了CSS基础（下）就到这里。
欢迎大家点击下方卡片，关注《coder练习生》