CSS（一） 文字/文体属性、颜色属性和选择器合集

一、规定文字的属性：

 

属性类型	取值	快捷键	注意点
文字样式	italic: 倾斜 normal：正常，默认就是正常	fs font-style: italic; fsn font-style: normal;	无
文字粗细	bold bolder lighter，默认就是细线	fw font-weight: ; fwb font-weight: bold; fwbr font-weight: bolder;	无
文字大小	格式：font-size: 30px; 单位：px (像素 pixel)	fz：font-size.	通过font-size设置大小一定要带单位，也就是一定要写px
文字字体	中文：宋体/黑体/微软雅黑 英文：“Times New Roman”/Arial ..........	ff :font-family:	1.如果取值是中文，需要双引号或者单引号括起来。 2.设置的字体必须是电脑已经安装好的字体。

文字属性注意点：

1.如果设置的字体不存在，那么系统会使用默认的字体来显示宋体

2.如果设置的字体不存在，而我们又不想用默认字体怎么办？
可以给字体设置备选方案
格式：font-family:"字体","备选方案",.......;

3.如果想给中文和英文分别设置字体，怎么办？
但凡是中文字体，里面包含了英文
但凡是英文字体，里面都没有包含中文
也就是说中文字体可以处理英文，而英文字体不能处理中文
注意点：如果想给界面中的英文单独设置字体，那么英文的字体必须写在中文的前面

并不是名称是英文的就是英文字体，中文字体都有自己的英文名称，所以是不是中文字体主要看能不能处理中文

4.存在直接指明四个属性的方法：

font: style weight size family;
例如：
font: italic bold 10px "楷体";

 

注意点：
1.在这种缩写格式中，有的属性值是可以省略的
style 可以省略
weight 可以省略
2.在这种缩写格式中style和weight的位置可以交换
size 不能省略
family 不能省略
3.size和family的位置不能随便乱放的
size一定要写在family的前面，而且size和family必须写在所有属性的最后

二、文本属性：

 

文本属性	格式	取值	快捷键	注意点
文本装饰	text-decoration: xxxxx;	underline 下划线 line-through 删除线 overline 上划线	td text-decoration: none; tdu text-decoration: underline; tdo text-decoration: overline; text-decoration: line-through;	无
文本水平对齐	text-align: ;	left：让字偏向左边 right: 让文字偏向右边 center: 让文字居中	left：让字偏向左边 right: 让文字偏向右边 center: 让文字居中	无
文本缩进	text-indent: xx em;	em:字符 px:像素	ti：text-indent: ; ti2e:text-indent: 2em;	无

三、颜色属性：

格式：color:x

x取值列表：

取值方式	说明	注意点
英文单词	用颜色的英文来取值
rgb(0,0,0)	第一个数用来表示三原色的光源原件红色的亮度 第二个数用来表示三原色的光源原件绿色的亮度 第三个数用来表示三原色的光源原件蓝色的亮度 每个数字的取值在0-255之间，0代表不发光
rgba	rgb同样是三原色，a是代表透明度，取值是0-1，取值越小就越透明。 在前端开发中通过十六进制来表示颜色，其实本质就是rgb #FFEE00 其中FF表示红色， EE表示绿色， 00表示蓝色
#FFEE00	#FFEE00 FF表示红色，EE表示绿色，00表示蓝色
#FE0	如果CSS中俩个十六进制的数字俩位的值是一样的，那么就可以简写为一位。	1.如果当前颜色对应的数字不一样，那么就不能简写 2.如果俩位相同数字不属于同一种颜色，也不能简写

四、选择器合集：

