css文本行高是哪个属性_CSS常用样式-字体、文本

好好学习，天天向上

本章主要内容为 字体属性、文本属性

一、字体属性

Ⅰ、粗细 font-weight

• 作用：设置文字是否进行加粗显示
• 属性名：font-weight, 属于 font 属性的一个单一属性
• 属性值有两种方式： 单词类型、数字类型

属性值	说明
normal	默认值，定义标准的字体
bold	定义粗体字体，b、strong标签的默认值
bolder	定义更粗的字体
light	定义更细的字体

css

 .p1 {
     font-weight: normal; 
}
.p2 {
    font-weight: bold;
}
.p3 {
    font-weight: bolder;
}
.p4 {
    font-weight: lighter;  
}

html

<p class="p1"> 标准的字体，默认的字体 </p>
<p class="p2"> 粗体 </p>
<p class="p3"> 更粗的文字 </p>
<p class="p4"> 细体 </p>

<b> 这是 b 标签的默认文字 </b>
<br>
<strong> 这是 strong 标签的默认文字 </strong>

示例图：

数字类型

• 100-900 之间的整百数字
• 数字越大，文字显示越粗
• 其中 400 等价于 normal，700 等价于 bold

.p1 {
	font-weight: 400; 
}
.p2 {
	font-weight: 700;
}

最常用的是 normal、bold 两个字体

Ⅱ、字体风格 font-style

• 作用：设置文字是否斜体显示
• 属性名：font-style，属于 font 属性的一个单一属性
• 属性值：单词

属性值

属性值	说明
normal	设置正规的字体，大多数标签的默认值
italic	设置斜体的文字，主要针对为英文、要求英文以字体中的斜体样式显示
oblique	设置倾斜的文字，知识将文字倾斜显示，与字体无关

.p1 {
 	font-style: normal;
}
.p2 {
	font-style: italic;
}
.p3 {
	font-style: oblique;     
}

示例图：

实际应用中，更多的斜体效果习惯使用 italic 属性值

Ⅲ、行高 line-height

• 作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的
• 属性名：line-height，属于 font 属性的一个单一属性

属性值属性值

属性值	说明
px 的像素	设置的行高的具体像素值
百分比值	设置的本身字号像素值的百分比

div{
    font-size: 14px;
    /* 设置文字的行高 */
    /* line-height: 26px;
    line-height: 200%; */
}

Ⅳ、字体综合 font

• 字体、字号、行高、加粗、斜体都是 font 综合属性的单一属性
• font 属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔

写法1

• font 进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序

p {
 	font: 16px "楷体";
}  

写法2

• font 属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用 / 进行分隔

 p {
 	font: 16px / 32px "楷体";
 }  

写法三

• 如果 font 属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互换位置。后面的字号、行高、字体不能更改位置

  p {
 	 font: italic bold 16px / 32px "楷体";
  }

---

二、文本属性

Ⅰ、水平对齐 text-align

• 作用：设置文本水平方向的对齐
• 在盒子中，不论文本是单行还是多行，都会对应方向对齐
• 属性值：三个方向的单词

属性值

属性值	说明
left	居左对齐，大部分标签的默认值
center	居中对齐
right	居右对齐

p {
    width: 300px;
    height: 100px;
    background-color: aqua;
}
.p1 {
	text-align: left; 	
}
.p2 {
	text-align: center;
}
.p3 {
	text-align: right;
}

Ⅱ、文本修饰 text-decoration

• 作用：设置文本整体是否有线条的修饰效果

属性值

属性值	说明
none	没有修饰，大部分标签的默认值
overline	上划线
line-through	中划线、删除线，标签的默认值
underline	下划线， 标签的默认值

.none {
    text-decoration: none;
}

.overline {
    text-decoration: overline;
}

.through {
    text-decoration: line-through;
}

.underline {
    text-decoration: underline;
}

<p class="none"> 没有修饰 </p>
<p class="overline"> 上划线 </p>
<p class="through"> 删除线 </p>
<p class="underline"> 下划线 </p>
<del> del 标签 </del>
<br>
<a href=""> a 标签 </a>
<br>
<a href="" style="text-decoration: none;"> 去掉 a 标签的下划线 </a>

示例图：

Ⅲ、缩进 text-indent

• 作用：设置段落首行是否进行缩进

属性值

属性值	说明
auto	默认值，浏览器可计算出实际的高度
px	像素定义的高度
百分比(%)	定义参考父级元素宽度 height 的百分比高度

实际工作中，最长使用 em 为单位的属性值。 属性值区分正负，正数表示向右缩进，负数表示向左缩进

div {
    width: 300px;
    height: 200px;
    background-color: aqua;
}
.p1 {
	text-indent: 30px;
}
.p2 {
	text-indent: 2em;
}
.p3 {
	text-indent: 20%;
}
.p4 {
	text-indent: -30px;
}

示例图：