CSS（展示效果）

1.基本语法规范

2.引入方式

1.内部样式表

2.行内样式表

3.外部样式表

3.选择器

选择器的功能

选择器的种类

**1.**基础选择器: 单个选择器构成的

标签选择器

类选择器

id 选择器

通配符选择器

在实际开发应用中用来针对页面中所有的元素默认样式进行消除，主要用来消除边距

基础选择器小结

**2.**复合选择器: 把多种基础选择器综合运用起来.

后代选择器

子选择器

并集选择器

伪类选择器

复合选择器小结

4.常用元素属性(更多搜索)

字体属性

字体颜色

字体粗细样式

文本（对齐进行装饰行高）

控制文字水平方向的对齐

案例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .r{
            text-align: right;
        }
        h1{
            text-align: center;
            font-weight: 700;
        }
        .z{
            text-align: left;
            text-indent: 2em;
        }
        #j{
            text-align: center;
        }
    </style>
</head>
<body>
     <h1>卫星</h1>
    <div>
        <p class="r">2010年12月3日</p>
        <hr>
        <p class="z">试验二十九号卫星肩负着特殊使命，其核心任务是开展空间环境探测及相关技术验证工作。通过在轨运行
        ，该卫星将收集关键的空间环境数据，为后续航天器的设计与运行提供重要参考，同时对相关技术进行实战检验，推动航天技术的持续进步。</p>

        <p class="z">此次发射任务意义非凡，它是长征系列运载火箭的第592次飞行。自长征系列火箭诞生以来，
        凭借其可靠的性能和卓越的发射能力，一次次将各类航天器送入太空，为中国航天事业的发展立下了汗马功劳。
        每一次成功发射，都凝聚着无数航天人的智慧与汗水，也彰显了中国在航天领域的强大实力。</p>
        <div id="j">
            <img src="./yangguang.png">
        </div>
        <p class="r">卫星</p>
    </div>
</body>

背景属性

颜色

图片

平铺

位置

圆角矩形

元素显示模式

块级元素

行内元素

让行内元素单独占一行

行内元素和块级元素的区别

**5.**盒模型

边框(border)

内边距（padding）

外边距(margin)

块级元素水平居中

去除浏览器默认样式

边框会撑大盒子

6.弹性布局

案例

<!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>
        .box{
            border:#d8dad8 solid 2px;
            width: 308px;
            height: 204px;
        }
        .gg{
            padding-left: 40px;
            border-bottom: 2px dotted #e8ebe8;
        }
        .ym{

           font-size: 16px;
            flood-color: #898b76;
            padding-left: 25px;
            line-height: 28px;
            padding-top: 10px;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <div class="gg">广告板</div>
        <div class="ym">大清场 ，全场八折1</div>
        <div class="ym">大清场 ，全场八折2</div>
        <div class="ym">大清场 ，全场八折3</div>
    </div>
</body>
</html>