html中什么字体样式,CSS中常用的字体样式属性

8d5cabd42c3e16f3f989dac353f99a6f.png

font-size:设置文本的字体大小

选择器:{font-size:15px;}

此属性可以使用相对长度单位,也可以使用绝对长度单位。二者之间相对长度单位比较常用,相对长度种px(像素)单位使用较多。

相对长度单位有:

em:相对于当前对象内文本的字体尺寸px:像素单位,是开放中常用的单位绝对长度单位有:

in:英寸cm:厘米mm:毫米pt:点建议:

网页一般使用14px以上的字体大小字体大小尽量使用双数,因为单数情况下ie6等老式浏览器可能会出bugfont-family:设置文本的字体样式

选择器{font-family:"微软雅黑",“宋体”,arial;}

建议:

可以使用多个字体,中间用英文状态下的逗号,如果浏览器找不到第一个字体那么它会找下一个字体,以此类推,直到找到合适的字体。建议尽量使用系统默认的字体,这样可以保证用户的网页打开状态为最佳。英文字体不需要加双引号,如:选择器{font-family:arial;}如字体中包含特殊符号必须用双引号括起来,如:选择器{font-family:"Microsoft yahei";}font-weight:设置文本的粗细

选择器{font-weight:bold;}

属性值:

bold:正常加粗normal:取消加粗700:等于bold,如果还想更粗就加大数值400:等于normal,如果还想更细就减小数值font-style:设置字体风格

选择器{font-style:normal;}

属性值:

normal:取消字体样式,让字体显示为正常italic:设置字体为斜体,让原本正常的字体变斜体建议:

一般很少给正常的文字加斜体属性,相反的是让标签显示为正常字体。加完样式之后要表达的意思不变。

字体样式连写:

学过了上面的几个属性之后我们发现如果一个标签这些样式都要设置的话写起来会很繁琐,代码冗余性太强,下面我们来学习一下简单的设置方式。

格式:

选择器{font:font-style font-weight font-size/line-height font-family;}p{font:normal bold 30px "宋体"}注意:

使用综合属性的时候必须按照以上的顺序来设置(其中不设置的属性可以不写(取默认值),font-size和font-family属性必须保留,否则连写将无效),不能改变顺序,每个属性用空格可开。

color:字体颜色设置

color属性用来设置字体的颜色,字体颜色设置格式有三种

浏览器预设样色,如red,pink,blue,grenn等(p{color:pink;})十六进制格式,如#333,#eee,#ff3300等(p{color:#333;})RGB颜色代码,如红色可以表达为rgb(255,0,0)或者rgb(100%,0%,0%)line-height:行间距设置

line-height用来设置行于行之间的距离,属性值有三种单位,像素px、百分比%、相对值em(p{line-height: 15px;})

text-align:文本对齐方式

text-align用来设置文本的对齐方式,属性值有三种,左对齐left、右对齐right、居中对齐center(p{text-align: center;})

text-indent: 设置段落的首行缩进

text-indent:属性用来设置首行的文本缩进,属性值有三种,一个字符宽度的倍数em、相对于浏览器窗口宽度的百分比%、像素px(p{text-indent: 2em;})

注意:

1em就是一个字的宽度,2em就是两个字的宽度

text-indent: 2em;

text-decoration:文本装饰属性

文本装饰属性用来让文本有更多的展现形式,如:上划线、下划线、中划线(删除线)等

text-decoration: none;/*取消装饰*/text-decoration: underline;/*下划线*/text-decoration: overline;/*上划线*/text-decoration: line-through;/*删除线*/

a202d597a706275d0913e085d54675f1.png上划线

3d82b8debcf3c996f505a05bd0f6b247.png下划线

7626e268c2f8974b1a35c5b2cf3ae2fe.png中划线/删除线

f9d50a5cfe30514d45f00c18a9a6adb4.png文本装饰代码实现

举报/反馈

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值