文字样式写法-CSDN博客

本文链接：https://blog.csdn.net/Yt0601/article/details/131762809

<head>

<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;

-->

<a href="#">Lorem ipsum dolor sit amet.</a>

<div>死欲下笔兮重学烦，定欲宋全畴。</div>

<p class="text">我妄不珍，人骂智完身我仍见评也车向盲考。</p>

<p class="text1">我妄不珍，人骂智完身我仍见评也车向盲考。连人死将让必斯，己。</p>