CSS内联样式与外联样式

最新推荐文章于 2025-04-29 10:16:04 发布

onnx

最新推荐文章于 2025-04-29 10:16:04 发布

阅读量577

点赞数

分类专栏： CSS 前端开发文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/DeepLearning_/article/details/132713507

版权

CSS 同时被 2 个专栏收录

5 篇文章

订阅专栏

前端开发

5 篇文章

订阅专栏

第一种内联样式

通过HTML元素的style属性来设置CSS样式，语法如下:

style="css属性:css属性值;"

示例代码:

<!DOCTYPE html>
<html>
  <head>
    <title>01_第一种使用方式.html</title>
  </head>
  <body>
    <!-- style="css属性:css属性值;" -->
	<div style="color:red;" >atguigu</div>
  </body>
</html>

第二种内联样式

通过HTML页面的style元素来设置CSS样式，语法如下:

<style type="text/css">
	选择器 {
		属性名 : 属性值;
	}
</style>

示例代码:

<!DOCTYPE html>
<html>
  <head>
    <title>02_第二种使用方式.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<!-- 
		style标签:封装样式内容
			* type:指定使用样式,值为"text/css"
			* 设置CSS语法:
				选择器 {
					属性名 : 属性值;
				}
	 -->
	<style type="text/css">
		div {
			color : red;
		}
	</style>
  </head>
  <body>
    <div>atguigu</div>
  </body>
</html>

外联样式

通过HTML页面的link元素来引入外部CSS样式，语法如下:

<link href="css文件路径" rel="stylesheet" type="text/css" />

示例代码:

<!DOCTYPE html>
<html>
  <head>
    <title>04_第四种使用方式.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<!-- 
		link标签:
			* href:引入外部css文件路径
			* rel:设置引入文件为样式文件
			* type:指定使用样式,值为"text/css"
	 -->
	<link href="div.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div>atguigu</div>
  </body>
</html>
html>