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

相关内容

热门资讯

起点订购APP贵金属订购交易欺...   互联网上充斥着白银、铂金、铜等现货贵金属投资公司的宣传,通过不实的贵金属现货APP吸引投资者,但...
全新易购APP高额手续费的期货...   全新易购APP白银铂金现货订购出现严重的损失,投资者在这个平台根本赚不到钱,开始还好,后面的交易...
银行板块震荡上扬 中国银行等股... 观点网讯:7月8日,银行板块震荡上扬,中国银行、农业银行、建设银行、成都银行、工商银行等股纷纷上扬。...
AI Agent进入深水区:企... AI Agent从技术概念走向商业落地,企业付费意愿成为检验产品价值的唯一标准。过去两年大量AI创业...
一通智投APP内幕交易欺骗投资...   一通智投APP虚假现货订购交易为非法期货,投资者被宣传广告给诱导,下载了一通智投APP,结果在这...
港股科技股全线大涨!跌多了是基... 港股市场近日整体有明显反弹的科技股今日再度集体走强,恒生科技指数拉升涨超3%。个股中,联想涨超8%,...
一场博览会,看透低空经济风口全... 文丨许佳慧 低空经济风起,谁是真正的弄潮儿? 【观赛道:题材风口开启,全链布局成型】 低空经济有多火...
黄金单边牛市没那么快回来?预测... 黄金这波反弹刚冒头,没人敢直接砸重仓赌方向。Polymarket上的交易显示,黄金7月触及4300美...
超颖电子布局“A+H”:一季度... 瑞财经 吴文婷7月6日,超颖电子发布公告称,为满足公司业务发展需要,深入推进国际化战略,打造国际化资...
偏袒?阿根廷球员扇耳光+飞铲无... 北京时间7月8日,2026年世界杯1/8决赛,阿根廷3-2逆转埃及晋级八强。不过,本场比赛的判罚在赛...
原创 高... 在国际关系的复杂棋局中,盟友与对手从来都不是一成不变的。最近,俄罗斯通过中间渠道从日本进口航空燃油的...
优质药食同源食材选购指南:甘草... 在现代保健理念中,药食同源的概念越来越受到重视。许多人开始关注如何选购优质的药食同源食材,以便更好地...
AI产业进展提振信心,科创创业... 截至7月8日11点15分,上证指数涨0.28%,深证成指跌0.28%,创业板指涨0.51%。油气开采...
将多色3D打印提速5倍,消费级... 消费级3D打印企业快造科技(Snapmaker)近日完成10亿元C轮融资。本轮由凯辉基金领投,好未来...
“物理AI第一股”来了!Mom... 2026年7月8日,全球领先的物理AI公司Momenta正式在港交所挂牌上市,股票代码为6880.H...
投资需求增长的核心动力是什么? 在金融市场中,投资需求的增长受到多种因素的综合推动,这些因素构成了投资需求增长的核心动力。 首先,经...
苏州得鹿食品有限公司成立 注册... 天眼查App显示,近日,苏州得鹿食品有限公司成立,法定代表人为周锋,注册资本50万人民币,经营范围为...
刚刚,又一家厦门企业在港股上市... 最新消息! 厦门又迎来一家上市公司! 7月8日 厦门瑞为信息技术股份有限公司 (以下简称“瑞为技术”...
韩国综合指数转涨,盘初一度跌近... 8日,韩国综合指数转涨,一度涨超1.6%,现涨0.7%,盘初一度跌近4%。个股方面,SK海力士涨近4...
原创 7... 四千多欧洲人因为高温没了命,大半是装不起买不起空调的独居老人。现在老百姓抢着买能解决问题的中国空调,...