1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > css文本属性:文本颜色 对齐方式 装饰文本 文本缩进 行间距

css文本属性:文本颜色 对齐方式 装饰文本 文本缩进 行间距

时间:2018-11-05 04:17:34

相关推荐

css文本属性:文本颜色 对齐方式 装饰文本 文本缩进 行间距

文本颜色:color属性用于定义文本的颜色。

div{color: pink;}

<!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>css文本外观属性之颜色</title><style>div{/* color: pink; */color: #00b3ff;/* color: rgb(200, 0, 0); */}</style></head><body><div>听书巨大啊DHL扩大 局中局的</div></body></html>

对齐文本:text-align属性用于设置元素内文本内容的水平对齐方式。

h1{/* 本质是让h1盒子里面的文字水平居中对齐 *//* text-align: center; */text-align: 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>css文本外观之文字对齐</title><style>h1{/* 本质是让h1盒子里面的文字水平居中对齐 *//* text-align: center; */text-align: right;}</style></head><body><h1>居中对齐的标题</h1></body></html>

装饰文本:text-decoration可以给文本添加下划线、删除线、上划线等。

div{/* text-decoration: line-through; *//* text-decoration: underline; */text-decoration: 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>css文本外观之装饰文本</title><style>div{/* text-decoration: line-through; *//* text-decoration: underline; */text-decoration: overline;}a{text-decoration: none;color: black;}</style></head><body><div>粉红色的回忆</div><a href="#">xiaomi</a></body></html>

文本缩进:text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。

p{/* font-size: 30px; *//* 让文本的首行缩进 多少距离 *//* text-indent: 20px; */text-indent: 2em;}

通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

Em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。

<!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>css文本外观之文本缩进</title><style>p{/* font-size: 30px; *//* 让文本的首行缩进 多少距离 *//* text-indent: 20px; */text-indent: 2em;}</style></head><body><p>活该i工会工会会费你就嘎嘎看了几个就v发几个垃圾改任贵人古人辅助来个捡垃圾法国拉菲几个垃圾案件管理经费建立国家廊坊和几号放假啊个half宫颈癌了几个拉法基管理</p><p>大噶回到房间改革卡洛夫改价哦i热加工i i化规范化管理哈佛的工会经费管理经发局案件根据国际u儿童而去开了个可能v看看看看大噶据埃及今日推荐</p><p>昂达给hi org和日军公开对抗男女v看啊JFK了解体哦解放军考虑女女大在国家队告诫他就感觉到绿箭侠的v那大概激励自己旮角吉安卡罗克拉的价格拉高就</p></body></html>

行间距:line-height属性用于设置行距(行高)。可以控制文字行与行之间的距离。

p{line-height: 25px;}

测量行高:从上一行文字的下沿到下一行文字的下沿即为行高,工具:faststone capture

文本属性(外观样式)总结:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。