选择器名称	作用	格式	注意点
标签选择器	根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性。	标签名称{ 属性：值; }	1.标签选择器选中的是当前界面中所有标签，而不能单独选中某一个标签 2.标签选择器无论标签藏得多深都能选中。 3.只要是HTML中的标签就可以作为标签选择器（h/a/img/ul/ol/dl/input....）
id选择器	根据指定的id名称找到对应的标签，然后设置属性。	#id名称{ 属性：值; }	1.每个HTML标签都有一个属性叫做id，也就是说每个标签都可以设置id。 2.在同一个界面中id的名称是不可以重复的。 3.在编写id选择器时一定要在id名称前面加上# 4.id的名称只能由字母/数字，下划线组成 4.1 id的名称只能由字母/数字，和下划线组成： a-z， 0-z 4.2 id的名称不能以数字开头 4.3 id的名称不能是HTML标签的名称 5.在企业开发中id是留给JS使用的，因此id不能用来修改样式。
类选择器	根据指定的类名找到相对应的标签，然后设置属性。	.class名称{ 属性：值; }	1.每个HTML标签都有一个属性叫做class， 也就是说每个标签都可以设置类名。 2.同一个界面中class的名称是可以重复的。 3.在编写class选择器时一定要在class名称前面加上. 4.类名的命名规范和id的命名规范是一样的。 5.类名是专门用来给某个特定的标签设置样式的。 6.在HTML中每个标签可以同时绑定多个类名 格式：class="类名1 类名2 ···"
后代选择器	找到指定标签的后代标签，设置属性。	标签名称1 标签名称2{ 属性：值 }	先找到名称叫做标签1的标签，然后再在这个标签下面取值查找所有名称叫做标签2的标签，然后设置属性。   1.后代选择器必须用空格隔开。 2.后代不仅仅是儿子，也包括孙子/重孙子 只要最终是放到指定标签中的都是后代 3.后代选择器不仅仅是使用标签名称，还可以使用其他选择器 例如： .class名 标签名{} 4.可以设置多重后代，必须从最外面的标签开始找 例如：标签名 标签名2 标签名3···{}
子元素选择器	找到指定标签中所有特定的直接子元素，然后设置属性	标签名称1>标签名称2{ 属性：值; }	先找到名称叫做“标签名称1”的标签，然后在这个标签中查找所有直接子元素名称叫做“标签名称2”的元素。   1.子元素选择器只会查找儿子，不会查找其他被嵌套的标签。 2.子元素选择器之间用>连接，不能出现空格。 3.子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器。 4.子元素选择器可以通过>符号一直延续下去。
交集选择器	给所有选择器选中的标签中，相交的那部分标签设置属性。		1.选择器和选择器之间没有任何连接符号。 2.选择器可以使用标签名称/id名称/class名称。
并集选择器	给所有选择器选中的标签设置属性。	选择器1，选择器2{ 属性：值 }	1.并集选择器必须使用,(逗号)连接。 2.选择器可以使用标签名称/id名称/class名称。
相邻兄弟选择器/通用兄弟选择器	相邻兄弟选择器：给指定选择器后面紧跟着的那个选择器选择的标签设置属性。 通用兄弟选择器： 给指定选择器后面所有选择器选中的标签添加属性。	选择器1+选择器2{ 属性：值 }   选择器1~选择器2{ 属性：值 }	1.相邻兄弟选择器必须通过+连接。 2.相邻兄弟选择器只能选中紧跟其后的那个标签，不能选择被隔开的标签。   1.通用兄弟选择器必须用~连接。 2.通用选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有隔开都可以被选中。
序选择器	根据指定标签找到对应标签的同级第N个标签或者同级同类型的第N个标签	1.同级别的第几个 :first-child 选中同级别标签中的第一个标签 :last-child 选中同级别标签中的最后一个标签 :nth-child(n) 选中同级别标签中的第n个标签 :nth-last-child(n) 选中同级别标签中的倒数第n个标签 :only-child 选中同级别标签中的唯一一个标签 注意点：不区分类型 2.同类型的第几个 :first-of-type 选中同级别同类型中的第一个标签。 :last-of-type 选中同级别同类型的最后一个标签。 :nth-of-type(n) 选中同级别同类型的第n个标签。 :nth-last-of-type(n) 选中同级别同类型的第n个标签。 :only-of-type 选中同级别同类型的唯一个标签。	无
属性选择器	根据指定的属性名称找到对应的标签，然后设置属性。	标签名[attribute] 标签名[attribute=value]	无
通配符选择器	给当前界面上所有的标签设置属性。	*{ 属性：值; }	由于通配符选择器是设置界面上所有的标签的属性， 所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，会导致性能比较差，所以在企业开发中一般不会选择通配符选择器。

~此文章参考李南江前端视频笔记内容。