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

相关内容

热门资讯

郭德纲演出遭举报,武汉文旅立案... “中国新闻社”微信公号综合 8月12日消息,2026年7月郭德纲在武汉演出中即兴改编红歌《弹起我心爱...
美国大规模关税退税落地 多家A... 2026年以来,美国史上最大规模关税退税工作持续推进,众多深耕海外市场的A股出口企业迎来业绩利好。 ...
海外算力股大涨!营收实现爆发式... 截至8月13日9时40分,算力租赁概念持续走强,创业板人工智能ETF(159279)上涨2.39%。...
啤酒香、海风味,金沙滩啤酒城打... 相约金沙滩,醉美西海岸。第36届青岛国际啤酒节西海岸会场精彩不断,杯沿漫出来的冰爽啤酒泡沫,裹着金沙...
8月13日基金午间复盘:科技医... 8月13日基金午间复盘:科技医药狂飙,超70只基金创历史新高,新发市场加速“抢筹” 各位基民朋友们,...
长周期重塑下白酒长周期重塑谁最... 当前白酒行业正处于深度调整阶段,市场逻辑已从过去的增量扩张转向存量竞争。在这一轮周期波动中,行业集中...
腾讯Q2:当AI投入开始改写利... 腾讯正在将增长重心转向AI,这一转向的代价首次在本季度财报中集中显现。 8月12日发布的2026年第...
等待期如何影响投保决策更关键? 在保险领域,等待期是一个极为重要的概念,它对投保决策有着关键影响。等待期,也被称为观察期或免责期,是...
恒生科技指数启动扩容,资金或将... 8月10日,恒生指数公司刊发长达14页的咨询文件,计划将恒生科技指数成分股由30只扩充至50只,并将...
IPO全周期舆情风险拆解:从辅... 导语:IPO舆情风险管理,是企业在辅导备案、招股书披露、法定静默期、路演定价、挂牌上市五个阶段,针对...
长期持有基金如何应对市场周期波... 投资基金是实现财富增值的常见方式,而长期持有基金过程中必然会面临市场周期波动的挑战。市场周期波动受多...
原创 深... 根据帮主郑重8月11日晚间直播整理: 很多人问:为什么昨天还涨得好好的资源、军工,今天说崩就崩?为什...
原创 中... 2026年8月7日,还以为印尼发生了政变,几千个人把一栋楼烧了。 这事发生在,中企被逼走后,印尼接手...
“两个经济”分歧 救市难望大招 (来源:信报手笔) 中国第二季GDP增长放缓至4.3%,不少人继续期盼“救市大招”。不过,正如新加坡...
格力营收连降两年,董明珠凭什么... 出品丨花朵财经观察(FF-Finance) 撰文丨华见 8月10日,珠海。格力电器2026届毕业生入...
“铁树开花”,300亿龙头涨停 今日午后,消费板块再度拉升,安记食品、好想你、粤海饲料涨停。此前一鸣食品、皇氏集团3连板,宁波中百、...
原创 月... 现在普通上班族到手月薪过万,日常花销处处受限,就连选购一款普通欧包都要反复权衡价格。街边一家又一家烘...
汽车的投资风口,已经换了吗? 小何是汽车圈的从业者,2020年在证券机构朋友的科普下,第一次买了汽车基金。她运气好,赶上了2021...
华人加密货币大亨巴拉圭全裸坠亡... 8月7日凌晨,华人加密货币投资人叶俊德(Harry Chun Tak Yeh)在巴拉圭首都亚松森的豪...
债券基金和股票基金的仓位策略有... 在基金投资领域,债券基金和股票基金是两种常见的基金类型,它们在仓位策略上存在显著差异。这些差异源于它...