选择器的权重、文本属性、图片格式、背景图、元素的浮动布局、盒子模型

最新推荐文章于 2021-07-06 09:22:19 发布

一颗程序媛0915想上岸

最新推荐文章于 2021-07-06 09:22:19 发布

阅读量315

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_41431406/article/details/103774907

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

一颗程序媛0915想上岸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
选择器的权重、文本属性、图片格式、背景图、元素的浮动布局、盒子模型

015 选择器的权重<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #p1{ color:blue; } *{ col...
复制链接

扫一扫

专栏目录