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>