基本格式:三种格式(CSS 语法由三部分构成:选择器、属性和值

例:body {color: blue}

一、三大基本选择器

1.id选择器

2.类选择器

3.标签选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
      <style type="text/css">
          /*ID选择器 【单个】*/
          #p1{
               color: red;
               size: a5;
           }
          /*类选择器 【一类】*/
           .c1{
               color: blue;
           }
          /*标签选择器 【某一个标签】*/
           p{
               font-size: larger;
           }
          /*标签选择器 【某一个标签】*/
           span{
               color: coral;
           }
      </style>
       
    </head>
    <body>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:ID选择器 【单个】
        -->
        <p id="p1">我是第一行,我自豪</p>    <!--id不能由数字开头-->
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:类选择器 【一类】
        -->
        <p class="c1">我是第二行,我骄傲</p>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:标签选择器 【某一个标签】
        -->
        <span>我是第三行,我怎么在一堆P标签里</span>
    </body>
</html>

二、六大通配符选择器

1.通配符选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        /*通配符选择器*/
        *{
            color: blue;
        }
    </style>
    <body>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:通配符选择器
        -->
        <p id="p1">我是第一行,我自豪</p>    <!--id不能由数字开头-->
        <p class="c1">我是第二行,我骄傲</p>
        <span>我是第三行,我怎么在一堆P标签里</span>
    </body>
</html>

2.群组选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    <style type="text/css">
        /*群组选择器【一个选择两个或多个】*/
        #p1,.c1{
            color: aqua;
        }
    </style>
    </head>
    <body>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:群组选择器【一个选择两个或多个】
        -->
        <p id="p1">我是第一行,我自豪</p>    <!--id不能由数字开头-->
        <p class="c1">我是第二行,我骄傲</p>
        <span>我是第三行,我怎么在一堆P标签里</span>
    </body>
</html>

3.属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*属性选择器*/
            input[type=text]{
                background-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:属性选择器
        -->
        用户名 <input type="text" name="" id="" value="" /><br />
        密码 <input type="password" name="" id="" value="" />
    </body>
</html>

4.子元素选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*子元素选择器*/
            #u2>li{
                color: red;
            }
            #u1>li{
                list-style-type: none;
            }
        </style>
    </head>
    <body>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:子元素选择器
        -->
        <ul id="u1">
            <li>1</li>
            <li>2</li>
            <ul id="u2">
                <li>21</li>
                <li>22</li>
            </ul>
            <li>3</li>
        </ul>
    </body>
</html>

5.派生选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*派生选择器*/
            #u2 li{
                color: #00FFFF;
            }
        </style>
    </head>
    <body>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:派生选择器
        -->
        <ul id="u1">
            <li>1</li>
            <li>2</li>
            <ul id="u2">
                <li>24</li>
                <li>28</li>
            </ul>
            <li>3</li>
        </ul>
    </body>
</html>

6.伪类选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*伪类选择器*/
            #z2{
                width: 200px;
                height: 100px;
                background-color: coral;
            }
            /**/
            #z2:hover{
                height: 300px;
            }
            a:hover{
                color: red;
            }
            /**/
            a:link{
                
            } 
            /*鼠标点下去,松开结束*/
            a:active{
                
            }
            /**/
            a:visited{
                
            }
        </style>
    </head>
    <body>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:伪类选择器
        -->
        <div id="z2">
            <a href="子元素选择器.html">子元素选择器</a>
        </div>
    </body>
</html>

三、CSS的三种引入方式

1.外部样式表

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link>标签链接到样式表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
    </body>
</html>

2.内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            hr {color: sienna;}
            p {margin-left: 20px;}
            body {background-image: url("images/back40.gif");}
        </style>
    </head>
    <body>
    </body>
</html>

3.内联或内嵌样式表

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <p id="p3" style="color: aqua;">3我他妈真牛逼</p>
        <p id="p4" style="color: chocolate;">4我最最牛逼</p>
    </body>
</html>

4.三种样式表实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            p{
                color: red;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:1、内部引入样式表
        -->
        <p id="p1">1我是牛逼的</p>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:2、外部引入样式表
        -->
        <p id="p2">2我是牛逼的</p>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:内联或内嵌样式
        -->
        <p id="p3" style="color: aqua;">3我他妈真牛逼</p>
        <!--
            作者:1710488546@qq.com
            时间:2021-04-15
            描述:多重样式
        -->
        <p id="p4" style="color: chocolate;">4我最最牛逼</p>
    </body>
</html>

四、CSS背景

最后修改:2021 年 07 月 28 日 04 : 05 PM
如果觉得我的文章对你有用,请随意赞赏