2.CSS的书写方式

最新推荐文章于 2023-06-23 19:33:50 发布

二十二644

最新推荐文章于 2023-06-23 19:33:50 发布

阅读量152

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_61783164/article/details/121910344

版权

【1】内联样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<!-- 
			书写方式：内联样式（行内样式）
			在标签中加入一个style属性，css的样式作为属性值
			uoge属性值之间用";"进行拼接
		 -->
		<h1 style="color: aquamarine;font-family: "agency fb";">这是一个h1标题</h1>		
	</body>
</html>

【2】内部样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		
		<!-- 
			书写方式：内部样式：
			head标签中加入一个style标签，在里面定位到你需要修饰的元素，然后在{}中加入你要修饰的样式
		 -->
		<style type="text/css">
		h1{
			color: chartreuse;
			font-family: 宋体;
		}
		</style>
	</head>
	<body>
		<h1>这是一个书写标题</h1>
	</body>
</html>

【3】外部样式：

首先要创建一个css文件，css文件的后缀.css

h1{
    color: #7FFF00;
    font-family: "bodoni mt condensed";
}

在创建HTML页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <!-- 引入外部CSS资源：link -->
        <link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
    </head>
    <body>
        <h1>这是一个标题</h1>
    </body>
</html>

【4】实际开发中三种书写方式用的最多的是：

第三种：外部样式：因为这种方式真的做到了元素页面和样式分离

【5】三种书写方式的优先级：

就近原则：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <!-- 引入外部CSS资源：link -->
        <link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
        <style type="text/css">
            h1{
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1 style="color: crimson;">这是一个标题</h1>
    </body>
</html>

二十二644

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.CSS的书写方式

【1】内联样式：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <!-- 书写方式：内联样式（行内样
复制链接

扫一扫