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

相关内容

热门资讯

联合倡议!提升家具消费品质 共... “南康家具”生产经营企业、广大电商平台及平台内经营者、自媒体从业者: 为全面贯彻中国消费者协会“提升...
重庆跨境电商企业布局东南亚,境... 重庆跨境电商企业布局东南亚,境外投资备案办理指南 重庆跨境电商布局东南亚(非敏感地区)通常属于“鼓励...
原创 第... 每次路过北大街,都会看见一栋超高层的烂尾楼,它就是山西晋豪国际大酒店。 想当年,它曾是山西第一高楼,...
猴价翻倍引发资本躁动,“猴茅”... 今日(7.16),在“猴模块”行情催化下,CRO概念再度爆发,昭衍新药盘中一度涨停走出5天3板,收盘...
人工智能文创产业基地揭牌,浦东... 7月15日,人工智能文创产业基地在上海揭牌,该基地由浦东新区与阅文集团合作共建。 阅文集团首席执行...
在苏州用黄金抵押变现,5个保障... 上周,在苏州园区工作的陈先生遇到了一件棘手事。他看中一个短期项目,急需一笔10万元的资金周转两周,但...
上市临门一脚,财信证券悄悄换了... 已在上交所IPO排队超过三年的财信证券,今年4月刚恢复“已问询”。连续任职八年之久的首席风险官,忽然...
国民技术董事长新增质押20万股... 7月16日晚间,国民技术(300077)发布股东股份质押公告,公司第一大股东、董事长兼总经理孙迎彤将...
更衣室控不住了?曝英格兰球员对... 北京时间7月17日消息,据英国媒体《每日电讯报》独家报道,部分英格兰球员对图赫尔在球队领先后的换人调...
美国商品期货交易委员会调查白宫... 来源:环球市场播报 一位知情人士透露,一名白宫提词器操作员正接受美国商品期货交易委员会(CFTC)调...
术后伤口长不上的根本原因 手术后伤口不愈合,是很多患者术后最头疼的问题。明明手术很成功,可伤口就是迟迟不肯长,甚至化脓、发炎,...
原创 搞... 不少中老年股民总听人提 “核心资产”,却摸不清到底什么样的才算,不少人盲目跟风买错,结果亏了不少钱。...
黄金交易提醒:美伊大战升级,油... 汇通财经APP讯——在全球地缘政治风云变幻的当下,黄金这一传统避险资产却罕见地遭遇重挫。2026年7...
股价阴跌不止,公司是否会有ST... 有投资者向 永辉超市(601933.SH)提问,最近一年永辉股价阴跌不止,大股东还减持,给中小投资者...
智慧医院系统源码如何构建安全、... 在医疗数字化不断发展的今天,智慧医院系统已经成为医院信息化建设的重要组成部分。从预约挂号、门诊就诊,...
信维通信零溢价装入高端MLCC... 7月14日晚,信维通信(300136.SZ)发布公告,全资子公司益阳信维拟以不超过11亿元现金收购信...
两家国产AI公司上半年营收预增... 7月16日晚,国产AI芯片公司摩尔线程(688795.SH)发布业绩预告,预计今年上半年营收16.5...
存储超级周期来了!深圳五家上市... 扬子晚报网7月16日讯(实习生 崔天天 记者 范晓林 薄云峰)受益于AI算力爆发与存储行业进入高景气...
趋境科技完成A轮亿元融资 境科技A轮融资浮出水面,由河南投资集团汇融基金重磅领投,真知资本、尚势资本、星连资本、上海国方创新、...