css样式表创建

最新推荐文章于 2023-09-18 15:48:50 发布

yCodeM

最新推荐文章于 2023-09-18 15:48:50 发布

阅读量569

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_38594777/article/details/87821716

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.行类样式表的三种创建方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    
    <!--内联样式表-->
    <style type="text/css">
    	div {
				color : yellow ;
			}
    </style>

    <!--外链样式表，通过href值链接对应的外部的css-->
   <link rel="stylesheet"  href="css/style.css" type="text/css" /><hr>

</head>

<body>
	<h1>困</h1>
    <!--行类样式表--->
	<div style="color:red">真困真困</div>
    <div>很困很困</div>
    <div class="div1">巨困巨困</div>
    <div class="div2 strong">困晕困晕</div>    
 
</body>
</html>

样式表的优先级

行类样式表 > 内联样式表

而内联样式表与外部样式表的优先级与书写的顺序有关。

html页面加载是从上往下的

样式表的导入

通过@import导入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    
    <style type="text/css">
    	@import url("目标文件的路径及其名称");
    </style>
   <link rel="stylesheet"  href="css/style.css" type="text/css" /><hr>

</head>

<body>
	<h1>困诗</h1>
	<div style="color:red">真困真困</div>
    <div>很困很困</div>
    <div class="div1">巨困巨困</div>
    <div class="div2 strong">困晕困晕</div>    
 
</body>
</html>

import与link的导入外部样式表的区别

import导入是css提供的方式

link属于xhtml语法

两者的加载顺序不同，import加在要等页面加载后加载，link是与页面同时进行加载

import有些兼容性问题,link没有兼容性问题

link链接的样式表可以通过js的dom操作进行修该,而import不行

yCodeM

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css样式表创建

1.行类样式表的三种创建方式&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;!--内联样式表--&gt; &lt;style type=&quo
复制链接

扫一扫