CSS 文本外观属性

最新推荐文章于 2024-05-18 03:07:39 发布

慕.晨风

最新推荐文章于 2024-05-18 03:07:39 发布

阅读量1.4k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_51943014/article/details/123440015

版权

前端设计专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、文本的颜色

语法格式:

color: 颜色属性值;

color属性用于定义字体，文本颜色。属性值一般包括三种形式

英文单词	eg:blue、green、red等
十六进制颜色值	eg ：#FF0000 等。值中英文字母不区分大小写
RGB颜色值	eg: rgb(225,0,0) 等

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>文本颜色</title>
    <style type="text/css">
        #p1{color:green;}
        #p2{color:#CE0592;}
        #p3{color:rgb(255,0,0);}
    </style>
</head>
<body>
    <p id="p1">单词</p>
    <p id="p2">十六进制</p>
    <p id="p3">rgb格式</p>
</body>
</html>

2、字体间距

语法格式：

letter-spacing : 属性值

letter-spacing 定义字符与字符之间的距离。默认值为normal

其属性值可以为负值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体间距</title>
    <style type="text/css">
        #p1{
            letter-spacing: 10px;
        }
        #p2{

          letter-spacing: 5px;
        }
        #p3{

            letter-spacing: -5px;
        } 
    </style>
</head>
<body>
    <p id="p1">hello慕晨风 </p>
    <p id="p2">hello慕晨风 </p>
    <p id="p3">hello慕晨风 </p>
</body>
</html>

3、单词间距

语法格式：

word-spacing ：属性值

world-spacing 对英文单词间距进行调控，对中文无效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单词间距</title>
    <style type="text/css">
        #p1{
            word-spacing: 20px;
        }
        #p2{

            word-spacing: -5px;
        }
    </style>
</head>
<body>
    <p id="p1">world spacing 字体 间距</p>
</body>
</html>

4、行间距

语法格式：

line-height:属性值

line-height 定义行与行之间的间距，即垂直间距，又称为行高

属性值单位有 em 、px 、 %（百分比），实际工作中 px 使用的最多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行间距</title>
    <style type="text/css">
        #p1{
            line-height: 20px;
        }
        #p2{
            line-height: 4em;
        }
        #p3{
            line-height: 200%;
        }
    
    </style>
</head>
<body>
    <p id="p1">行间距1</p>
    <p id="p2">行间距2</p>
    <p id="p3">行间距3</p>
</body>
</html>

5、文本修饰

语法格式:

text-decoration: 属性值

text-decoration属性用来设置文本的上、下划线及删除线等修饰效果，

属性值：

none	正常文本
underline	下划线
line-through	删除线
overline	上划线

在实际工作中下划线和删除线用的较多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本修饰</title>
    <style type="text/css">
        #p1{
           text-decoration: underline;
        }
        #p2{
            text-decoration: line-through;
        }
        #p3{
            text-decoration: overline;
        }
    
    </style>
</head>
<body>
    <p id="p1">下划线</p>
    <p id="p2">删除线</p>
    <p id="p3">上划线</p>
</body>
</html>

6、首行缩进

语法:

text-indent:属性值

属性值单位可以为 px，也可以是 em ,实际工作中，建议使用 em

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首行缩进</title>
    <style type="text/css">
     #p1{
         text-indent: 2em;
     }
     #p2{
         text-indent: 3em;
     }
    </style>
</head>
<body>
    <p id="p1">自己走到哪里，哪里便是世界。同一时间，不同的地方，不同的人，不同的喜怒哀乐悲恐惊，不同的忧愁思忆病醉疯。<br/>
        怎样才算爱一个人 ？如果说喜欢是荷尔蒙爆发时心动的瞬间，爱则是精神的归宿，心灵的温暖与羁绊，一种内心的归属感。</p>
<!-- 以上文字内容属于慕.晨风个人原创，请勿用于出版和商用 ,否则追究相关责任-->

</body>
</html>

7、水平对齐方式

