<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
复合选择器
由两个或多个基本选择器通过不同方式组合而成的选择器。
①后代元素选择器
E F{
样式声明
}
用空格进行连接
作用:选择E元素内部的所有F元素
②子元素选择器
E>F{
样式声明
}
用>进行连接
作用:选择E元素内部的直接子元素F
③相邻选择器
E+F{
样式声明
}
用+进行连接
作用:选择E元素之后紧跟的兄弟元素F
④交集选择器
EF{
样式声明
}
没有连接符
作用:选择同时被所有选择器选中的元素
⑤并集选择器
E,F{
样式说明
}
用逗号连接
作用:给列表中的每一个选择器选中的元素设置样式
伪类选择器
超链接有四种状态
未访问之前----蓝色 可以在css中用a:link{}改变颜色
鼠标按下之后----红色 可以在css中用a:active{}改变颜色
连接访问之后----紫色 可以在css中用a:visited{}改变颜色
鼠标悬停连接上---- 可以在css中用a:hover{}改变颜色
要注意书写顺序:link visited hover active
配合选择器灵活使用
-->
<!--
css特性
①继承性 父元素向后代元素传递属性的机制
总结继承的属性texe-align font-size font-family color line-height
强制继承 每个css属性都接受indent,表示开启了强制继承
作用:恰当的使用继承来简化代码,降低css样式的复杂性
②优先级
css引入样式
行间样式
例外:!important
这条样式声明会覆盖其他的任何声明
注意:一定要优先考虑权重区解决样式生命的优先级,而不是!imporant
③层叠性
开发者样式>浏览器的默认样式
行间>id>类>元素名>*>继承的样式
总结:css的层叠性是通过继承和优先级实现的
样式声明不冲突---样式会同时应用于元素
样式声明冲突时---
同级选择器:css就近原则
不同级选择器:由选择器的优先级决定
-->
<!--
css背景
背景颜色
背景图片
①背景颜色backgruond-color
取值:
颜色名称
16进制的色值
rgb(0-255,0-255,0-255)
rgba(0-255,0-255,0-255,0-1)0是全透明,1是不透明
②背景图片background-image:url(“图片路径”);
作用范围:内容+边框+内填充
背景图片默认位于元素的左上角,在水平方向和垂直方向进行重复
设置背景图片是否重复background-repeat
取值:repeat默认值,背景图片在水平和垂直方向重复
repeat-x 只在水平方向重复
repeat-y 只在垂直方向重复
no-repeat 不重复
④背景图片的起始位置background-position
默认在左上角显示 关键字水平 left right center
垂直 top bottom center
background-position:水平关键字 垂直关键字;
当有两个值时,第一个值表示水平方向,第二个值表示垂直方向
当有一个值时,另一个值是50%
两个值可以用像素/百分比代替
0% 0%在左上角 50% 50%在中间 100% 100%在右下角
⑥简写
语法background:颜色 图片 是否平铺 起始位置;
(如果哪个属性不需要,可以直接省略)
-->
</body>
</html>