HTML学习笔记_引用CSS样式

学习前端知识的同时,梳理知识,也便于以后查找
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使用方法的区别

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

四种CSS使用方法优先级

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

说明:

  1. 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后

  2. 最后定义的优先级最高(就近原则)

----END—

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页