css.案例

最新推荐文章于 2023-11-28 10:41:34 发布

Emotional_gjx

最新推荐文章于 2023-11-28 10:41:34 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/emotional_gjx/article/details/105081378

版权

1

<!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>

在这里插入图片描述

2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<title>Document</title>
	<style>
	/*内部样式（并没有实现样式与内部的分离）*/
	p{
		color:red;
	}
	</style>
	<!-- 外部样式 link标签链接样式文件-->
	<link rel="stylesheet" type="text/css" href="style/hello.css">
	<!-- 外部样式 @import导入样式文件-->
	<style>
    /* @import "style/hello.css"*/
	</style>
</head>
<body>
     <p>welcome to css</p>
     <p>欢迎来到css课堂</p>

     <h2 style="color:blue">web前段工程师</h2>
     <h2>Java开发工程师</h2>

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

在这里插入图片描述

3

<!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: #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 class="hello world">主讲</div>
      <span class="world">css入门到精通</span>
      <hr>
     <h1 id="heihei">嘿嘿</h1>
</body>
</html>

iv>
css入门到精通

嘿嘿

```

在这里插入图片描述

Emotional_gjx

关注

0
点赞
踩
0

收藏

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

1<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Document</title> <style> P{ color:red; } h2{ color:blue; } </style&g...
复制链接

扫一扫