引入css样式的三种方式

最新推荐文章于 2024-04-24 10:07:36 发布

阿汤的大眼睛

最新推荐文章于 2024-04-24 10:07:36 发布

阅读量519

点赞数

分类专栏： # HTML

本文链接：https://blog.csdn.net/Big_eyes123/article/details/79164758

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一种：内部样式表

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>寒假练习</title>
</head>
<body>
  <div style="width:1000px; height:1000px; background-color:red; font-size:20px; text-align:center;">求索网工作室<div>
</body>
</html>
<!--
这是行间样式表 写在标签的style属性
属性名="属性值"
-->

第二种：行间样式表

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>寒假练习</title>
<style>
 #div1{width:1000px;
       height:1000px;
       background-color:red;
       font-size:20px; 
       text-align:center;
       } 
</style>
</head>
<body>
  <div id="div1">求索网工作室<div>
</body>
</html>
<!--
这是内部样式表 写在页面内部，专门的style标签里
id="id名" #id名{}  ！！！同一个页面ID不能重名的
-->

第三种：外部样式表

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>寒假练习</title>
<link href="3.css" rel="stylesheet" />
</head>
<body>
  <div id="div1">求索网工作室<div>
</body>
</html>
<!--
这是外部样式表 写在单独css里边，通过link引入当前页面
<link href="样式表的路径" rel="stylesheet" />
-->
css样式：#div1{width:1000px;
       height:1000px;
       background-color:red;
       font-size:20px; 
       text-align:center;
       }

总之，三种样式表都可以。但是外部样式表比较方便灵活，易改动。
制作复杂的网页首选。

阿汤的大眼睛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
引入css样式的三种方式

第一种：内部样式表html>head>meta charset="utf-8" />title>寒假练习title>head>body> div style="width:1000px; height:1000px; background-color:red; font-size:20px; text-align:center;">求索网工作室div>body>html
复制链接

扫一扫

专栏目录