【无标题】

        

一、文本与字体属性

1. 字体段落相关属性

<style>
        /* font-size  改变字体大小 */
        /* color      改变字体颜色 */
        .a{
            width: 900px;
            font-size: 30px;
            color: pink;
            /* text-align  对齐方式 
                1. center  居中
                2. left    左对齐 默认样式
                3. right   右对齐
                4.  justify  两端对齐  
                    如果让最后一行也实现两端对齐需要加一行代码 text-align-last: justify;

                用于：实现水平居中
            */
            text-align: justify;
            text-align-last: justify;
            /* line-height:  行高

                用于：实现垂直居中  （行高 = 盒子高）

            */
            /* line-height: 100px; */
            
            /* text-indent  首行缩进 
            缩进2个字符时，值等于字体大小*2
            */
            text-indent: 60px;

            list-style  li默认样式
                none  去掉li的默认样式
           
        }
        .p{
            /* height: 100px; */
            /* line-height: 100px; */
            /* font-size: 50px; */
            background-color: yellowgreen;

            
            
        }
        /* text-decoration: none;
            用于清除a标签的默认下划线

            显示：a:hover{
                    text-decoration: underline;
                }
        */
        a{
            text-decoration: none;
        }
        a:hover{
            /* 定义文本下的一条线 */
            /* text-decoration: underline; */
            /* 定义文本上的一条线 */
            /* text-decoration: overline; */
            line-height: 80px;
            /* 定义穿过文本的一条线（删除线 -- s 或 del 标签同样效果） */
            text-decoration: line-through;

        }
        .English{
            /* 定义每个单词以大写字母开头 */
            /* text-transform: capitalize; */
            /* 全部字母都大写 */
            /* text-transform: uppercase; */
            /* 全部字母都小写 */
            /* text-transform: lowercase; */
        }

    </style>

2. bacground：背景

 <style>
        .bgbox{
            /* width: 800px;
            height: 800px; */
            /* 定义背景颜色
            background-color: blue;
            /* 定义背景图片 */
            /* background-image: url(../代码/img/a.jpg); */
            /* background-repeat: no-repeat; */
            /* 定义背景图片大小 */

            background:pink url(../代码/img/a.jpg) no-repeat;
            background-size: 100% 100%; 
        }
        /* 行内元素 span a 
        行内块元素 img 表单元素 （input select textarea）
        快级元素 div p h1-h6 ul li hr br
        */
        /* .bgbox:hover .smallbox2{
            display: block;
        } */
        .smallbox{
            width: 300px;
            height: 300px;
            background-color: black;
            /* display：
            inline-block: 设置为行内块元素，宽高生效，不独占一行
            block:   设置为块级元素，宽高生效，独占一行
            inline:   设置为行内元素，宽高不生效
            none: 隐藏
        */
        /* display:inline */
        }

        .smallbox2{
            background-color: gray;
        }
        .smallbox3{
            background-color: #7a1919;
        }
        .smallbox2:hover+.smallbox3{
             display:inline-block ;
        }
        .spanbox{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            display:inline-block;
        }
    </style>

二、盒子模型

    <style>
        ul{
            list-style:none;
            background-color: rgb(8, 43, 43);
        }
        li{
            width: 200px;
            height:100px;
            background-color: pink;
        }
        .li1{
        /* 内边距 */
        /* padding: 10px; */
        padding-top: 10px;
        padding-left: 20px;
        padding-bottom: 30px;
        padding-right: 40px;
           /* 简写 */
        /* 上下左右 */
        padding: 10px 20px;
        /* 上左右下 */
        padding: 10px 20PX 30PX;
        /* 上右下左 */
        padding: 10px 20px 30px 40px;
        }
        .li2{
            /* 外边距 */
            margin: 10px;
        }
        /* margin塌陷问题
        同级之间上下margin 取最大值
        嵌套盒子，子盒子加margin-top不生效，需要给父盒子加padding或border
        */
        .li3{
            /* width: 0px;
            height: 0px;
            宽度样式颜色 */
            /* 样式： */
            /* solid 实线
            dashed 虚线 */

            /* 颜色 */
            /* transparent 透明色 */
            /* 设置四边边框 */
            border: 10px solid red;
            border-bottom: 10px  dashed blue
        }
        .li4{
            margin-top: 60x;
            width: 200px;
            height:200px;
            border-radius:50%;
            border: 1px solid blue;
        }
        
    </style>