3.前端笔记-CSS-文本属性

MY Daisy

已于 2022-11-25 00:47:52 修改

阅读量324

点赞数

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

于 2022-11-23 21:50:38 首次发布

本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128007830

版权

前端-css 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

text文本属性，可以定义文本的外观，如文本的颜色、对齐方式、缩进、行间距等

属性	表示	注意点
color	文本颜色	用16进制，#fff
text-align	文本对齐	只能设置文字水平对齐方式
text-indent	文本缩进	通常用于段落首行缩进2个字的距离，text-indent:2em
text-decoration	文本修饰	添加下划线，取消下划线
line-height	行高	行与行之间的距离

1、文本颜色

颜色属性值的设置方式：
（1）预定义的颜色值（英文单词）：red
（2）16进制：#ff0000;[常用]
（3）RGB代码：rgb(255,0,0)或（100%,0%,0%）

div{
	color: red;
}

2、对齐文本

text-align:只能设置标签元素内文本内容水平对齐方式，盒子内部的内容水平对齐
取值：center\right\left

div {
	text-align: center
}

3、装饰文本

取值：
text-decoration:
none(默认)、underline(下划线)、line-through（删除线）、overline(上划线)
场景：
可以取消a标签链接的自带下划线

div{
	text-decoration:underline
}

4、文本缩进

text-indent:用来指定文本的第一行的缩进，通常是将段落首行缩进,可以是负值
单位：
em:相对单位。当前元素（font-size）1个文字的大小，如果没有指定font-size,默认1em=16px
px:精确单位

div{
	text-indent: 2em;
}

5、行间距

line-height:用于设置行间的距离，控制文字行与行之间的距离.
改变行间距后，实际改变的是上间距和下间距的距离
在这里插入图片描述

p{
	line-height: 26px;
}

垂直居中：行高=盒子高度
文本偏上：行高>盒子高度
文本偏下：行高<盒子高度

div{
	height:40px;
	line-height:40px
}

6.练习

设置标题文字左对齐，正文部分首行缩进2字符，正文字体设置为红色，正文行间距为25px;超链接取消默认的下划线样式
在这里插入图片描述

<!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>Document</title>
    <style>
        h1 {
            text-align: center;
        }
        p {
            color: #ff0000;
            text-indent: 2em;
            line-height: 25px;
            

        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>今日鸡汤</h1>
    <p>一万个美丽的未来，抵不上一个温暖的现在;每一个真实的现在，都是我们曾经幻想的未来，愿你爱上现在，梦见未来。</p>

    <p>把体重留给爱的美食，把眼睛留给好风光，把等待留给一直寻觅的真心，把欢喜留给一次次突破障碍的勇敢，把拥抱留给永远不会离开的自己。</p>
        
    <p>一件事你犹豫去不去做，那就是该立即动身做的。一个东西你犹豫买不买，那就是该买的。喜欢是非常难得的，尽管去争取你喜欢的，而不是费心找廉价点的替代品。对事物，对人都该如此。</p>
    <a href="#">点击获取更多鸡汤</a>
</body>
</html>