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

相关内容

热门资讯

美联储哈玛克:目前银行体系看起... 美联储哈玛克:目前银行体系看起来相当健康。 来源:金融界AI电报
社区科普讲座开讲 教你如何科学... 社区科普讲座开讲教你如何科学应对阿尔兹海默病 近日,一场主题为“科学应对阿尔兹海默病”的社区科普讲座...
海报观察丨6000万消费券+发... 海报新闻记者 朱延鲁 报道 春节是万家团圆的美好时刻,也是烟火升腾的消费旺季。保障好老百姓的节日消费...
突然大爆发,这只ETF冲涨停 来源:ETF洞察 中国基金报记者 王思文 大家好,这里是ETF洞察。今天是2026年2月10日星期二...
和讯投顾王宇:还剩三天,题材能... 2月10日,和讯投顾王宇表示,当下市场题材分歧愈发明显,节前仅剩三个交易日,到底还能不能继续博弈?极...
美股三大指数集体高开 新闻荐读 美东时间周二,美股三大指数集体高开,截至北京时间23:00左右,道指涨逾360点,续创盘中...
华润置地,任命新的集团营销负责... 近日,市场消息,华润置地原杭州公司分管副总朱勇,被任命为集团运营管理部副总经理,分管整个开发销售型业...
原创 比... 当地时间2月9日,路透社的一则报道引发广泛关注:中国汽车制造商比亚迪已正式对美国政府提起诉讼,剑指美...
裕同科技拟4.49亿元收购华研... 苹果、泡泡玛特主要供应商裕同科技(002831)2月10日晚间公告,拟4.49亿元收购东莞市华研新材...
巨亏50亿!AI制药独角兽IP... 2月4日,AI+可编程药物公司Generate:Biomedicines向美国证券交易委员会(SEC...
多家知名品牌宣布:春节期间,涨... 过年脚步临近,春节假期是线上消费的高峰期,也是运力最为紧张的时期。顺丰、京东物流、圆通、申通、中通、...
担忧受AI冲击 美国微软公司股... (央视财经《天下财经》)据彭博社等媒体9日报道,当天,美国梅利乌斯研究公司将微软公司的股票评级从“买...
原创 2... 写在文章前的声明:在本文之前的说明:本文中所列的投资信息,只是一个对基金资产净值进行排行的客观描述,...
青藏高原发现天然氢:可以拉开能... 近日,中国科学家在青藏高原的岩石里,第一次实实在在地“看到”了天然氢气。 它不是通过计算或地表泄漏推...
上海小南国回应餐厅停止营运 北京商报讯(记者 郭缤璐)2月10日晚间,上海小南国控股有限公司发布公告,对于上海小南国品牌在上海经...
招金矿业致歉:向遇难者表示沉痛... 2月10日,招金矿业在港交所发布公告: 最近,招金矿业股份有限公司蚕庄金矿(“蚕庄金矿”)上庄矿段...
君乐宝上市布局细分赛道领跑增长... 2026年1月19日,中国领先的综合乳制品企业君乐宝乳业集团股份有限公司(简称“君乐宝”)正式向香港...
酒业渠道商再闯港股,名品世家董... 蓝鲸新闻2月10日讯(记者 朱欣悦)2月10日,港股GEM上市公司环球印馆控股有限公司(08448....
上市银行,迎密集调研! 2026年以来,上市银行迎来机构密集调研,其中沿海经济发达区域的中小银行是机构重点调研对象。 截至2...
豆包压哨参战,决战春节流量窗口... 本报(chinatimes.net.cn)记者卢晓 北京报道 春节AI红包大战继续升温。 2月10日...