语法格式：

text-align:属性值

text-align用于设置文本内容的水平对齐方式，相当于HTML中的 align 属性。

属性值：

left	左对齐
center	居中对齐
right	右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐方式</title>
    <style type="text/css">
        #p1{
            text-align: left;
        }
        #p2{
            text-align: center;
        }
        #p3{
            text-align: right;
        }
    </style>
</head>
<body>
<p id="p1">左边</p>
<p id="p2">居中</p>
<p id="p3">右边</p>
</body>
</html>

8、空白符处理

语法格式：

white-space:属性值

white-space属性用于设置文本中空白符的处理方式，空白符包括空格、换行等。

正常情况下，HTML文本中的无论留出多少空格和换行符，浏览器只会显示一个字符的空白。

属性值：

normal	正常情况（默认）
pre	按照文本的书写格式保留空格和换行的样式
nowrap	强制文本不能换行，超出浏览器页面时会自动增加滚动条

注意 <br/> 可以强制换行，不受 nowrap 的限制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空白符处理</title>
    <style type="text/css">
        #p1{
            white-space: normal;
        }
        #p2{
            white-space: pre;
        }
        #p3{
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <p id="p1">段落的  空白符  处理</p>
    <p id="p2">段落的  空白符  处理</p>
    <p id="p3">春天的花开着，芳香四溢，路过的人儿，走，停，转，蹲，赏。
        脑海之中（想象与期许），我和她，一起的春游，她在路旁看着风景，我在风景旁看着她。
        她嘴角的笑，迷人的眸。好想时间定格。
        远处的一对情侣嬉闹着，我默默地离开那片花。<br/>没回头。
<!-- 以上文字内容属于慕.晨风个人原创，请勿用于出版和商用 ,否则追究相关责任-->
    </p>
</body>
</html>

9、阴影效果

语法格式:

选择器{text-shadow:h-shadow v-shadow blur color;}

其中 h-shadow 设置水平阴影的距离、v-shadow 设置垂直阴影的距离、blur 用于设置模糊半径、color 用于设置阴影的颜色。单位是 px.

即

选择器名称{text-shadow: 水平阴影距离 垂直阴影距离 模糊半径 阴影颜色;}

text-shadow 属性可以增添文本的阴影效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阴影效果</title>
    <style type="text/css">
        p{
           font-size: 50px;
           text-shadow: 10px 10px 10px black; 
        }
    </style>
</head>
<body>
    <p> Hello world</p>
</body>
</html>

对了，也可以设置多个阴影叠加效果。

只需设置多组属性值参数即可，每组之间用英文状态下的逗号隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阴影效果</title>
    <style type="text/css">
        p{
           font-size: 50px;
           text-shadow: 10px 10px 10px green,10px 10px 10px red; 
        }
      
    </style>
</head>
<body>
    <p> Hello world</p>
</body>
</html>

10、英文文本转换

语法格式：

text-transform:属性值

text-transform属性用于转换英文字符的大小写。

属性值：

none	不转换默认值
capitalize	每个单词首字母大写
uppercase	全部字符转换为大写
lowercase	全部字符转化为小写

实际开发中首字母大写最常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英文文本转换</title>
    <style type="text/css">
        .p1{
            text-transform: capitalize;
            white-space: pre;
        }
        .p2{
            text-transform: uppercase;
        }
        .p3{
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <p class="p1">beautiful  you  and   world </p>  
    <p class="p2"> beautiful you </p>
    <p class="p3">BEAUTIFUL You</p>
</body>
</html>

慕.晨风

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 文本外观属性

1、文本的颜色语法格式:color: 颜色属性值; color属性用于定义字体，文本颜色。属性值一般包括三种形式英文单词 eg:blue、green、red等十六进制颜色值 eg ：#FF0000 等。值中英文字母不区分大小写 RGB颜色值 eg: rgb(225,0,0) 等 <!DOCTYPE html><html><head> <meta charset="utf-8" /> &
复制链接

扫一扫