WEB前端开发工程师 学习第二天 文字文本
1.文字设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ font-weight: normal; font-style: normal; font-size: 48px; font-family: "楷体"; } </style> <!-- font-weight 文字加粗 bold 加粗 normal 正常 font-style 文字倾斜 italic 斜体 normal 正常 font-size 文字大小 --> </head> <body> <div> 欢迎大家来到妙味课堂 </div> </body> </html>
2.行高
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ border: 1px solid red; line-height: 30px; height: 30px; } </style> <!-- line-height 行高 文字在一行里面所占用的位置 当行高的值与容器高度一致时，文字会垂直居中显示 多行文字测量行高的方法： 1、确认文字大小 2、确认两行文字之间的空隙大小 3、空隙大小除以2，得出来的值就是每行文字的上下的空隙大小 3.1 当行高为奇数时，那么文字的上方要比下方少一个像素 3.2 当行高为偶数是，那么文字上下空隙值一致 4、通过辅助项测量多行文字的行高 --> </head> <body> <div> 欢迎大家来到妙味课堂 </div> </body> </html>
3.奇数行高
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ border: 1px solid red; line-height: 21px; } </style> </head> <body> <div> 欢迎大家来到妙味课堂 </div> </body> </html>
4.font复合样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ /*font-weight: normal; font-style: normal; font-size: 48px; font-family: "楷体";*/ border: 1px solid red; font: bold italic 26px/50px "楷体"; } </style> <!-- font-weight 文字加粗 bold 加粗 normal 正常 font-style 文字倾斜 italic 斜体 normal 正常 font-size 文字大小 font：font-style | font-weight | font-size/line-height | font-family； !!!font复合样式需要注意书写顺序 --> </head> <body> <div> 欢迎大家来到妙味课堂 </div> </body> </html>
5.文本设置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ /*width: 100px;*/ border: 1px solid black; color: red; text-align: left; font-size: 24px; text-indent: 2em; text-decoration: none; letter-spacing: 10px; } </style> <!-- color 文字颜色 text-align 文本对齐（显示）方式 left 默认值 right center text-decoration 文本修饰 underline 下划线 none letter-spacing 字母间距 --> </head> <body> <div> 欢迎大家来到妙味课堂-hello Miaov </div> </body> </html>
6.单词间距
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ word-spacing: 20px; } </style> <!-- word-spacing 单词间距（以空格为解析单位） --> </head> <body> <div> 欢迎 大家 来到 妙味课堂 hellow miaov </div> </body> </html>
7.强制不换行
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; border: 1px solid red; white-space: normal; } </style> <!-- white-space 强制不换行 nowrap 不换行 normal 正常 --> </head> <body> <div> 欢迎大家来到妙味课堂 </div> </body> </html>
8.空格的大小
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ border: 1px solid red; font-size: 12px; font-family: "宋体"; } </style> <!-- 测量文字大小时，最好是使用从上到下的方式去测量文字大小 记录： 16px 8px 12px 6px 字体格式不一样时，空格大小也不一样。 空格的大小：字体格式为宋体时，那么空格大小是当前文字大小的一半。 --> </head> <body> <div> 欢迎 大家来到妙味课堂 </div> </body> </html>
9.em
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 100px; border: 1px solid black; font-size: 18px; text-indent: 2em; } </style> <!-- em 是根据字体大小来进行计算的 1em = 当前字体大小 --> </head> <body> <div> 欢迎大家来到妙味课堂 </div> </body> </html>
