CSS基础再练习2-优快云博客

本文链接：https://blog.youkuaiyun.com/2201_75449897/article/details/139724959

5. CSS注释

6. 选择器

7. CSS外观属性

1.文字阴影(CSS3)

5. CSS注释

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

CSS规则是使用 /* 需要注释的内容 */ 进行注释的，即在需要注释的内容前使用 “/*” 标记开始注释，在内容的结尾使用 “*/”结束。

6. 选择器

主要包括：元素选择器、类选择器、ID选择器、属性选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* . 表示的就是class */
        
        .wgh {
            color: aqua;
        }
        /* # 表示的id  */
        
        #wzh {
            color: pink;
        }
        /* 通配符选择器 */
        
        * {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 标签名称选择器 -->
    <!-- 类选择器 可以重复的 -->
    <div class="wgh">
        好人一生平安
    </div>
    <!-- id选择器 -->
    <div id="wzh">
        好人一生平安
    </div>
    <div id="wzh">
        好人一生平安
    </div>
    <div>
        好人一生平安
    </div>
    <div class="wgh">
        好人一生平安
    </div>
    <div id="wzh" class="wgh">
        好人一生平安
    </div>
</body>

</html>

7. CSS外观属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 0-255 */
            /* color: rgb(188, 143, 143); */
            /* 透明度 0-1 之间 */
            /* color: rgba(188, 143, 143, 0.5); */
            /* 16进制颜色代码  1 23 45 678 9 a b c d e f*/
            color: #fc46b3;
            font-size: 16px;
            /* 文本的默认大小为 16px */
            /* 最小是0 */
            font-weight: 900;
            /* 字体粗细 */
            font-family: "华文彩云";
            /* 微软雅黑 */
        }
    </style>
</head>

<body>
    <!--  -->
    <div>
        好人一生平安
    </div>
    <div>
        好人一生平安
    </div>
    <div>
        好人一生平安
    </div>
    <div>
        好人一生平安
    </div>
    <div>
        好人一生平安
    </div>
    <div>
        好人一生平安
    </div>
</body>

</html>

1.文字阴影(CSS3)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .odiv {
            width: 350px;
            height: 200px;
            /* border: 1px solid red; */
            line-height: 200px;
            /* 行高 会让文本在当前行内的最中间  单行文本垂直方向居中*/
            /* 如果需要在一个盒子中让单行文本垂直居中 需要设置行高为盒子高度 */
            text-align: center;
            /* 内容在水平方向的对齐方式  left左对其 center居中  right 右对齐 */
        }
        
        .inp {
            text-align: center;
            /* 不单单可以让文本居中 任意元素都可以使用 */
        }
        
        .d1 {
            text-indent: 2em;
            letter-spacing: 10px;
            /* 字符间距 可以为负数 */
        }
        
        .oa {
            text-decoration: none;
            /* 文本修饰 给文本添加或删除线 上划线 下划线 删除线 */
        }
        /* 伪类选择器  事件的触发器 */
        /* :hover  鼠标悬停 */
        
        .oa:hover {
            text-decoration: underline;
            /* 给文本添加下划线 */
        }
        
        .oen {
            word-spacing: 15px;
        }
    </style>
</head>

<body>
    <div class="odiv">今天星期五了，好开心ya!!!</div>
    <div class="inp"> <input type="text"> </div>



    <div class="d1">朱元璋有二十六个儿子和十六个女儿，除了二子二女夭亡之外，仍然有三十八个子女长大成人。他的二十六个皇子之中，除了长子朱标被册为皇太子，最小的儿子朱楠出生一个月夭折没有受封之外，其他二十四个皇子都被册封为王并外出就国，他的目的就在于众建藩王，屏卫皇室。</div>


    <div class="d1">朱元璋对于皇子教育是十分重视的，他除了延请名师硕儒为皇子们教授文史经书之外，还要求皇子们自幼学习兵法，练习弓马骑射。
    </div>

    <div class="d1">在朱元璋的努力下，很多皇子长大之后出类拔萃。秦王朱樉、晋王朱蓀、燕王朱棣武略出众，潭王、鲁王、蜀王、庆王则文采超群，湘王、宁王更是文武全才。在开国功臣渐渐凋敝之后，原先依靠他们防守的北方边疆，被朱元璋交给了儿子们。秦王、晋王、燕王、代王、肃王、辽王、安王、宁王、谷王、沈王等十余王自西向东扼守北方边境，对付明朝的劲敌北元。
    </div>

    <a href="#" class="oa">这是一个a标签</a>


    <div class="oen">
        今 天 星 期 五
    </div>
</body>

</html>