css样式

2021-02-04 15:03:40 作者：互联网

字体样式(font)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--
font-family 字体
text-align 位置
font-size 大小
font-weight 粗细
color 颜色
px 像素
em 字体
-->
        body{
            font-family: 楷体;
        }
        h1{
            font-size: 20px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
　　<h1>年有季节，春夏秋冬；日有季节，黑白交替；生命也该有季节，那是生老病死。</h1>
　　<p class="p1">乔治、赫伯特说过：“一个人如果20岁不英俊，30岁不强壮，40岁不富有，50岁不睿智，那么他这辈子
    就别想英俊、强壮、富有和睿智了。”这是西方人眼中的生命的季节。</p>
　　<p>孔老先生说过：“吾十有五而志于学，三十而立，四十而不惑，五十而知天命，六十而耳顺，七十而从心
    所欲，不逾矩。”也属一种对生命的季节的限定，但孔老先生只有勇气限定自己，怯于给别人下论断。</p>
　　<p>不管怎样，正如中国古话所说：“朝闻道，夕死可矣。”它告诉人们：不论在什么时候，只要你明白了生
    命的好处所在，你就开始了生命的春天。</p>

</body>
</html>

文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*       颜色:
    单词
    RGB 红绿黑 0~F
    RGB A 红绿黑 透明(0~1)
     text-align 排版
     text-indent 段落首行缩进

     height: 300px;
     line-height: 300px; 行高和块高一致,就可以上下居中

    text-decoration: underline; 下划线

    text-decoration: line-through 中划线

    text-decoration: overline; 上划线
    超链接去掉下划线(因为a标签默认有下划线)
    a{
        text-decoration:none;
    }
*/
        h1{
            color:rgba(0,255,12,0.9) ;
            text-align: center;
        }
        #p1{
            text-indent: 2em;
        }
        #p2{
            background: #4336ff;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
    /*    中划线*/
        .l2{
            text-decoration: line-through;
        }
    /*    上划线*/
        .l3{
            text-decoration: overline;
        }
    </style>
</head>
<body>
<p class="l1">231323</p>
<p class="l2">231323</p>
<p class="l3">231323</p>
<h1>年有季节，春夏秋冬；日有季节，黑白交替；生命也该有季节，那是生老病死。</h1>
　　<p id="p1">乔治、赫伯特说过：“一个人如果20岁不英俊，30岁不强壮，40岁不富有，50岁不睿智，那么他这辈子
    就别想英俊、强壮、富有和睿智了。”这是西方人眼中的生命的季节。</p>
　　<p id="p2">孔老先生说过：“吾十有五而志于学，三十而立，四十而不惑，五十而知天命，六十而耳顺，七十而从心
    所欲，不逾矩。”也属一种对生命的季节的限定，但孔老先生只有勇气限定自己，怯于给别人下论断。</p>
　　<p>不管怎样，正如中国古话所说：“朝闻道，夕死可矣。”它告诉人们：不论在什么时候，只要你明白了生
    命的好处所在，你就开始了生命的春天。</p>
</body>
</html>

文本图片水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*文本图片水平对齐*/
            img,span{
                vertical-align: middle;
            }

    </style>
</head>
<body>

<p>
    <img src="../resource/images/a.jpg" alt="">
      <span>sdasdasdsa</span>
</p>
</body>
</html>

标签：生命,样式,text,300px,decoration,季节,font,css
来源： https://www.cnblogs.com/YaoJingGuai/p/14372609.html