Python 45 css三种引入方式以及优先级
一：css三种引入方式
三种方式为：行间式 | 内联式 | 外联式
行间式
1.在标签头部的style属性内
2.属性值满足的是css语法
3.属性值用key：value形式赋值，value具有单位
4.属性值之间用;隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种引入方式</title>
</head>
<body>
<div style="width: 100px; height: 100px; background-color: yellow">
</div>
</body>
</html>
内联式
1.在style标签内(style标签一般作为head的子标签)
2.属性值满足的是css语法
3.属性值用key：value形式赋值，value具有单位
4.属性值之间用;隔开(一般独行分开赋值)
5.格式:选择器{样式块}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种引入方式</title>
<style>
div {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
外联式
1.在外部css文件中
2.属性值满足的是css语法
3.属性值用key：value形式赋值，value具有单位
4.属性值之间用;隔开(一般独行分开赋值)
5.格式:选择器{样式块}
6.将html与css文件建立联系：html通过link标签连接外部css(一般head中连接)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种引入方式</title>
<link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
<div></div>
</body>
</html> #输入上面内容后再创建一个新的以 .css 为后缀的样式文件，例如 01.css 文件内容如下： div {
width: 200px;
height: 200px;
background-color: green;
}
二：三种引入方式优先级
注：三种方式间没有优先级
1.三种方式协同布局
2.不重复的属性一定是唯一位置的唯一值
3.重复的属性采用覆盖赋值，保留最后位置的属性值
4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
5.!important会影响优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种引入优先级</title>
<link rel="stylesheet" type="text/css" href="o2.css">
<style>
div {
width: 100px;
height: 100px;
background-color: yellow!important;
}
</style>
</head>
<body>
<div style="background-color: yellowgreen"></div>
</body>
</html> #输入上面内容后再创建一个新的以 .css 为后缀的样式文件，例如 01.css 文件内容如下：
div {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
Python 45 css三种引入方式以及优先级的更多相关文章
- css三种引入方式以及其优先级的说法
css 三种引入方式 方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用 分号 : ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
- 006 CSS三种引入方式
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
- CSS三种引入方式：内联、页级、外联
1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用.通常内联CSS ...
- CSS【03】：CSS 基础选择器与三种引入方式
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...
- css-1,css的三种引入方式 基本选择器
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...
- css 三种引用方式
内联式 代码 <!doctype html> <html lang="en"> <head> <meta charset="UT ...
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
随机推荐
- Centos6.7 安装zabbix+apache+mysql教程(第一篇)
Centos6.7 安装zabbix+apache+mysql教程 blog地址: http://www.cnblogs.com/caoguo ### 基本包安装 ### [root@ca0gu0 ~ ...
- registerDataSetObserver:浅析Andorid ListView和Adapte
最近由于遇到将内容分部绑定到ListView里的需求,追踪源码之后对ListView和Adapter有了点肤浅的认识,在此与大家分享. 这里用到了观察者模式,在ListView的setAdapter里 ...
- 吐得了，vue的多选组合框回显必须是字符串集合
下面这个typeIdList,如果给他赋值,就能回显到页面,但是必须是字符串的集合,如果是数值类型的id,不好意思,请转成字符串
- Java中File对象的常用方法
创建: 1.createNewFile()指定位置创建一个空文件,成功就返回true,如果已存在就不创建,然后返回false. 2.mkdir() 在指定位置创建一个单级文件夹. 3.mkdirs() ...
- 网络编程_socketserver
一.socketserver 网络编程 1.socketserver支持多用户并发处理:2.socketserver是对socket的再封装;处理步骤:1.创建一个socketserver类2.继承B ...
- Django REST framework 内置访问频率控制
对匿名用户采用 IP 控制访问频率,对登录用户采用 用户名 控制访问频率. from rest_framework.throttling import SimpleRateThrottle class ...
- ubuntu系统中java开发环境的搭建
Java环境可选择 Oracle 的 JDK,或是 OpenJDK,按http://wiki.apache.org/hadoop/HadoopJavaVersions中说的,新版本在 OpenJDK ...
- 利用WMITool解决浏览器快捷方式启动参数被篡改以及浏览器主页被劫持的问题
先说说症状 症状①:通过快捷方式启动浏览器,首页跳转到2345以及hao123网址导航页,切系统内安装的多款浏览器(IE.Chrome.Firefox.Opera.Safari.Maxthon)症状相 ...
- Python 元组和列表
Python 元组 Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 如下实例: tup1 ...
- hadoop datanode usages方差算法
stdDev 标准差(方差) 阐述及应用 简单来说,标准差是一组数值自平均值分散开来的程度的一种测量观念.一个较大的标准差,代表大部分的数值和其平均值之间差异较大:一个较小的标准差,代表这些数值较接近 ...