HTML学习笔记_引用CSS样式

最新推荐文章于 2022-09-05 02:43:25 发布

愚者的自白

最新推荐文章于 2022-09-05 02:43:25 发布

阅读量106

点赞数

分类专栏：学习笔记 HTML CSS

本文链接：https://blog.csdn.net/weixin_43876758/article/details/108804104

版权

学习笔记同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

HTML

12 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

学习前端知识的同时，梳理知识，也便于以后查找
tags: HTML、CSS，介绍

多种引用CSS样式的方法？

内部样式

一、行内样式（内联样式）

在开始标签内,添加style样式属性

如下：

<p style="color:red;">红色</p>

注：在pc上green有时候会不那么显眼,可以用red、yellow等比较显眼的颜色

二、内部样式表（嵌入样式）

内部样式：把CSS样式代码写在

<style>要放在<head>标签之间

例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS样式导入-内部样式表</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style type="text/css">
    h3{ color:red; }  
</style>
</head>

<body>  
  <p style="color: yellow;">直接写在标签里</p>
  <h3>CSS导入内部样式表</h3>
</body>
</html>

外部样式

外部样式表：把css样式代码写在独立的一个文件中。

例：
要引入的外部文件：

p{color:blue;}

注：写在外部的css文件中，代码不需要写在<style></style>里面写了会报错！！！

Link链

扩展名：css文件名.css
示例代码：<link rel="stylesheet" type="text/css" href="css-test.css">

注：这个代码要写在head标签之间，不能写在style标签之间否则不会起作用，很容易出错

代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>引用CSS样式</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- 通过link引用外部样式表 -->
	  <link rel="stylesheet" type="text/css" href="base.css"> 
  	<style type="text/css">
    	h3{ color:red; }  
	</style>
</head>

<body>  
  <p style="color: red;">link引用外部样式表</p>
  <h3>对比，内部样式表</h3>
</body>
</html>

导入式

模式代码：@import "外部CSS样式
@import写在<style>标签内最开始位置

注意：在css代码中使用/**/注释

代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>引用CSS样式</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css-test.css"> 
  <style type="text/css">
  	/*第四种方法*/
    @import url('css.css'); 
    h3{ color:red; }  
</style>
</head>

<body>  
  <p style="color: red;">导入式-引用外部样式表</p>
  <h3>对比：内部样式表</h3>
</body>
</html>

小结

四种CSS使用方法的区别

类别	引入方法	位置	加载
行内样式	开始标签内`style`	`html`标签属性	同时
内部样式	`<head>`中`<style>`内	`html`文件类	同时
外部样式	`<head>`中`<link>`使用	`css`样式文件与`html`文件分离	页面加载时，同时加载`css`样式
导入式	`@import url(cssname.css)`	`css`样式文件与`html`文件分离	读取完`html`文件之后加载

四种CSS使用方法优先级

行内样式 > 内部样式 > 外部样式

说明：

链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
最后定义的优先级最高（就近原则）

----END—

愚者的自白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记_引用CSS样式

学习前端知识的同时，梳理知识，也便于以后查找tags: HTML、CSS，介绍目录多种引用CSS样式的方法？内部样式一、行内样式（内联样式）二、内部样式表（嵌入样式）外部样式Link链导入式小结四种CSS使用方法优先级多种引用CSS样式的方法？内部样式一、行内样式（内联样式）在开始标签内,添加style样式属性如下：<p style="color:red;">红色</p>注：在pc上green有时候会不那么显眼,可以用red、yellow等比较显眼的颜色.
复制链接

扫一扫