CSS基础
CSS作用
专门用来修改样式
CSS格式
<style type="text/css">
标签名称{
属性名称：取值；
}
</style>
注意点
- style标签必须写在head标签的开始标签和结束标签之间
- 设置样式时必须按照固定的格式来设置key:value;(其中:和;不能省略)
CSS构成
css分为两大部分，一个是css选择器，一个是css属性
CSS选择器
标签选择器
作用：根据指定的标签名称，找到当前界面所有该名称的标签，然后设置属性
格式：
标签名称:{
属性:值;
}
注意点
- 标签选择器会选中当前界面的所有标签，不能单独选中某一个标签
- 只要是HTML标签都可以作为标签选择器
id选择器
作用：根据指定的id名称找到对应标签，然后设置属性
格式：
#id名称{
属性：值;
}
注意点
- 每个标签都可以设置id，同一个界面id名称不能重复
- 编写id选择器时一定要在id名称前面加上#
- id名称只能由字母/数字/下划线组成，并且不能以数字开头
- id名称不能是HTML标签的名称
- 企业开发中仅仅是设置样式，一般不会使用id，因为id是留给js使用的
类选择器
作用：根据指定的类名称找到对应的标签，然后设置属性
格式：
.类名{
属性:值;
}
注意点
- 每个标签都可以设置类名，同一个界面中class的名称可以重复
- 编写class选择器时一定要在class名称前加上.
- 在HTML中每个标签可以同时绑定多个类名，命名规范和id一样
格式：<标签名称 class="类名1 类名2">
id和class的区别
- id相当于人的身份证不能重复，class相当于人的名称可以重复
- 一个HTML标签只能绑定一个id名称，但是可以绑定多个class名称
id选择器和class选择器的区别
- id选择器以#开头，class选择器以.开头
- class是专门用来修改样式，id一般是给js使用的
在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可
后代选择器
作用：找到指定标签的所有特定的后代标签，设置属性
格式：
标签名称1 标签名称2{
属性：值;
}
先找到所有名称叫“标签名称1”的标签，然后在这个标签下面去查找所有名称叫做“标签名称2"的标签，然后设置属性
注意点
- 后代选择器必须用空格隔开
- 后代不仅仅是儿子，还包括孙子/重孙子...
- 后代选择器不仅仅可以使用标签名称，还可以使用其他选择器
- 可以通过空格一直延续下去
子元素选择器
作用：找到指定标签中所有特定的之间子元素，然后设置属性
格式：
标签名称1>标签名称2{
属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素
注意点
- 子元素选择器只查找儿子，不会查找其他被嵌套的标签
- 子元素选择器之间需要用>符号链接，并且不能有空格
- 子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器
- 可以通过>符号一直延续下去
后代选择器与子元素选择器的区别
- 后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号
- 后代选择器只要是被放到指定标签中的特定标签都会被选中，子元素选择器只会选中特定的儿子标签
后代选择器与子元素选择器的共同点
- 都可以通过各自的链接符号一直延续下去
交集选择器
作用：给所有选择器选中的标签相交的那部分标签设置属性
格式：
选择器1选择器2{
属性:值；
}
注意点
- 选择器和选择器之间没有任何的链接符号
- 选择器可以使用标签名称/id名称/类名称
- 企业开发中用的不多
并集选择器
作用：给所有选择器选中的标签设置属性
格式：
选择器1,选择器2{
属性:值;
}
注意点
- 并集选择器必须使用,来链接
- 选择器可以使用标签名称/id名/class名
兄弟选择器
相邻兄弟选择器css2：给指定选择器后面紧跟的那个选择器选中的标签设置属性
通用兄弟选择器css3：给指定选择器后面的所有选择器选中的所有标签设置属性
格式：
相邻
选择器1+选择器2{
属性:值;
}
通用
选择器1`选择器2{
属性:值;
}
注意点
- 相邻兄弟选择器必须通过+链接，只能选中紧跟其后的指定的标签，不能选中隔开的标签
- 通用兄弟选择器必须通过`链接，可以选中后面的所有指定的标签，不管有没有被隔开
序选择器
同级别的第几个不区分类型
- :first-child 选中同级别中的第一个标签
- :last-child 选中同级别中的最后一个标签
- :nth-child(n) 选中同级别中的第n个标签
- :nth-last-child(n) 选中同级别中的倒数第n个标签
- :only-child 选中父元素中唯一的标签
同类型的第几个区分类型
- :first-of-type 选中同级别中同类型的第一个标签
- :last-of-type 选中同级别中同类型的最后一个标签
- :nth-of-type(n) 选中同级别中同类型的第n个标签
- :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
- :only-of-type 选中父元素中唯一类型的某个标签
补充
(odd)选中所有奇数，(even)选中所有偶数
(xn+y) x和y是用户自定义，n是一个计数器，从0开始递增
属性选择器
作用：根据指定的属性名称找到对应的标签，然后设置属性
格式：
[attribute]
找到指定属性名称对应的标签，设置属性
[attribute=value]
找到有指定属性，并且属性的取值等于value的标签，然后设置属性
最常应用的场景：区分input属性
属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3
区别
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
属性的取值是以什么结尾的
[attribute$=value] CSS3
属性的取值是否包含某个特定的值
[attribute~=value] CSS2
[attribute*=value] CSS3
区别
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到
通配符选择器
作用：给当前界面上所有的标签设置属性
格式：
*{
属性:值;
}
注意点
通配符选择器是设置界面上所有的标签的属性, 所以会遍历所有的标签, 如果当前界面上标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
伪类选择器
作用：给某些选择器添加特殊的效果
格式：
选择器:伪类{
属性:值;
}
网友评论