CSS的解释:

CSS是英文 Cascading Style Sheets的缩写，称为层叠样式表。用于对页面美化，CSS可以是页面更加美观。基本上所有的html页面或多或少的使用CSS。

CSS在使用方式上有三种:元素内嵌、页面嵌入、和外部导入

语法:style='key1:value1;key2:value2;'

在标签中使用style='xx:xx;'

在页面嵌入中使用:<style type=text/css></style>#在html头部指定CSS样式

引入外部CSS文件

优先级:标签>页面嵌入>外部导入，这个仅限在同样的样式冲突才有效

①元素内嵌:

直接在标签上应用:代码如下

<p style="background-color: aqua">
       python之路
</p>


显示效果:

wKioL1ewL-eymldIAAAm2FBkk48119.png


②页面嵌入

在头部写好css样式然后应用:代码如下

<head>
    <meta charset="UTF-8">
    <title>Python 从入门到精通</title>
    <!--在头部指定好CSS样式然后在标签里使用class="样式名应用"-->
    <style>
        .css_test{
            background-color: darkorchid;
        }
    </style>
</head>
<body>
    <div>
        <p class="css_test">
            <!--这里指定应用的样式名css_test-->
            CSS样式展示
        </p>
    </div>
</body>


wKiom1ewMgagp5ZhAAA-r6Vp7TM131.png

③外部应用

把CSS样式单独写在一个文件里

CSS样式文件css_color.css:

.css_color{
    background-color: darkorchid;
}


test_html文件内容如下

<head>
    <meta charset="UTF-8">
    <title>Python 从入门到精通</title>
    <!--在头部指定好CSS样式然后在标签里使用class="样式名应用"-->
    <!--这里通过link导入样式，有点类似与python导入模块中的import *-->
    <link rel="stylesheet" href="css_color.css">
</head>
<body>
    <div>
        <p class="css_color">
            <!--这里指定应用的样式名css_color-->
            CSS样式展示
        </p>
    </div>
</body>


浏览效果:

wKioL1ewNEzi6Tg1AAA_-zIObOA427.png

CSS样式应用中通过class应用CSS样式即可，还有两种知道即可，具体代码如下:

<head>
    <meta charset="UTF-8">
    <title>Python从入门到精通</title>
    <style>
        #name{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <p id="name">
            <!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
            CSS样式展示①
        </p>
        <p id="name">
            CSS样式展示②
        </p>
    </div>
</body>


浏览效果如下：

wKiom1ewNUezNBJXAABIhrkeBPA759.png


标签的应用为指定标签统一设置格式：在头部<style>p{....}</style>  这里的p是标签的名称，也可以是div这样就会给所有的div设置格式，代码如下

<head>
    <meta charset="UTF-8">
    <title>Python从入门到精通</title>
    <style>
        p{
            background-color: lightskyblue;
            width: 100px;
            height:100px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <!--这里不需要指定，只要id=name的就会自动应用头部指定的CSS样式-->
            CSS浏览展示①
        </p>
        <p>
             CSS浏览展示②
        </p>
    </div>
</body>



浏览效果如下:

wKioL1ewNmySgAwnAABRM4NmiP8806.png