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行高控制行与行之间的距离

相关内容

热门资讯

中国现代音乐治疗发展(1989... 文/张勇 1989年至1999年是中国现代音乐治疗事业从奠基走向初步发展的关键十年。以1989年10...
从“体面过年”到“悦己过年”!... 当前,博州节日消费市场持续升温,除购置年货这样的传统消费外,美发、美甲等“美丽消费”“悦己消费”持续...
有火锅店需排队三小时、翻台率涨... 2月14日晚8点30分,拖着行李箱的江西游客韩女士在成都万象城一家餐厅外,经过三小时排队,终于落座就...
35亿美元!赫伯罗特联手基金收... 航运界网消息,备受关注的全球第10大班轮公司以星(ZIM)收购案传出最新消息,据以色列媒体《The ...
原创 不... 文/李光斗 经商有两个原则,一个是不吃独食,还有一个就是,不赚最后一个铜板。字面意思很好理解,就是你...
“马斯克传闻”刚澄清,高测股份... 2月13日,高测股份(688556)发布公告称,控股股东、实际控制人、董事长张顼计划于3月17日至6...
原创 2... 福布斯在每一年的二月都会公布该年度的香港富豪榜。2026年的香港富豪榜已经出炉,前四位的排位与202...
银行密集调整代理上金所贵金属业... 来源:滚动播报 (来源:经济参考报) 兴业银行日前发布公告称,根据业务发展需要,该行将在2026年2...
原创 中... 今年2月7日,如果你细心观察中国央行的官方网站,你会发现一个微妙的变化——那个记录国家财富的数字,突...
美团:预期2025年录得亏损约... 人民财讯2月13日电,美团2月13日公告,本集团预期于2025年度录得亏损约人民币233亿元至人民币...
原创 谁... 阅读须知:本文内容所有信息和数据,均为作者查阅官方信息和网络已知数据整合解析,旨在让读者更清晰了解相...
京东集团:未来五年将采购300... 中证报中证网讯(记者 杨洁)2月13日,京东集团发布新春贺信称,将在春节9天总投入超13亿元,通过加...
原创 情... 近期,一则突如其来的消息在能源圈内引起了广泛关注:中国传统能源合作伙伴——委内瑞拉的石油似乎突然中断...
原创 黄... 金价寻底?2026年2月10日,国内足金、金条最新行情追踪 近期,黄金市场出现波动,金价下跌,金条价...
原创 美... 国际能源格局风云突变,一场围绕委内瑞拉石油的博弈正在上演。令人费解的是,一向对中国在拉美地区布局严防...
【汽车人】岚图为何快速通关上市... 岚图能过审,而且快速过审,归因于岚图以一种可信、可验证的方式,构建了产品-技术-用户的价值闭环,形成...
被老铺黄金们劝退,年轻人涌向广... 编者按:拼车返乡、拼单买年货,今年过年,你“拼”了吗?当Z世代主导春节,并不意味着传统消失,而是年味...
三部门发布“十五五”期间支持科... 财政部 海关总署 税务总局关于“十五五”期间支持科普事业发展进口税收优惠政策的通知财关税〔2026〕...
必看!2026年企业出海服务排... 在构建2026年企业出海服务排行榜的过程中,围绕海外市场布局服务的多样性以及其在开拓海外市场中的关键...
一切皆可Agent Skill... 文 | 王吉伟 你公司的ERP审批流程,点十几个按钮,转三个部门,等五天才能报销一张发票。 隔壁创...