【Web前端笔记-基础】第八课·初识 CSS，CSS属性

最新推荐文章于 2021-01-30 09:25:42 发布

好好学习嘿嘿嘿

最新推荐文章于 2021-01-30 09:25:42 发布

阅读量287

点赞数

分类专栏： Web 前端基础笔记文章标签： HTML基础 css标签浮动与清除浮动背景标签

本文链接：https://blog.csdn.net/qq_42250032/article/details/102464101

版权

Web 前端基础笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一：！important属性

important属性是用来提高属性的权重的，其属性无穷大。

语法格式：属性：值！important

要注意：提升的是属性的权重，而不是选择器的权重,它的作用域只是当前属性。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>importent 属性练习</title>
		<style type="text/css">
			.im{
				color: #00FF00 !important;
			}
			#zhong{
				color: #4169E1;
			}
		</style>
	</head>
	<body>
		<p class="im" id="zhong">importent 属性练习</p>
	</body>
</html>

效果：

二：一个类标签可以携带多个类名

一个类标签可以携带多个类名，指的是class属性可以有多个值，这些值用空格分开即可。

举例：<标签名 class="值1 值2 值3"></标签名>

多个类名的优点：

减少代码量，多个类名的样式会叠加到该标签上。

注意：如果一个标签的多个类名设置了同一个样式，就会产生冲突，那么，样式效果就会以代码在最下面的样式为准。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一个标签携带多个类名的练习</title>
		<style type="text/css">
			.p1{
				color: #4169E1;
			}
			.p2{
				font-size: 50px;
			}
			
			.p3{
				font-family: "宋体";
			}
			/* .chongtu{
				font-size: 20px;
			} */
		</style>
	</head>
	<body>
		<p class="p1 p2 p3">我是一个标签携带多个类名的练习1</p>
		<p class="p2 p3">我是一个标签携带多个类名的练习2</p>
	</body>
</html>

