CSS案例

最新推荐文章于 2024-05-07 22:37:05 发布

Ao622

最新推荐文章于 2024-05-07 22:37:05 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/ho622/article/details/105081019

版权

DAY1

案例1 01.CSS的语法.html

<!DOCTYPE html>
<html>
<head>
	<meta charset ="utf-8">
	<title>Doucment</title>
	<style>
 		 p{
   			color:red;
  			}
  		h2{
   			color:blue;
  			}
 	</style>
</head>
	<p>CSS从入门到精通</p >
 	<h2>主讲：hector</h2>
<body>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IHJIgFn2-1585054710945)(.\images\案例1.png)]$

案例2 02.CSS应用样式.html

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

	<div>嘿嘿</div>
	<div>哈哈</div>
	
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AoIFUCbC-1585054710945)(.\images\案例2.png)]$

案例3 03.CSS基础选择器.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 1.标签选择器 */
		p{
			color:red;
			font-size:20px;
		}
		h2{
			color:yellow;
		}
		/* 2.类选择器 */
		.hello{
			background:#cccccc;
		}
		.world{
			font-weight:bold;
		}
		#heihei{
			color:blue;
		}
	</style>
</head>
<body>
	<!-- 给p标签中的内容设置样式 -->
	<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既要有背景颜色，也要加粗 -->
	<div class="hello world">主讲</div>
	<span>CSS从入门到精通！</span>
	<hr>

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oNa7pfJ2-1585054710946)(.\images\案例3.png)]

CSS从入门到精通！

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

```

[外链图片转存中...(img-oNa7pfJ2-1585054710946)]

Ao622

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS案例

DAY1案例1 01.CSS的语法.html<!DOCTYPE html><html><head> <meta charset ="utf-8"> <title>Doucment</title> <style> p{ color:red; } h2{ ...
复制链接

扫一扫