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

相关内容

热门资讯

原创 中... 随着全球气温的升高,北极航道逐渐揭开了它的神秘面纱,成为了国际贸易的新宠。这条航道的开发,不仅是中俄...
富达国际要退出富达基金?公司回... 来源:时代周报 本文来源:时代周报 日前,有消息称富达国际正考虑退出其全资控股的中国境内公募基金公司...
原创 许... 8月20日上午,深圳法院一锤定音,许家印被判无期徒刑,恒大集团被罚88.2亿,恒大地产被罚70亿。 ...
积极推动市场拓展 ST思科瑞上... 上证报中国证券网讯 ST思科瑞8月21日晚披露2026年半年度报告,报告期内,公司深耕主营业务,并积...
基金经理的红利投资新尝试 来源:上海证券报 ...
连开新店型,外资零售重温北京市... (来源:北京商报) 在北京市场沉寂多年的外资零售正在重新加码。8月22日,老牌日本零售企业伊藤洋华堂...
原创 普... 生意场上有句老话——"锦上添花的人多,雪中送炭的人少"。这话搁在国家之间,同样管用。一个国家风光的时...
蓝思科技:二季度业绩反转 AI... 随着汇率波动带来的业绩“逆风”逐渐消散,蓝思科技(300433.SZ)迎来强势“触底反弹”。据其20...
原创 张... 记忆深处,总有一段急促的电话铃声,像一枚回音石,投射着《重案六组》的影子。那是青春里一段难忘的刑侦记...
风险等级怎样影响申赎安排更稳妥... 在基金投资中,风险等级是一个至关重要的概念,它对基金的申购和赎回安排有着深远影响,合理考虑风险等级能...
长鑫天量IPO之后,又来长江,... 本周,黄金持续上涨、比特币冲击8万美元——避险狂潮席卷全球,达利欧高呼配置黄金比特币。 A股却在缩量...
华为 AIEC 方案首落四川!... 8月18日至21日,四川省中小学人工智能通识课程实训研修营(第一期)在成都举行。该活动以“为未来而教...
第三批公募业绩基准调整落地!涉... 来源:券商中国 公募基金第三批业绩比较基准调整落地。 近日,百余家基金公司按照统一部署同步发布公告,...
“卷”出来的银行中收数据? 有... 每经记者|潘 婷 每经编辑|魏官红 “卖保险、卖基金、网点之间比赛”,这是不少一线营业部的日常。若一...
一文看懂GPU是怎样工作的 公众号记得⭐️,第一时间看推送不会错过。 大语言模型工程师需要的直觉,无需硬件手册。 最终,量化、推...
创三个月来新高,金价为何突然大... 8月以来,国际金价摆脱了此前4000至4100美元的区间震荡,打开上行空间。受美元走弱、市场避险情绪...
金价,创三个月来新高 8月以来,国际金价摆脱了此前4000至4100美元的区间震荡,打开上行空间。据CNBC报道,受美元走...
原创 美... 这场全球稀土争夺的棋局,注定是一场力量与现实的碰撞。白宫的雄心壮志如高调的宣布,却掩盖不住棋局的残酷...
犹豫期什么情况保障配置更合理? 在购买保险时,犹豫期是一个非常重要的时间段,在这个时期合理配置保障能够让保险更好地契合自身需求。以下...
最高省5000元!信用卡分期又... 北京商报讯(记者 孟凡霞 周义力)金融促消费的“红包”又加码了!个人消费贷款(含信用卡分期)贴息上限...