HTML5的文本样式
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>
原文地址：https://blog.csdn.net/2302_79986066/article/details/143499357
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！