015 选择器的权重
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#p1{
color:blue;
}
*{
color:orange;
}
.pp{
color: green;
}
p
{
color=red;
}
</style>
</head>
<body>
<p class="pp" id="p1"style="color: slateblue;">
猜猜我是什么颜色
</p>
</body>
</html>
效果图:
行内样式优先生效;
去掉行内样式;
<p class="pp" id="p1">
效果图:
id 样式优先生效;
去掉id的文字颜色,效果图为绿色:
类别样式优先生效;
去掉类别的文字样式,效果图为红色:
标签选择器样式生效;
去掉标签选择器样式,效果图为橘黄色:
通用选择器生效;
总结:css优先级
当样式发生冲突时,谁的权重值高,谁就生效(范围越大,权重越小)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{color:yellow;}
div a{ color:green;}
.demo a{color:black;}
#demo a{color:orange;}
div#demo a{color:red;}
</style>
</head>
<body>
<a href="">应该是黄色</a>
<div class="demo">
<a href="">应该是黑色</a>
</div>
<div id="demo">
<a href="">应该是红色</a>
</div>
</body>
</html>
效果图:
#box p .tt
box id下的p标签下的tt标签 100 1 10
#box .tt
100 10
选择器选择的范围 越小越精确,优先级就越高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{color:yellow;}/* 1*/
div a{ color:green;}/* 1+1 */
.demo a{color:black;}/* 10+1 类选择器*/
#demo a{color:orange;}/* 100 +1 id选择器*/
div#demo a{color:red;}/* 1+100+1 */
</style>
</head>
<body>
<a href="">应该是黄色</a> /* a */
<div class="demo">
<a href="">应该是黑色</a> /* a div .demo */
</div>
<div id="demo">
<a href="">应该是红色</a> /* a div #demo div#demo*/
</div>
</body>
</html>
练笔:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#news{
list-style: none;
width: 870px;
}
#news li {
height:60px;line-height: 60px;
border-bottom:dashed 3px grey;/* 虚线分割 */
}
#news li a{
color:gray;
text-decoration: none;
}
#news .last{
border:none;
}
</style>
</head>
<body>
<ul id="news">
<li><a href="">故事开头总是这样,适逢其会,猝不及防</a></li>
<li><a href="">故事的结局总是这样,花开两朵,天各一方</a></li>
<li><a href="">世事如书,我偏爱你这一句,愿做个逗号,待在你脚边</a></li>
<li class="last"><a href="">但你有自己的朗读者,而我只是个摆渡人</a></li>
</ul>
</body>
</html>
效果图:
css 文本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.p1{color:red} /* 文字颜色 */
.p2{font-family: "bodoni mt black"}/* 字体类型 */
.p3{font-size: 46px;}/* 文字大小 */
.p4{font-weight: b1;}/* 文字加粗 */
.p5{font-style: italic;}/* 文字倾斜*/
.p6{text-indent: 60px;}/*首航缩进 */
.p7{text-align: center;}/* 水平对齐方式 */
.p8{line-height: 100px;}/* 行高 */
.p9{height: 100px;background-color: gray;line-height: 100px;}/* 垂直居中 */
.p10{text-decoration: underline;}/* 文字修饰 */
</style>
</head>
<body>
<ul>
<li class="p1">1.我会承诺很多,实现很少,我们会面对面越走越远,肩并肩悄然失散。</li>
<li class="p2">2.你会掉眼泪,每一颗都烫伤我的肌肤。</li>
<li class="p3">3.你应该留在家里,把试卷做完,而不是和我一起交了空白纸张。</li>
<li class="p4">4.对不起,爱过你。</li>
<li class="p5">5.世界上,总有一个人和你刚见面,两个人就互相吸引,莫名觉得是一个整体。</li>
<li class="p6">6.这就是你的反向人。</li>
<li class="p7">7.我会承诺很多,实现很少,我们会面对面越走越远,肩并肩悄然失散。</li>
<li class="p8">8.你会掉眼泪,每一颗都烫伤我的肌肤。</li>
<li class="p9">9.你应该留在家里,把试卷做完,而不是和我一起交了空白纸张。</li>
<li class="p10">10.对不起,爱过你。</li>
</ul>
</body>
</html>
效果图:
常见图片格式的区别:
SVG 不保存图像的信息,只会记录图像的形状和颜色
eg:
若将图片放大三倍:
svg 一般保存颜色、形状相对简单的图像。
017 背景图的使用
background-image:url(img/dong.gif) ;
body{
background-image:url(img/dong.gif) ;
background-repeat:no-repeat
}
background-image:url(img/wangyibo.png) ;
background-repeat:no-repeat
background-image:url(img/wangyibo.png) ;
body{
background-image:url(img/dong.gif) ;
background-repeat:no-repeat;
background-position: center center;
}
元素的浮动布局
浮动语速会脱离网页文档,与其他元素发生重叠,但是,不会与文字发生重叠
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.gren{
width: 100px;height:100px;
background-color: green;
}
.red{
width: 200px;height:150px;
background-color: red;
}
</style>
<body>
<p>文字环绕效果</p>
<div class="gren"></div>
<div class="red"></div>
</body>
</html>
.gren{
width: 100px;height:100px;
background-color: green;
float: left;
}
<div class="red">
想了解一个人究竟在想什么,比起他所坐的内容,其实他所做的方式与途径更重要,
决定着你说话或者做事的方式与途径。欲望,本身就是最基本元素。
</div>
横向的排版布局:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.gren{
width: 100px;height:100px;
background-color: green;
float: left;
}
.red{
width: 400px;height:350px;
background-color: red;
}
.a{
width:200px;
background-color: green;
}
.b{
width:700px;
background-color: red;
}
.c{
width:200px;
background-color: blue;
}
.a ,.b,.c{
float:left;height:150px;
}
</style>
<body>
<p>文字环绕效果</p>
<div class="gren"></div>
<div class="red">
想了解一个人究竟在想什么,比起他所坐的内容,其实他所做的方式与途径更重要,决定着你说话或者做事的方式与途径。欲望,本身就是最基本元素。
</div>
<p>横向的排版布局</p>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.a{
width:20%;
background: red;
}
.b{
width:60%;
background: green;
}
.c{
width:20%;
background: blue;
}
.a,.b,.c{
float:left;
height: 200px;
}
.hh{
height: 360px;
background:grey ;
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="hh">
</div>
</body>
</html>
上面浮动的遮盖了一部分下面的
增加一个父元素:由于父元素是不做浮动的
.outer{
height: 200px;
}
</style>
<body>
<div class="outer">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
一般情况下,由于子元素是浮动的,无法撑开父元素,所以父元素必须设置大小
举例2;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.a{
width:20%;
background: red;
}
.b{
width:40%;
background: green;
}
.c{
width:20%;
background: orangered;
}
.a,.b,.c{
height:200px;
float: left;
}
.outer{
border-width: 5px;
border-color: black;
border-style: dashed;
}
</style>
<body>
<div class="outer">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>
虚线框即为父元素。父元素无大小,高度为0,且并没有被子元素的大小撑开。(因为子元素是浮动的,不占据空间,所以无法撑开父元素)
解决办法 :给父元素设置一个高
.outer{
border-width: 5px;
border-color: black;
border-style: dashed;
height:200px;
}
清除元素浮动的影响:
为了父元素的高度保持正常,我们给父元素增加一个样式:overflow:auto (overflow:溢出 对于超出边界的元素,父元素可以做自动的调整,让父元素显示正常)
增加 clear:left/right/booth 样式,对于不想受到影响的元素,增加clear样式
- clear:left 表示该元素不受左浮动的影响
- clear:right 表示该元素不受右浮动的影响
- clear:both 表示该元素即不受左浮动又不受右浮动的影响
浮动元素的重叠问题
- 浮动元素不会覆盖文字内容
- 浮动元素不会覆盖图片内容<因为图片本身也是属于文本,可以看做是一个特殊的文字)
- 浮动元素不会覆盖表单元素(输入框、单选框、复选框、按钮、下拉框等>
盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;/* 将所有的元素边距都设置为0*/
}
.item{
width:340px;height:198px;
}
</style>
</head>
<body>
<div class="item" style="background: url(img/01.png);"></div>
<div class="item" style="background: url(img/02.png);"></div>
<div class="item" style="background: url(img/03.png);"></div>
</body>
</html>
.item{
float: left;
width:340px;height:198px;
}
.item{
float: left;
width:340px;height:198px;
margin: 20px;
}
怎样让图片居中?
解决办法:给三个div加个父元素,让父元素居中、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;/* 将所有的元素边距都设置为0*/
}
#box{
width: 750px;;/* 父元素默认100% 所以没有办法居中 */
overflow: auto;
margin: auto;/* 让元素自动设置边距,左右边距相等,即可达到居中效果,水平方向有效。*/
}
.item{
width: 210px; height: 136px;
float: left;
margin: 20px;
}
</style>
</head>
<body>
<div id="box">
<div class="item" style="background: url(img/01.png);"></div>
<div class="item" style="background: url(img/02.png);"></div>
<div class="item" style="background: url(img/03.png);"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;/* 将所有的元素边距都设置为0*/
}
#box{
width: 750px;;/* 父元素默认100% 所以没有办法居中 */
overflow: auto;
margin: auto;/* 让元素自动设置边距,左右边距相等,即可达到居中效果,水平方向有效。*/
}
.item{
float: left;
margin: 20px;
border:5px solid black;
}
.item img{
margin: 15px;
}
</style>
</head>
<body>
<div id="box">
<div class="item" >
<img src="img/03.png" />
</div>
<div class="item" >
<img src="img/01.png" />
</div>
<div class="item" >
<img src="img/02.png" />
</div>
</div>
</body>
</html>
<div class="item" >
<img src="img/03.png" />
测试文字类型
</div>
<div class="item" >
<img src="img/03.png" /><br>
测试文字类型
</div>
填充:
去掉给图片增加的外边距 .item img ,给item class增加一个填充即可
.item{
float: left;
margin: 20px;
border:5px solid black;
padding: 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;/* 将所有的元素边距都设置为0*/
}
#box{
width: 1700px; /* 父元素默认100% 所以没有办法居中 */
overflow: auto;
margin: auto;
/* 让元素自动设置边距,左右边距相等,即可达到居中效果,水平方向有效。*/
}
.item{
float: left;
margin: 20px;
border:5px solid black;
padding: 15px;
}
</style>
</head>
<body>
<div id="box">
<div class="item" >
<img src="img/03.png" /><br>
测试文字类型1
</div>
<div class="item" >
<img src="img/01.png" /><br>
测试文字类型2
</div>
<div class="item" >
<img src="img/02.png" /><br>
测试文字类型3
</div>
</div>
</body>
</html>