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

相关内容

热门资讯

中概股集体高开,黄金白银大涨!... 3月10日晚间,中概股爆发,黄金白银大涨。美防长称美军将对伊朗发起“最高强度”打击,伊朗也实施了新一...
小池塘做大鱼,瓶子星球成就梅见... 低度化、微醺感、小场景,这些曾经被传统酒企忽视的关键词,如今已成为驱动酒行业增长的核心引擎。 在年初...
【锋行链盟】港交所买壳上市交易... 买壳上市(Reverse Takeover, RTO)是境内企业赴港上市的重要路径之一,指非上市公司...
重庆启动赏春消费季 激发春日消... 中新网重庆3月10日电 (记者 钟旖)2026“购在中国·爱尚重庆”赏春消费季暨“春趣巴南·挥拍嘉年...
算力链的利润逻辑,彻底变了 作者 | 远禾 数据支持 | 勾股大数据(www.gogudata.com) 最近几天,一场名为“养...
20天到非洲、15分钟“买全球... 海关总署今天发布外贸数据,今年前2个月,我国货物贸易进出口同比增长18.3%,外贸开局良好。外贸数据...
蔚来大涨10%,首次实现季度盈... 记者|杜波 编辑|陈柯名 杜恒峰校对|程鹏 美股三大指数开盘涨跌不一。纳指涨0.1%,道指跌0.05...
AI太烧钱,亚马逊大规模发债最... 亚马逊包裹 凤凰网科技讯 北京时间3月10日,据彭博社报道, 亚马逊公司已启动了一笔大型公司债券发行...
CPO算力彻底爆发!个股批量涨... 水岸 3月10日,市场指数强劲反弹,以CPO、PCB、光通信为首的算力主线重返大涨,CPO以超5%的...
卖电池净利润2亿 安孚科技独家... 图片来源:视觉中国 蓝鲸新闻3月10日讯(记者 徐晓春)3月9日晚,安孚科技(603031.SH)披...
从“风光弃电”到“氢能蓝海”:... 来源:中国经济网 今年政府工作报告明确提出,设立国家低碳转型基金,培育氢能、绿色燃料等新增长点。全国...
热门基金高溢价频现,管理人如何... 【大河财立方 记者 孙凯杰】遏制基金非理性溢价,正成为考验公募基金管理能力的新常态。 3月9日,亚太...
荣耀CEO李健:公司正评估在国... IT之家 3 月 10 日消息,据博主 @宁思潇潇 分享,荣耀 CEO 李健在发布会后接受媒体采访时...
市占率第一却遭暂缓!信胜科技超... 当印巴边境的炮火在2025年4月—5月间响起时,位于浙江诸暨的浙江信胜科技股份有限公司(下称“信胜科...
尚研科技由董事长卢高锋控股63... 瑞财经 吴文婷3月9日,尚研科技发布公告称,公司于2026年3月6日召开第二届董事会第二十次会议,审...
房价新高、供应见底:2026年... 在观察日本新房市场时,很多国内投资者习惯只看两个指标:价格涨没涨、卖得好不好。但如果只停留在同比涨跌...
多家中小银行调降长期限存款挂牌... 进入3月份,一批银行调降存款挂牌利率。据梳理,这一批银行主要为云南、山东、新疆等地的区域性中小银行。...
上交所新批三大ETF:万亿资金... 你手里的闲钱,是否还在银行账户里"躺平"?当银行存款利率持续走低,股市波动加剧,有没有一种既能分散风...
恒生医药ETF(159892)... 格隆汇3月10日|今日港股全线回暖,港股创新药再度领衔市场反弹,恒生医药ETF(159892)飙涨4...