CSS3的字体样式属性,文本样式属性
Posted 别Null.了
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3的字体样式属性,文本样式属性相关的知识,希望对你有一定的参考价值。
目录
CSS字体样式属性
font-size 属性
用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。
相对长度单位 | 说明 |
---|---|
em | 相当于当前对象内文本的字体尺寸 |
px | 像素,最常用 |
绝对长度单位 | 说明 |
in | 英寸 |
cm | 厘米 |
mm | 毫米 |
pt | 点 |
font-family 属性
用于设置字体。
例如:p{font-family:"隶书";}
font-weight 属性
用于定义字体的粗细。其可用属性值有以下几种:
值 | 描述 |
---|---|
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
100~900(100的整数倍) | 定义由细到粗的字符。其中400等同于normal,700等同于bold,值越大字体越粗。 |
font-style 属性
用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
属性值 | 说明 |
---|---|
normal | 默认值,浏览器会显示标准的字体样式 |
italic | 浏览器会显示斜体的字体样式 |
oblique | 浏览器会显示倾斜的字体样式 |
font属性
用于对字体样式进行综合设置,其基本语法格式如下:
选择器{font:font-style font-variant font-weight font-size/line-height font-family;}
@font-face属性
用于定义服务器字体,即使字体未下载也可使用。
@font-face{
font-family:字体名称;
src:字体路径;
}
举例
<html>
<style>
p{
font-size: 20px;
font-family: 隶书;
font-weight: 20;
font-style: italic;
}
</style>
<body>
<p>我是css的字体样式</p>
</body>
</html>
结果所示:
CSS文本样式属性
color属性
用于定义文本的颜色,取值方法有如下三种:
预定义的颜色:red,blue,green
十六进制:#bbbbff,#29D794等(最常用)
RGB代码:如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)
letter-spacing属性
用于定义字间距,就是字符与字符之间的空白,其属性值可以为负,默认为normal。
word-spacing属性:用于定义英文单词之间的间距,其属性值可以为负,默认为normal。
注意:word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距,而word-spacing定义的为英文单词之间的间距。
line-height属性
用于设置行间距,就是行与行之间的距离,是字符之间的垂直间距,行高。ine-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%
text-align属性
用于设置文本内容水平对齐,相当于html中的align。该属性对块元素设置有效。
left:左对齐(默认值)
right:右对齐
center:居中对齐
justify:自适应(相当于两端对齐)
text-transform属性
用于控制英文字符的大小写,可用属性值如下:
- none:不转换(默认值)
- capitalize:首字母大写
- uppercase:全部字符转换为大写
- lowercase:全部字符转换为小写
text-decoration属性
用于设置文本的下划线,上划线,删除线等装饰效果。
属性值 | 说明 |
---|---|
none | 没有装饰(正常文本默认值) |
underline | 下划线 |
overline | 上划线 |
line-through | 删除线 |
text-indent属性
用于设置首行文本的缩进
其属性值可以为不同单位的数组、em字符宽度的倍数,或相对于浏览器窗口宽度的百分比%,允许使用负值,通常用em 作为设置单位。
white-space属性
设置空白符的处理方式
属性值 | 说明 |
---|---|
normal | 常规(默认值),文本中的空格、空行无效,满行(到达区域边界)后自动换行。 |
pre | 预格式化,按文档的书写格式保留空格 空行原样显示 |
nowrap | 空格空行无效,强制文本不能换行,遇到换行标签<br/>可换行。内容超出元素的边界也不换行,超出浏览器页面会自动增加滚动条。 |
text-shadow属性
h-shadow用于设置水平阴影的距离,v-shadow用于设置垂直阴影的距离,blur用于设置模糊半径,color用于设置阴影颜色。
text-overflow属性
用于处理溢出的文本:
- clip:修剪溢出文本,不显示省略标签“…”。
- ellipsis:用省略标签“…”替代被修剪文本,省略标签插入的位置是最后一个字符。
word-wrap属性
- normal:只在允许的断字点换行(浏览器保持默认处理)。
- break-word:在长单词或 URL 地址内部进行换。
(以上属性仅为css部分属性)
以上是关于CSS3的字体样式属性,文本样式属性的主要内容,如果未能解决你的问题,请参考以下文章