<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本样式</title>
<style>
.first:hover {
/* color: red; */
color: rgb(255, 255, 255);
color: rgba(0, 0, 255, 0);
color: #00f;
}
.first {
width: 100px;
background-color: aquamarine;
text-align: justify;
}
a {
text-decoration: none;
letter-spacing: 3px;
word-spacing: 20px;
}
a:hover {
text-decoration: overline;
background-color: pink;
}
div:not([class]) {
width: 140px;
background-color: pink;
/* text-indent: 20px; */
text-indent: 2em;
letter-spacing: 4px;
}
div[class] {
width: 200px;
background-color: yellowgreen;
/* line-height: 3; */
font: 16px/2 serif;
}
/* 单行文本省略 */
.text {
width: 180px;
background-color: yellow;
/* 设置一行显示 */
white-space: nowrap;
/* 设置溢出内容隐藏 */
overflow: hidden;
/* 设置溢出文本内容显示样式 */
text-overflow: ellipsis;
}
.text1 {
width: 180px;
background-color: aqua;
/* 设置省略号在第几行*/
-webkit-line-clamp: 2;
/* 设置弹性盒子 */
display: -webkit-box;
/* 设置内容垂直排列 */
-webkit-box-orient: vertical;
/* 设置溢出内容隐藏 */
overflow: hidden;
}
.text::first-letter {
/* 设置文本阴影: x y 模糊程度 color */
text-shadow: 2px 2px 3px red;
font-size: 30px;
}
</style>
<body>
<!--
1.设置文本颜色 color
取值:英文单词
rgb(red,green,blue) 取值范围[0,255]
rgba(red,green,blue,alpha) alpha [0,1]设置不透明度 0 完全透明 1完全不透明
HSL(A)
#000000 十六进制
2.设置文本对齐方式 text-align
取值:
center 水平居中
left 左对齐(默认)
right 右对齐
justify 二端对齐
3.设置文本样式 text-decoration
取值:
underline 下划线
line-throung 删除线
none 取消
overline 上划线
4.设置首行缩进 text-indent
注:单位常用em em 是当前元素的字体大小
5.设置行高 line-height
行高=字体大小+上间距+下间距 上间距=下间距
单行文本垂直居中:height=line-height
取值:
数值===》代表当前文字大小的几倍
font:文字大小/行高 文字字体
6.设置文字之间的间距 letter-spacing
7.设置单词之间的间距 word-spacing
8.设置文字阴影 text-shadow
取值:text-shadow:x y blur color
x:水平方向的偏移量
y:垂直方向的偏移量
blur:设置阴影模糊范围
color:颜色
9. vertical-align:设置行内、行内块元素垂直对齐方式
可选值:
baseline:默认值,基线对齐
top:顶部对齐
middle:居中对齐
bottom:底部对齐
-->
<!--
单行文本省略:
1.设置元素宽度
2.设置元素文本内容一行显示 white-space: nowrap;
3.设置元素溢出隐藏 overflow: hidden;
4.设置溢出文本显示 text-overflow: ellipsis;
多行文本省略
1.设置宽度
2.设置几行省略 -webkit-line-clamp
3.display: -webkit-box; -webkit-box-orient: vertical;与-webkit-line-clamp一起连用
4.overflow: hidden;
-->
<p class="first">生承嗣,壬 月判能,未。</p>
<a href="#">Lorem ipsum dolor sit amet.</a>
<del>揽韩者。</del>
<div>死欲下笔兮 重学烦,定欲宋全畴。</div>
<div class="">谢案我,和。</div>
<p class="text">我妄不珍,人骂智完身我仍见评也车向盲考。</p>
<p class="text1">我妄不珍,人骂智完身我仍见评也车向盲考。 连人死将让必斯,己。</p>