文本的上、中、下划线
text-decoration:;
- underline: 下划线
- line-through:中划线
- overline:上划线
以下为代码示例:
<!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>
<link rel="stylesheet" href="./css/reset.css">
<style>
.baidu{
text-decoration: underline;
/* 添加 移动到元素上的小手 */
cursor: pointer;
}
.google{
text-decoration: line-through;
}
.bing{
text-decoration: overline;
}
</style>
</head>
<body>
<!-- a元素默认添加text-decoration -->
<a href="http://www.baidu.com">百度一下</a>
<!-- span元素也添加装饰线 -->
<span class="baidu">百度一下</span>
<!-- 装饰线其他的值 -->
<span class="google">Google一下</span>
<span class="bing">bing一下</span>
</body>
</html>
字母大写
text-transform: ;
- capitalize :首字母大写
- uppercase: 全部字母大写
<!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>
.info.c{
text-transform: capitalize; /*每个单词的首字母大写*/
}
.info.u{
text-transform: uppercase; /*每个单词的全部内容大写*/
}
</style>
</head>
<body>
<div class="info c">my name is ljw</div>
<div class="info u">my name is ljw</div>
</body>
</html>
文本首行缩进量
text-indent 属性能定义一个块元素首行文本内容之前的缩进量。
<!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>
p{
text-indent: 2em;
/* em:相对于字体的大小 */
}
</style>
</head>
<body>
<h1>标题</h1>
<p>1975年,李康宇出身在河北唐山市南部柳树圈镇的一个普通农村家里,他非常不幸,从小就得了风湿疾病,到7岁的时候就完全站不起来了,从此他开始了长达30多年的卧床生活。</p>
</body>
</html>
文本对齐
text-align CSS 属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。
- left : 行内内容向左侧边对齐。
- right : 行内内容向右侧边对齐。
- center : 行内内容居中。
- justify : 文字向两侧对齐,对最后一行无效。
- justify-all : 和 justify 一致,但是强制使最后一行两端对齐。
例:
<!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>
.box{
background-color: red;
color: aliceblue;
text-align: center;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>