行高(line height)
行高指的是文字占有的实际高度,可以通过line-height来设置行高
行高也可以直接指定一个大小(px em)
也可以直接为行高设置一个整数
如果是一个整数的话,行高将会是字体指定的倍数
行高还经常用来设置文字间的行间距
(行间距 = 行高 - 字体大小)
字体框:
字体框就是字体存在的格子,设置font-size实际上就是在设置字体框的高度
行高会在字体框的上下平均分配
可以将行高设置为和高度一样的值使得单行文字在一个元素中垂直居中
字体:
字体的简写属性
font可以设置字体相关的所有属性
语法:
font: 字体大小/行高 字体族
行高可以省略不写,相当于默认的值(不意味着不写),如果有在前面设置行高,默认值会把前面的行高覆盖
font-weight 自重 字体的加粗
可选值:
normal 默认值不加粗
bold 加粗
100-900 九个级别(没什么用)
font-style 字体的风格
normal正常
italic 斜体
注意:简写属性如果不写是默认使用默认值
p{
border: black solid 2px;
font: 20px;
font-family: Georgia, 'Times New Roman', Times, serif;
/* font: 20px Georgia, 'Times New Roman', Times, serif ; */
}
文本的样式
text-align 文本的水平对齐
可选值:
left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐
vertical-align 设置元素垂直对齐方式
可选值:
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
<style>
div{
display: block;
border: solid greenyellow 2px;
font: 20px;
width: 300px;
text-align: right;
/* text-justify: auto; */
/* vertical-align: baseline;
vertical-align: bottom; */
}
</style>
</head>
<body>
<div >
今天是周三 !!!cccccccccccccdddddddddddddjjjjjjjjjjjjec
</div>
图片的引入,其实也是类似于字体,沿着基线的,引入的图片也会有基线,想要去掉基线效果
可设置 vertical-align (baseline\top\bottom\middle 任选其一)
text-decoration 设置文本修饰
可选值:none 什么也没有
underline 下划线
line-through 删除线
overline 上划线
注意:text-decorationIE浏览器没有颜色和其他样式设置
white-space 设置网页如何处理空白
可选值:
normal 正常
nowrap 不换行
pre 保留空白
/
white-space :nowrap;
overflow: hidden;
text-overflow : elliipsis;
超出文本框省略号显示,这个三个缺一不可
缺一不可
缺一不可!!!
总体代码如下:
<style>
div{
display: block;
/* border: solid greenyellow 2px; */
font: 20px;
width: 300px;
text-align: right;
/* text-justify: auto; */
/* vertical-align: baseline;
vertical-align: bottom; */
}
.box1{
width: 200px;
font: 5px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: left;
text-decoration: underline;
/* 设置省略号 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div >
今天是周三 !!!cccccccccccccdddddddddddddjjjjjjjjjjjjec
</div>
<div class="box1">
从里约到东京,不管是过去4年还是5年,我的目标从来都没有改变:金牌。这是中国代表团、中国举重队对我们每一位参赛选手的期待,也是我们对自己的期待。
今天,我再次实现了自己的梦想。我为生在红旗下而自豪,为身为中国选手而骄傲!
</div>
</body>