HTML作业练习—CSS入门：CSS引入方式、样式规则优先级

最新推荐文章于 2026-06-10 05:31:01 发布

原创最新推荐文章于 2026-06-10 05:31:01 发布 · 1.5k 阅读

本内容遵循CC 4.0 BY-SA版权协议

HTML决定了网页的骨架内容，CSS（层叠样式表）决定了网页的样式（如文字大小、颜色，图片位置等）。下面以我乱搞的实例进行讲解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表的嵌套</title>
    <style>
        #l1{color: green;}
        #l2{color: aqua;font-size: large}
        #l2{color: blue;}
        .li{color: purple;}
        h1.title{font-size: 20px;}
    </style>
    <!-- s1.css文件内容：
     h2{color: orange;} 
     .li{color: gray;}-->
    <link rel="stylesheet" href="s1.css">
</head>
<body>
    <h1 class="title">商城支付向导</h1>
    <h2 class="title">对照</h2><h2>对照</h2>
    <h1>对照</h1>
    <ul type="circle">
        <li class="li">支付方式<ul type="disc">
            <li id="l1">货到付款</li>
            <li class="li" id="l1">财付通</li>
            <li class="li" id="l2">支付宝</li>
            <li class="li" id="l2" style="color: red;">网银在线</li>
        </ul></li><hr>
        <li><h2>网银在线支付步骤</h2><ol type="A">
            <li>选择您要使用的网上银行；</li>
            <li style="color: red;font-size: large">显示您的应付总价，点击“确认无误，付款”；</li>
            <li>确定您在银行的预留信息，点击确定；</li>
            <li>输入您的网银账号、登录密码、验证码；</li>
            <li>支付成功，提示“已完成付款”。</li>
        </ol></li><hr>
    </ul>
</body>
</html>

CSS引入方式

定义行内样式：直接在需要修改样式的元素标签内的style属性填入“属性:该属性对应的值”这样的一条声明即可，也可以设定多条声明，每条声明之间用分号隔开。如果源码复杂的网页使用该方式后需要修改声明，将会是很麻烦的事。
内嵌式：在<head></head>标签之间使用<style></style>标签括住以下格式的CSS样式规则

选择器1{声明1;声明2;……}

选择器2{声明1;声明2;……}

……

该方式会影响整个网页的样式，方便统一格式，统一管理。局限性是只会影响当前HTML文件。

3. 引用外链方式（★最常用）：也就是把上述<style></style>标签括住的内容剥离出来，放在1个外部的CSS文件，然后在<head></head>标签之间使用rel属性值为stylesheet的link标签，设置其href属性值为该CSS文件的存放路径。只要能通过href属性值的URL打开该CSS文件，任意网页都能使用这些格式配置，从而方便整个网站统一格式；还能使浏览器减少下载重复代码的次数，加快网页显示速度。

基本选择器及其优先级

选择器决定了其声明的样式将应用于哪些元素。也就是说，符合选择器限定条件的所有元素都会应用其声明的样式。若出现冲突的声明，将遵循一定的优先级原则。

标签选择器（简单粗暴笼统）：直接以HTML标签名为选择器名，为使用对应标签的元素设置样式。如本例中CSS文件第1行→HTML第22、31行。
类（class）选择器（归类自由选择）：以在HTML标签内自定义的class属性值为类名称，再以“.类名称”为选择器名，为使用了对应类名称的标签的元素设置样式。如CSS文件第2行→HTML第25行。（这里涉及到优先级的问题，下面会讲到）
id选择器（更有针对选择）：以在HTML标签内自定义的id属性值为id名称，再以“#id名称”为选择器名，为使用了对应id名称的标签的元素设置样式。如第9行→第26、27行；第10、11行→第28行；第10行（font-size）→第29行（这里体现出层叠性，由于刘总没叫讲，就不展开讲了）。

注意：