四种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.直接插入式 ...
随机推荐
- docker swarm yaml
https://www.cnblogs.com/bigberg/p/8867326.html 一.简介 Docker有个编排工具docker-compose,可以将组成某个应该的多个docker容器编 ...
- 学习网络BGP必备基础知识
外部网关协议,使用TCP作为传输层协议,支持CIDR,增量更新,距离矢量路由协议,无环路,路由策略丰富,可防止路由震荡,易于扩展. BGP概述 #BGP工作原理 之 报文类型 TCP三次握手 open ...
- 【转载】C#中int.TryParse方法和int.Parse方法的异同之处
在C#编程过程中,int.TryParse方法和int.Parse方法都可以将字符串string转换为整型int类型,但两者还是有区别,最重要的区别在于int.TryParse方法在字符串无法转换为i ...
- mysql主从一致性校验工具-pt
一.环境 1.系统环境 系统 IP 主机名 说明 server_id centos6.7 MasterIP master 数据库:主 177 centos6.7 SlaveIP slave 数据库: ...
- day 07 预科
目录 异常处理 字符串内置方法 1.索引取值 2.切片 3.成员运算 4.for循环 5.len() 6.strip(): 默认去掉两端空格 7.lsteip()/rstrip(): 去左端/右端 空 ...
- JavaScript: 详解正则表达式之一
正则表达式是一个精巧的利器,经常用来在字符串中查找和替换,JavaScript语言参照Perl,也提供了正则表达式相关模块,开发当中非常实用,在一些类库或是框架中,比如jQuery,就存在大量的正则表 ...
- golang之reflection
反射就是程序能够在运行时检查变量和值,求出它们的类型. reflect包实现运行时反射. 创建一个接收任何数据类型任何数值的查询string: func createQuery(q interface ...
- Linux文本处理三剑客之grep及正则表达式详解
Linux文本处理三剑客之grep及正则表达式详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Linux文本处理三剑客概述 grep: 全称:"Global se ...
- linux命令提示符上色
vi /etc/profile RED='\[\e[31;1m\]' Yello='\[\e[33;1m\]' Green='\[\e[32;1m\]' End='\[\e[0m\]' Pur='\[ ...
- php数字字母字符串比较
<?php$a="12a";if($a==12){echo "good";}?>这种情况能输出good,字母在后时只比较前两位,认为是相等:字母在前 ...