css

css.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 移到css文件里 -->
<!--         内部样式表
        style包裹的就是内部样式表 
        <style type="text/css">
            /*被style标签包围的范围是CSS环境，可以写CSS代码*/
            
            /* 标签样式表 */
            /* p是标签名 */
            p{
                color: red;
            }
            
            /* 类样式 */
            .pfirst{
                font-size:20px
            }
            
            /* ID样式 */
            #p2{
                font-size:25px;
                background-color: #CCBBCC;
                font-weight: bolder;
                font-style: italic;
                font-family: "华文彩云";
            }
            
            /* 组合样式 */
            div p{
                color: blue;
            }
            /* 不能写div.a 而是div .a */
            /* .a是控制所有class="a",div .a是控制div里的class="a" */
            div .a{
                font-size: 32px;
                font-family: "黑体"
            }
        </style> -->
        
        <!-- 外部样式表 -->
        <!-- 引用外部的CSS样式表文件 -->
        <link rel="stylesheet" href="css.css" />
    </head>
    <body>
        <!-- 
            <p><font color="#CCBBCC">段落一</font></p>
            <p><font color="#CCBBCC">段落二</font></p> 
        -->
        <p class="pfirst">段落一</p>
        <!-- id属性在整个HTML文档中，尽量保持唯一，虽然不唯一不报错 -->
        <p id="p2">段落二</p>
        <p>段落三</p>
        <p>段落四</p>
        
        <div>
            <!-- 嵌入式样式表 -->
            <!-- 这里的style就是嵌入式样式表，而且就进原则，优先级高于head里的style -->
            <p><span style="font-size: 60px;font-weight:bolder;">Hello</span></p>
            <span class="a">World</span>
            <p class="a">!!!</p>
        </div>
    </body>
</html>

<!-- 
    CSS的基本分类：标签样式表、类样式表、ID样式表
    CSS从位置上的分类：
            嵌入式样式表
            内部样式表
            外部样式表：专门用一个css文件来放，HTML只用来放HTML，然后在HTML文件导入
            
            
 -->

css.css

/* 标签样式表 */
/* p是标签名 */
p{
    color: red;
}

/* 类样式 */
.pfirst{
    font-size:20px
}
            
/* ID样式 */
#p2{
    font-size:25px;
    background-color: #CCBBCC;
    font-weight: bolder;
    font-style: italic;
    font-family: "华文彩云";
}
            
/* 组合样式 */
div p{
    color: blue;
    }
/* 不能写div.a 而是div .a */
/* .a是控制所有class="a",div .a是控制div里的class="a" */
div .a{
    font-size: 32px;
    font-family: "黑体";
}

 

posted @ 2022-03-13 13:34  行呗  阅读(35)  评论(0)    收藏  举报