css文本

最新推荐文章于 2024-01-26 16:09:53 发布

Zhuang

最新推荐文章于 2024-01-26 16:09:53 发布

阅读量243

点赞数 1

文章标签： css html sass

本文链接：https://blog.csdn.net/toufachangdehen/article/details/124888471

版权

一，文本基础

1。文本缩进

文本缩进：text-indent
文本水平对齐方式：text-align
文本修饰：text-decoration

  <style>
    p
    {
      text-indent:2em;
      font-size :30px; 
    }
  </style>
</head>
<body>
  <p>这是p标签hhhhhhhhhhh</p>
</body>

em：一个字的大小。

2.文本水平对齐方式

属性名：text-align

取值：left：左对齐，center：居中，right：右对齐

  <style>
    h1
    {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>这是hhhhhhhhhhh</h1>
</body>

3.水平居中方法总结

text-align：center能让哪些元素水平居中？

1.文本

2.span标签，a标签

3.input标签，img标签

注意点：如果要让以上元素水平居中，text-align：center需要以上元素的父元素设置

比如下面这个代码要把img居中，style里面写的不是img而是body

  <style>
    h1
    {
      text-align: center;
    }
    body{
    text-align: center;
  }
  </style>
</head>
<body>
  <h1>新闻标题</h1>

  <img src="./电吉他.jfif" alt="">
</body>

4.文本修饰

属性名：text-decoration

取值

underline：下划线

line-through：删除线

overline：上划线

none：无装饰线

  <style>
    div
    {
      text-decoration: underline;
    }
    p
    {
    text-decoration: line-through;
  }
     h2
     {
       text-decoration: overline;
     }
     a
     {
       text-decoration: none;
     }
  </style>
</head>
<body>
  <div>div</div>
  <p>ppp</p>
  <h2>h2</h2>
  <a href="#">超链接</a>
</body>

5.行高

属性名：line-height

取值：

数字+px
倍数（当前标签font-size）

注意点：

行高与font连写的注意点：

如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family；

  <style>
    p{
      font: italic 700 66px/2 宋体;
    }
  </style>
</head>
<body>
  <p>在这个时髦化、年轻化、精神化和含蓄化的节日里，"520(521)1314我爱你(我愿意)一生一世"是其经典数字语录 ，吴玉龙的 《网络情人》 为节日主打歌 。这两天，人们通过(手机移动、PC传统)互联网络(以微信、QQ、微博、论坛等为平台)或手机短信大胆说(秀)爱，甚至送礼(红包)传情、相亲寻爱，更有无数对情侣扎堆登记结婚、隆重举办婚宴 ，很多商家也趁势开展团购、打折等促销活动，网上网下掀起一浪高过一浪的过节热潮。随着节日参与人数日益增多，各种媒体(报纸、电视、互联网等)竞相报道520、521"网络情人节"、"表白日"、"撒娇日"的节日盛况 。
  </p>
</body>