当前位置：首页 > news >正文

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

news 来源：原创 2024/5/4 12:48:27

一、文本样式

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等等)
- 注意：相对于父元素水平居中（需要父元素有足够大小）

基线设置：vertical-align:middle; //（只能用在行内或者行内块元素；写在子元素中）基线在中部可设置middle | baseline | sub | super

使用场景：文字在图片右侧居中（原理图片设置基线在中间，其兄弟元素会按照其基线位置写上内容（自己本身也会受到影响））

<!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>Document</title>
	<style>
		img{
			display: inline-block;
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div>
		<img src="1.png" alt="">
		<span>1234</span>
	</div>
</body>
</html>

使用场景：图片上下居中（设置上行高；然后设置自身基线为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>Document</title>
	<style>
		div{
			display: inline-block;
			height: 600px;
			width: 1000px;
			background-color: red;
			line-height: 600px;
			text-align: center;
			
		}
		img{
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div>
		x
		<img src="1.png" alt="">
	</div>
	y
</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>Document</title>
	<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>