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

本文共 1531 字,大约阅读时间需要 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/Joe-and-Joan/p/10009880.html

你可能感兴趣的文章
Android学习(十) SQLite 基于SQLiteOpenHelper的操作方式
查看>>
MySQL 相关文件的简单说明
查看>>
qt-win-opensource-4.8.4-mingw安装流程
查看>>
C Runtime
查看>>
给表加上Code字段
查看>>
[AH2017/HNOI2017] 礼物 解题报告 (FFT)
查看>>
Spring课程 Spring入门篇 4-4 Spring bean装配(下)之Autowired注解说明3 多选一 qualifier...
查看>>
java内调用perl、python、dll、cmd
查看>>
ASP MVC管理类快速开发
查看>>
Software interfaces in object-oriented languages
查看>>
提取配置文件中无注释的内容方法--findstr
查看>>
《大型网站技术架构》读书笔记之六:永无止境之网站的伸缩性架构
查看>>
C++类模板——博客链接
查看>>
MiniUI 在线示例(gridview)
查看>>
测试人员在实际项目中遇事的一些正确的处理姿势
查看>>
性能测试案例
查看>>
Android 软键盘弹出时布局内指定内容上移实现及问题解决
查看>>
Oracle游标动态赋值
查看>>
LVS的DR模式
查看>>
Node.js初识
查看>>