效果：

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一个标签携带多个类名的练习</title>
		<style type="text/css">
			.p1{
				color: #4169E1;
			}
			.p2{
				font-size: 50px;
			}
			
			.p3{
				font-family: "宋体";
			}
			.chongtu{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<p class="p1 p2 p3 chongtu">我是一个标签携带多个类名的练习1</p>
		<p class="p2 p3">我是一个标签携带多个类名的练习2</p>
	</body>
</html>

效果：

三：背景样式属性

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景样式属性练习</title>
		<style type="text/css">
			#beijing{
				width: 100px;
				height: 100px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div id="beijing">
			
		</div>
	</body>
</html>

效果：

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入背景图练习</title>
		<style type="text/css">
			.tu{
				background-image: url(../img/xiaozhan.jpg);
			}
		</style>
	</head>
	<body>
		<p class="tu">“魏无羡死了。大快人心！”
        乱葬岗大围剿刚刚结束，未及第二天，这个消息便插翅一般飞遍了整个修真界，比当初战火蔓延的速度有过之而无不及。
        一时之间，无论是世家名门，还是山野修士，人人都在议论此次由四大玄门世家联率、大大小小百家参与混战的围剿行动。
        “夷陵老祖死了？谁能杀他！”
        “还能是谁。他师弟江澄大义灭亲，带云梦江氏、兰陵金氏、姑苏蓝氏、清河聂氏四大家族打头阵，把他老巢‘乱葬岗’一锅端了。”
        “我得说，杀得好。”
        “不错，杀得好！总算是把这个祸害连根拔尽了。”
        “要不是云梦江氏收养他、栽培他，魏无羡这辈子就是个混迹乡野市井的庸徒，哪里掀得起今天这样的风浪。江家家主可是把他当亲儿子在养，他倒好，公然叛逃，与修真界为敌，丢尽了江家的脸，还害得江氏几乎满门惨死。什么叫忘恩负义白眼狼？这就是！”
        “江澄竟然让这厮嚣张了这么久，换了是我，当初魏某人叛逃时就不是捅他一刀，而是直接清理门户，否则也不会让他做出后来那些丧心病狂之事。还讲什么同门同修青梅竹马的情面。”
        “你们哪儿道听途图说来的消息？魏无羡不是江澄杀的，江澄只是逼杀主力之一。是魏无羡自己修炼邪术遭受反噬，受手下鬼将撕咬蚕食，活活被咬碎成了齑粉。”
		“哈哈哈哈……报应，他养的那批鬼将就像一群没拴好的疯狗到处咬人。最后咬死自己，活该！”
		        “可此次围剿若不是江澄依据魏无羡的弱点拟定计划，成功与否还难说呢。你们可别忘了，魏无羡手上有什么东西，当初一晚上三千多个成名修士是怎么全军覆没的。”
		        “我听说不止三千，五千吧。”
		        “果真丧心病狂……”
		        “好在他身死之前毁掉了那妖邪之器，否则留下这东西贻害人间，更加罪孽深重。”
		        “哎……要说这魏无羡，当年也是仙门之中极富盛名的世家公子，并非不曾有过佳迹。年少成名，何等风光恣意……究竟他是怎么走到这一步的……”		  
		        “由此可见，修炼终归是非走正道不可。走邪魔歪道，一时风光无限，好像很了不起。嘿，最后什么下场？死无全尸。”	  
		        “也不全是修炼之道害的，实在是魏无羡此人人品太差劲，天怒人怨啊。善恶终有报，天道好轮回。”		  		  
		        身死之后，盖棺定论。所论内容大同小异，偶有微弱的异声，也立刻被压了下去。
		        只是每个人的心头都压着同一个没敢说出来的念头。
		  </p>
	</body>
</html>

效果：

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置背景图不重复练习</title>
		<style type="text/css">
			.chong{
				width: 300px;
				background-image: url(../img/xiaozhan.jpg);
				/* 背景不重复 */
				/* background-repeat: no-repeat; */
				/* 背景横向重复 */
				/* background-repeat: repeat-x; */
				/* 背景纵向重复 */
				background-repeat: repeat-y;
			}
		</style>
	</head>
	<body>
		<div class="chong">
			<p>魏无羡刚睁开眼睛就被人踹了一脚。
  
        一道惊雷炸在耳边：“你装什么死？！”
  
        他被这当胸一脚踹得几欲吐血，后脑着地仰面朝天，朦胧间想：敢踹本老祖，胆子不小。
  
        他不知多少年没听到活人说话了，何况还是这么响亮的叫骂，头昏眼花，耳朵嗡嗡作响，回荡着一个声音：“也不想想，你现在住的是谁家的地、吃的是谁家的米、花的是谁家的钱！拿你几样东西怎么了？本来就该都是我的！”
  
        除了这个年轻的公鸭嗓，四周还有翻箱倒柜、摔天砸地的哐当之声。他双眼渐渐清明起来。
  
        视线中，浮出一个昏暗的屋顶，一张眉梢倒吊眼珠发绿的脸孔，正在他上方唾沫横飞：“你还敢去告状！你以为我真的怕你去告，你以为这家里真的有人会为你做主？”
  
        一旁围过来两个家仆模样的壮汉，道：“公子，都砸完了！”
  
        公子道：“怎么这么快？”家仆道：“这破屋子，东西本来没有多少。”
  
        公子大为满意，食指恨不得把他的鼻子戳进脑门里：“有胆子去告状，现在装死给谁看？好像谁稀罕你这些破铜烂铁废纸片似的，我都给你砸干净了，看你今后拿什么告状！去过几年仙门很了不起？还不是一条丧家犬一样被人赶回来！”
  </p>
		</div>
	</body>
</html>

效果：

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				background-image: url(../img/xiaozhan.jpg);
				background-repeat: no-repeat;
				background-position: center center;
			}
		</style>
	</head>
	<body>
		<p>他不知多少年没听到活人说话了，何况还是这么响亮的叫骂，头昏眼花，耳朵嗡嗡作响，回荡着一个声音：“也不想想，你现在住的是谁家的地、吃的是谁家的米、花的是谁家的钱！拿你几样东西怎么了？本来就该都是我的！”
  
        除了这个年轻的公鸭嗓，四周还有翻箱倒柜、摔天砸地的哐当之声。他双眼渐渐清明起来。
  
        视线中，浮出一个昏暗的屋顶，一张眉梢倒吊眼珠发绿的脸孔，正在他上方唾沫横飞：“你还敢去告状！你以为我真的怕你去告，你以为这家里真的有人会为你做主？”
  
        一旁围过来两个家仆模样的壮汉，道：“公子，都砸完了！”
  
        公子道：“怎么这么快？”家仆道：“这破屋子，东西本来没有多少。”
  </p>
	</body>
</html>

效果：

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景简写练习</title>
		<style type="text/css">
			.jian{
				background: url(../img/xiaozhan.jpg) repeat-x;
			}
		</style>
	</head>
	<body>
		<p class="jian">
			        然而肢体不听使唤，又躺了回去。他只得翻了个身，看着陌生的环境和这满地狼藉，一阵头晕。
			  
			        一旁有一面被掷地的铜镜，魏无羡顺手摸来一看，一张白得出奇的面孔出现在镜中，两坨大红不均匀也不对称地坨在面颊一左一右，只要伸出一条鲜红的长舌，活活就是个吊死鬼。他扔开镜子，一抹脸，抹下一手白|粉。
			  
			        万幸，这具身体并非天生样貌清奇，只是品味清奇。一个大男人，居然涂了满脸的胭脂粉黛，还涂得如此之丑，噫，如何能忍！
			  
			        受此一惊，惊回了点力气，他总算坐起了身，这才注意到，身下有一个圆环咒阵。
			  
		</p>
	</body>
</html>

效果：

四：标准文档流

网页从左到右，从上到下排版的顺序，就叫做标准文档流。

