HTML5的文本样式
文本样式 1 文字样式 1 字体颜色 color 2 字体大小 font-size:px 3 字体粗细 font-weight:px 范围100 到 900 之间 bold[粗] bolder[加粗] 2 字体效果 1 字体效果 font-style 2 字体样式 font-family 3 文本样式 1 文本居中 1 text-align=center/left/right 2 行高 第一行的高度 如果你想一个元素在Y轴上剧居中: 1如果确定了高度 行高 == 父元素的高度 2 再设置一个position:relative top:元素本身高度的一半 3 字间距 与 词间距 1 字间距 letter-spacing 2 词间距 word-spacing
文本样式 1 文字样式 1 字体颜色 color 2 字体大小 font-size:px 3 字体粗细 font-weight:px 范围100 到 900 之间 bold[粗] bolder[加粗] 2 字体效果 1 字体效果 font-style 2 字体样式 font-family 3 文本样式 1 文本居中 1 text-align=center/left/right 2 行高 第一行的高度 如果你想一个元素在Y轴上剧居中: 1如果确定了高度 行高 == 父元素的高度 2 再设置一个position:relative top:元素本身高度的一半 3 字间距 与 词间距 1 字间距 letter-spacing 2 词间距 word-spacing
<!DOCTYPE html> <html lang="en"> <!--不在浏览器显示 --> <head> <!-- 编码格式--> <meta charset="UTF-8"> <!-- 文档标题--> <title>第八节课</title> <!-- 内部样式--> <style> #x1 { /*字体颜色 */ color: red; /*字体大小*/ font-size: 44px; /*字体*/ font-family: "楷体"; /*字体效果*/ font-style: italic; } #x2 { /*宽度*/ width: 20%; /*高度*/ height: 250px; /*背景颜色 */ background-color: red; } #x3 { /*宽度*/ /*HTML标签 font-size=16px*/ /*1rem == 16px*/ width: 200rem; /*高度*/ height: 50px; /*背景颜色 */ background-color: green; /*字体效果*/ font-style: "楷体"; } #x4 { width: 200rem; /*高度*/ height: 50px; /*背景颜色 */ background-color: green; } </style> </head> <!--在浏览器显示 --> <body> <span id="x1"> 你好HTML </span> <div id="x2"></div> <p id="x3"></p> <!-- 无序列表--> <li id="x4"></li> </body> </html>
<!DOCTYPE html> <html lang="en"> <!--不在浏览器显示--> <head> <!-- 编码格式--> <meta charset="UTF-8"> <!-- 文档标题--> <title>Title</title> <!-- 内部样式--> <style> #x1 { /*每个字母的距离*/ letter-spacing: 5px; /*字体颜色 */ color: pink; /*词间距*/ word-spacing: 23px; } </style> </head> <!--在浏览器显示 --> <body> <!-- 文字标签--> <p id="x1">你好html I love you</p> </body> </html>标签:font,样式,spacing,color,间距,字体,HTML5,文本 From: https://blog.csdn.net/2302_79986066/article/details/143499357