1. 文本颜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本颜色</title>
<style>
div {
font-size: 100px;
}
.test1 {
color: rgb(255, 0, 0);
}
.test2 {
color: rgba(255, 0, 0, 0.5);
}
.test3 {
color: #0000FF;
}
.test4 {
color: #0000FF88;
}
.test5 {
color: hsl(0, 100%, 50%);
}
.test6 {
color: hsl(0, 100%, 50%, 0.5);
}
</style>
</head>
<body>
<div class="test1">孙笑川1</div>
<div class="test2">孙笑川2</div>
<div class="test3">孙笑川3</div>
<div class="test4">孙笑川4</div>
<div class="test5">孙笑川5</div>
<div class="test6">孙笑川6</div>
</body>
</html>2. 文本间距
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本间距</title>
<style>
div {
font-size: 30px;
}
.test1 {
/* 字母间距 */
letter-spacing: 20px;
}
.test2 {
/* 单词间距（通过空格识别单词） */
word-spacing: 12px;
}
</style>
</head>
<body>
<div>hello world！孙笑川</div>
<div class="test1">hello world！孙笑川</div>
<div class="test2">hello world！孙笑川</div>
</body>
</html>3. 文本修饰
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本修饰</title>
<style>
div {
font-size: 40px;
}
.test1 {
/* 上划的红色波浪线 */
text-decoration: overline wavy red;
}
/* 下划的绿色虚线 */
.test2 {
text-decoration: underline dotted green;
}
/* 删除线 */
.test3 {
text-decoration: line-through;
}
.test4,
ins,
del {
/* 没有各种线 */
text-decoration: none;
}
</style>
</head>
<body>
<div class="test1">孙笑川1</div>
<div class="test2">孙笑川2</div>
<div class="test3">孙笑川3</div>
<div class="test4">孙笑川4</div>
<ins>孙笑川4</ins>
<del>孙笑川4</del>
</body>
</html>4. 文本缩进
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本缩进</title>
<style>
div {
font-size: 40px;
text-indent: 80px;
}
</style>
</head>
<body>
<div>欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！</div>
</body>
</html>5. 文本对齐—水平
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本对齐_水平</title>
<style>
div {
font-size: 40px;
background-color: aquamarine;
text-align: right;
}
</style>
</head>
<body>
<div>孙笑川</div>
</body>
</html>6. font-size
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>font-size</title>
</head>
<body>
<!--
1.由于字体设计的原因，文字最终呈现的大小，并不一定于font-size的值一致，可能大，也可能小
2.通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些
-->
</body>
</html>7. 行高
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行高</title>
<style>
.test {
font-size: 40px;
background-color: skyblue;
/* 第一种写法：值为像素值 */
/* line-height: 40px; */
/* 第二种写法：值为normal */
/* line-height: normal; */
/* 第三种写法：值为数值，参考自身font-size的倍数 */
/* line-height: 1.5; */
/* 第三种写法：值为百分比 */
/* line-height: 150%; */
}
</style>
</head>
<body>
<div class="test">sunxiaochuan孙笑川，带带大师兄，药水哥yaoshuigesunxiaochuan孙笑川，带带大师兄，药水哥yaoshuigesunxiaochuan孙笑川，带带大师兄，药水哥yaoshuige</div>
</body>
</html>8.行高注意事项
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行高注意事项</title>
<style>
/* 1.行高过小，文字会重叠，且最小值为0，不能为负数 */
/* #test {
font-size: 40px;
background-color: skyblue;
line-height: 60px;
} */
/* 2.行高是可以继承的 */
/* #test {
font-size: 40px;
background-color: skyblue;
line-height: 1.5;
}
span {
font-size: 200px;
color: red;
} */
/*
line-height 和 height 的关系：
设置了height，高度就是height的值
没有设置height，高度就是 line-height * 行数
*/
/* #test {
font-size: 40px;
background-color: yellowgreen;
line-height: 100px;
height: 300px;
} */
/* 没有设置height，高度是 line-height * 行数，此处 line-height 为0，所以也就是为什么背景色没有了的原因 */
#test {
font-size: 40px;
background-color: skyblue;
line-height: 0px;
}
/*
应用场景：
1.调整多行文字的间距
2.单行文字的垂直居中
3.
*/
</style>
</head>
<body>
<!-- <div id="test">孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波</div> -->
<!-- <div id="test">孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波<span>药水哥</span>>药水哥刘波孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波</div> -->
<!-- <div id="test">孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波</div> -->
<div id="test">孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波</div>
</body>
</html>10. 文本对齐—垂直
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本对齐_垂直</title>
<style>
/*
1.顶部：无需任何属性，在垂直方向上，默认就是顶部对齐
2.居中：对于单行文字，让 height=line-height即可
3.底部：对于单行文字，目前临时的解决方案是：让 line-height = (height * 2) - x
x是根据字体族动态决定的一个值
*/
div {
font-size: 40px;
background-color: skyblue;
height: 400px;
line-height: 750px;
}
</style>
</head>
<body>
<div>孙笑川</div>
</body>
</html>11. vertical-align
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>vertical-align</title>
<style>
/*
vertical-align 用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式
注：不能控制块级元素
*/
div {
font-size: 100px;
height: 300px;
background-color: skyblue;
}
span {
font-size: 40px;
background-color: orange;
vertical-align: top;
}
img {
height: 150px;
/* vertical-align: middle; */
}
.test {
vertical-align: top;
}
</style>
</head>
<body>
<div>
sunxiaochuan孙笑川x<span>x是根据字体族动态决定的一个值</span>
</div>
<hr>
<div>
sunxiaochuan孙笑川x<img src="../images/IMG_0003.JPG">
</div>
<hr>
<table border="1" cellspacing="0">
<caption>人员信息</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<th height="200px" class="test">孙笑川</th>
<th>男</th>
<th>33</th>
</tr>
<tr>
<th>刘波</th>
<th>男</th>
<th>30</th>
</tr>
<tr>
<th>药水哥</th>
<th>男</th>
<th>29</th>
</tr>
</tbody>
</table>
</body>
</html>
评论 (0)