CSS学习(二):字体属性和文本属性
admin
2024-04-27 16:18:09
0

原文链接(csdn上更新可能较慢):CSS学习(二):字体属性和文本属性

1. 字体属性

CSS font属性用于定义字体系列,大小,粗细和文本样式。

1.1 字体系列

CSS使用 font-family属性定义文本字体系列,一般来说建议使用默认字体。


可以同时定义多个字体,用逗号分隔即可。当定义了多个字体时,浏览器会从第一个字体开始查找,查找至浏览器可以显示的字体为止,显示该字体。一般情况下,字体系列的定义会放在body 标签中,这样页面中的所有文字的字体就得到了统一。

1.2 字体大小

CSS使用 font-size属性定义字体大小。


px 是像素单位,谷歌浏览器默认是16px,可以给body 指定整个页面文字大小。另外,标题标签比较特殊,需要单独指定字体大小。

需要注意的是,定义字体大小时必须要带单位。

1.3 字体粗细

CSS使用 font-weight属性定义字体粗细。


实际开发中常用数字指定文字粗细,也可用英文字符指定。font-weight 的默认值是normal,对应数字大小为400,其他的还有bold(700),bolder,lighter。

注意用数字定义文字粗细时,没有单位。

1.4 文字样式

CSS使用 font-style属性定义字体样式。


默认值为normal ,italic表示斜体。

1.5 字体复合属性写法

可以使用font属性一行代码定义多个字体属性,节约代码。

body {font: font-style font-weight font-size/line-hight font-family;
}

需要严格遵守顺序,font-familyfont-size 必须要有。

例如:


1.6 总结

属性表示注意点
font-size字号单位是px像素,一定要跟上单位。
font-family字体实际工作中按照团队约定来定义字体。
font-weight字体粗细加粗是700或者bold,不加粗是normal或者400,记住数字不要跟单位。
font-style字体样式倾斜是italic,默认是不倾斜normal
font字体连写有顺序,字号和字体必须同时出现。

2. 文本属性

CSS Text属性用于定义文本的外观(颜色),对齐文本,装饰文本,文本缩进,行间距等。

2.1 文本颜色

color属性定义文本颜色。


可以使用预定义颜色值,十六进制和RGB代码设置文本颜色。

2.2 对齐文本

text-align属性设置元素内文本内容的水平对齐方式。


属性值解释
left左对齐(默认值)
right右对齐
center居中对齐

2.3 装饰文本

text-decoration属性规定添加到文本的修饰,可以给文本添加下划线,删除线,上划线等。


属性值描述
none默认。没有装饰线(最常用,可以给a标签去掉下划线)
underline下划线。a标签自带下划线(常用)
overline上划线。(几乎不用)
line-through删除线。(不常用)

2.4 文本缩进

text-indent属性来指定文本的第一行缩进,通常是将段落首行缩进。


文本缩进的单位可以是px,也可以是em。em是一个相对单位,1em就是一个字符所占的大小。当text-indent=20em,则恰好缩进两个字符的大小。

2.5 行间距

line-height属性用来设置行间的距离,可以控制文字行与行之间的距离。


行间距=上间距+文本高度+下间距。当我们指定了文本大小时,文本高度就不会发生变化,这时我们再增大行间距,上下间距就会一起变大。

2.6 总结

属性表示注意点
color文本颜色通常用十六进制
text-align文本对齐可以设定文字水平的对齐方式
text-indent文本缩进通常我们用于段落首行缩进2个字的距离
text-decoration文本修饰添加下划线underline 取消下划线none
line-height行高控制行与行之间的距离

相关内容

热门资讯

实探|金属价格高位震荡,实体企... 今年以来,以铜、铝为代表的工业金属价格持续震荡,也牵动着诸多实体企业的利润表。 近日,证券时报·券商...
时空道宇CEO王洋:民营低轨星... 当各大AI大模型厂商为每一条用户查询持续消耗巨额算力成本之际,一场立足于“万物互联”的成本变革,正在...
第378位!新华保险荣登《福布... 荣耀时刻 6月26日,美国《福布斯》杂志发布“2026年全球企业2000强"(Forbes The ...
狼疮患者注意!这个习惯正让复发... 坐出来的病,真不是吓唬你 我在门诊见过太多这样的病人了:拿着复查报告一脸委屈地问我:“医生,我药也按...
金价大跌后可以抄底了?实地探访... 央广网北京6月26日消息(记者 谢碧鹭)近期,黄金市场迎来了一轮剧烈回调,伦敦现货黄金跌破4000美...
网安企业现金流承压,山石网科如... 经营性现金流是衡量企业财务健康状况以及可持续造血能力的核心指标,而在市场日益饱和、竞争激烈的网络安全...
超2亿美元 又一具身智能初创企... 6月26日,《中国经营报》记者从具身智能初创企业无界动力方面获悉,该公司近日已完成超2亿美元的天使轮...
半年内144只公募基金“消失”... 作者 |付影 来源 | 独角金融 没有惊雷,没有恐慌,只有一份份冷冰冰的清算公告悄然堆积。 截至20...
股价6月创新高!券商看好陕西煤... 文丨惠凯 编辑丨杨练 虽然陕西煤业被调出上证50指数,公司的信息披露评级也由A调至B,但受新矿山投产...
火星人跌3.73%,成交额1.... 来源:新浪证券-红岸工作室 6月26日,火星人跌3.73%,成交额1.12亿元,换手率3.57%,总...
原创 滨... 长沙晚报掌上长沙6月26日讯(全媒体记者 彭放 通讯员 于良艺)6月26日,[2026]长沙市030...
近千股跌破“924”起点!两大... 近期,A股市场上演“冰火两重天”,一边是AI核心股迭创新高,另一边,大批传统大白马却持续走低,悄然跌...
行业观察丨2026年亚太经合组... 6月24日,2026年亚太经合组织(APEC)中小企业工商论坛在广东省深圳市成功举办。本次论坛由工业...
加密货币,超17万人爆仓 【导读】比特币盘中跌穿6万美元 中国基金报记者 莫琳 6月25日凌晨,比特币突然直线跳水,盘中一度跌...
谁会为68元/月的豆包买单?|... “豆包对我来说,完完全全就是一个娱乐性的工具。”作为一名已经为多个AI大模型产品付费的资深AI用户,...
重庆银行:股东大新银行增持股份... 重庆银行发布公告称,2026年6月24日,股东大新银行以大宗交易方式增持该行H股股份3000万股,成...
好评中国丨暑期文旅消费暖意涌动... 观众在上海自然博物馆“生命长河”展区搭起帐篷准备夜宿。新华社记者陈爱平 摄 □刘春萌 暑期帷幕全面...
变天!AI大厂被疯狂抽血1.5... 资本市场,从来不缺乏极致。 一边冰、一边火的两重天境界,现在正在全球市场疯狂上演。 火的是,三星、S...
财会实训室云桌面系统比传统机房... 财会实训室云桌面系统比传统机房维护效率高且长期成本更低,首先得益于其创新的集中化运维架构与软硬件解耦...
黄金跌到不敢买!进店询价者多但... (来源:中国商报) 转自:中国商报 又有银行调整个人贵金属业务。 建设银行6月25日发布公告称,将于...