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-财产线索数据整理,中国银行股份有限公司5月24日发布《中国银行北京庄...
原创 A... "上下同欲者胜。"——《孙子兵法》 “厂家那边又逼我压两百万的货,可库存早都冒了。” 凌晨两点...
原创 “... 全款买房”和贷款30年,差别到底有多大?曹德旺一句话点醒了很多人 前阵子,一个朋友把看了半年的房子终...
云英谷科技登陆港交所:AI终端... 5月27日,云英谷科技股份有限公司(股票简称:云英谷科技,股票代码:3310.HK)成功登陆港交所主...
京东集团与三一集团签订战略合作... 5月25日,京东集团与三一集团在北京签署战略合作协议。京东集团SEC副主席、京东集团CEO许冉与三一...
青岛的朋友看过来:黄金回收我跑... 前阵子想把家里一些旧金饰处理掉,在青岛问了几家回收黄金的地方。今天就跟大家随便聊聊我打听、上门、对比...
武汉有闲置贵重金属变现需求该怎... 不少有黄金回收需求的用户不知道该如何挑选合适的服务机构,其实只要从资质、专业度、服务能力、口碑几个维...
业绩再度下滑,石药集团一季度归... 图片来源:视觉中国 蓝鲸新闻5月27日讯(记者 屠俊)5月27日午间,石药集团(01093.HK)公...
蚂蚁CEO韩歆毅:在Agent... 【CNMO科技消息】近日,蚂蚁集团CEO韩歆毅在演讲中,系统分享了关于智能体经济和AI支付的底层思考...
Buff叠满!芯片,双重利好!... 芯片领域,传来两则大消息! 一是5月27日有媒体报道称,台积电3纳米制程下半年将涨价15%,明年或再...
“全球正面临第五次油价冲击” 日本央行行长植田和男27日在东京说,自上世纪70年代以来,全球多次经历能源价格急剧上涨,当前全球正面...
白酒股,直线拉升!600779... 【导读】白酒股终于涨了 中国基金报记者 泰勒 大家好,花有重开日,人无再少年。就在刚刚,低迷许久的“...
河北地区闲置名酒如何合规变现 闲置名酒处置的行业现状 近年来随着居民酒类收藏意识的逐步提升,不少家庭都存有不同品类的年份名酒,当...
重磅!长鑫科技科创板IPO获通... 5月27日消息,长鑫科技科创板IPO获上交所上市委会议通过。
东方基金开展“一司一省一高校”... 为深入贯彻落实新“国九条”以及《推动公募基金高质量发展行动方案》的核心要求,积极响应证监会对于金融机...
那句「都是卖猪食的」,为什么你... 你大概也笑了一下。 最近有句话在网上传疯了,说字节的副总裁回怼腾讯的“短视频像猪食”,撂了一句“都是...
2026 年小红书多账号管理工... 摘要 2026 年小红书矩阵运营成品牌获客主流,但账号风控严、消息分散、转化低效等痛点突出。本文基...
打着高知女性旗号割韭菜,“五个... 出品丨搜狐财经 作者丨柴鑫洋 编辑丨李文贤 你被“五个女博士”种草过吗? 打着高知女性旗号,却做着低...
A股董责险渗透率破32%,海南... 开栏语: 保险是经济的“减震器”,但保险条款复杂晦涩,犹如海下暗礁。 即日起,海财经·证券导报开设“...
奥尼电子:49万股限制性股票将... 5月27日,奥尼电子(301189)发布公告,2025年限制性股票激励计划第一个归属期归属结果已确定...