css样式

学习内容一：

        文字样式：

                1.改变字体大小

            /* font-size  改变字体大小 */
            font-size: 40px;

                2.改变字体颜色

            /* color      改变字体颜色 */
            color: darkgoldenrod;

                3.居中方式

            /* text-align: 居中方式; */
            /* center 居中 */
            /* left: 左对齐; */
            /* right: 右对齐; */
            /* justify:两端对齐； */
            text-align: center;

                4.垂直居中

            /* 垂直居中 */
            line-height: 300px;

                5.首行缩进

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

                6.清除a标签的默认下划线

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

                7.定义文本下的一条线

            /* 定义文本下的一条线 */
            text-decoration: underline;

                8.定义文本上的一条线

            /* 定义文本上的一条线 */
            text-decoration: overline;

                9.定义穿过文本的一条线（删除线 -- s 或 del 标签同样效果）

            /* 定义穿过文本的一条线（删除线 -- s 或 del 标签同样效果） */
            text-decoration: line-through;

---

学习内容二：

       背景 ：

                1.定义背景颜色

         /* 定义背景颜色 */
         background-color: red;

                2.定义背景图片

         /* 定义背景图片 */
         background-image: url(./img/a.jpg);

                3.定义背景图片平铺方式

            /* 定义背景图片平铺方式 */
            background-repeat: no-repeat; 

                可以简写：

            /* 简写 */
            background: pink url(./img/a.jpg) no-repeat;

                4.定义背景图片大小

            /* 定义背景图片大小 */
            background-size: 100% 100%;

                5.行内元素、块级元素、行内块元素的转换

            /* 转换 */
            /* 设置为行内元素，宽高不生效 */
            display: inline; 
            /* 设置为块级元素 ，宽高生效，独占一行 */
            display: block;
            /* 设置为行内块元素,狂高盛小，不独占一行 */
            display: inline-block;
            /* 隐藏属性 */
            display: none;
            /* 隐藏,但是位置还在 */
            visibility: hidden;

---

学习内容二：

       盒子模型：

                1.内边距

            /* 内边距 */
            padding: 10px;
            padding-top: 20px;
            padding-bottom: 40px;
            padding-left: 50px;
            padding-right: 30px;
            /* 简写 */
            /* 第一个值是 上下 第二个值是 左右 */
            /* padding: 10px 20px; */
            /* 上  左右 下 */
            /* padding: 10px 20px 30px; */
            /* 上 右 下 左 */
            padding: 10px 20px 30px 40px;

                2.外间距

            /* 外间距 */
            margin: 10px;
            margin-top: 10px;
            margin-bottom: 20px;
            margin-left: 30px;
            margin-right: 40px;
            /* 简写 */
            /* 上下左右 */
            /* margin: 10px; */
            /* 上下 左右 */
            /* margin: 10px 20px; */
            /* 上 左右 下 */
            /* margin: 10px 20px 30px; */
            /* 上 右 下 左 */
            margin: 10px 20px 30px 40px;
            /* margin 塌陷问题
                同级之间上下margin 取最大值
                嵌套盒子,子盒子加marin-top不生效，需要在父级盒子加padding或border */

                3.盒子边框

            /* 设置四边边框 */
            /* 样式：实现solod 虚线dashed */
                    /* transparent透明色 */
            border: 10px solid red;
            /* 单独设置下边框 */
            border-bottom: 10px solid blue;
            /* 单独设置下边框颜色 */
            border-bottom-color: rgb(37, 35, 78);
            margin-bottom: 40px;

        补充：设置圆形

            width: 200px;
            height: 200px;
            background-color: black;
            /* 设置圆型 */
            border-radius: 50%;  
            /* px固定值 设置小圆角 */
            /* 50%      设置圆形 */