python-css基础知识

CSS 是指层叠样式表 (Cascading Style Sheets)，样式定义如何显示html，用于对页面进行美化。

css样式的存放位置有三种：

第一种，直接写在html标签里：

 <div style="background-color: #5bc0de;height: 20px;width: 50px">div</div>  #属性之间用；分隔

第二种，在html的head里面设置全局样式，body的标签里引用。可以写在管理-设置-定制css代码中

<head>         
    <style>    #head里面定义样式
        .testcss{     #以点开头
            background-color: pink;
            font-size: 20px;
        }
    </style>
</head>       
<body>   
    <div class="testcss">testcss div</div>  #标签里引用testcss样式
</body>

第三种，链接方式，写在一个css文件里，引用该文件

css文件 newcss.css

.abc{
    color:red;
    font-size: 20px;
}

html文件

<head>
    <link rel="stylesheet" href="newcss.css">  #链接引用css文件
</head>
<body>
    <div class="abc">link abc css div</div>
</body>

1. 标签选择器

给某一类标签定义某种样式，该类标签都会使用这种样式

<head>
    <style>
        h1{            #给h1标签定义的样式
            color: red;
            font-size: 30px;
        }
        div{            #给div标签定义的样式
            color:green;
            font-size: 20px;
        }
        input[type="text"]{     #input的text属性加样式
            color: palevioletred;
            width: 300px;
        }
    </style>

2. class选择器

在style里面定义一个.cssname{css样式} 在标签里用class="cssname"来引用

<head>
    <style>
        .testcss{
            background-color: pink;
            font-size: 20px;
        }
#在body里的标签里使用
    <div class="testcss">testcss div</div>

3. id选择器

定义一个#idname样式，在标签里用来使用这个标签

    <style>    
        #i1{
            color: deepskyblue;
            font-size: 40px;
        }
#标签里面使用
    <span >i1 span</span>

4. 层级选择器

标签里嵌套着标签，对嵌套的标签加样式。下一级用空格表示

style{
        div span {
            color: yellow;
            font-size: 30px;
        }
}
#标签里面应用
    <div>
        <span>div span</span>  #用到了样式
    </div>
    <div>div</div>  #无变化

5. 组合选择器

多个选择器，用同一个样式，用逗号分隔

        div,p,.c1,#id1 {
            color: red;
            font-size: 30px;
        }
#标签里应用
    <div>div</div>
    <p>p</p>
    <span class="c1">span</span>
    <div >div</div>

注意：如果同时有多个选择器，那么浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

标签选择器的权值为1，class选择符的权值为10，ID选择符的权值最高为100。

   <style>
        div{color: red;}
        .c1{color: blue;}
应用：
    <div class="c1">div</div>
#显示是蓝色，因为div标签的权重小于class的权重

View Code