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

相关内容

热门资讯

每日收评创业板指大涨2.52%... 财联社6月22日讯,市场震荡反弹,黄白线分化明显,权重股走势较强。沪深两市成交额3.74万亿,创历史...
不靠贷款了,银行决定换个「活法... 不靠贷款活,渐成趋势。 杭州银行董事长宋剑斌在2026年一季度业绩会上称,“未来银行的增长点不在信贷...
1万/m² 起拍!一线临江!禅... 端午前夕,禅城又挂地了! 6月18日,石湾挂牌了南海大道东侧、东平路北侧一宗占地超1.9万m²的商住...
机构看好红利防御资产配置价值,... 6月22日,红利+”系列指数集体收红,截至收盘,国证价值100指数上涨1.5%,中证红利指数上涨1....
雷军:AI虽聪明但都是模仿和重... 6月22日消息,近日小米集团创始人、董事长兼CEO雷军现身北京国际图书博览会现场,和著名作家刘震云围...
*ST西发:实际控制人、董事长... *ST西发公告,2026年6月22日,公司收到西藏自治区监察委员会出具的《解除留置通知书》,西藏自治...
阳光农业相互险双鸭山中支饶河保... 蓝鲸新闻6月22日讯,近日,双鸭山金融监管分局发布行政处罚决定书,剑指阳光农业相互保险公司双鸭山中心...
向全球展示“海南制造”硬核实力 华研胶原产品展示。海南日报全媒体记者 王赫 摄 ■ 海南日报全媒体记者 王赫 第四届中国国际供应链促...
茅台开巴士,汾酒卖拿铁:巨头扎... 夏日傍晚,北京长安街,一辆复古铛铛车缓缓穿行。车窗外是璀璨灯火,车厢内却是心形灯环、告白花束与阵阵酒...
近80只公募基金上半年收益翻倍... 来源:市场资讯 来源:金融投资报 A股市场上半年行情已逐步进入尾声,公募基金也即将交出上半年投资答卷...
贷得便宜 算得明白—— 一张“... 新华社北京6月22日电 《中国证券报》22日刊发文章《贷得便宜 算得明白——一张“贷款明白纸”折射融...
收评:4110-4095已不容... 前一交易日收评:节后首日已基本上是只许涨不许跌了,4085-4075已不容再失。午评:整体表现只能说...
河南光通信“小巨人”申报A股上... 【大河财立方消息】6月22日,河南鑫宇光科技股份有限公司(以下简称鑫宇科技)北交所IPO申请获受理。...
年化仅1.55%照样抢空!大额... “3句话财道”刷银行APP最近发现一件特别离谱的事:国有大行大额存单彻底“一卷难求”。 最新消息显示...
事关外商投资,三部门发布15条... 22日,商务部、国家发展改革委、财政部等三部门发布利用外资固稳促优行动方案,围绕扩大市场准入、提升外...
大亚圣象家居股份有限公司 关于... 证券代码:000910 证券简称:大亚圣象 公告编号:2026一027 大亚圣象家居股份有限公司 关...
这届618,拼多多提醒商家,让... 来源:滚动播报 (来源:财闻) 拼多多常态化生态治理见实效:半年出台70余项举措 图书治理关店400...
金饰克价一夜跌超40元,“老铺... 蓝鲸新闻6月19日讯(记者 汤诗韵)黄金市场正处在震荡之中。6月中旬,伦敦现货黄金价格最低下探至40...