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

相关内容

热门资讯

白银价格长期趋势分析报告:黄金... 来源:市场资讯 (来源:吴说) 作者:Agarwood Capital 链接:https://mp....
资金节前避险?这类ETF规模年... 来源:每日经济新闻 A股蛇年行情本周收官,主要股指震荡反弹,沪深300指数涨0.36%,中证A500...
原创 今... 春节将至,无论是想添置金饰、出手旧金,还是投资金条,了解金价走势至关重要。让我们拨开迷雾,深入剖析2...
原创 俄... 近日,一则来自克里姆林宫内部文件的重磅消息,引发全球金融市场的剧烈震荡。据彭博社2月12日披露,俄罗...
比特币直线跳水,加密货币超8万... 每经编辑|陈柯名 向江林 2月15日,比特币价格继续剧烈波动,今日一度触及71000美元/枚的比特...
国家金融监管总局:同意筹建甘肃... 国家金融监督管理总局网站2月13日消息,国家金融监督管理总局9日发布关于筹建甘肃农村商业银行股份有限...
重庆春节部分房企售楼部“不打烊... 为满足返乡游子置业需求,助力团圆安家,2月16日,重庆春节部分房企售房部“不打烊”专项活动将在渝房通...
【募投】电路板上市企业4.69... 2月10日,深交所上市委举行2026年第7次审议会议,本川智能公开发行可转债申请顺利通过。 据本川智...
原创 关... 贸易摩擦兴起缘由 中美贸易争端得从2018年特朗普第一次当总统说起。那时候美国觉得贸易逆差太大,就...
智谱冲刺科创板IPO,港股市值... 近日,中国证监会官网更新了智谱公司的IPO辅导进展信息,智谱撤回了其于2025年4月提交的辅导备案,...
原创 2... 2月11日,美国众议院以219票对211票的微弱优势,通过了一项由民主党提出的决议,旨在推翻特朗普总...
国投白银LOF估值调整后补偿方... 2月15日,国投瑞银基金管理有限公司公告,受近期白银市场价格出现历史性极端行情影响,为公平对待所有投...
硬盘还得涨!西数CEO:202... 继希捷之后,西部数据今年的HDD(机械硬盘)产能也售罄了,这是他们的CEO说的。在当前这个内存与存储...
SIRODHARA滴油按摩入门... 行业痛点分析 当前,阿育吠陀疗法在全球健康产业中加速渗透,但SIRODHARA(头部滴油按摩)等核心...
联合利华股价创新高,四季度业绩... 来源:经济观察网 经济观察网 根据最新财报数据和市场表现,联合利华(UL.N)股价在2026年2月1...
白银基金出台补偿方案!2月26... 财联社2月15日讯(记者 闫军)仅隔12天,国投白银LOF赔偿方案春节前落地。 国投瑞银基金今日公...
“云”织乡韵调研团 赴长阳星途... 为深入了解县域农副产品品牌化与电商发展现状,助力乡村产业振兴,山东大学(威海)“云”织乡韵调研团成员...
全线反弹!加密货币大涨,超9万... 加密货币全线反弹。 比特币价格一度站上70000美元,截至发稿涨幅收窄报69977美元/枚;以太坊涨...
002969突发!深交所暂停部... 来源:证券时报综合自深交所、公司公告等 嘉美包装(002969)部分投资者被暂停交易。 据深交所消息...
恒丰银行为新春“肉篮子”添“金... 一碗重庆?“刨猪汤”的爆火?,不只是人们追寻一口地道的年味,更是岁末年关最滚烫的仪式感。这背后,早已...