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虚假期货交易欺骗...   大浪淘金APP在抖音、快手、今日头条等平台,精心设计的投资广告铺天盖地。这些广告主打三大诱惑:“...
二十年后,窗台上的仙人掌还记得... 你有没有过这样的瞬间——翻看旧照片时,突然被某组对比画面击中,心头一颤,半晌说不出话来?那种感觉就像...
AI应用端重估,海内外资金涌入... 数据显示,7月南向资金累计净流入约629亿港元,环比增长约132%,其中资讯科技业净流入408亿港元...
魅族追梦人打造“追求源于热爱”... IT之家 8 月 5 日消息,在今晚的“追求源于热爱”团队创业发布会上,前星纪魅族中国区 CMO 万...
2026哈尔滨抖音观察:从流量... 哈尔滨的短视频生态正在经历一轮由技术驱动的深层调整。随着本地生活服务与内容电商的融合加速,抖音平台上...
Coldcard硬件钱包密钥生... 观点网讯:8月3日,加拿大公司Coinkite Inc.上周末通知Coldcard硬件钱包用户,保护...
韩国央行13年来首次恢复购金,... 韩国央行恢复购金,只是全球央行持续增持黄金的最新案例。有数据显示,45%的央行计划未来一年继续增加黄...
金价,突然大涨!突破4200美... 8月5日,国际金价突然大涨,截至发稿,现货黄金涨超3%,突破4200美元。 截至8月5日收盘,国内...
沙特阿美CEO:全球市场已损失... 据央视财经,美国方面表示,与伊朗即将就霍尔木兹海峡通行状况达成协议。受此消息影响,8月4日,国际油价...
刚刚,哈萨比斯卸任谷歌 Dee... 作者|冬梅 谷歌正在对其 AI 权力中心进行一次罕见的系统性重排。 当地时间 8 月 5 日,谷歌及...
产业焦点 | 美国光模块禁令传... 导语 光模块厂商仍在评估事件影响。 一则关于美国起草禁令,拟禁止光模块进口的消息,引起了A股光模块概...
一品好购APP宣传高收益诱导投...   普通投资者被广告宣传给诱导,注册就送什么现金,然后充值返现金卷等等这些宣传方式,都是在引流到平台...
EoE治疗新现实:周/双周诱导... 在一个阳光柔和的午后,李女士走进诊室,手握就诊记录,心中却充满疑问。她被诊断为嗜酸性食管炎,最关心的...
原创 大... 放量反攻了,今天成交近3万亿,主要是外围太热了,这都创下历史新高,想要不涨都难。 尤其是外围的高科技...
原创 市... 与光模块相关的热门赛道行业,却遇到了突发利空消息。这一则利空消息,来自一则市场传闻。从市场传闻显示,...
大厂的活水制度,正在变成普通人... 每年进入5月下旬,各大互联网大厂内部的氛围就悄悄变了。 茶水间聊天音量变小,同事之间互相试探风声,内...
艾斯迪:客户高度集中,资金紧张... 8月6日,艾斯迪工业技术股份有限公司(下称“艾斯迪”)将北交所IPO上会,公开发行不超过1700万股...
风格切换为何影响运作机制更合理... 在基金投资领域,风格切换是一种常见且关键的现象,其对基金运作机制合理性的影响值得深入探讨。风格切换主...
段永平回应“减持泡泡玛特” 央广网北京8月5日消息(记者 宓迪)8月5日,记者关注到,知名投资人段永平在雪球平台上回应其“减持泡...
兰蔻在华首家旗舰店撤店,从开业... 消费日报-今朝新闻讯 8月4日,据《中国商报》报道,位于北京王府井apm商场的兰蔻全球旗舰店大门紧闭...