HTML5的文本样式

最新推荐文章于 2025-03-26 19:48:03 发布

零希

最新推荐文章于 2025-03-26 19:48:03 发布

阅读量1.4k

点赞数 27

分类专栏： html 文章标签： css html css3

本文链接：https://blog.csdn.net/2302_79986066/article/details/143499357

版权

html 专栏收录该内容

27 篇文章

订阅专栏

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>