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

相关内容

热门资讯

提前布局硬科技企业,银行系“耐... 国产DRAM龙头长鑫科技7月16日启动科创板新股申购。招股书显示,金融资产投资公司(AIC)等银行系...
沈阳本地有哪些可满足小单需求的... 沈阳本地定制服装行业需求现状 近年来沈阳本地各类企事业单位的文化建设、活动筹办、员工工装配置需求处于...
25.47万亿元!上半年外贸创... 本报(chinatimes.net.cn)记者张智 北京报道 尽管今年外部环境复杂多变,但我国进出口...
四季陪伴 | 资产配置策略真的... 来源:中信银行微生活 01 一个无法回避的问题 2026年上半年结束了。打开账户,很多持有“四季组...
神秘大资金出手了。。 大资金再出手! 时隔15个月,ETF市场再现神秘资金抄底行情。 仅两个交易日,全市场股票ETF净流入...
梁文锋登顶全球大模型首富 据7月15日更新的彭博亿万富翁指数最新数据,DeepSeek创始人梁文锋以360亿美元净资产位列全球...
中央通报3起典型问题:国企投资... 2026年7月15日,中央层面整治形式主义为基层减负专项工作机制办公室和中央纪委办公厅公开通报3起整...
7月15日主题复盘 | 医药股... 一、行情回顾 市场全天震荡调整,科创50指数跌超4%。医药股逆势走强,迪哲医药、博瑞医药、昭衍新药等...
原创 莫... 印度这次跟美国的贸易谈判,摆出的架势让我们看了直摇头。莫迪政府张口就要"比中国还低的关税待遇",这个...
原创 今... 家人们谁懂啊,今早6点刷到的黄金分析还写着「4100横盘待变,4021是铁底」,结果8点半美国6月C...
近3亿套现落空!零售巨头物美集... 图片来源:图虫创意 横跨南北多省布局、拥有多个连锁品牌的老牌零售巨头——物美科技集团有限公司(以下简...
常州第一大独角兽企业:估值30... 根据胡润研究院的界定,独角兽企业指的是成立于2000年之后、估值超过10亿美元的非上市企业。这类企业...
长鑫科技回应董事长发股权激励,... 7月15日下午,存储厂商长鑫科技召开网上投资者交流会,该公司董事长朱一明在与投资者的交流中谈及公司登...
原创 D... 彭博、《金融时报》近期同步曝光,曾经宣称 “不融资、不上市、不商业化” 的 DeepSeek,正式推...
原创 7... 科创板史上最大IPO的发行价终于落地了。 长鑫科技每股定在8.66元,刚好卡在市场之前预测的7-10...
002731连续15个跌停后巨... 文/帅可聪 7月15日,在连续15个交易日跌停后,*ST萃华(002731.SZ)股价盘中出现异动。...
原创 4... 那个被全球资本疯狂追逐的电商巨头,终于要IPO了。 作者 | 云帆 来源 | 投资家(ID:touz...
上半年我国芯片日均产量超15亿... 国家统计局新闻发言人、国民经济综合统计司负责人王冠华7月15日在国新办新闻发布会上表示,今年上半年,...
从百人团队到近7000人!小米... 八载深耕积淀,科创步履不停。7月15日,小米集团华东总部迎来8周年生日。南京建邺区相关领导、小米集团...
原创 重... 2026年7月13日,国务院正式批复了《扩大消费"十五五"规划》。 目标写得明明白白,到2030年,...