四种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.直接插入式 ...
随机推荐
- SpringBoot中yml配置文件
1.yml配置文件书写格式 格式是在普通配置文件中以“.”分割的属性名称,该为“: ”和换行. 例子: //普通格式 spring.datasource.driver-class-name=com.m ...
- 自定义指令 VUE基础回顾7
vue除了有v-if等内置指令,我们也可以创建自定义指令. 例:我们可以实现一个可以每隔一秒闪烁的节点,类似于<blink>标签的行为.添加一个指令类似于添加一个过滤器,可以将他传入vue ...
- MySQL Replication--半同步复制(Semi-Sync Replication)
半同步复制 默认配置下,MYSQL主从库通过binlog来保持一致,主库事务提交后,将binlog日志写入磁盘,然后返回给用户,备库通过拉取主库的binlog来同步主库的操作,无法保证主备节点数据实时 ...
- USB之设备插入波形变化2
============= 本系列参考 ============= <圈圈教你玩USB>.<Linux那些事儿之我是USB> 协议文档:https://www.usb.or ...
- [AWS][GUI][VNC]rhel 7 安装GUI ，配置VNC
预计阅读时间:15分钟 预计配置时间:30分钟 (前提是已经申请AWS的EC2的rhel7 云主机并且成功运行) 目前AWS 亚马逊云免费试用一年,申请一个学习使用 痛点:没有GUI,无法搭建Jen ...
- thymeleaf模板、thymeleaf语法相关中文文档教程
thymeleaf模板在SpringBoot中是默认的模范引擎技术,SpringBoot不推荐使用比较老旧的jsp.但如果您想使用jsp的话,当然也可以.我这里为您讲述thymeleaf模板的基本th ...
- mac随笔
1.查看端口,lsof -i tcp:post lsof -i tcp:8086 2.kill进程 找到进程的PID,使用kill命令:kill PID(进程的PID,如2044),杀死对应的进程 k ...
- 51nod 1053 最大M子段和 V2
N个整数组成的序列a[1],a[2],a[3],…,a[n],将这N个数划分为互不相交的M个子段,并且这M个子段的和是最大的.如果M >= N个数中正数的个数,那么输出所有正数的和. 例如:-2 ...
- java调用c++库
c++ 写的库 jni封装一层 才可以给 java调用
- springboot无法识别配置文件级解决办法
eclipse中右键项目bulid path 之后找到 后点击完成后点击运用 修改完成