css文件的3种引入方法

最新推荐文章于 2023-10-20 10:57:08 发布

weixin_44117331

最新推荐文章于 2023-10-20 10:57:08 发布

阅读量545

点赞数 1

本文链接：https://blog.csdn.net/weixin_44117331/article/details/89215489

版权

css文件的3种引入方法

(1)行内样式：

使用style属性引入css样式，写在body标签里面，测试时用的较多

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</

例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
        <base href="<%=basePath%>">
        <title>My JSP 'test00.jsp' starting page</title>
	    
	<meta http-equiv="pragma" content="no-cache">
	 <meta http-equiv="cache-control" content="no-cache">
	 <meta http-equiv="expires" content="0">    
	 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	 <meta http-equiv="description" content="This is my page">
	 <!--
	 <link rel="stylesheet" type="text/css" href="styles.css">
	 -->
</head>
		  
<body>
    <!-- 使用行内样式引入css -->
   <h1 style="color:red">我是标题</h1>
   <p style="color:blue;font:20px">我是p标签，段落</p>
 </body>
</html>

结果如下：
在这里插入图片描述

(2)：内部样式

在style标签中书写css代码，style标签写在head中

	<head>
	 
		<style type="text/css">
		 
		h3{
		 
		color:green;
		 
		}
		 
		</style>
		 
	</head>
	<body>
  		 <h3>内部样式表</h3>	
	 </body>

结果如下：
在这里插入图片描述

（3）外部样式表

css代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。

语法：
1、链接式

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

2、导入式

<style type="text/css"> @import url("css文件路径"); </style>



例如：
<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>外部样式表</title>
  <!--链接式:推荐使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" /> 
  <!--导入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>
<body>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

链接式和导入式的区别
link：
1、属于XHTML
2、优先加载CSS文件到页面
@import：
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。

weixin_44117331

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css文件的3种引入方法

css文件的3种引入方法(1)行内样式：使用style属性引入css样式，写在body标签里面，测试时用的较多<h1 style="color:red;">style属性的应用</h1><p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</例如：<!DOCTYPE HTM...
复制链接

扫一扫