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. C++ 重写虚函数的代码使用注意点+全部知识点+全部例子实现

    h-------------------------- #ifndef VIRTUALFUNCTION_H #define VIRTUALFUNCTION_H /* * 派生类中覆盖虚函数的使用知识点 ...

  2. ros使用pppoe拨号获取ipv6，并且下发IPV6的dns到客户机win7

    原文: https://www.mobile01.com/topicdetail.php?f=110&t=3405680 http://forum.mikrotik.com/viewtopic ...

  3. 每日一问：你了解 Java 虚拟机结构么？

    对于从事 C/C++ 程序员开发的小伙伴来说,在内存管理领域非常头疼,因为他们总是需要对每一个 new 操作去写配对的 delete/free 代码.而对于我们 Android 乃至 Java 程序员 ...

  4. 使用 Jest 和 Supertest 进行接口端点测试

    如何创建测试是一件困难的事.网络上有许多关于测试的文章,却从来不告诉你他们是如何开始创建测试的. 所以,今天我将分享我在实际工作中是如何从头开始创建测试的.希望能够对你提供一些灵感. 目录: 使用 E ...

  5. 认识一下microbit扩展板robotbit

    在我们买到的套件中,另一块叫robotbit扩展板,所谓扩展板,是把控制板上的针脚引出来,方便我们扩展驱动连接电机.舵机.及各种传感器以展功能. 介绍如下 :下面 反面: 官方文档:http://le ...

  6. 【C++】const，static和static const类型成员变量声明及其初始化

    1)const定义的常量在超出其作用域之后其空间会被释放,而static定义的静态常量在函数执行后不会释放其存储空间 void f1() { ; cout<<x<<endl; ...

  7. lucene字典实现原理（转）

    原文:https://www.cnblogs.com/LBSer/p/4119841.html 1 lucene字典 使用lucene进行查询不可避免都会使用到其提供的字典功能,即根据给定的term找 ...

  8. 【题解】Sonya and Matrix Beauty [Codeforces1080E]

    [题解]Sonya and Matrix Beauty [Codeforces1080E] 传送门:\(Sonya\) \(and\) \(Matrix\) \(Beauty\) \([CF1080E ...

  9. 示例：WPF仿制OSK做的系统键盘和数字键盘

    原文:示例:WPF仿制OSK做的系统键盘和数字键盘 一.目的:在应用osk.exe系统键盘时遇到很多不方便,比如有些系统调用不出来等问题,由此开发了一个系统键盘仿制osk 二.实现功能 1.目前实现大 ...

  10. javascript query string

    function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = qu ...