目录
一、CSS属性 – text-decoration(常用)
五、letter-spacing、 word-spacing(一般)
一、CSS属性 – text-decoration(常用)
<!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;
/* 设置文本的颜色(前景色) */
color: red;
}
.bing {
text-decoration: overline;
}
a {
text-decoration: none;
}
</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">必应一下</span>
<a href="http://www.taobao.com">淘宝一下</a>
</body>
</html> 
二、text-transform(一般)
<!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 {
/* text-transform: capitalize; */
/* text-transform: uppercase; */
text-transform: lowercase;
}
</style>
</head>
<body>
<div class="info">my name is why, AGE IS 18</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 {
font-size: 40px;
/* em: 相对于字体的大小 */
text-indent: 2em;
}
</style>
</head>
<body>
<h2>标题</h2>
<p>
如果说1号公路环岛之旅是行走冰岛的经典路线，与动物为伴的生态游则是深入了解冰岛的“最佳打卡方式”。在人类踏足冰岛前，这片火山地区几乎没有陆地动物存在，唯一的例外就是北极狐。这种小型哺乳动物周身包裹着厚厚的皮毛，可以在最后一个冰河时期结束前穿越冰封的海洋，抵达冰岛安家，成为这里唯一的原生陆地哺乳动物。直到后来有人类踏上冰岛，兔子、羊、马、鹿等哺乳动物才走进了冰岛的生态系统。比如冰岛马，它们在1000多年前从挪威跟随冰岛第一批定居者来到冰岛并繁衍生存下来。成年冰岛马体型矮小，会被人误会为小马驹，但实际上冰岛马步伐稳健，善于行走在崎岖地带，哪怕是初学者也可驾驭，骑着冰岛马旅游已成为当地颇受欢迎的旅游项目。
</p>
</body>
</html>
四、text-align(重要)
<!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: #f00; /* #FF0000 => rgb(255, 0, 0) */
color: white;
/* text-align */
text-align: center;
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
<!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: #f00;
height: 300px;
/* 让图片居中显示 */
text-align: center;
}
img {
width: 200px;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/gouwujie01.jpg" alt="">
</div>
</body>
</html>
<!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: #f00;
height: 300px;
text-align: center;
}
.content {
background-color: #0f0;
height: 200px;
width: 200px;
/* display: inline-block; */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
<!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 {
width: 200px;
background-color: #f00;
color: white;
text-align: justify;
text-align-last: justify;
}
</style>
</head>
<body>
<div class="box">
This CSS module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation. why
</div>
</body>
</html>
五、letter-spacing、 word-spacing(一般)
<!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 {
/* letter-spacing: 10px; */
word-spacing: 30px;
}
</style>
</head>
<body>
<div class="box">my name is coderwhy</div>
</body>
</html>
扫一扫
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
