四种CSS样式的引入方式
准备
1.首先准备一个html文件：test.html，不建议使用记事本创建文件，建议使用Notepad++来创建并编辑文件，注意编码格式为：以UTF-8无BOM格式编码，否则会出现中文乱码，内容如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>四种CSS样式引入方式</title>
<style type="text/css">
</style>
</head>
<body>
hello
</body>
</html>
2.保存文件至桌面，右键选择谷歌浏览器（或其他浏览器打开）打开，发现页面上出现了hello这几个英文字母。
四种引入方式
行内式
通过html属性style实现，如下所示
//写在body标签中
<span style="color:red;">行内式</span>
嵌入式
在style标签中写css样式，在body中引用
//写在style标签中的css样式
p{
color:blue;
}
-----------------------------------------------------------------
//写在body标签中
<p>嵌入式</p>
链接式
1.一般都使用这种方式，在桌面上新建一个css文件：test.css，内容为一个css样式
//写在test.css文件中
div{
color:yellow;
}
2.在test.html引入test.css文件
//写在head标签中引入css文件，href属性中的为绝对路径，当前在同一级目录下
<link href="test.css" type="text/css" rel="stylesheet" />
------------------------------------------------------------------------
//写在body标签中
<div>链接式</div>
导入式
@import(url(demo.css))
1.基本不使用，因为页面会先加载html，然后再去加载css，这样就会造成页面样式的延迟。
2.创建一个demo.css文件，写上一个css样式
//写在demo.css文件中
h2{
color:green;
}
3.使用@import方式导入demo.css文件
//试验了一下，需要单独写在一个style中，
<style>
@import url(demo.css)
</style>
----------------------------------------------------------------------------
//写在body标签中
<h2>导入式</h2>
html页面代码
页面效果图
前三种样式的显示优先级
就近原则，即行内式>嵌入式>嵌入式
说明：本文为原创作品，若有参考会在文中提及，如有遗漏，涉及侵权，请联系本人，将立即修正。
四种CSS样式的引入方式的更多相关文章
- 常用的四种CSS样式表格
1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...
- CSS样式的引入方式
test.css div{ color:yellow; } 在html中引入 <link href="test.css" type="text/css" ...
- web前端（7）—— 了解CSS样式，引入css样式的方式
CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打 ...
- CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源
CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...
- 四种常用的access连接方式
整理出四种常用的access连接方式,当然,第1种这是最常用的(推荐使用).1. set dbconnection=Server.CreateOBJECT("ADODB.CONNECTION ...
- 三种CSS样式
内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式css样式表就是把css代码直接 ...
- JavaScript中四种不同的属性检测方式比较
JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...
- css引入的方式有哪些_四种css的引入方式与特点
在网页中css主要负责html文档的样式显示,目前css主要有4种引入方式:行内式.内嵌式.导入式.链接式. 1.行内式 行内式也叫内联样式,是指标记的style属性中设定CSS样式,这种方式没有体现 ...
- CSS样式表引用方式
最近讲课中,有些学员对调用样式表老是有含糊不清?大体说来有四种方式: 1.外部文件引用方式;(推荐使用) 2.使用@import引用外部CSS文件; 3.内部文档头方式也叫内嵌法调用; 4.直接插入式 ...
随机推荐
- Java操作JSON数据(1)--JSON-lib操作JSON数据
JSON-lib是一个java库,用于将bean.映射.集合.java数组和XML转换为JSON,或将JSON转为beans和DynaBeans.JSON-lib最后的版本是2.4,更新时间是2010 ...
- MySQLNonTransientConnectionException: Could not create connection to database server.
MySQLNonTransientConnectionException: Could not create connection to database server. Spring整合mybati ...
- Spring的核心容器
Spring框架的主要功能是通过其核心容器来实现的.Spring提供了2种核心容器:BeanFactory.ApplicationContext. BeanFactory BeanFactory是一个 ...
- 初识osquery
初识osquery osquery是一个由Facebook的开源用于对系统进行查询,监控以及分析的一款软件. osquery对其的说明如下: osquery将操作系统公开为高性能关系数据库.这允许您编 ...
- vip视频播放
插件 Tampermonkey https://greasyfork.org/zh-CN
- scrapy 爬虫中间件 deepth深度
源码 class DepthMiddleware(object): def __init__(self, maxdepth, stats, verbose_stats=False, prio=1): ...
- docker 常见问题处理汇总
问题一: docker执行docker info出现如下警告WARNING: bridge-nf-call-iptables is disabledWARNING: bridge-nf-call-ip ...
- MySQL/MariaDB数据库的存储引擎
MySQL/MariaDB数据库的存储引擎 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL体系结构 连接管理模块: 负责接收远程用户的连接. 线程管理模块: 维护 ...
- TPA测试项目管理系统-测试用例管理
Test Project Administrator(简称TPA)是经纬恒润自主研发的一款专业的测试项目管理工具,目前已广泛的应用于国内二十余个整车厂和零部件供应商.它可以管理测试过程 ...
- appium+python自动化63-使用Uiautomator2报错问题解决
前言 appium desktop V1.7.1版本使用命令行版本启动appium后,使用Uiautomator2定位toast信息报错:appium-uiautomator2-server-v0.3 ...