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月15日,五大连池市市场监督管理局以“提升消费品质”为主题,...
美伊战火烧到股市?小摩:油价再... 财联社3月16日讯(编辑 黄君芝)摩根大通(JPMorgan Private Bank)私人银行最新...
原创 特... 2 月 20 日美国最高法院以 6:3 的投票结果,裁定特朗普依托《国际紧急经济权力法》加征的全球关...
10亿基金撬动千亿生态,武汉长... 图片为AI生成 近日,武汉长江新区未来产业引导基金合伙企业(有限合伙)正式成立,出资额10亿元,执行...
智慧医院汇报方案(125页PP... 今天分享的是:智慧医院汇报方案(125页PPT) 报告共计:125页 智慧医院建设:从“菜单式”堆砌...
实探吉盛伟邦广州番禺店:建材馆... 近日,“广州吉盛伟邦番禺店倒闭”的网传消息引发市民关注,南都记者实地核实确认,番禺吉盛伟邦仅建材馆因...
欣战江北交所IPO:超高净利率... 来源:估值之家 涤纶纤维作为世界产量最大、应用最广泛的合成纤维,具有模量高、强度高、弹性高、良好的保...
温氏:目前公司资金充裕、负债率... 3月6日,温氏股份在“新增长机遇,新资产叙事”闭门交流会上,详解了“再造一个新温氏”中长期战略,明确...
多只私募基金净值创新高 市场结构性行情演绎下,私募基金赚钱效应持续显现。私募排排网最新数据显示,今年2月,共计193位私募基...
中美第一大城市上海和纽约,两者... 说起上海和纽约这两座城市,总让人觉得它们是中美经济活力的代表,一个是东方明珠,一个是西方金融堡垒,可...
资源类板块持续升温 机构建议把... 来源:上海证券报 过去一周,A股市场整体呈现震荡整固格局,主要宽基指数表现分化。与此同时,中东地区地...
全球铝业大地震!世界最大单体铝... 财联社3月16日讯(编辑 潇湘)在中东持续燃烧的战火下,全球铝市场正在经历一场“大地震”…… 运营着...
千亿短剧市场的下半场:真人剧定... 出品 | 创业最前线 白华 2026年,短剧行业在跨越千亿大关的征途中,迎来一场史无前例的繁荣景象...
易方达财富全国首场投顾活动举办... 近日,易方达财富(买方投顾)投资交流会在上海圆满举办。本次活动作为其全国投顾系列线下活动的首场,汇聚...
原创 大... 最近马斯克又上热搜了,这次不是因为特斯拉,也不是因为SpaceX,而是他旗下的xAI公司,彻底乱套了...
假券商员工、假APP、假公章.... “对方发了工作证照片,还有公司LOGO的文件,说有内幕消息能赚30%,我怎么就信了呢?”北京的张先生...
排队14个小时的寿司郎,在31... “当一个头部品牌发生食品安全危机,往往暴露着的,是一整个供应链的雷点。” 文 / 巴九灵 时间进入...
伊朗:霍尔木兹海峡对所有人开放... 据新华社援引伊朗法尔斯通讯社15日报道,伊朗外交部长阿拉格齐表示,战争结束取决于两个条件,即确保战争...
海信,一切都离不开创新二字 不跟随,不内卷,冲出自己的通天大道。 文 | 华商韬略 陈斯文 “一切都离不开创新二字。” 3月12...
3·15晚会丨曝光“荐股分成”... 2026年伊始,“3·15”晚会收到不少消费者提供的线索:市场上一种名为“荐股做票,盈利五五分成”的...