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月28日调价,涨幅20%-30%。结果呢?调价前天猫大...
阳光人寿泉州中支走进泉州科技中... 时值“3·15国际消费者权益日”,为进一步提升青少年金融素养,增强在校学生的风险防范意识与自我保护能...
京东外卖宝藏小馆订单涨10倍,... 京东外卖周年庆期间,主打“本地特色、时令尝鲜、现炒锅气”的宝藏小馆迎来集体爆发,订单量环比增长超10...
美亚科技撤回上市申请,42岁董... 瑞财经 吴文婷近日,美亚科技发布公告称,鉴于宏观经济环境及资本市场态势的变化,并结合公司未来战略发展...
揭秘境外拟上市公司股权激励推行... 在当今竞争激烈的全球资本市场,境外上市成为众多企业追求的目标。而股权激励作为一种有效的激励机制,对于...
卖房收入暴涨至204亿港元,长... 卖房收入大涨,长实集团(01113.HK)交出一份继续增长的成绩单。 3月19日,长江实业集团有限...
扩大绿电应用推动绿色转型 近年来,我国绿电实现跃升发展,水电、风电、太阳能发电、生物质发电装机均居世界第一。截至2025年12...
用伊朗石油给油市“降温”?美财... 财联社3月20日讯(编辑 黄君芝)据央视新闻报道,当地时间3月19日,美国财政部长贝森特表示,美国并...
中东乱局未推动金价显著突破 黄... 点赞 收藏 分享 用手机看 中东乱局未推动金价显著突破 黄金避险功能失效? 2026-03-20 ...
马斯克发力太阳能发电,消息称特... IT之家 3 月 20 日消息,据路透社今日报道,两位消息人士透露,特斯拉正与中国供应商(包括苏州迈...
黄金连续多日大跌,有金店一天狂... 近日,受多重因素影响,国际黄金价格已连续超过一周不断刷新低点。 3月18日,现货黄金更是突然直线跳水...
提前上市!新一代小米SU7官宣... 每经记者|李星 每经编辑|裴健如 随着新一代小米SU7进入上市倒计时,小米集团创始人、董事长兼CE...
高盛拉响警报!美股或迎猛烈回调... 随着美股“跌跌不休”,高盛发出严厉警告:投资者必须为潜在的大幅回调做好准备,而且这一次,连一向稳妥的...
你的油箱替中东战火买单:国内油... 美伊冲突进入第20天,霍尔木兹海峡油轮通行受阻,波斯湾能源设施接连遇袭——中东局势的蝴蝶效应正从战场...
原创 马... 近日,阿里正式成立新部门震撼整个行业。 3月16日阿里正式成立Alibaba Token Hub(A...
当蚂蚁集团“史诗级”收购遇到港... 近日,耀才证券金融(01428.HK)发布一则关于蚂蚁集团要约收购已通过有关部门审批的公告,这起28...
全新淘金APP交易软件贵金属投...   【深度曝光】全新淘金APP:披着“低门槛”外衣的期货陷阱,谁在纵容虚假宣传?  近日,一款名为“...
銀宝街app诱导投资的风险:资...   “銀宝街”APP虽背靠上海華通.白銀公司看似正规,实则通过引导资金转入无关商贸公司规避第三方监管...
“天天白銀”改名“天天铂銀”继...   【风险警示】关于“天天铂銀”(原天天白銀)平台涉嫌违规交易的深度揭露  一、平台更名与资质真相 ...