CSS与CSS3基础知识(二)——文本外观属性
希望可以在CSDN与大家一起成长,如有错误请大家多多批评指教!
CSS 英文全称为Cascading Style Sheet,中文译为“层叠样式表”。CSS以 HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且可以针对不同的浏览器设置不同的样式。在CSS与CSS3基础知识(一)(点击可复习)中学习了字体样式属性,现在一起学习CSS的文本外观属性吧!
1.color:文本颜色
取值方法有三种:预定义的颜色名:如red,green等
十六进制,如#ff000等
RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0,0),即红,绿,蓝。
2.letter-sapcing:字间距
属性值可以为不同单位的数值,允许使用负值,默认为normal。
3.word-spacing:单词间距
用于定义英文单词之间的间距,对中文字符无效。属性值可以为不同单位的数值,允许使用负值,默认为normal。
4.line-height:行间距
行间距就是行与行之间的距离,即字符的垂直距离
5.text-transform:文本转换
用于控制英文字符的大小写,其属性值如下:
none:不转换
capitalize: 首字母大写
uppercase:全部字符转换为大写
lowercase:全部字符转换为小写
6.text-decoration:文本装饰
用于设置文本的下划线,上划线,删除线等装饰效果,其可用属性值如下:
none:没有装饰
underline:下划线
overline:上划线
line-through:删除线
*如果希望文字同时有下划线和删除线效果,就可以在属性后同时写underline,line-through。
p{text-decoration:underline line-through;}
7.text-align:水平对齐方式
用于设置文本内容的水平对齐,相当于HTML中的align对齐属性,可用属性值如下:
left:左对齐(默认)
right:右对齐
center:居中对齐
8.text-indent:文本缩进
用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数或相对于浏览器窗口宽度的百分比%,允许使用负值。建议使用em作为设置单位。
*text-indent属性仅适用于块级元素,对行内元素无效(块级和行内元素会在之后的博客里进行补充哦)
9.white-space:空白符处理
*在HTML制作网页的时候,无论你写多少个空格,最后浏览器都只显示一个,所有我们需要CSS的white-space设置空白符的处理方式,其属性值如下:
normal:文本中的空格、空行无效,满行后自动换行
pre:预格式化,按文档的书写格式保留空格、空行原样显示
nowrap:空格空行无效,强制文本不能换行,除非遇到换行标签<br/>。*内容超出标签边界也不换行,超出浏览器页面则会自动增加滚动条
10.text-shadow:阴影效果
用于为页面中的文本添加阴影效果,其基本语法格式如下:
选择器{text-shadow:h-shadow(水平阴影距离) v-shadow(垂直阴影距离) blur(模糊半径) color(阴影颜色)}
举个栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影效果</title>
<style type="text/css">
.one{
font-size: 60px;
text-shadow:10px 5px 10px #6600ff;
}
</style>
</head>
<body>
<p class="one">这就是阴影效果</p>
</body>
</html>
****注意:当设置阴影的水平和垂直距离参数均为正值时,阴影的投射方向在右下角。为负值时,在左上角。阴影的模糊半径参数只能是正值,数值越大阴影向外模糊的范围也越大。
11.text-overflow:标示对象内文本的溢出
用于标示对象内文本的溢出,其可用属性值如下:
ellipsis:用省略标签“...”标示被修建文本,省略标签插入的位置是最后一个字符
clip:修建溢出文本,不显示省略标签“....”
本文地址:https://blog.csdn.net/m0_47228284/article/details/109177964
上一篇: AITO问界M5对华为和合作伙伴来说可能是重大打击
下一篇: 详解Python中第三方库Faker