web前段

本文介绍了CSS中关于字体设置的技巧,包括字体族的回退策略、字体大小的常用单位以及行高的计算方法。此外,还详细讲解了文本的水平居中方式、文本装饰线的使用以及首行缩进的正负值应用。同时,涵盖了溢出处理的几种模式,如visible、hidden、auto和scroll,以及如何实现单行文本溢出显示省略号的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、字体 
浏览器从第一个字体开始识别,如果第一个字体可以使用就使用第一个字体,否则往后看
多个字体直接用逗号隔开
用多个字体形成回退系统,就是备胎
一般建议字体用引号包着

font-family: '黑体', '宋体';


2、字体大小 
一般浏览器字体大小为16px
浏览器能识别最小字体12px
单位:px

font-size: 16px;

3、行高 
测量方法1:测量从一行文字的顶端到下一行文字的顶端 的距离
测量方法2:测量行与行之间的间距(50px),然后除以2(25px),在文字下面(25px处)拉根参考线,在文字的上端(25px处)拉根参考线,测量两根参考线之间的距离
每行文字的高度110px,行高值越大,这个文本就越稀疏 
line-height: 110px;

4、文字水平居中

1.水平居左 text-align: left;
2.水平居中 text-align: center;
3.水平居右 text-align: right;
4.文本两端对齐 text-align: justify ;

5、文本装饰线 
没有任何文本装饰线,一般用于去掉a标签自带的下划线 
text-decoration: none;
下划线 
text-decoration: underline;
上划线  不怎么使用
text-decoration: overline;
中划线 删除线  through穿过   line 线 
text-decoration: line-through;


6、首行缩进 
可以为负值

正值:向里缩进
负值:向外缩进
px


text-indent: 20px;
text-indent: -20px;

/* 溢出显示  默认值 */
overflow: visible;

/* 溢出隐藏 */
overflow: hidden;

/* 溢出自动  当内容多出的时候会出现滚动条,没有溢出的时候没有滚动条*/
overflow: auto; 

/* 溢出有滚动条  不管内容有没有溢出,都有滚动条*/
overflow: scroll;


word-wrap: break-word; 单词,数字强制换行
white-space: nowrap;  文字强制不换行 


单行文本溢出显示省略号

/* 1. 一定要设置宽度 */
width: 160px;
background-color: aquamarine;

/* 2. 设置文字不换行*/
white-space: nowrap;

/* 3.设置溢出隐藏 */
overflow: hidden;

/* 4.设置显示省略号 */
text-overflow: ellipsis;

注意:这四个条件缺一不可

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值