CSS性质,CSS选择器,CSS盒子模型
1、CSS的层叠性:
CSS样式可以叠加(即一个标签上可以应用多个样式)
2、CSS的继承性:
在书写CSS样式表时,子标签会继承父标签的某些样式
p{
color: "red";
}
<p>
aa
<span>内容</span>
</p>
边框属性、定位属性、内外的间距属性、元素的宽高属性、布局属性、背景属性不具有继承性的
3、CSS的优先级:
要看选择器的权重(标签名选择器的权重是1,id选择器的权重是100,类选择器的权重是10)
(1)权重值越大,优先级越高
(2)继承样式的权重值为0
(3)行内样式优先
(4)当权重值相同时,CSS遵循就近原则
(5)CSS定义了一个!important命令,该命令被赋予最大的优先级。
5、属性选择器:
(1)E[att^=value]:'E'代表标签名,'att'表示是标签的属性。含义是标签的某个属性值是以给定的value
开头
(2)E[att$=value]:表示标签含有给定的属性,并且属性值是以value值结尾的
(3)E[att*=value]:表示标签含有给定的属性,并且属性值中含有value
6、复合选择器:
多个选择器混合使用,选择器之间用逗号隔开
p,.dd,#d1{
color: red;
}
7、关系选择器
(1)子元素选择器(>):
h1>strong{
color:blue;
}
(2)兄弟选择器:
A、临近兄弟选择器:
使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲,而且第二个元素必须紧跟第一个元素。
div>p+div{
color: chartreuse;
}
B、普通兄弟选择器:
使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲,但第二个元素不必紧跟第一个元素。
div>#p2~div{
color: chartreuse;
}
8、伪类选择器:
(1)E:first-child
E:first-child{ 样式规则 }
匹配父元素的第一个子元素E。要使该属性生效,E对象必须是某个对象的子元素。
(2)E:last-child
E:last-child{ 样式规则 }
匹配父元素的最后一个子元素E。要使该属性生效,E对象必须是某个对象的子元素。
(3)E:nth-child(n)
E:nth-child(n){ 样式规则 }
匹配父元素的第n个子元素E。 要使该属性生效,E对象必须是某个对象的子元素。
(4)E:nth-last-child(n)
E:nth-last-child(n){ 样式规则 }
匹配父元素的倒数第n个子元素E。要使该属性生效,E对象必须是某个对象的子元素。
(5)E:empty
E:empty{ 样式规则 }
匹配没有任何子元素(包括text节点)的元素E。
(6)E:link
E:link{ 样式规则 }
设置超链接a在未被访问前的样式。
(7)E:visited
E:visited{ 样式规则 }
设置超链接a在其链接地址已被访问过时的样式。
(8)E:hover
E:hover{ 样式规则 }
设置元素在其鼠标悬停时的样式。
(9)E:active
E:active{ 样式规则 }
设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
9、列表的样式规则
(1)list-style-image:用来设置列表项的标记(项目符号)图像。
(2)list-style-style:用来设置列表项的项目符号样式。若值为none则没有项目符号
(3)list-style-position:设置项目符号和文本的位置关系
-
outside: 列表项目标记放置在文本以外,且环绕文本不根据标记对齐
-
inside: 列表项目标记放置在文本以内,且环绕文本根据标记对齐
10、盒子模型:
网页布局的基础
(1)边界(margin):
盒子的边框与包含改盒子的容器的之间的距离
A、margin-top:上边界
B、margin-right:右边界
C、margin-bottom:下边界
D、margin-left: 左边界
(2)填充(padding):
内补白(内边距),盒子中的内容与盒子边框之间的距离
A、padding: 上 右 下 左
B、padding-top:上边距
C、padding-right:右边距
D、padding-bottom:下边距
E、padding-left:左边距
(3)边框(border):
盒子的边框线
A、border-style:边框的样式【上、右、下、左】
B、border-width:边框的宽度【上、右、下、左】
C、border-color:边框的颜色【上、右、下、左】
D、border(综合设置边框): 边框的宽度 边框的样式 边框的颜色
E、border-radius(圆角边框):水平半径参数/垂直半径参数
(4)清除页面元素的默认内外边距
*{
padding: 0px;
margin: 0px;
}
'*':通配符,代表所有元素
(5)背景图像:
background-repeat:
repeat 默认值,图像在水平和垂直方向上都平铺
no-repeat:不平铺
repeat-x:水平平铺
repeat-y:垂直平铺