四种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.直接插入式 ...
随机推荐
- vue项目中添加单元测试
从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一 ...
- PHP CI框架调试开启报错信息方法
方法如下三种: 1.php.ini 设置 display_errors = On error_reporting = E_ALL | E_STRICT 2.ci index.php 设置 define ...
- rabbitmq：新建用户登陆rabbitmq management失败
参考文档:https://www.rabbitmq.com/management.html#permissions 安装好rabbitmq之后,遇到一个问题,新建的账号无法在rabbitmq的UI界面 ...
- elasticsearchTemplate操作es
ElasticsearchTemplate是spring对java api的封装 maven依赖: <dependency> <groupId>org.springframew ...
- list集合排序案例
// List集合排序: Collections.sort(list, new Comparator<Object>(){ public int compare(Object obja, ...
- 24.centos7基础学习与积累-010-上机考核命令练习
从头开始积累centos7系统运用 大牛博客:https://blog.51cto.com/yangrong/p5 1.创建目录/data/oldboy,并且在该目录下创建文件oldboy.txt,然 ...
- Python入门篇-StringIO和BytesIO
Python入门篇-StringIO和BytesIO 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.StringIO(用于文本处理) 1>.使用案例 #!/usr/bin ...
- ztree根据关键字模糊搜索
html页面需要引入以下资源 <!-- jquery包,ztree依赖jquery --> <script type="text/javascript" src= ...
- PHP-FPM的知识点
https://blog.csdn.net/resilient/article/details/82420863 这个URL,将php的各种模式与知识点说清楚了. 因为php-fpm默认编译进了php ...
- Please, another Queries on Array?(Codeforces Round #538 (Div. 2)F+线段树+欧拉函数+bitset）
题目链接 传送门 题面 思路 设\(x=\prod\limits_{i=l}^{r}a_i\)=\(\prod\limits_{i=1}^{n}p_i^{c_i}\) 由欧拉函数是积性函数得: \[ ...