当前位置:常识百科馆>游戏数码>IT技术>

HTML网页制作:[17]CSS常用样式字体及颜色属性

IT技术 阅读(2.24W)

CSS在网页中应用非常广泛,今天我就来分享一些关于文本的CSS样式属性。一起来学习一下吧!

操作方法

(01)如图,比如我们有一段文本hello html!。

HTML网页制作:[17]CSS常用样式字体及颜色属性

(02)然后在浏览器中预览一下最初始的效果。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第2张

(03)然后我们在网页中添加style标签,从而设置CSS样式。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第3张

(04)如图,书写标签名加花括号,这里我使用的是p标签。如果你用的是其他标签,则修改为其他标签。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第4张

(05)接着书写书写font-family,font-family是关于字体的属性,这里我设置成微软雅黑,你也可以设置成楷体,隶书等,注意要带上双引号哦。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第5张

(06)接着再来预览,可以看到字体变成微软雅黑了哦。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第6张

(07)再来书写属性font-size,这个属性是设置文本的大小的。这里我就设置成36px,px表示像素。数值越大则文本越大。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第7张

(08)接着预览效果,就会发觉字号变大了。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第8张

(09)接着设置font-style,这个属性是设置文本的风格,我设置的是斜体italic,默认是normal。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第9张

(10)接着预览效果可以看到文本变成斜体了哦。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第10张

(11)设置文本是否为粗体可以用属性font-weight,这里我设置为bolder,或者也可以设置成bold。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第11张

(12)这样文本就会加粗了。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第12张

(13)而color这个属性可以设置文本的颜色,这里我就设置成red红色了。你也可以设置成blue蓝色,orange橙色,pink粉色等。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第13张

(14)最后,网页文本变成红色的了。

HTML网页制作:[17]CSS常用样式字体及颜色属性 第14张

(15)贴出源代码可以参考参考。<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">p{font-family: "微软雅黑";font-size: 36px;font-style: normal;font-weight: bolder;color: red;}</style></head><body><p>hello html!</p></body></html>