CSS基础知识总结之css样式引用的三种方式

Posted wxcx

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS基础知识总结之css样式引用的三种方式相关的知识，希望对你有一定的参考价值。

在html中增加css样式有三种：

1.在标签中增加style属性：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <!--tag标签的图标-->
    <link rel="shortcut icon" href="timg.jpg">
</head>
<body>
<div style="background-color: blue ;width: 80px;height: 80px "></div>
</body>
</html>

技术分享图片

2.

第二种可以在head中增加style标签 style中通过选择器定位标签增加style样式

css选择器：

　　id选择器：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <style>
        /*id选择器*/
        /*#代表id，#i1代表定位到class为i1的元素*/
       #i1{
           background-color: #000000;
           width: 80px;
           height: 80px;
       }
    </style>
</head>
<body>
<!--id在html只允许出现一个同名id-->
<div id="i1"></div>
</body>
</html>

 　　class选择器：最常用

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <style>
        /*class选择器*/
        /*.代表class，.c1代表定位到class为c1的元素*/
       .c1{
           background-color: #000000;
           width: 80px;
           height: 80px;
       }
    </style>
</head>
<body>
<div class="c1"></div>
</body>
</html>

　　标签选择器：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <style>
         /*标签选择器*/
        /*所有的div的标签都带有下面属性*/
       div{
           background-color: pink;
           width: 80px;
           height: 80px;
       }
    </style>
</head>
<body>
<div class="c1"></div>
<div></div>
</body>
</html>

技术分享图片

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <style>
       div{
           background-color: pink;
           width: 80px;
           height: 80px;
       }
        .c1{
            background-color: blue;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div></div>
</body>
</html>

技术分享图片

　　层级选择器：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <style>
       /*层级选择器*/
        div span{
            background-color: red;
            width: 80px;
            height: 80px;
        }
         #i1 span{
             background-color: blue;
             width: 80px;
             height: 80px;
         }
        .c1 span{
            background-color: pink;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="c1">
    <span>这是span标签</span>
</div>
<div id="i1">
    <span>这是span标签</span>
</div>
<div>
    <span>层级选择器</span>
</div>

</body>
</html>

　　多个标签引用同一个标签：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <style>
        /*多个标签引用同一个标签*/
         #i1,#i2,#i3{
             background-color: blue;
             width: 80px;
             height: 80px;
         }
        .c1{
            background-color: pink;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
<div id="i1"></div><br>
<div id="i2"></div><br>
<div id="i3"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</body>
</html>

3. 在head里面使用link引入css样式表：

css表：c1.css

.c1{
    background-color:red;
    width: 80px;
    height: 80px;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>天蓝蓝</title>
    <link rel="stylesheet" href="c1.css">
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
</body>
</html>

样式表的引用顺序联系：

css表：c2.css

.c1{
    background-color: pink;
    width: 100px;
    height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="c2.css">-->
    <style>
        /*样式表的引用关系，以标签为起的位置，由下而上的开始应用*/
     .c1{
        background-color: red;
        width: 100px;
        height: 100px;
        }
    </style>
    <link rel="stylesheet" href="c2.css">
</head>
<body>
<div class=‘c1‘ style="background-color: #0000CC;width: 100px;height: 100px"></div>
</body>
</html>

 

以上是关于CSS基础知识总结之css样式引用的三种方式的主要内容，如果未能解决你的问题，请参考以下文章

前端css知识总结整理

HTML引入css样式的三种方式，css选择器的三种样式

css 样式的导入的三种方式

python 中增加css样式的三种方式

CSS笔记--- CSS概述；HTML引入CSS样式的三种方式；列表样式；绝对定位

引入CSS的方式都有哪些