博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS文件的三种引入方式
阅读量:5891 次
发布时间:2019-06-19

本文共 1525 字,大约阅读时间需要 5 分钟。

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

一、行内样式

使用style属性引入CSS样式。

示例:

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

例如:

  
行内样式

Leaping Above The Water

我是p标签

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。
示例:
<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>

例如:

  
内部样式表
我是DIV

三、外部样式表

CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。
语法:
1、链接式
<link type="text/css" rel="styleSheet"  href="CSS文件路径" />
2、导入式
<style type="text/css">
  @import url("css文件路径");
</style>

例如:

  
外部样式表
  1. 1111
  2. 2222

链接式和导入式的区别

<link>
1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。

四、CSS中的优先级

1、样式优先级

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

例如:

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

  
行内样式和内部样式表的优先级

我是p段落

浏览器运行效果:

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

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

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

  
内部样式表和外部样式表的优先级

我是p段落

我是div
  1. 1111
  2. 2222

浏览器运行效果:

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

  
内部样式表和外部样式表的优先级

我是p段落

我是div
  1. 1111
  2. 2222

浏览器运行效果:

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

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

2、选择器优先级

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

  
选择器的优先级

111

222

333

浏览器运行效果:

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

你可能感兴趣的文章
高级Bash脚本编程指南(27):文本处理命令(三)
查看>>
JavaScript---事件
查看>>
Android NDK入门实例 计算斐波那契数列一生成jni头文件
查看>>
c/c++性能优化--I/O优化(上)
查看>>
将HTML特殊转义为实体字符的两种实现方式
查看>>
jquery 保留两个小数的方法
查看>>
网站架构设计的误区
查看>>
Standard C++ Programming: Virtual Functions and Inlining
查看>>
html5 Web Workers
查看>>
iis 故障导致网站无法访问
查看>>
作业抄袭简单检测
查看>>
ASP.NET 回调技术(CallBack)
查看>>
Spark源码分析 – BlockManager
查看>>
JS中的this
查看>>
人生, 不要在别扭的事上纠结
查看>>
C的面向对象编程
查看>>
日志服务器架构设计
查看>>
使用Unity开发Android的几种调试方法
查看>>
C++ 基础笔记(一)
查看>>
编译内核出错:invalid option `abi=aapcs-linux' 解决办法
查看>>