复习之CSS（二）——字体、背景、列表样式及盒子模型

最新推荐文章于 2022-08-22 08:46:18 发布

IManiy

最新推荐文章于 2022-08-22 08:46:18 发布

阅读量259

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.youkuaiyun.com/IManiy/article/details/83307902

版权

前端专栏收录该内容

31 篇文章

订阅专栏

盒子模型

在这里插入图片描述

字体样式

font-family: "微软雅黑","宋体",sans-serif;
            /*绝对单位|相对单位 通常使用相对单位px受显示器分辨率影响 em相对父元素的多少倍 180%和1.8em*/
            font-size: 20px;
            text-indent: 2em;/*行距*/
            line-height: 30px;/*行高 可以使用em 百分比 这和文本大小有关*/
            word-spacing: 2px;/*单词间距*/
            letter-spacing: 2px;/*字母间距*/
            text-transform: none;/*首字母大小写*/
            text-decoration: underline;/*文本的样式装饰 underline下划线 overline上划线 line—through 中划线（删除线）*/
            color:red;
            /*#080 ==#008800*/
            font-weight: bold;/*文本粗细 加粗*/
            font-style: italic;/*斜体*/
            font-variant: small-caps;/*小型大写字母*/
            text-align: center;/*文本对齐方式 只对块级元素div p等有效，span ，img等无效  justify实现两端对齐文本效果*/

在这里插入图片描述

背景

			width: 100px;
            height: 100px;
            background-color: #FF2F2F;/*背景颜色 transparent 透明色*/
            background-image: url("");/*背景图片*/
            background-position: 20px,20px;/*背景起始位置*/
            background-attachment: scroll;/*背景图像是否固定或者随着页面的其余部分滚动*/
            background-repeat: no-repeat;/*设置背景图像是否重复及如何重复*/
            background: #50074d;/*简写属性，作为是将背景属性设置在一个声明中*/
            padding: 2px;/*n内边距*/
            margin: 2px;/*外边距*/
            border: 20px solid blue;/*边框*/

行内元素、块级元素

在这里插入图片描述

列表样式

			list-style-type: square;/*列表项的标记样式*/
            list-style-image: url("");/*图片列表项的标记样式 */
            list-style-position: inside;/*多行时候图标使用是否占用文本位置*/

继承关系

在这里插入图片描述

居中设置

行内样式居中

.jv{
            vertical-align: middle;
            text-align: center;

        }

块级中元素样式居中
display两个元素都设置然后vertical-align: middle;垂直居中才生效

 div{
            height: 200px;
            width: 100%;
            border:1px #FF2F2F solid;
            display: table;
        }
        div h2{
            vertical-align: middle;
            display: table-cell;
            text-align: center;
        }

<div>
    <h2>居中</h2>
</div>