HTML和CSS的相同效果之处

文字样式

   1、字体样式

         HTML:

 

         CSS:

<style type="text/css">
      		#p{font-style:normal | italic | oblique }//字体样式
      		#p{font-size:20px;}//字体大小
      		#p{font-variant:normal | small-caps}//字体变体
      		#p{font-weight:normal | bold | lighter | 数值}//字体粗细
      		#p{font-family:字体1,字体2,...}//字体系列
</style>

2、首行缩进

         HTML:

               <p>&nbsp;&nbsp;&nbsp;&nbsp;</p>

          CSS:

<style type="text/css">
#p{text-indent:2em;}
</style>
3、字符装饰

        HTML:(第一点的图片中提到了...)

        CSS:

<style type="text/css">
#p{text-decoration:none | underline | blink | overline | line-through;}
</style>

         none:表示文字无装饰

         blink:表示文字闪烁

         underline:表示文字加下划线

         line-through:表示文字加贯穿线

         overline:表示文字加上划线

4、英文大小写转换

HTML:(第一点的图片中提到了...)

CSS:

<style type="text/css">
#p{text-transform:capitalize | uppercase | lowercase | none}
</style>

5、对齐方式

        HTML:(内容居中)
<center>内容</center>
        CSS:
<style type="text/css">
#p{text-align:left | right | center | justify}//水平对齐
#p{vertical-align:baseline | sub | super | top | middle | bottom | text-bottom | length}//垂直对齐
</style>

        baseline:默认,元素放置在父元素上的基线上
        sub:垂直对齐文本的下标
        super:垂直对齐文本的上标
        top:把元素的顶端与行中最高元素的顶端对齐
        middle:把此元素放置在父元素的中部
        bottom:把元素的顶端与行中最低元素的顶端对齐
        text-bottom:把元素的低端与父元素字体的底端对齐
        length:指定长度值

猜你喜欢

转载自blog.csdn.net/weixin_40263603/article/details/78237137