文本样式

1em=一个字的大小

1px=一个像素

文本样式

  1. 颜色

    <!--   颜色表示：单词 ,RGB-->
<!--    RGB:6位  两位红 两位绿 两位蓝   0~F-->
<!--    RGBA:多出透明度-->

 <style>
  h1{
        color: rgb(0,255,255);/*正式版,*/
        color: rgba(0,255,255,0.5);
  }
  </style>

  2. 对齐方式

    text-align：排版

    <style>
    h1{
          text-align: center;/*居中对齐*/
          text-align: left;/*左对齐*/
    } 

</style>

  3. 首行缩进

    text-indent

    <style>
    p1{
          text-indent: 2em;/*首行缩进两个字*/
    } 
</style>

  4. 行高

    <style>
 .p2{
        background: #96d50f;
        height: 150px;/*该段落的总高度，单独设置的话，文字会顶在最上面*/
        line-height: 150px;/*行高要是超过段落高度，将超出背景颜色范围   当行高与div高度相同时，文字居中*/
</style>

    行高与块高高度一致时，文字上下居中

  5. 装饰（下划线等）

text-decoration:文本装饰

下划线：text-decoration:underline

中划线：text-decoration:line-through

上划线：text-decoration：overline

超链接去除下划线:text-decoration:none

  1. 文字阴影

    text-shadow

同一行，文本与图片的排列

<!--  垂直对齐需要参照物，即两个标签-->
  <style>
  img,span{
    vertical-align: text-top;/*图片的顶端与文本对齐*/
     vertical-align: middle;/*图片的中央与文本对齐*/ 
     vertical-align: text-bottom;/*图片的底部与文本对齐*/ 
  }
  </style>
</head>
<body>
<p>
  <img src="images/002.jpg" height="540" width="603" alt="">
  <span>jlojoijoijijo</span>
</p>
posted @ 2021-09-25 14:45  逍遥游～  阅读(68)  评论(0)    收藏  举报