css复合选择器
链接伪类选择器:
顺序不可变动,在实际开发中,一般先在a{}
中写好共有的样式,然后再在a:link{}
等中写各自的样式。
例:
<body>
<!-- 主导航栏 -->
<div class="nav">
<ul>
<li><a href="#">公司首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">公司产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<!-- 侧导航栏 -->
<div class="sitenav">
<div class="site-l">左侧侧导航栏</div>
<div class="site-r"><a href="#">登录</a></div>
</div>
</body>
<style>
.site-r a{
color: red;
}
.nav a{
color: orange;
}
.nav,
.sitenav{
font-size: 14px;
font-family: "微软雅黑";
}
</style>
标签显示模式(display)
块级元素
行内元素(内联元素)
行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<td>
,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
行内块元素的特点:
- 和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。一行可以显示多个
- 默认宽度就是它本身内容的宽度。
- 高度,行高、外边距以及内边距都可以控制。
标签显示模式转换
- 块转行内:display:inline;
- 行内转块:display:block;
- 块、行内元素转换为行内块: display: inline-block;
用到的时候写在style里相应的css选择器中即可。
行高
行高的测量
如何使文字垂直居中:
文字的行高等于盒子的高度。
行高=上距离+文字内容+下距离。因为上距离=下距离,所以只要行高=盒子高度,文字看起来就是垂直居中的。
css背景
背景颜色background-color: pink;
背景图片background-image : url(images/demo.png);
背景平铺background-repeat : ;
背景位置background-position:x坐标 y坐标;
背景附着background-attachment: ;
背景简写一般顺序background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
背景透明(css3)background: rgba(0, 0, 0, 0.3);
前三位为RGB值代表颜色,最后一个参数值为alpha透明度,取值在0-1之间。
css三大特性
层叠性
css样式冲突采取的原则:就近原则,后来居上。写在后面的会覆盖前面的。样式不冲突则不会层叠。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<div>
<p>层叠性</p>
</div>
</body>
</html>
继承性
子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: blue;
}
</style>
</head>
<body>
<div>
<p>继承性</p>
</div>
</body>
</html>
优先级
1.权重计算
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,此时,如果选择器相同,那就按层叠性原则执行;如果选择器不同,就会出现优先级问题。
从左到右,左边的优先级大于右边的优先级,四位之间没有进位。在使用!important时,只要将它加在属性值后面即可。
2.权重叠加
上述权重都是针对每个单位的,所以在出现复合选择器等情况时,就会出现权重叠加。注意,这个叠加是没有进位的。
例
- div ul li ------> 0,0,0,3 (三个标签选择器
- .nav ul li ------> 0,0,1,2 (类选择器+两个标签选择器
- a:hover -----—> 0,0,1,1 (标签选择器+伪类选择器
- 0,0,0,5 + 0,0,0,5 =0,0,0,10
3.继承的权重是0
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<div class="nav">
<p>继承的权重为0</p>
</div>
</body>
</html>
在这个例子中,从表面上看,.nav是类选择器,权重为0,0,1,0,而p是标签选择器,权重为0,0,0,1,应该是.nav的优先级大于p的优先级。但是,表现样式的内容在p标签里,.nav没有直接选中p标签,red属性值是从.nav里继承过来的,继承的权重为0。所以小于p标签的权重。
4.关于css权重的六道题目
1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div div{
color:blue;
}
div{
color:red;
}
</style>
</head>
<body>
<div>
<div>
<div>
试问这行字体是什么颜色的?
</div>
</div>
</div>
</body>
</html>
在这个例子中,表现样式的标签为div,两个都选中了div,因此直接比较权重即可,div div>div
2)
<style type="text/css">
#father{
color:red;
}
p {
color:blue;
}
</style>
<div id="father">
<p>试问这行字体是什么颜色的?</p>
</div>
</body>
这个例子中,一个是继承权重为0,一个是标签选择器权重为0,0,0,1
3)
<style type="text/css">
div div div div div div div div div div div div{
color:red;
}
.me {
color:blue;
}
</style>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">试问这行文字是什么颜色的</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
在这个例子中,表现样式的标签为div,两个都是选中了的,第一个为标签选择器的叠加,第二个为ID选择器,根据权重的计算,左边大于右边,ID选择器的优先级是大于标签选择器的叠加的.
4)
<style>
div p { /*0,0,0,1+0,0,0,1=0,0,0,2*/
color:red;
}
#father { /*继承的权重为0*/
color:red;
}
p.c2{ /*0,0,0,1+0,0,1,0=0,0,1,1*/
color:blue;
}
</style>
<body>
<div id="father" class="c1">
<p class="c2">
试问这行字体是什么颜色的?
</p>
</div>
</body>
5)
<style type="text/css">
.c1 .c2 div{ /*0,0,1,0+0,0,1,0+0,0,0,1=0,0,2,1*/
color: blue;
}
div #box3 { /*0,0,0,1+0,1,0,0=0,1,0,1*/
color:green;
}
#box1 div { /*0,1,0,0+0,0,0,1=0,1,0,1 层叠性原则,后来居上*/
color:yellow;
}
</style>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
</body>
6)
<style type="text/css">
#father #son{ /*0,1,0,0+0,1,0,0=0,2,0,0*/
color:blue;
}
#father p.c2{
color:black;
}
div.c1 p.c2{
color:red;
}
#father{ /*继承权重为0*/
color:green !important;
}
</style>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
试问这行字体是什么颜色的?
</p>
</div>
</body>