css三种引入方式以及其优先级的说法
css 三种引入方式
方式一：行间式
1.在标签头部的style属性内
2.属性值满足css语法
3.属性值用key:value形式赋值，value具有单位
4.属性值之间用 分号 ； 隔开
方式二：内联式
- 在style标签内（style标签一般为head的子标签
- 属性值满足的是css语法
- 属性值用key:value形式赋值，value具有单位
- 属性值之间用 分号 ； 隔开
方式三：外联式
1.在外部的css文件中
2.属性值满足css语法
3.属性值用key:value形式赋值，value具有单位
4.属性值之间用 分号 ； 隔开 一般独行分开赋值
5.格式 div{样式块}
6.将html 与css文件建立联系：html 通过link标签链接外部css（一般我们在head中链接）
一、三种方式的书写规范
1、行间式
<div style="width: 100px; height: 100px; background-color: red"></div>
2、内联式
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
3、外联式
file: zero.css
div {
width: 100px;
height: 100px;
background-color: red;
}
file: zero.html
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>css三种引入方式</title>
<!-- 三种 行间式|内联式|外联式 -->
<link rel="stylesheet" type = "text/css"href="01.css">
</head>
<body>
<!-- 行间式： -->
<!-- 1. 在标签头部的style属性内 -->
<!-- 2.属性值满足的是 css语法 -->
<!-- 3. 属性值用key:value 形式赋值，value 具有单位 -->
<!-- 4. 属性值之间用；隔开 -->
<div style="width:100px;height: 100px;background-color: red"></div>
<!-- 内联式 -->
<!-- 1.在style标签内（style标签一般为head的子标签 -->
<!-- 2.属性值满足的是 css语法 -->
<!-- 3. 属性值用key:value 形式赋值，value 具有单位 -->
<!-- 4. 属性值之间用；隔开 -->
<style type="text/css">
div{
width: 200px;
height:200PX;
background-color: brown;
}
</style>
<!-- 外联式 -->
<!-- 1.在外部css文件中 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key：value 形式赋值，value具有单位 -->
<!-- 4.属性值之间用；隔开（一般独行分开赋值） -->
<!-- 5.格式： div{样式块} -->
<!-- 将html 与 css文件建立联系：html通过link标签链接外部css （一般在head中链接）-->
<!-- <div></div> -->
<!-- <link rel="stylesheet" type = "text/css"href="01.css"> -->
</body>
</html>
css三种引入方式的优先级
三种引入方式本没有优先级一说。
三种方式协调布局：不重复的属性一定为唯一位置的唯一值。
重复的属性采取覆盖赋值，保留最后位置的属性值
行间式（
）一定是运行逻辑上最后被解析的位置（js的正常操作就是行间式）
加上 ! important 会影响优先级顺序
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>三种引入方式优先级</title>
<!-- 注： 三种方式间没有优先级之说-->
<!-- 三种方式协调布局：不重复的属性一定为唯一位置的唯一值 -->
<!-- 重复的属性采取覆盖赋值，保留最后位置的属性值 -->
<!-- 行间式一定是逻辑上最后被解析的位置（js正常操作的就是行间式） -->
<style type="text/css">
div{ width: 100px;
height: 100px;
color: black;
/*加上 ！important 会影响优先级*/
background-color: blue!important;
}
</style>
<link rel="stylesheet" type="text/css"href="02.css">
</head>
<body>
<div style="background-color: yellowgreen"></div>
</body>
</html>
css三种引入方式以及其优先级的说法的更多相关文章
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- 006 CSS三种引入方式
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
- CSS三种引入方式：内联、页级、外联
1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用.通常内联CSS ...
- CSS【03】：CSS 基础选择器与三种引入方式
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...
- css-1,css的三种引入方式 基本选择器
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...
- html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- 11 CSS的三种引入方式和基本选择器
<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
随机推荐
- luogu P2430 严酷的训练 题解
By:Soroak 知识点:DP 思路:就是一道简单的DP 一开始我想用二维数组做 做着做着发现,没有那么难啊啊啊 完全可以用一维数组来做 我们先开两个一维数组来存每个题目的时间 一个是老王的时间,另 ...
- 洛谷P1578 奶牛牧场（悬线法思想）
题目 悬线法的思想--即扫描线的思想,每个矩阵必定是由两个障碍来构成左右边界或者上下边界. 如果此两个障碍组成了左右边界,枚举这两个障碍中途更新这两个障碍之间的矩阵上下边界,并且更新最大值. 考虑如何 ...
- snmpwalk 简介
概述 SNMPWALK是一个通过SNMP GET-NEXT类型PDU,实现对目标AGENT的某指定MIB分支信息进行完整提取输出的命令工作. 命令⾏ snmpwalk [选项] agent [oid] ...
- nuxt或者vue,axios中如何发送多个请求
在使用vue或者nuxt中,我们需要使用axios去发送多个http请求,参考了axios的官方说明你也许会想到使用axios.all发送请求,但是这样可能会出现一些异常错误: (node:9360) ...
- React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件 定义一个组件最简单的方式是使用JavaS ...
- Perl 使用perl命令批量替换文件内容
对linux系统下面多个文本文件内容做处理,是SA经常需要完成的工作.如何高效的完成这个工作,perl应该是一个不错的语言工具.你甚至不需要编写perl脚本,用命令就可以完成上面的工作. perl 命 ...
- 20165214 2018-2019-2 《网络对抗技术》Exp8 Web基础 Week11—12
<网络对抗技术>Exp8 Web基础 Week11-12 一.实验目标与内容 1.实践内容 (1).Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与P ...
- libevent笔记5：水位watermarks
bufferevent中提供了对读写回调的触发条件及最大缓存长度的设置,即低高水位: 低水位:是读写回调函数的最低触发数据长度,当输入/输出缓存区中的数据长度小于低水位时,读/写回调函数不会被触发: ...
- vim常用命令整理
#创建文件 vim test.txt vi test.txt touch test.txt #在vim中要想退出,先按[esc],再输入如下命令 [:wq]保存并退出 [:q]退出,未修改 [:q!] ...
- mongodb数据库操作 python+命令行
一.python操作 from bson.objectid import ObjectId import pymongo client1 = pymongo.MongoClient(host=) ...