zoukankan      html  css  js  c++  java
  • css三种引入方式以及其优先级的说法

    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=" 100px; height: 100px; background-color: red"></div>
    

    2、内联式

    <head>
        <style>
            div {
                 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    

    3、外联式

    file: zero.css
    div {
    	 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="100px;height: 100px;background-color: red"></div>
    	<!-- 内联式 -->
    	<!-- 1.在style标签内(style标签一般为head的子标签 -->
    	<!-- 2.属性值满足的是 css语法 -->
    	<!-- 3. 属性值用key:value 形式赋值,value 具有单位 -->
    	<!-- 4. 属性值之间用;隔开 -->
    	<style type="text/css">
    		div{
    			 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{
      
      	 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>
      
  • 相关阅读:
    移植stemwin笔记01 emwin文档说明
    emwin笔记
    stm32ucosiii 笔记03
    stm32操作系统ucosiii笔记02
    ucosiii笔记01
    keil4与proteus联机调试
    计算机网络一:OSI七层、TCP/IP五层与TCP/IP四层
    数据结构-概述
    RS232、RS485和RS422
    UART串口通讯协议
  • 原文地址:https://www.cnblogs.com/qianzhengkai/p/10870654.html
Copyright © 2011-2022 走看看