一、CSS文本样式[文本基础、文本样式、段落控制]

一、CSS文本样式[文本基础、文本样式、段落控制]
一、文本样式

 1.文本基础
- 字体设置：font-family:Cursive,Monospace;推荐草书(Cursive)和等宽字体(Monospace)；字体可设置多个，浏览器会根据用户是否用有进行取舍
- 字体粗细：font-weight: 700(400 对应 normal,700 对应 bold;范围100-900)
- 字体大小：font-size: 20px;
- 文字颜色：color:red;
- 文本行的高度：line-height: 20px;
- 倾斜风格：font-style: italic;(表示倾斜)
简写：font: bold italic 20px/1.5 'Courier New', Courier, monospace;(必要有font-family里的样式和font-size里的样式)

2.文本样式
- 文本线条(常用于隐藏a标签的下划线)：text-decoration: none;(line-through或underline)
- 文本阴影：text-shadow: rgba(13, 6, 89, 0.8) 3px 3px 5px;(参数顺序为：颜色，水平偏移(右为正)，垂直偏移(下为正)，模糊度)
- n行溢出处理：溢出后加省略号
```
    <style>
        .name{
            display: -webkit-box;
            width: 400px;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;// 这里表示一行
            word-wrap:break-word;// 纯数字换行但没有省略号
        }
    style>
head>
<body>
<div class="name">十大划时代的话hi和ii后代hi还是低还得hi hii好的hi哇hi hi是啊十大hi哎hi和打卡时间看到卡卡设计大咖数据库的就开始div> 
body>
```
3.段落控制
- 首行缩进：text-indent: 2em;
- 水平居中：text-align: center;//写在父元素，作用于子元素
  - 作用范围：行内元素，行内块元素(例如h1、图片、input等等)
  - 注意：相对于父元素水平居中（需要父元素有足够大小）
4.vertical-align

4.1 基础

基线设置（重点）：vertical-align:baseline;默认值 //（只能用在行内或者行内块元素；写在子元素中）
- middle：使得行内元素最上边与最小边距离middle线距离相等（如上图相对于X的布局）
- top：把元素的顶端与行中最高元素的顶端对齐（如上图相对于X的布局）
- bottom：使元素的底部与整行的底部对齐（如上图相对于X的布局）
4.2 注意

解释：同一行中，如果有高度大小不同的元素，其中高一点的元素如果设置vertical-align（除了baseline）会影响同一行的baseline，middle，top，bottom等等
- 大元素vertical-align:middle;
4.3 实例
- 使用场景：图片上下居中（设置上行高；然后设置自身为middle），需要对齐的文字也设置middle
```
		DOCTYPE html>
		<html lang="en">
		<head>
			<meta charset="UTF-8">
			<meta http-equiv="X-UA-Compatible" content="IE=edge">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Documenttitle>
			<style>
				div{
					display: inline-block;
					height: 600px;
					width: 1000px;
					background-color: red;
					line-height: 600px;
					text-align: center;
					
				}
				span{
					vertical-align: middle;
				}
				img{
					vertical-align: middle;
				}
			style>
		head>
		<body>
			<div>
				x
				<img src="1.png" alt="">
			div>
			<span>yspan>
		body>
		html>
```
- 使用场景：图片在div里面底部有空白（因为vertical-align默认值为baseline会有底线占用空白，改为其它就ok）
```
	DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Documenttitle>
		<style>
			div{
				display: inline-block;
				width: 1000px;
				background-color: red;
			}
			img{
				vertical-align: bottom;
			}
		style>
	head>
	<body>
		<div>
			x
			<img src="1.png" alt="">
			x
		div>
		y
	body>
	html>
```
相关阅读:
任意文件下载
 Linux下的系统编程——进程的执行与回收（八）
山西电力市场日前价格预测【2023-09-27】
云主机内网通信ping不通问题处理过程
 java基于微信小程序的社区心理健康咨询辅导服务系统 uniapp 小程序
 MATLAB算法实战应用案例精讲-【图像处理】SLAM技术详解
 【UEFI实战】BIOS中的openssl
Python Web3.0应用开发【2022】
play() failed because the user didn‘t interact with the document优化媒体不能自动播放
 equals和==
原文地址：https://blog.csdn.net/weixin_46765649/article/details/126880935

一、文本样式

1.文本基础

2.文本样式

3.段落控制

4.vertical-align

4.1 基础

4.2 注意

4.3 实例