搜索到
1
篇与
的结果
-
常用文本属性 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>
