一: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三种引入方式以及优先级的更多相关文章

  1. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

  2. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  3. 006 CSS三种引入方式

    CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

  4. CSS三种引入方式:内联、页级、外联

    1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用.通常内联CSS ...

  5. CSS【03】:CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  6. css-1,css的三种引入方式 基本选择器

    <!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...

  7. css 三种引用方式

    内联式 代码 <!doctype html> <html lang="en"> <head> <meta charset="UT ...

  8. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  9. html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

随机推荐

  1. 基于zk“临时顺序节点“的分布式锁

    import org.apache.zookeeper.*; import org.apache.zookeeper.data.Stat; import java.io.IOException; im ...

  2. windows程序设为开机自启动

    在Windows文件管理器中输入 %APPDATA%\Microsoft\Windows\Start Menu\Programs\Startup 把程序快捷方式放到此处即可.

  3. 谷歌通过ajax获取本地JSON文件,为什么会提示跨域?

    在本地写了一段JSON代码,然后用ajax读取后,在浏览器打开,发现谷歌提示涉及到跨域问题, 但是跨域是由于协议,域名,端口中有一个不同,才会跨域,我在本地访问自己的文件,怎么和跨域扯上关系了?? 下 ...

  4. S-HR之时间空间配置

    <field name="entrys.bizDate"   dataType = "DATE"  label="生效日期" year ...

  5. How To: Multipath Linux x86-64 Release 6.4

    [root@node01 ~]# lsb_release -a LSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4.0 ...

  6. 7.2.1 代码测试 doctest

    Python标准库 doctest 可以搜索程序中类似于交互式Python代码的文本片段,并运行这些交互式代码来验证是否符合预期结果和功能,常用于Python程序的模块测试. 使用doctest模块测 ...

  7. 3D全景之ThreeJs

    3D全景之ThreeJs 一.前言 随着H5越来越多的被应用到各个领域,3D也越来越频繁的出现在各个H5案例中,今天我们就来讨论一下3D全景的实现. 据百度百科上介绍:720全景是视角超过人的正常视角 ...

  8. rpm包下载地址

    https://dl.fedoraproject.org/pub/epel/6/x86_64/

  9. SSL常用专业缩略语汇总

    JKS - Java KeyStore JAVA密钥库 OCSP - Online Certificate Status Protocol证书在线状态协议. SAN - Subject Alterna ...

  10. HDU 3401 Trade

    Trade Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 3401 ...