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

相关内容

热门资讯

侃股:巴菲特超级收益率靠的是持... 巴菲特60年收益率超6万倍,靠的是持续不断的价值投资。实际上,投资者如果能够做到每年约20%的投资收...
尺素金声|分量重、成色足,上市... 惠民消费券、以旧换新补贴、有奖发票……今年春节,一系列民生红利增添过节底气,资本市场派发的“红包”也...
从股价大涨到实控人等三方被同时... 每经记者|蔡鼎 每经编辑|张益铭 2023年的A股市场,捷荣技术(SZ002855,股价16.40...
80后夫妻卖充电桩,要IPO了 星星充电品牌运营公司、来自江苏的万帮数字能源股份有限公司(简称“星星充电”)在港交所递交招股书,拟在...
刚刚开盘,直线大跳水!石油、黄... 这个周末,中东地区战火重燃,成为全球金融市场的“黑天鹅”事件,目前投资者正密切关注伊朗遭袭事件可能对...
原创 卡... 去年年底的卡塔尔世界杯成为了全球关注的焦点,而一张卡塔尔小王子的表情包更是迅速在网络上刷屏,这张看似...
周末黄金定价权转移:链上黄金成... 传统金融市场的交易时间限制,正让区块链黄金资产迎来关键定价窗口。前瑞信首席投资官、现流动性基础设施公...
老铺黄金2026年首次调价,整... 老铺黄金迎来今年首次调价。 2月28日,记者获悉,老铺黄金迎来年内第一次调价,此次调价幅度在20%至...
中东局势剧变!“赌”涨黄金潮起... 来源:滚动播报 (来源:北京商报) 这个周末,全球资本市场的神经骤然绷紧。 中东局势的突然升级如同一...
“沪七条”落地实施 上海外环外... 中新网上海3月1日电 (张践)近日,上海发布楼市新政“沪七条”,通过降低购房门槛、放宽购房套数限制、...
原创 中... 哎呀,特朗普这家伙又回来了,2025年1月20日他第二次宣誓就职总统,就跟第一次似的,马上就开始折腾...
湖南南新制药股份有限公司202... 本公司董事会及全体董事保证本公告内容不存在任何虚假记载、误导性陈述或者重大遗漏,并对其内容的真实性、...
原创 帮... 各位朋友晚上好,我是帮主郑重。就在过去48小时,一只足以搅动全球资本市场的超级黑天鹅,直接落地了!美...
这里,是大湾区算力的关键底牌 “韶关将举全市之力打造华南‘算力之城’”。 在今年2月24日广东省高质量发展大会上,韶关市委书记陈少...
外资机构,密切关注 【导读】外资机构密切关注全国两会 中国基金报记者 吴娟娟 第十四届全国人民代表大会第四次会议和政协第...
马年首周857家公司披露业绩快... 来源:滚动播报 马年首周,A股上市公司业绩迎来密集披露。据同花顺iFind统计,截至2月28日,马年...
白酒指数周跌1.58%,古井贡... 转自:每日经济新闻 白酒指数周跌1.58%,古井贡酒回调超6%,原因竟是它!丨酒市周报 2026-0...
海创药业股份有限公司2025年... 来源:上海证券报 证券代码:688302 证券简称:海创药业 公告编号:2026-003 海创药业...
概念180信任崩塌:明星背书失... 一款售价数千元的“抗衰神药”,原料成本不足50元;一场宣称“源自西班牙”的高端骗局,生产主体无资质、...
速食店做小红书,1个月狂揽50... 有没有速食店老板跟我吐槽过?守着实体店苦苦硬撑,每天客流量屈指可数,发小红书想引流,却要么笔记小眼睛...