css 三种引入方式

方式一:行间式

​ 1.在标签头部的style属性内

​ 2.属性值满足css语法

​ 3.属性值用key:value形式赋值,value具有单位

​ 4.属性值之间用 分号 ; 隔开

方式二:内联式

  1. 在style标签内(style标签一般为head的子标签
  2. 属性值满足的是css语法
  3. 属性值用key:value形式赋值,value具有单位
  4. 属性值之间用 分号 ; 隔开

方式三:外联式

​ 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三种引入方式的优先级

  1. 三种引入方式本没有优先级一说。

  2. 三种方式协调布局:不重复的属性一定为唯一位置的唯一值。

  3. 重复的属性采取覆盖赋值,保留最后位置的属性值

  4. 行间式(

    )一定是运行逻辑上最后被解析的位置(js的正常操作就是行间式)

  5. 加上 ! 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三种引入方式以及其优先级的说法的更多相关文章

  1. Python 45 css三种引入方式以及优先级

    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...

  2. 006 CSS三种引入方式

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

  3. 前端 CSS 三种引入方式

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

  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. html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级

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

  8. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

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

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

随机推荐

  1. 从零和使用mxnet实现dropout

    需求: 从零和使用mxnet实现dropout 数据集: 使用load_digits()手写数字数据集 要求: 使用1个掩藏层n_hidden1 = 36,激活函数为relu,损失函数为softmax ...

  2. C语言实现FTP服务器

    公共部分代码 /* common.h */ #ifndef COMMON_H #define COMMON_H #include <arpa/inet.h> #include <ct ...

  3. 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  4. .NET 微服务 学习目录

    概述 微服务在Java端已经有很成熟的框架可以使用,之前.NET一直没有比较成熟的网关,最近发现 Ocelot 这个.NET开源的微服务网关功能越来越强大,正好照着微软的官方文档学些一下.NET的微服 ...

  5. 2-3-4树(jdk8的TreeMap的红黑树)

    2-3树:插入变成2个节点正常插,变成3个节点就要提升中间节点和分裂子节点,满足:要么没有子节点,要么2个子节点,要么3个子节点. 2-3-4树:插入变成2个不动,插入变成3个不动,插入变成4个提升原 ...

  6. hanlp进行命名实体识别

    需要安装jpype先,这个是python调用java库的桥梁. # -*- coding: utf-8 -*- """ Created on Thu May 10 09: ...

  7. KAFKA 节点配置问题

    -- ::, INFO o.a.j.e.StandardJMeterEngine: Running the test! -- ::, INFO o.a.j.s.SampleEvent: List of ...

  8. servlet和response

    servlet基础知识 Servlet在内存中是单例----单实例对象一个Servlet类 在内存中最多有一个对象 一个项目有多少功能,将来就有多少Servlet. servlet是自启动的,就是可以 ...

  9. Django 路由name使用

    Django 路由name使用 name:对URL路由关系进行命名 ***以后可以根据此名称生成自己想要的URL*** # 路由 url 三种形式 url(r'^index/', views.inde ...

  10. async与await总结

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11533174.html,多谢,=.=~ 抛出3个疑问: 1.async是干哈的? 2.await ...