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

最新推荐文章于 2024-06-05 16:49:46 发布

weixin_30393907

最新推荐文章于 2024-06-05 16:49:46 发布

阅读量2.3k

点赞数

原文链接：http://www.cnblogs.com/qianzhengkai/p/10870654.html

版权

css 三种引入方式

方式一：行间式

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

2.属性值满足css语法

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

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

方式二：内联式

在style标签内（style标签一般为head的子标签
属性值满足的是css语法
属性值用key:value形式赋值，value具有单位
属性值之间用分号；隔开

方式三：外联式

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

三种引入方式本没有优先级一说。
三种方式协调布局：不重复的属性一定为唯一位置的唯一值。
重复的属性采取覆盖赋值，保留最后位置的属性值
行间式（

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

加上 ! 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>

转载于:https://www.cnblogs.com/qianzhengkai/p/10870654.html

weixin_30393907

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css三种引入方式以及其优先级的说法

css 三种引入方式方式一：行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值，value具有单位 4.属性值之间用分号；隔开方式二：内联式在style标签内（style标签一般为head的子标签属性值满足的是css语法属性值用key:value形式赋值，value具有单位属性值之间用分号；隔开方...
复制链接

扫一扫