3.20 CSS属性及选择器

CSS基础知识

一、用处

在前端开发中，CSS只有一个作用，就是用来修改样式

二、格式

外链样式表

内部样式表

内嵌样式表

注意：

1. style标签必须写在head标签的开始标签和结束标签之间
2. style标签中的type属性其实可以不用写，默认就是type="text/css"
3. 设置样式时必须按照固定格式来设置，注意标点符号，不能省略

三、 文字属性

1. font-style（fs+tab）：规定文字的样式
2. font-weight（fw+tab）：规定文字的粗细
   3.font-size/line-height（fz/lh+tab）：规定文字的大小/行高
3. font-family（ff+tab）：规定文字的字体
4. 简写：font：style weight size/lineheight family
   注意属性值之间用空格隔开，其中前两个可以不写，默认值是normal，顺序也可以颠倒，但是后两个必须填写且位置不能变

注意：

1. 文字的粗细可以用英文单词赋值，也可以是100-900整百的数字，100最细，900最粗
2. 文字的字体如果是中文需要用" "或者' '包起来。字体必须是电脑里已安装的字体，如果设置的字体不存在，系统会使用默认的字体（宋体）来显示，字体可以填写多个用来设置备选方案
3. 由于中文字体中包含英文字体，英文字体中却不包含中文，为了中文和英文字体不一样，可以把英文字体写在前面，中文字体写在后面，然后用，隔开
4. 企业开发中常用字体：
   中文：宋体、黑体、微软雅黑
   英文：Times New Roman、Arial
   并不是名称是英文就一定是英文字体，取决于它是否能够处理中文

四、文本属性

1. text-decoration(td+tab)：规定文本的装饰
2. text-align(ta+tab)：规定文本的对齐方式
3. text-indent(ti+tab)：规定文本首行缩进（2em）

五、颜色属性

color=red：英文单词赋值
color=rgb(255,0,0)：三原色赋值，分别代表红绿蓝，0代表不发光，255代表最亮，值越大越亮，注意用逗号隔开
color=rgba(255,0,0,0)：三原色赋值的同时a控制透明度，取值范围0-1，0为完全透明，1为不透明，注意用逗号隔开
color=#FF0000：十六进制颜色赋值，FF=R，00=G，00=B
十六进制转十进制：十六进制数的第一位*16+第二位数=十进制数
color=#F00：十六进制颜色赋值的缩写，每两位的值都是一样的就可以简写为一个数。

六、标签选择器

1. 根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
2. 格式：标签名{ }
3. 标签选择器选中的是当前界面中所有的标签，不管隐藏的多深，但是不能单独选中某一个标签，
4. 只要是html中的标签都可以作为便签选择器

七、id选择器

1. 根据指定的id名称找到对应的标签，然后设置属性
2. 格式：#id名{ }
3. 每个html标签都有一个id属性：id=" "
4. id相当于人的身份证号码，在当前界面中不能重复
5. id名称是有规范的，只能由字母，数字和下划线组成。不能是html标签名，而且数字不能开头
6. 在企业开发中一般情况下仅仅是为了样式我们不会使用id选择器，id选择器是留给JS用的

八、类选择器

1. 根据指定的类名称找到对应的标签，然后设置属性
2. 格式：.类名{ }
3. 每个html标签都有一个class属性：class=" "
4. 同一界面中class的名称是可以重复的
5. 类名的命名规范和id名的命名规则一样
6. 一个标签可以绑定多个类名，两个类名之间必须用空格隔开：class="类名1 类名2"

九、后代选择器

1. 根据指定的名称找到所有的后代标签，然后设置属性
2. 格式：名称1 名称2{ }
3. 两个名称之间必须用空格隔开，可以无限延续下去
4. 后代不仅仅指儿子，也包括孙子/重孙等，只要是在父标签内的指定标签都会被设置
5. 两个名称可以是标签名，id名和类名

十、子元素选择器

1. 根据指定的名称找到特定的直接子元素，然后设置属性
2. 格式：名称1>名称2{ }
3. 两个名称之间必须用 > 隔开，不能有空格，可以无限延续下去
4. 子元素选择器只会找到指定直接的子标签
5. 两个名称可以是标签名，id名和类名

十一、交集选择器

1. 给所有选择器选中的标签中相交的那部分标签设置属性
2. 格式：名称1名称2{ }
3. 两个名称之间没有任何符号
4. 作为了解，企业开发少用
5. 两个名称可以是标签名，id名和类名

十二、并集选择器

1. 给所有选择器选中的标签设置属性
2. 格式：名称1,名称2{ }
3. 两个名称之间必须用 , 隔开，不能有空格，可以无限延续下去
4. 两个名称可以是标签名，id名和类名

十三、兄弟选择器

相邻兄弟选择器

1. 给指定名称选择器后面紧跟着的标签设置属性
2. 格式：名称1+名称2{ }
3. 两个名称之间必须用 + 链接，不能有空格
4. 两个名称可以是标签名，id名和类名

通用兄弟选择器

1. 给指定名称选择器后面的所有的指定名称标签设置属性
2. 格式：名称1~名称2{ }
3. 两个名称之间必须用 ~ 链接，不能有空格
4. 两个名称可以是标签名，id名和类名

十四、序选择器

css3中新增的选择器最具代表性的就是序选择器

同级别的第几个

名称:first-child{ }：选中同级别中的第一个标签
名称:last-child{ }：选中同级别中的最后一个标签
名称:nth-child(x){ }：选中同级别中的第x个标签
名称:nth-last-child(x){ }：选中同级别中的倒数第x个标签
名称:only-child{ }：选中父元素中指定的只有唯一的一个的子元素标签，只能有一个标签
名称:nth-child(odd){ }：选中同级别中所有的奇数标签
名称:nth-child(even){ }：选中同级别中所有的偶数标签
名称:nth-child(xn+y){ }：n为计数器，从0开始计数。x和y为指定数字，当x为2，y为0时即为所有偶数项，当x为2，y为1时即为所有奇数项，以此类推，选中同级别中满足计算结果的指定标签
注意：不区分类型

同级别同类型的第几个

名称:first-of-type{ }：选中同级别中同类型的第一个标签
名称:last-of-type{ }：选中同级别中同类型的最后一个标签
名称:nth-of-type(x){ }：选中同级别中同类型的第x个标签
名称:nth-last-of-type(x){ }：选中同级别中同类型的倒数第x个标签
名称:only-of-type{ }：选中父元素中指定的同一个类型的标签，可以有多个标签但只能有一个指定的类型标签
名称:nth-of-type(odd){ }：选中同级别中同类型的所有的奇数标签
名称:nth-of-type(even){ }：选中同级别中同类型的所有的偶数标签
名称:nth-of-type(xn+y){ }：选中同级别中同类型的满足计算结果的指定标签

十五、属性选择器

名称[attribute]：根据指定的属性名称找到对应的标签，然后设置属性
名称[attribute=value]：根据指定的属性名称并且属性取值等于value，找到对应的标签，然后设置属性。主要用于区分input属性
名称[attribute^=value]：根据指定的属性名称并且属性取值开头value，找到对应的标签，然后设置属性。
名称[attribute$=value]：根据指定的属性名称并且属性取值结尾等于value，找到对应的标签，然后设置属性。
名称[attribute*=value]：根据指定的属性名称并且属性取值包含value，找到对应的标签，然后设置属性。

十六、通配符选择器

1. 设置当前页面上所有的标签的属性
2. 格式：* { 属性：值 }
3. 由于通配符选择器会遍历一遍页面中的所有标签，所以当标签过多时，性能就会变差。