css基础—字体那些事
2024-09-20 23:19:10
css基础—字体那些事
1. 首先讲字的大小样式等
- 字体大小 font-size: 40px;
- 文字字体 font-family: "宋体",Arial;
文字样式 font-style:normal;
-normal:正常字体
-italic,oblique:斜体- 字体加粗 font-weight: bold;
- 每行所占高度(行高) line-height: 50px;
疑问一: 文字字体怎么会同时写两个值?
解答:
是首选和备选的关系,不只可以写两个,还可以写多个。放在第一个位置的是首选,后面的是备选。因为网页中可能存在中英文,中英文的字体样式不同。
font-family:首选,备选1,备选2.....
注意:当网页上存在中文和英文的时候。要首先写英文字体,在写中文字体。因为中文字体库包含英文,英文字体库不包含中文。
疑问二:行高是什么?用来干什么的?
解答:转答案在这里,别人的博文和再看一篇会更懂,也是别人的博客
line-height用来控制文字垂直方向上的位置。
2. 字体相关属性
- 字体颜色 color:red;
- 首行缩进 text-indent: 2em;或者 text-indent: 32px;
文本水平方向对齐 text-align:文本对齐
- 属性值有3个:left,center,right。
- 只能靠左,居中,靠右。
- 上下移动目前可以使用line-height.text-decoration:文本修饰
- underline 下划线
- line-through 删除线
- overline 上划线
- none 无
- 字间距:letter-spacing:10px;
- 词间距:word-spacing:10px;
- 字间距+词间距:
letter-spacing:10px;和word-spacing:10px;共同使用 强制换行:word-break:break-all;
由于中文会强制换行,但是因为英文和数字不会强制换行。<!--强制换行-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
border: 1px solid red;
}
#box1{
width: 300px;
height: 300px;
border: 1px solid red;
word-break:break-all;
}
</style>
</head>
<body>
<div id="box">
dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111
</div>
<div id="box1">
dhfudhfuhuhjfuihbhbjfhvjfhjgjhjrhufwefeejdsdkj11111
</div>
</body>
<!--
英文和数字不能强制换行
强制换行
word-break:break-all; -->
</html>
- 强制不换行:white-space:nowrap;
点击查看强制不换行
注意:词间距的使用
eg:
1.我爱学习
2.我 爱 学习
对这两个写样式词间距的样式。只有2起作用。因为浏览器无法自动识别那些是词,给了空格才知道。
<!--词间距-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1, #box{
width:800px;
height:50px;
border: 1px solid pink;
color:red;
font: 16px "宋体";
word-spacing: 10px;
}
</style>
</head>
<body>
<div id="box">我 爱 学习</div>
<div id="box1">我 爱 学习</div>
</body>
<!--
word-spacing: 表示词间距;
使用词间距前:我空格-爱空格-学习
使用词间距后:我空格-10px-爱空格-10px-学习
-->
</html>
词间距和字间距同时使用时,注意实际效果:
eg:我 爱 学 习。设置字间距为20px,词间距为50px。
实际效果为:
我-20px-空格-20px-50px-爱
<!--字+词间距-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width:800px;
height:50px;
border: 1px solid pink;
color:red;
font: 16px "宋体";
letter-spacing: 50px;
}
#box1{
width:800px;
height:50px;
border: 1px solid pink;
color:red;
font: 16px "宋体";
word-spacing: 50px;
}
#box2{
width:800px;
height:50px;
border: 1px solid pink;
color:red;
font: 16px "宋体";
word-spacing: 50px;
letter-spacing: 20px;
}
</style>
</head>
<body>
<!--只使用字间距-->
<div id="box">我爱学习</div>
<!--只使用词间距-->
<div id="box1">我 爱 学 习</div>
<!--同时使用字间距和词间距-->
<div id="box2">我 爱 学 习</div>
<!--
box2:字+词间距
我-20px-空格-20px-50px-爱
-->
</body>
</html>
最新文章
- Android中使用AlarmManager进程被删除的解决办法
- Visual Studio快捷键设置
- Java Cardioid 心脏形曲线 (整理)
- ASP.NET 获取IP信息等探针
- javascript string对象的属性与方法
- 转: bower 客户端库管理工具
- Android + Eclipse + PhoneGap 环境配置
- pig脚本的参数传入,多个参数传入
- 快速使用CSS Grid布局,实现响应式设计
- cf954H
- weblogic清除缓存
- [No0000113]Keyboard shortcuts for Windows Visual Studio Code
- (转)win7批量创建用户
- Spring的注解@Qualifier(二十五)
- 零基础学python习题 - 进入python的世界
- NetScaler VLAN’s Demystified
- 【DFS】Paintball(6-22)
- Objective-C:KVC机制
- python3.x 函数的参数
- hadoop入门博客链接