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

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

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

浏览器运行效果:

 

转载地址:http://fdzia.baihongyu.com/

你可能感兴趣的文章
100多个经典常用的jQuery插件大全实例演示和下载
查看>>
linux中top命令详解
查看>>
cgi fastcgi php-cgi php-fpm
查看>>
memcache与memcached的区别与安装
查看>>
第三天 入口文件index.php 02
查看>>
tomcat 日志log4j,slf4j,logback冲突
查看>>
xml学习笔记(第二篇DTD)
查看>>
数据类型、字符串、list操作、集合set
查看>>
EIGRP 查看邻居命令详解
查看>>
Windows Vista下的EFS加密
查看>>
电子行业砥砺奋进 企业风向标汇聚品牌盛会
查看>>
安装cacti
查看>>
F5实现一键备份和恢复功能
查看>>
python学习笔记列表和元组(三)
查看>>
Linux下patch的制作和应用
查看>>
联通专线切换成移动专线问题故障解决
查看>>
Oracle11gR2 for Linux6.4 静默安装
查看>>
IO-字符流-FileReader
查看>>
再谈全局网HBase八大应用场景
查看>>
mysql数据库基本命令
查看>>