CSS3的字体样式属性,文本样式属性

Posted 别Null.了

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3的字体样式属性,文本样式属性相关的知识,希望对你有一定的参考价值。

目录

CSS3字体样式属性

font-size 属性

font-family 属性

font-weight 属性

font-style 属性

font属性

@font-face属性

CSS3文本样式属性

color属性

letter-spacing属性

line-height属性

text-align属性

text-transform属性

text-decoration属性

text-indent属性

white-space属性

text-shadow属性

text-overflow属性

word-wrap属性


CSS字体样式属性

font-size 属性

用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。

相对长度单位说明
em相当于当前对象内文本的字体尺寸
px像素,最常用
绝对长度单位说明
in 英寸
cm厘米
mm毫米
pt

font-family 属性

用于设置字体

         例如:p{font-family:"隶书";}

font-weight 属性

用于定义字体的粗细。其可用属性值有以下几种:

描述
normal

默认值。定义标准的字符。

bold

定义粗体字符。

bolder

定义更粗的字符。

lighter

定义更细的字符。

100~900100的整数倍)

定义由细到粗的字符。其中400等同于normal700等同于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的字体样式属性,文本样式属性的主要内容,如果未能解决你的问题,请参考以下文章

CSS3 新增文本样式

CSS3.3

关于css3样式rem的自适应属性问题

css常用样式的字体和文本相关属性

css 中title属性怎样设置文本样式?如加颜色、设置大小 <div title="样式"></div>

css字体样式(Font Style),属性