CSS样式的写法

最新推荐文章于 2025-07-09 14:38:48 发布

原创最新推荐文章于 2025-07-09 14:38:48 发布 · 7.9k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#CSS样式的写法 #CSS样式 #CSS样式的三种写法

HTML/CSS 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍三种CSS样式写法：内联样式、内部样式表及外部样式表。内联样式直接在HTML标签中定义；内部样式表在页面头部的<style>标签内定义；外部样式表则在独立的.css文件中定义，通过<link>标签在HTML文档中引入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS样式的写法：

方式一：将CSS样式直接写到标签里面

<div style="width: 200px;height: 150px;background-color: aqua">ddd</div>

方式二：将CSS样式写到页面头部

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	    <style type="text/css">
	        .sth {
	            height: 200px;
	            font-size: 88px;
	            background-color: blue;
	        }
	    </style>
	    <style rel="stylesheet" type="text/css" href="main.css"></style>
	</head>
	<body>
		<div style="width: 200px;height: 150px;background-color: aqua">div</div>
		<div class="sth">div</div>
		<div class="sth">div</div>
	</body>
</html>

方式三：建立单独的CSS文件，然后在页面中引用

创建CSS文件，将其命名为demo.css：

.fun{
    background-color: burlywood;
}

在页面中引用上步中创建的样式文件：

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	    <link rel="stylesheet" type="text/css" href="demo.css">
	</head>
	<body>
		<div class="fun">div</div>
	</body>
</html>