CSS文件的三种引入方式

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。

示例：
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
实际在写页面时不提倡使用，在测试的时候可以使用。

例如：

<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>行内样式</title>
</head>
<body><!--使用行内样式引入CSS--><h1 style="color:red;">Leaping Above The Water</h1><p style="color:red;font-size:30px;">我是p标签</p>
</body>
</html>

二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例：
<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>

例如：

<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>内部样式表</title><!--使用内部样式表引入CSS--><style type="text/css">div{background: green;}</style>
</head>
<body><div>我是DIV</div>
</body>
</html>

三、外部样式表
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文件。

四、CSS中的优先级

1、样式优先级

行内样式>内部样式>外部样式(后两者是就近原则)

例如：

行内样式和内部样式比较优先级：

<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>行内样式和内部样式表的优先级</title><!--内部部样式表--><style type="text/css">p{color: blue;}</style>
</head>
<body><!--行内样式--><p style="color: red;">我是p段落</p>
</html>

浏览器运行效果：

结论：行内样式优先级高于内部样式表。

内部样式表和外部样式表比较优先级：

a、内部样式表在外部样式表上面

<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>内部样式表和外部样式表的优先级</title><!--内部部样式表--><style type="text/css">p{color: blue;}</style><!--外部样式表--><link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body><p>我是p段落</p><div>我是div</div><ol><li>1111</li><li>2222</li></ol>
</html>

浏览器运行效果：

b、外部样式表在内部样式表上面

<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>内部样式表和外部样式表的优先级</title><!--外部样式表--><link rel="stylesheet" type="text/css" href="css/style.css" /> <!--内部部样式表--><style type="text/css">p{color: blue;}</style>
</head>
<body><p>我是p段落</p><div>我是div</div><ol><li>1111</li><li>2222</li></ol>
</html>

浏览器运行效果：

结论：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。

注意：导入式和链接式的优先级也是使用就近原则。

2、选择器优先级

优先级：ID选择器>类选择器>标签选择器

<!DOCTYPE>
<html>
<head><meta charset="utf-8" /><title>选择器的优先级</title><style type="text/css">#a{color: green;}.b{color: yellow;}h2{color: red;}</style>
</head>
<body><h2>111</h2> <!--红色--><h2 id="a" class="b">222</h2> <!--绿色--><h2 class="b">333</h2><!--黄色-->
</html>

浏览器运行效果：

转载于:https://www.cnblogs.com/Firesun/p/9713282.html

CSS文件的三种引入方式相关推荐

css样式的三种引入方式
第一种:行内式(也称内联) 直接将样式写在标签中,属于权重最高级别例如: 第二种:内部式在head中写上style标签,将想要的样式写在style中,再通过id或class引用第三种:外部式这种 ...
css三种引入方式以及其优先级的说法
css 三种引入方式方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用分号 : ...
css的三种引入方式
css三中引入方式: 行间样式>内部样式=外部样式(内部样式和外部样式优先级相同,文档后面的会覆盖前面的) <!DOCTYPE html> <html> <head ...
CSS的三种引入方式：外部样式、内部样式和行内样式
CSS的三种引入方式:外部样式.内部样式和行内样式外部样式链接式:link标签导入式:@import 链接式与导入式的区别内部样式行内样式样式优先级外部样式即CSS代码保存在外部,HT ...
css三种引入方式与标签选择器
目录 css三种引入方式选择器标签选择器: class选择器: id选择器: 后代选择器: 子代选择器: 组合选择器: 通配符选择器: css三种引入方式 1.行间样式:权重最高1000,在标签的 ...
CSS的三种引入方式与JS的三种引入方式
CSS的三种引入方式前端三剑客分为html,css,js, html作为骨架,楼体是观看者看到的第一元素,而css和js是美化并增加功能的肉体羽毛或者楼体工装,肉体羽毛需要安装到骨架上,才能使整体完 ...
CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型
一.CSS简介 1.什么是css 重叠样式表主要是负责标签的样式美化页面一个网页分三大部分结构层: 主要由html负责负责页面的结构表现层: 主要由css负责页面的展示样式美化页面行 ...
006 CSS三种引入方式
CSS三种引入方式一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

CSS文件的三种引入方式

CSS文件的三种引入方式相关推荐

最新文章

热门文章