css的文字样式属性

guigui_hello

已于 2023-07-16 15:06:20 修改

阅读量61

点赞数

文章标签： css 前端

于 2023-07-16 13:47:53 首次发布

本文链接：https://blog.csdn.net/qq_33667332/article/details/131749558

版权

字体：font-family
文字大小： font-size
文字颜色： color
文字粗细： font-weight
文字样式： font-style

text-align: 设置元素内文本的水平对齐方式 .该属性对块级元素的标签有效。

text-align:left|right|center|justify;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
</head>
<body>
    <p align="left">
        中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP
    </p>
    <p align="center">
        中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP
    </p>
    <p align="right">
        中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP
    </p>
    <p align="justify">
        中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP
    </p> 
</body>
</html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        .text1{text-align: left;}
        .text2{text-align: center;}
        .text3{text-align: right;}
        .text4{text-align: justify;}

    </style>
</head>
<body>
    <p class="text1">
        中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP
    </p>
    <p class="text2">
        中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP
    </p>
    <p class="text3">
        中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP
    </p>
    <p class="text4">
        justify是文本两端对齐.中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP
    </p> 
</body>
</html>

上述两种方式实现的水平居中效果是等效的.

img标签不是块级元素，是不能用text-align居中的，如果想要img用text-align居中，需要外面包裹一个div

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        .img-center{
            text-align: center;
        }
    </style>
</head>
<body>
   <div class="img-center">
    <img src="static/images/logo.png" alt="">
   </div>
</body>
</html>

让一段文字居中

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        .textAlign p{
            width: 50%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
   <div class="textAlign">
    <p>
        中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP
    </p>
   </div>
</body>
</html>

效果如下
在这里插入图片描述

line-height: 行高。一般使用em 这个单位来定义行高。浏览器有默认的行高，不同浏览器之间默认行高不一样

.text3{
     font-size:20px;
     line-height:1.3em;// 这个行高的实际值就是26px
}

text-indent:2em; 这个是首行缩进2个字体长度的意思。

vertical-align 设置元素内容的垂直方式

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        p {
            background-color: #ececec;
            height: 80px;
            font-size: 20px;
        }

        span {
            color: red;
            font-size: 14px;
        }

        .sub{
            vertical-align: sub;
        }
        .super{
            vertical-align: super;
        }
    </style>
</head>

<body>
    <div class="textAlign">
        <b>----sub和super值----</b>
        <p>
            CSS层叠样式表 <span class="sub">sub</span>
        </p>
        <p class="sub">
            CSS层叠样式表 <span>sub</span>
        </p>
        <p>
            CSS层叠样式表 <span class="super">super</span>
        </p>
    </div>
</body>

</html>

单行文字居中

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        .wrap{
            height:400px;
            width: 100%;
            border: 1px blue solid;
            line-height: 400px;
        }
    </style>
</head>
<body>
    <div class="wrap">
       <p>welcome to website</p>
    </div>
</body>
</html>

多行文字居中

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文字样式</title>
    <style type="text/css">
        .wrap{
            height:400px;
            width: 100%;
            border: 1px blue solid;
            display: table;/** 变成table元素，就可以使用vertical-align 属性了**/
        }
        .content{
            vertical-align: middle;
            display: table-celll;;/** 变成table元素**/
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="wrap">
       <div class="content">
        <img src="./static/images/logo.png" alt="">
        <h1>Welcome to website</h1>
        <h2>CSS 层叠样式表，用于网页样式的设置，使网页更美观</h2>
       </div>
    </div>
</body>

</html>