现象：

空白折叠现象：当元素与元素的代码之间用了换行之后，元素之间就会出现空格，将代码放在一行，就能出去空格。

高矮不齐，但底部对齐。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>空白折叠</title>
	</head>
	<body>
		nihaohahaha
		<img src="../img/xiaozhan.jpg" >
		<a href="#">百度一下</a>
	</body>
</html>

效果：

五：浮动

浮动float(浮动属性)：left(向左浮动)或right（向右浮动）

文档一旦浮动，就不会占用空间了，脱离了标准文档流。我们可以把浮动理解为飘。

浮动遇到父级元素的边框或上一个浮动元素，就会停止浮动。

浮动元素的层级，高于标准文档流的元素，一旦有冲突就会覆盖标准文档流的内容。

浮动元素一旦浮动之后，父元素就不会再包裹了。

当行内样式浮动之后，就有了宽高，就能进行设置了。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动练习</title>
		<style type="text/css">
			.zong{
				width: 400px;
				border: black 1px solid;
				margin-left: auto;
				margin-right: auto;
			}
			.kuai1{
				width: 100px;
				height: 100px;
				background-color: #f00;
				/* 右浮动 */
				/* float: right; */
				/* 左浮动 */
				float: left;
			}
			.kuai2{
				width: 100px;
				height: 100px;
				background-color: #0f0;
				float: left;
			}
			.kuai3{
				width: 100px;
				height: 100px;
				background-color: #00f;
				float: left;
			}
			span{
				width: 40px;
				height: 40px;
				background-color: #87CEEB;
				float: right;
			}
		</style>
		
	</head>
	<body>
		
		<div class="zong">
			
		
			<div class="kuai1">
				
			</div>
			<div class="kuai2">
				
			</div>
			<div class="kuai3">
				
			</div>
			
			<span>你好哈哈哈哈</span>
		</div>
		
	</body>
</html>

效果：

小结案例：标题栏

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动小总结</title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			body{
				font-size: 20px;
				font-family: "微软雅黑";
				background-image: url(../img/beijing.jpg);
			}
			
			.th{
				width: 960px;
				height: 40px;
				margin-left: auto;
				margin-right: auto;
			}
			ul{
				list-style: none;
			}
			ul li{
				float: left;
				width: 160px;
				height: 40px;
				background-image: url(../img/diwenbiaoti.jpg);
				text-align: center;
				line-height: 40px;
			}
			
			a{
				text-decoration: none;
				color: #000000;
			}
			a:hover{
				color: #4169E1;
				font-size: 24px;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="th">
			<ul>
				<li><a href="">标题</a></li>
				<li><a href="">标题</a></li>
				<li><a href="">标题</a></li>
				<li><a href="">标题</a></li>
				<li><a href="">标题</a></li>
				<li><a href="">标题</a></li>
			</ul>
		</div>
	</body>
</html>

效果：

六：清除浮动

只要有浮动，就要清除浮动，因为浮动会影响我们的排版，而且，元素一旦浮动，也不会再被父元素包裹。

方法：

给浮动元素的父元素设置一个固定的高度。
使用清除浮动属性clear
使用overflow:hidden

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>清除浮动练习</title>
		<style type="text/css">
			.zong{
				width: 400px;
				/*给父元素添加一个固定的高度*/
				/* height: 600px; */
				border: black 1px solid;
				margin-left: auto;
				margin-right: auto;
				
			}
			.kuai1{
				width: 100px;
				height: 100px;
				background-color: #f00;
				float: left;
				
			}
			.kuai2{
				width: 100px;
				height: 100px;
				background-color: #0f0;
				float: left;
			}
			.kuai3{
				width: 100px;
				height: 100px;
				background-color: #00f;
				float: left;
				
			}
			/*清除浮动方法2*/
			/* .kuai4{
				clear:both ;
			} */
			ul li{
				float: right;
			}
		</style>
		
	</head>
	<body>
		
		<div class="zong">
			
		
			<div class="kuai1">
				
			</div>
			<div class="kuai2">
				
			</div>
			<div class="kuai3">
				
			</div>
			
			
		</div>
		
		
	</body>
</html>

效果：

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>清除浮动2</title>
		<style type="text/css">
			.hfoi{
				border: black 1px solid;
			}
			ul li{
				
				float: left;
			}
			ul{
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="hfoi">
			<ul>
				<li>浮动</li>
				<li>浮动</li>
				<li>浮动</li>
				<li>浮动</li>
				<li>浮动</li>
			</ul>	
		</div>
		
	</body>
</html>

效果：

好好学习嘿嘿嘿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Web前端笔记-基础】第八课·初识 CSS，CSS属性

一：！important属性important属性是用来提高属性的权重的，其属性无穷大。语法格式：属性：值！important要注意：提升的是属性的权重，而不是选择器的权重,它的作用域只是当前属性。例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"> &l...
复制链接

扫一扫