css ------笔记相关案例

最新推荐文章于 2022-02-21 13:26:36 发布

sumuqi

最新推荐文章于 2022-02-21 13:26:36 发布

阅读量189

点赞数

文章标签： css

本文链接：https://blog.csdn.net/sumuqi/article/details/105702316

版权

css 图片案例

01 css语法.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
    
			color:red
		}
		h2{
    
			color:blue
		}
	</style>
</head>
<body>
	<p>css从入门到精讲</p>
	<h2>观众：</h2>
</body>
</html>

在这里插入图片描述

02 css应用样式 .html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 1.内部样式 */
		p{
    
			color:red;
		}
	</style>
	<!-- 3.外部样式 link标签 -->
	<!-- <link rel="stylesheet" type="text/css" href="style/hello.css"> -->
	<style>
		/* @import "style/hello.css" */
		@import url(style/hello.css);
			
	</style>
</head>
<body>
	<p>welcome to css</p>
	<p>欢迎来到cdd课堂</p>
	<!-- 2.行内样式 -->
	<h2 style="color:blue">web前端工程师</h2>
	<h2>ava开发工程师</h2>
	
	<div>heihei</div>
	<div>haha</div>
</body>
</html>

hello.html

div{
	color:green;
}

在这里插入图片描述

####0.3 .html 基础选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
    
			color:red;
			font-size:20px;
		}
		h2{
    
			color:yellow
		}
		.hello{
    
			background-color:#cccccc;
		}
		.world{
    
			font-weight:bold;
		}
		#heihei{
    
			color:blue;
		}
	</style>
</head>
<body>
<!--  -->
	<p>welcome to css</p>
	<p>hello world</p>
	<h2>web前端开发</h2>
	<h3>Java开发</h3>
	<hr>
	<!-- 只修改p标签 -->
	<p class="hello">welcome to css</p>
	<p>hello world</p>
	<h2>web前端开发</h2>
	<h3>Java开发</h3>
	<!-- 只要应用hello就生效，与标签无关 -->
	<div class="hello">观众：</div>
	<!-- 既要有背景颜色，又要加粗文字 -->
	<div class="hello world">观众：</div>
	<div class="world">观众：</div>
	<span>从入门到精通</span>
	<hr>

	<h1 id="heihei">嘿嘿</h1>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B4XHEnn2-1587610605631)(C:\Users\DELL\AppData\Local\Temp\1585018655143.png)]$

04.复杂选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/* 1.标签选择器与类选择器结合起来…… */
	h1.aaa{
    
		color:red;
	}
	p#bbb{
    
		color:blue;
	}
	/* 2.组合选择器 */
	h1,p,div,span,.ccc{
    
		font-size:30px;
	}
	div{
    
		background:pink;
	}
	.ccc{
    
		font-weight:bold;
	}
	/* 嵌套选择器 */
	div>p{
    
		color:green;
		text-decoration:underline;
	}
	/* 对div内部的类选择器进行修饰 */
	div h3.ddd{
    
		color:yellow;
	}
	</style>
</head>
<body>
	<h1 class="aaa">welcome</h1>
	<h4 class="aaa">css</h4>
	<h1>hello</h1>
	<hr>
	<!-- 需求：修改id属性为bbb的p标签 -->
	<p id="bbb">world</p>
	<p>html</p>
	<h2 id="bbb">web开发</h2>
	<hr>
	<!-- 将h1、pdiv、span标签的字号设置为30像素 -->
	<h1>hello</h1>
	<p>html</p>
	<div>web开发</div>
	<span class="ccc">Java开发</span>
	<hr>
	<!--  -->
	<div>
		<p>div内部的p标签</p>
		<h3>div内部的h3标签</h3>
	</div>
	<hr>

	<div>
		<h2>
			<p>div内部的h2标签内部的p标签</p>
		</h2>
	</div>
	<hr>

	<div>
		<p>div内部的p标签</p>
		<h3 class="ddd">div内部的h3</h3>
		<p class="ddd">pppp</p>
	</div>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M9Q3Dd8X-1587610605631)(C:\Users\DELL\AppData\Local\Temp\1585623168740.png)]$

05.伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* a:link{
			font-size:12px;
			color:black;
			text-decoration:none;
		}
		a:visited{
			font-size:15px;
			color:red;
		}
		a:hover{
			font-size:20px;
			color:blue;
		}
		a:active{
			font-size:40px;
			color:green;
		} */
		a:link,a:visited{
    
			font-size:13px;
			color:#666666;
			text-decoration:none;
		}
		a:hover,a:active{
    
			color:#ff7300;
			text-decoration:underline;
		}

		p:hover{
    
			color:red;
		}
		p:active{
    
			color:blue;
		}
	</style>
</head>
<body>
	<a href="#">IT教育，高校培训</a>
	<p>css从入门到精通</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GozXHeD9-1587610605632)(C:\Users\DELL\AppData\Local\Temp\1585623182260.png)]$

06.微元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	p:first-letter{
    
		color:red;
		font-size:30px;
	}
	p:first-line{
    
		background:yellow;
	}
	p:before{
    
		content:"嘿嘿";
	}
	p:after{
    
		content:"哈哈";
	}
	</style>
</head>
<body>
	<p>hello world</p>
	<hr>
	<p>
		hello  <br>
		welcome
	</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w5zUy2gW-1587610605633)(C:\Users\DELL\AppData\Local\Temp\1585623192690.png)]$

07.选择器的优先级

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style/world.css">
	<style>
		div

最低0.47元/天解锁文章

sumuqi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css ------笔记相关案例

css 图片案例01 css语法.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color:red } h2{ color...
复制链接

扫一扫