5-18-CSS(1)：CSS的三种使用方法及实际写法

最新推荐文章于 2023-09-11 18:17:19 发布

qq_42237117

最新推荐文章于 2023-09-11 18:17:19 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/qq_42237117/article/details/80363963

版权

CSS：用于控制网页样式和布局

三种使用方法：

直接使用：标签内/body内

内部：head内定义标签

外部：head内使用link读取CSS文件

---------------------------------------------------------------------------------------------------------

直接使用1：在body内用style属性直接定义此body内的标签样式；

<html>
	<head>
		<meta charset="utf-8">
		<title>1.在body内定义此body内标签的样式</title>
	</head>
	<body style="color: blue;">
		<p>我被上面的属性定义的颜色是blue</p>
	</body>
</html>

直接使用2：在标签使用style属性定义标签内容的样式；

<html>  
    <head>  
        <title>2.直接在标签内定义此标签样式</title>  
    </head>     
    <body>  
        <p style="font-weight: 900;">我定义了P标签的所有内容都是粗体<span style="color: blueviolet;">我把span内字体颜色变成了蓝紫</span></p>
    </body>  
</html>

---------------------------------------------------------------------------------------------------------

内部：在head内新建style并自定义样式，来让本文档内的标签调用；【新建样式格式 .名称{样式}】；标签内class直接调用；

<html>
	<head>
		<title>内部</title>
		<style type="text/css">
			.css1{color: aqua;font-weight: bold;font-size: 20pt;}
			.css2{color: blue;font-weight: 400;font-family: "仿宋";font-size: 30pt;}
		</style>
	</head>
	<body>
		<p class="css1">我是被ceshi1影响的内容</p>
		<p class="css2">我是被ceshi2影响的内容</p>
	</body>
</html>

---------------------------------------------------------------------------------------------------------

外部：使用link链入外部CSS文件来影响本文件的缩影样式；同时还可自定义标签样式；互不冲突；

此CSS文件必须在同网站目录下；

<html>
	<head>
		<title>1.使用link链入外部CSS文件</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css1.css" />
	</head>
	<p>我是被导入的CSS1影响的内容</p>
</html>

---------------------------------------------------------------------------------------------------------

CSS的实际写法：

*{font-family: "仿宋";} *代表此css文件所有样式

body{color: darkmagenta;} bady内的样式

p,span{color: red;font-size: 20pt;} p和span的样式