Rumah >hujung hadapan web >tutorial css >分享四种方式将CSS样式导入到HTML中
分享四种方式将CSS样式导入到HTML中
- yuliaasal
- 2018-09-17 10:46:165306semak imbas
在进行页面布局时，必然会用到CSS和HTML，因为HTML是页面的主体内容部分，CSS是页面的表现，通俗的讲，CSS是给HTML进行化妆的。那CSS的样式怎么在HTML中实现呢？这时候就需要在HTML中引入CSS文件，今天就和大家聊聊如何将CSS导入HTML中，有需要的可以参考一下。
将CSS导入HTML的方式有四种，分别是行内式，嵌入式，外部样式。外部样式又分为import导入式，link链接式。
一、行内式，即在HTML标签中直接加上css样式，用style添加。
比如：将div中的字体设置为40px，颜色设为红色。代码如下：
<div style="font-size: 40px;color: red;">今天星期一</div>
效果图：
二、嵌入式，即将CSS样式写在9a6c6593cd224a767d2b5172bc71b53a531ac245ce3e4fe3d50054a55f265927中，然后将style放在93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1之间。
比如：在c9ccee2e6ea535a969eb3f532ad9fe89中写入样式，将div的颜色设为橙色，字体为40px。代码如下：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{font-size: 40px;color: orange;}
</style>
</head>
<body>
<div>今天星期二</div>
</body>
</html>效果图：
三、外部样式（外部样式又分为import导入式，link链接式）
外部样式就是把css样式代码写在一个单独的外部文件中，这个外部文件以“.css”为扩展名，然后将其引入需要的HTML中。import导入式和link链接式的引入方法不一样，接下来一一介绍。
1、import导入式，即在9a6c6593cd224a767d2b5172bc71b53a531ac245ce3e4fe3d50054a55f265927中用@import的URL引入。
比如：用import导入式将div的字体设为40px,颜色为黄色。代码如下：
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@import url("css/import.css");
</style>
</head>
<body>
<div>今天星期三</div>
</body>效果图：
2、link链接式，即在93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1中添加ea850605b5152d864ab3535712d3cbb3 调用外部css文件来实现样式效果。
比如：用外部样式link将div的颜色设置为绿色，字体为40px。代码如下：
<html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <div>今天星期三</div> </body> </html>
效果图：
总结：
1、行内式这种方式麻烦，查找不方便，也没有体现CSS的优势，因此不推荐使用。
2、嵌入式对于大的页面不推荐使用，对于小的样式少的网页可以使用。
3、同样是外部样式，import导入式和link链接式的区别在哪里？使用link链接式，会在加载页面主体内容之前加载CSS样式文件，这样用户看到的网页一开始就是带有样式效果的。如果使用import导入式，会在整个页面加载完成后再加载CSS样式文件，所以有时候会出现显示无样式情况，闪烁一下后再出现设置样式后的效果。因此从用户体验来说，还是建议使用link链接式来引入CSS样式。
以上介绍了4种方式将CSS导入到HTML中，具体用什么方式，还需要看情况决定，但是用的最多的还是link链接式，正在学习的小伙伴可以多去练习尝试，希望对你有帮助！
Atas ialah kandungan terperinci 分享四种方式将CSS样式导入到HTML中. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!