欢迎光临
我的个人博客网站

CSS文本样式


文本样式

文本缩进

属性名:text-indent

取值:

1、数字+px

2、数字+em(推荐:1em=当前标签font-size的大小)(推荐使用)

<style>         p{             /* text-indent: 32px; */  //第一种             text-indent: 2em;         }     </style> 

文本水平对齐方式

属性名:text-align

取值:

属性值 效果
left 左对齐
center 居中对齐
right 右对齐

注意点:如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置。例如:

<style>       .box{           width: 400px;           height: 400px;           background-color: red;           text-align:center;       }     </style> </head> <body>    <div class="box">   //div标签相当于是文本的父元素,所以text-align设置在父元素中。        我是一行文本    //这里的文本相当于是div标签的子元素    </div> 

文本修饰

属性名:text-decoration

取值:

属性值 效果
underline 下划线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
none 无装饰线(常用)

注意点:在开发中会使用text-decoration:none;清除a标签默认下的下划线。例如:

<style>       div{          text-decoration: underline;           color: red;       }       a{           text-decoration: none;   //在此把下划线去掉       }     </style> </head> <body>      <div>我是一个标签</div>      <a href="#">我是一个链接标签</a>    //在刷新时会默认带有下划线 </body> 

水平居中的方法

1、text-align属性

可以使文本,span,a,input,img标签水平居中。例如:

<style>       div{      width: 400px;      height: 400px;      background-color: skyblue;      text-align: center;       }       span{           color: red;       }       a{        color:orangered       }     </style> </head> <body>      <div>          <!-- 我是一个标签 -->          <!-- <span>我是一个span标签</span> -->          <!-- <a href="#">我是一个a标签</a> -->          <!-- <input type="text"> -->          <img src="images1/a74e3e6f7ba6cdd52e9cd9fbd0ffca81.jpg">         </div> </body> 

2、margin:0 auto

如果需要div、p、h(大盒子)水平居中,我们可以通过margin:0 auto;来实现

注意点:

如果需要让div、p、h(大盒子)水平居中,直接给当前元素本身设置即可。

margin:0 auto一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度。

行高

行高计算方法:行高-当前文本的高度,剩余的距离进行等分。

作用:控制行间距(给一行上下增加间距)

属性名:line-height

取值:1、数字+px

​ 2、倍数(当前标签font-size的倍数)

应用:1、让单行文本垂直居中可以设置line-height:文字父元素高度

​ 2、网页精准布局时,会设置line-height:可以取消上下间距

行高font连写的注意点:

1、如果同时设置了行高和font连写,注意覆盖问题

2、font:style、weight、size/line-height family(较为标准的写法)

Chrome调试工具

CSS文本样式

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS文本样式
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