一、CSS文本属性可定义文本外观
二、通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
三、常用属性:
color 文本颜色
body{
color: aqua;
}
<body>
<p>查看颜色</p>
</body>
说明color这个属性是可以继承的
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
p{
color: red;
text-align: right;
}
<body>
<p>Hello World</p>
</body>
text-decoration 向文本中添加修饰
text-indent 缩进元素中文本的首行
h4{
text-indent: 2em;
}
<body>
<div>
<h4>静夜思</h4>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
</body>
也可以按百分比缩进
text-transform 元素中的字母
p{
text-transform: capitalize;
}
<body>
<div>
<p>there is a beautiful girl</p>
<p>a so lovely girl</p>
<p>i always tell myself "never give up,never give up, never give up!"</p>
</div>
</body>
lowercase:全部变小写
uppercase:全部变大写
inherit(中文意思为“继承”):默认方式(不改变原文内容)
unicode-bidi 设置文本方向
white-sapce 元素中空白的处理方式
word-spacing 字间距
四、CSS3文本效果:
text-shadow:向文本添加阴影
p{
text-shadow: 5px 5px 5px #FF0000;
}
<body>
<div>
<p>there is a beautiful girl</p>
<p>a so lovely girl</p>
<p>i always tell myself "never give up,never give up, never give up!"</p>
</div>
</body>
text-shadow需要设置4个值
第一个值:相对于原本文字距左的距离
第二个值:距当前文本上方的位置
第三个值:清晰度
第四个值:背景颜色
word-wrpa:规定文本的换行规则
p{
width: 100px;
text-wrap: normal;
}
text-wrap:normal; 自动换行
此外还有一个功能
如果<p></p>内写的是英文,"text-wrap"这个属性不会把当前的文字拆开(这个效果非常不错)
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。