CSS-美化网页-文本样式-颜色-对齐方式-首行缩进-行高-装饰-文本图片水平对齐 

文本样式：
1.颜色：rgba()
2.文本对齐方式：text-align
3.首行缩进:text-indent:2em
4.行高：
height:300px;/*设置背景色行高*/

line-height:100px;/*设置文本行高

5.装饰：
上划线：text-decoration:overline
中划线：text-decoration:line-through;
下划线：text-decoration:underline

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
 <!--
颜色使用方法：
    写单词
    RGB:红绿蓝，#000000:黑色，#ffffff:白色，红色：#ff0000,绿色：#00ff00,蓝色：0000ff
    RGBA:红绿蓝透明度：方法：rgb(红，绿，蓝)，如：rgb(0,255,255):绿色+蓝色，方法：rgba(红，绿，蓝，透明度），透明度只能从0开始1结束，如：rgba(0,255,255,0.5):绿色+蓝色，透明度0.5
    -->
  <style>
    h1{
      color:rgba(0,255,255,0.5);/*设置字体颜色和透明度*/
      text-align:center;/*文字对齐方式：居中*/
    }
    .p1{
      text-indent:2em;/*em:1个em代表一个字的距离*/
    }
    
    .p3{
      background:rgba(0,255,255,0.6);/*设置背景颜色和透明度*/
      height:300px;/*设置背景色行高*/
      line-height:100px;/*设置文本行高，当行高和块的高度一致，就可以实现上下居中，块表示：容器，div等等*/
    }
    .l1{
      text-decoration:underline;/*显示文本下划线*/
    }
     .l2{
      text-decoration:line-through;/*显示文本中划线*/
    }
     .l3{
      text-decoration:overline;/*显示文本上划线*/
    }
    
  </style>
</head>
<body>
    <h1>
      故事介绍
  </h1>
  <p class="l1">4255</p>
  <p class="l2">5454</p>
  <p class="l3">4545</p>
    <p class="p1">    一天晚上，一群猴子在树林里玩耍:有的在树上蹦蹦跳跳，有的在地上打打闹闹。</p>
  <p class="p3">
    I love three things：the sun ，the moon and you。

The sun is for the day ，the moon is for the night。

and you forever
  </p>
</body>
</html>
图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
  <!--水平对齐的话，要有参照物，相当于谁跟谁对齐-->
  <style>
　　/*文本图片水平对齐*/
    img,span{
      vertical-align:middle;/*img,span这两个标签居中对齐*/
    }
　　/*超链接去下划线*/
　　a{
　　text-decoration:none;/*去除下划线*/
　　}
  </style>
</head>
<body>
    
    <p><img src="图片.png"> 
      <span>内容大全</span>
  </p>
<a href="">123</a>

</body>
</html>

 

posted @ 2022-06-23 15:33  hollg  阅读(119)  评论(0)    收藏  举报