CSS学习中|引入CSS样式表的三种方法（书写位置）

最新推荐文章于 2022-08-15 08:00:00 发布

美女变成老太婆✿

最新推荐文章于 2022-08-15 08:00:00 发布

阅读量287

点赞数

分类专栏： CSS基础文章标签： css

本文链接：https://blog.csdn.net/weixin_47788265/article/details/106858621

版权

CSS基础专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1.行内式

语法格式：

<标签名 style=“属性名1:属性值1;属性值2:属性值2;…;属性名n:属性值n”></标签名>

注意：和；的使用

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>0618</title>
  </style>
</head>
<body>
  <!-- 行内样式表 -->
  <h1 style="color:green; font-size:20px;">早上好</h1>
</body>
</html>

样例：

2.内部样式表

语法格式：

<head>

选择器{

属性1：属性值1；

属性 2：属性值2;

...

}

</style>

</head>

代码：

html5中type=“text/css”可省略不写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>0618</title>
  <style type="text/css">
   h1 {
      color: green;
   }   
  </style>
</head>
<body>
  <h1>早上好</h1>
</body>
</html>

样例：

3.外部样式表（重要且常用）

新建一个以.CSS为扩展名的外部样式表的文件中，通过链接<link>使CSS文件对本网页的样式有效

demo.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>0618</title>
  <!-- 给html文件和css文件建立联系 -->
  <link rel="stylesheet" type="text/css" href="demo.css" />
</head>
<body>
  <h1>早上好</h1>
</body>
</html>

demo.css代码：

h1 {
  color: aqua;
}

样例：

美女变成老太婆✿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习中|引入CSS样式表的三种方法（书写位置）

1.行内式语法格式：<标签名 style=“属性名1:属性值1;属性值2:属性值2;…;属性名n:属性值n”></标签名>注意：和；的使用代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
复制链接

扫一扫

专栏目录