0
点赞
收藏
分享

微信扫一扫

【网页制作】CSS文本和字体属性讲解

青乌 2022-03-26 阅读 59

1.CSS文本和字体属性的作用:给文本和字体设置样式(具体看第二部分)

注意:在html中我们可以省略单位,但CSS不可以省略单位

简单的说大多数情况在html的body标签中我们可以省略单位,但在CSS的style标签中我们不能省略单位。

CSS文本和字体属性

 (1)一些常用的CSS文本属性

属性名称

作用

单位/值

color

设置字体的颜色

#f00/red/rgb(200,125,100)

text-indent

设置首行缩进,允许负值

px/em

text-decoration

设置文本修饰线

underline/overline/line-through

text-transform

单词字体大小写

单词字体大小写

line-height

设置行高

固定值或百分比

text-align

设置在当前文本的对齐方式

left/right/center

word-spacing

设置单词之间的间距

px

 letter-spacing

设置字符之间间距

px

注意:此处大家要注意单词间距和字符间距,不要搞错了。下面举例说明一下:

abcd 四个字符之间的间距叫做字符间距

a happy day 3个单词之间的间距叫做单词间距

 (2)一些常用的CSS字体属性

属性名称

作用

单位/值

font-size

设置文本的大小

10px,20px

font-family

设置字体的类别

宋体,楷体

font-style

设置文本为斜体

normal(正常),italic(斜体)

font-weight

设置字体的粗细

normal(正常),bold(加粗)

font

包含上面所有作用

注意属性设置有顺序要求:

1斜体 2加粗 3大小 4类别

每一个值之间需要空格隔开

举例:font:italic bold 10px “楷体”

   设置为:斜体 加粗 10px大小 楷体

   注意:
   (2.1)用font直接设置属性值时要注意属性的顺序(1斜体 2加粗 3大小 4类别),不能弄错

    (2.2)关于font-family字体类别的设置,如果用户电脑有对应的字体文件,则设置成功;否则默认显示为宋体,用户可以通过路径导入没有的字体,这里就不讲解怎么导入了,大家知道这一点就好。

    (2.3)font-family: "楷体","黑体","微软雅黑"; 

        如果用户电脑有楷体则为楷体,否则判断用户电脑是否有黑体,有则为黑体,没有则判断用户电脑是否有微软雅黑,有责则为微软雅黑,没有则为默认的宋体,按照顺序判断

3 代码及介绍(本章会用到前面选择器的内容,不懂的小伙伴可以去学习回顾一下)

总代码:

(1)  CSS文本属性代码

 代码效果:

  (2)CSS字体属性代码:

代码效果:

本期讲解到此结束,大家如果有不懂的地方可以私信,只要有时间一定回复哦。

博主的哔哩哔哩账号:一枫阳光,感兴趣的可以关注一下哦。定期更新CSS代码学习。萌新UP主大家一起进步呀。讲解若有不对,一定第一时间修改,谢谢大家啦。

举报

相关推荐

0 条评论