一、CSS简介
css :层叠样式表
网页实际上是一个多层的结构,通过css可以分别为网页的每一层来设置样式
而最终我们能看到的只有最上边的一层
设置网页中元素的样式
二、CSS书写方式
1、第一种方式:内联样式/行内样式
写在开始标签里面,写一个style属性,讲一组一组的样式写在style属性值里面
color: red; 样式名:样式值;
可以写多组样式,但一定要用;隔开
缺点:(1)结构和表现耦合了
(2)不容易修改
注意:尽量少用
2、第二种方式:内部样式表
写在head标签内部,写一个子元素,style标签,
通过选择器选中对应的要设置的元素/标签,在{}里设置一组一组样式
也可以写多组样式,也需要用;隔开
缺点:不方便复用
3、第三种方式:外部样式表
在html文件的外部新建一个.css文件,在css文件里写样式
然后通过在head标签内部写子标签link标签,将html文件和css文件联系在一起
link标签里有href属性,在href里写引入css文件的路径
注意:这种方式推荐使用
三、CSS语法
CSS的注释、作用和HTML注释类似,只不过它必须编写在style标签中,或者是css文件中
CSS的语法:选择器、声明块
声明块:名值对结构
样式名:样式值
四、CSS常用选择器
1、元素选择器(标签选择器)
语法:标签名{}
作用:选中对应标签包裹的内容
例子:h1{},h2{},p{},div{},span{}
需求二:将第一句诗变绿色
2、id选择器 (id属性值不可以重复使用)
语法:#id属性值{}
作用:选中对应的id属性值的内容
例子:#p1{},#pp{},#abc{}
3、class选择器(用法跟id选择器是一样的,只不过它可以复用)
语法:.class属性值{}
作用:选中对应class属性值的内容
4、通配选择器
语法:*{}
作用:选中页面中所有的标签
5、复合选择器(有两种):
(1)交集选择器
作用:选中同时满足多个条件的元素
语法:选择器1选择器2选择器3····{}
注意:如果选择器中有元素选择器,那么元素选择器必须放在第一位
(2)并集选择器
作用:同时选中满足条件的元素
语法:选择器1,选择器2,选择器3····{}
6、关系选择器
(1)子元素选择器
作用:选中指定的父元素下面指定的子元素
语法:父元素>子元素{}
例如:div>p,.big>p,#big>p{}
(2)后代选择器
作用:选中指定祖先元素下面指定的后代元素
语法:祖先元素 后代元素{}
例如:#big span{}
(3)选择下一个兄弟(仅挨着我的)选择器
作用:选择下一个兄弟
语法:兄+弟{}
(4)选择下面所有的兄弟(前面的不选)
语法:兄~弟{}
7、属性选择器
语法:[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
8、伪类选择器
知识点:去掉项目符号*/
(1)伪类(不存在的类,特殊的类)
伪类用来描述一个元素的特殊状态
比如:第一个元素,被点击的元素,鼠标移入的元素···
特点:一般请情况下,使用:开头
1、 :first-child 第一个子元素
2、 :last-child 最后一个子元素
3、 :nth-child() 选中第n个子元素
特殊值: n 所有的
2n或even 选中偶数
2n+1或odd 选中奇数
以上这些伪类都是根据所有的子元素进行排序
1、:first-of-type
2、:last-of-type
3、:nth-of-type()
功能跟上面相似,不同的是,这是在同类型的子元素中去选择
(2)not() 否定伪类
将符合条件的元素从选择器中去除