0
点赞
收藏
分享

微信扫一扫

CSS3-文本样式、字体样式

一脸伟人痣 2022-02-07 阅读 147

3、美化网页元素

3、1为什么要美化网页?

  1. 有效的传递页面信息
  2. 美化网页,页面漂亮,才能吸引用户
  3. 凸显页面的主题
  4. 提高用户的体验

span标签:重点要突出的字,使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器:#   */
        #title1{
            font-size: 50px;
        }

    </style>


</head>
<body>
欢迎学习<span id="title1">java</span>

</body>
</html>

请添加图片描述
3.2 字体样式
font属性

    <!--
    font-family:字体
    font-size  :字体大小
    font-weight:字体粗细
    color  :字体颜色
    -->
    <style>
        body{
            font-family: "Hiragino Maru Gothic ProN",楷体;
            font-size:20px;
            color:#267fc4;
        }
        h1{
            font-size: 30px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>

3.3 文本样式

  1. 颜色
  2. 文本对齐的方式
  3. 首行缩进
  4. 行高
  5. 装饰
    <!--
    颜色:
        单词
        RGB 0~F
        RGBA  A:0~1  透明度
        text-align:center  居中
        text-indent: 2em;    首行缩进:em为两个字
        height: 300px;   块高
        line-height: 100px;   行高,行和块的高度一致时就可以上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.8);
            text-align: center;
        }
        .p1{
            text-indent: 2em;  
        }
        .p3{
            background: antiquewhite;
            height: 300px;
            line-height: 100px;
        }
        .l1{
            text-decoration: line-through;  /*中划线*/
        }
        .l2{
            text-decoration: underline;  /*下划线*/
        }
        .l3{
            text-decoration: overline;  /*上划线*/
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
        /*文本图片水平对齐*/
        img,span{
            vertical-align: middle;
        }
    </style>
举报

相关推荐

0 条评论