HTML5+CSS3+JavaScript从入门到精通-08

原创

qiqi_fu

发布于 2021-12-03 14:56:56

4630

发布于 2021-12-03 14:56:56

文章被收录于专栏：CQ品势CQ品势

HTML5+CSS3+JavaScript从入门到精通

作者：王征，李晓波

第八章 CSS基础

案例

08-01 CSS的基本语法

<!DOCTYPE html>
<!--web08-01-->
<!--
    选择器： body, h1, p
    声明语句以；分隔
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS的基本语法</title>
    <style type="text/css">
        body {
            font-size: 15px;
            color: pink;
        }
        h1 {
            background: orange;
            color: blue;
        }
        p {
            background: rgb(100,200,100);
            font-size: 18;
            color: red;
        }
    </style>
</head>
<body>
    <h1 align="center">CSS的基本语法</h1>
    <hr />
    CSS的基本语法
    <p>
        爆竹声中一岁除，春风送暖入屠苏。<br />
        千门万户曈曈日，总把新桃换旧符。
    </p>
</body>

</html>

08-02 类选择器class

<!DOCTYPE html>
<!--web08-02-->
<!--
    类选择符可将相同的元素分类定义不同的样式。
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>类选择器</title>
    <style type="text/css">
        p {
            font-family: "黑体";
            font-size: 15px;
        }
            p.a {
                font-family: "宋体";
                font-size: 20px;
                font-weight: bold;
            }
            p.b {
                font-family: "楷体_GB2312";
                color: red;
            }
            p.c {
                background: pink;
                color: blue;
                font-style: initial;
            }
    </style>
</head>
<body>
    <p>CSS样式之类选择器</p>
    <p class="a">CSS样式之类选择器</p>
    <p class="b">CSS样式之类选择器</p>
    <p class="c">CSS样式之类选择器</p>
</body>
</html>

08-03 ID选择器

<!DOCTYPE html>
<!--web08-03-->
<!--
    在定义样式时，id选择器前面要添加#；只适用于有id属性值的HTML元素。 

    关联选择器： 用空格连接的多个选择器
    div p{color:blue;}  -- 在div里面的p，字体是蓝色；
    关联选择器优先级高于单一选择器的样式。

    组合选择器：用“,”号连接的多个选择器
    h1,h2,h3,div,p,em{color:#FF0000;}  -- 前面所写的选择器，颜色都是红色
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>ID选择器</title>
    <style type="text/css">
        #div1 {
            background: rgb(200,200,0);
            color: blue;
            font-size: 20px;
        }
        #div2 {
            background: rgb(200,0,200);
            color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="div1">
        爆竹声中一岁除，春风送暖入屠苏。<br />
    </div>
    <div id="div2">
        千门万户曈曈日，总把新桃换旧符。
    </div>
</body>

</html>

08-04 伪(虚)选择器

<!DOCTYPE html>
<!--web08-04-->
<!--
    伪(虚)选择器,对一个HTML元素不同状态，定义不同的样式
    常用来定义超链接元素A：
    A:link, 表示超链接没有被访问      -- 刚打开时
    A:visited，超链接已被访问过       -- 已被点击
    A:hover, 表示光标移动到超链接上    -- 鼠标移动到超链接上
    A:active,超链接当前被选中         -- 按住左键不松开
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>伪(虚)选择器</title>
    <style type="text/css">
        a:link {
            color: red;
            font-size: 15px;
        }
        a:visited {
            color: blue;
            font-size: 15px;
        }
        a:hover {
            color: orange;
            font-size: 25px;
        }
        a:active {
            color: green;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p><b><a href="file:///E:\WEB\Case\web08-01.html" target="_blank">CSS的基本语法</a></b></p>
    <p><b>提醒：</b>在CSS定义中，a:hover必须位于a:link和a:visited之后，这样才能生效！</p>
    <p><b>提醒：</b>在CSS定义中，a:active必须位于a:hover之后，这样才能生效！</p>
</body>

</html>

08-05 CSS注释

<!DOCTYPE html>
<!--web08-05-->
<!--
    CSS只有一种注释 /**/
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>CSS注释</title>
    <style type="text/css">
        /*使用元素选择器，定义所有P元素属性*/
        p {
            font-family: "微软雅黑"; /*字体类型*/
            font-size: 15px;        /*字体大小*/
            color: blue;            /*字体颜色*/
            font-weight: bold;      /*字体加粗*/
        }
        /*使用ID选择器，定义个别样式*/
        #p2 {
            color: red;     /*字体颜色*/
        }
    </style>
</head>
<body>
    <p id="p1">HTML控制网页的结构</p>
    <p id="p2">CSS控制网页的外观</p>
    <p id="p3">Javascript控制网页的行为</p>
</body>

</html>

08-06 链接外部样式表

/* web08-06-css */
@charset "utf-8";  /*编码*/
p {
    background: rgb(100,200,100);
    color: red;
    font-size: 20px;
}

<!DOCTYPE html>
<!--web08-06-->
<!--
    嵌入样式表 - 在style中直接写样式
    链接外部样式表
    内嵌样式 - 直接写在HTML元素中

    优先级：内嵌(inline) -> 嵌入(internal) -> 外部(external) -> 浏览器默认(browser default)
    -->
<html>
<head>
    <meta charset="utf-8" />
    <title>链接外部样式表</title>
    <link rel="stylesheet" type="text/css" href="web08-06.css" />
</head>
<body>
    <h3 align="center">连接外部样式表</h3>
    <hr />
    <p align="center">
        爆竹声中一岁除，春风送暖入屠苏。<br />
        千门万户曈曈日，总把新桃换旧符。
    </p>
</body>
</html>

08-07 内嵌样式

<!DOCTYPE html>
<!--web08-07-->
<!--
    内嵌样式，是直接写在HTML元素中的
    -->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>内嵌样式</title>
</head>
<body>
    <h3 align="center">内嵌样式</h3>
    <hr />
    <p align="center" style="font-family:黑体;color:red;background:yellow;">
        爆竹声中一岁除，春风送暖入屠苏。<br />
        千门万户曈曈日，总把新桃换旧符。
    </p>
</body>
</html>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html