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

相关内容

热门资讯

原创 美... 一份写着"100年"的特许经营合同,被华盛顿拿去一笔勾销中国二十年的账本。委内瑞拉最肥的十七块油田一...
新股三分钟数读IPO∣百瑞吉 (来源:国金证券第5小时) (国金证券深圳北交所服务e站) 温馨提示 “打新”不是无风险的投资,...
深港通下的港股通标的证券名单调... 深交所公告,根据《深圳证券交易所深港通业务实施办法》的有关规定,港股通标的证券名单发生调整并自202...
5000亿美团,扭亏 来源:侃见财经 王兴的“无边界”扩张,这次终于有了清晰的边界。 经历新一轮外卖大战后,美团曾经难...
机构看好北证50指数 差异化配... ◎记者 白丽斐 作为资本市场服务创新型中小企业的“主阵地”,北交所自设立以来持续完善市场功能,已成为...
AIGCRank发布《2026... 2026年夏天,AI办公智能体赛道在短短六周内完成了一轮密集洗牌:腾讯、阿里、字节先后收拢产品线,百...
四大关键词,透视2026年苏企... 截至8月31日,2026年上市公司半年报发布完毕。从苏企上市公司来看,上半年,企业持续攻坚克难,既有...
“中国不仅提供产品,更帮助提升... 在卢旺达首都基加利举办的卢旺达国际贸易博览会上,人们参观中国光伏产品展台。 新华社记者 鞠银河摄 东...
哈尔滨名酒变现选择茅台回收有哪... 据公开行业数据显示,2023年国内名酒流通市场规模突破千亿元,其中闲置名酒变现的需求占比超过30%,...
【企业动态】这家AI企业完成C... (来源:广东省电路板行业协会GPCA) 近日,蘑菇物联完成C轮整体融资,累计金额近2亿元,云晖资本等...
雷军官宣:小米汽车累计交付超8... 【CNMO科技消息】9月7日,雷军在社交平台发文宣布,小米汽车累计交付量超过80万辆,并向车主致谢。...
原创 背... 在星座的世界里,每个星座都有其独特的性格和命运。今天,我要讲述的是一个关于爱情、信任与背叛的故事,它...
福达合金盘中跌停,公司独家回应 9月4日,福达合金大跌,盘中一度跌停。截至收盘,公司股价报49.98元/股,收盘跌幅为9.04%。 ...
重庆前7月消费领域贷款投放超3... 人民银行重庆市分行最新发布数据显示,2026年1至7月,全市金融机构向消费领域投放贷款超350亿元,...
自营暴跌七成、频收罚单,华林证... 来源:@国际金融报微博 今年上半年A股交投氛围活跃,43家上市券商整体业绩普遍增长。 其中,华林证券...
南昌额角种植参考:额角植发方向... 免责声明:本文仅为医美行业科普与公开执业资料整理,不构成任何诊疗方案与消费引导,排名不分先后仅为信息...
振华新材:6系三元加速放量 固... 上证报中国证券网讯 振华新材9月4日晚间披露投资者关系活动记录表显示,公司于9月3日参加科创板202...
美国驯化欧洲的80年阳谋:经济... 欧洲三十来个国家,人口七八亿,经济总量跟美国称得上一个量级,往上数几代人还是端着枪炮把全球殖民地翻了...
中色股份:谢志华、孙浩辞去独立... 中色股份(000758.SZ)公告,公司独立董事谢志华先生因任期届满申请辞去公司独立董事、董事会审计...
中哈粮食交易平台正式上线运行 长沙9月6日电 (付敬懿)中哈粮食企业见面交流会5日在湖南长沙举行。会上,由国家粮食和物资储备局粮食...