CSS文本与字体属性

羚羊

已于 2023-08-01 14:54:19 修改

阅读量40

点赞数

文章标签： css css3 前端

于 2023-07-14 17:55:46 首次发布

本文链接：https://blog.csdn.net/m0_63451432/article/details/131728992

版权

文章目录

1、字体段落相关属性
2、背景
3、行内、块级、行内块级元素
4、盒模型

1、字体段落相关属性

/* 
1、字体段落相关属性
*/
    /* 1.1 字体大小 */
    .ZiTiDaXiao{
        font-size: 20px;
    }

    /* 1.2字体颜色 */
    .ZiTiYanSe{
        color: blue;
    }

    /* 1.3 对齐方式 */
        /* 1.3.1 居中对齐 */
        .DQJuZhong{
            text-align: center;
        }
        /* 1.3.2 左对齐(默认) */
        .DQZuoDuiQi{
            text-align: left;
        }
        /* 1.3.3 右对齐 */
        .DQYouDuiQi{
            text-align: right;
        }
        /* 1.3.4 两端对齐 */
        .DQLiangDuanDuiQi{
            text-align: justify;
        }

    /* 1.4 行高 
            设置该行的高度
            当行高=盒子的高度时会展现垂直居中的效果
    */
    .HangGao{
        /* 设置边框方便看高度 */
        border: 1px solid red;
        /* 设置高度为200px */
        height: 200px;
        /* 设置行高为200px 等于盒子的高度所以会显示垂直居中的效果 */
        line-height: 200px;
        
    }

    /* 1.5 文本缩进  */
    .SuoJin{
        /* 设置文字大小为10px */
        font-size: 10px;
        /* 首行缩进两个字符所以是20px */
        text-indent: 20px;
    }

    /* 1.6 去除li的默认效果 */
    .QingChuYangShi{
        list-style: none;
    }

    /* 1.7 设置/删除文本装饰 */
            .ShanChu_SheZhi_YangShi{
                /* 1.7.1 删除a标签的默认下滑线 */
                text-decoration: none;
                /* 1.7.2 添加下滑线 */
                text-decoration: underline;
                /* 1.7.3 添加文本上的一条线 */
                text-decoration: overline;
                /* 1.7.4 添加贯穿文本的一条线 */
                text-decoration: line-through;

        }

    /* ----(不是很重要) 文本转换(大小写转换) */
    .WenBenZhuanHuan{
        /* 首字母大写 */
        text-transform: capitalize;
        /* 全部大写 */
        text-transform: uppercase;
        /* 全部小写 */
        text-transform: lowercase;
    }

2、背景


/* 2、背景 */

    .BeiJingTuPian,.QuXiaoPingPu,.DingYiDaXiao{
        width: auto;
        height: 100px;
    }
    /* 2.1 背景颜色 */
    .BeiJingDaXiao{
        background-color: aqua;
    }
    /* 2.2 背景图片 */
    .BeiJingTuPian{
        background-image: url(../img/876ce6853c9bc01f26837e6d4ae4d7a.jpg);
    }
    /* 2.3 取消平铺 */
    .QuXiaoPingPu{
        background-image: url(../img/876ce6853c9bc01f26837e6d4ae4d7a.jpg);
        background-repeat: no-repeat;
    }
    /* 2.4 定义背景大小(css3新增样式) */
    .DingYiDaXiao{
        background-image: url(../img/876ce6853c9bc01f26837e6d4ae4d7a.jpg);
         background-size: 100% 100%;
         
    }
/* 合并写法：background: 背景颜色 图片 是否平铺   (因为背景大小是css3新增的所以不支持合并写法) */

3、行内、块级、行内块级元素


``
/* 3、行内、块级、行内块级元素 
    3.1行内元素包括： span、a、b标签等 
    3.2块级元素包括： div、p、标题标签等 
    行内块级元素包括： img、表单元素(input、select)等 */

    /* 元素之间的转换 */
        /* 转行内块元素 */
        .box1{
            background-color: aqua;
            width: 300px;
            height: 300px;
            display: inline-block;
        }
        /* 转块元素 */
        .box2{
            background-color: aqua;
            display: block;
        }
        /* 转行元素 */
        .box3{
            background-color: aqua;
            display: inline;
        }
        /* 隐藏(不保留位置) */
        .box4{
            background-color: aqua;
            display: none;
        }
        /* 隐藏(保留位置) */
        .box5{
            background-color: aqua;
            visibility: hidden;
        }

4、盒模型


/* 4、盒模型 */

    /* 4.1 内边距 */
    .nbj{
        background-color: blueviolet;
        /* 顺序为 上右下左 */
            padding: 10px 20px 30px 40px;
    }
    /* 4.2 外边距 */
    .wbj{
        background-color: blueviolet;
        /* 顺序为 上右下左 */
            margin: 10px 20px 30px 40px;
    }
    /* 4.3 边框 */
    .bk{
        background-color: blueviolet;
            border: 5px solid red;
    }

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 字体段落相关属性演示 -->
    <p class="ZiTiDaXiao">字体大小</p>
    <p class="ZiTiYanSe">字体颜色</p>
    <p class="DQJuZhong">水平居中对齐</p>
    <p class="DQZuoDuiQi">左对齐(默认)</p>
    <p class="DQYouDuiQi">右对齐</p>
    <p class="DQLiangDuanDuiQi">两端对齐</p>

    <p class="HangGao">行高(一般用于垂直居中)</p>

    <p class="SuoJin">文本缩进（1111111111111111111<br>11111111111111111111111111111）</p>
    
    <ul class="QingChuYangShi">
        <li>清楚无序列表默认样式</li>
        <li>清楚无序列表默认样式</li>
        <li>清楚无序列表默认样式</li>
    </ul>

    <a href="#" class="ShanChu_SheZhi_YangShi" >删除a标签的默认下滑线</a>

    <p class="WenBenZhuanHuan">wenbenzhuanhuan</p>

    <!-- 背景相关属性演示 -->
    <div class="BeiJingDaXiao">背景颜色</div>
    <div class="BeiJingTuPian">背景图片</div>
    <div class="QuXiaoPingPu">取消平铺</div>
    <div class="DingYiDaXiao">定义背景大小</div>       
    
    <!--行内、块级、行内块级元素相关属性演示 -->
    <div class="box1">转行内块元素</div>
    <div class="box2">转块元素</div>
    <div class="box3">转行元素</div>
    <div class="box4">隐藏(不保留位置)</div>
    <div class="box5">隐藏(保留位置)</div>

    <!-- 盒模型相关属性演示 -->
    <span class="nbj">内边距</span>
    <span class="wbj">外边距</span>
    <span class="bk">边框</span>



</body>
</html>