Html文本学习内容-2

最新推荐文章于 2024-04-27 23:52:13 发布

m晴朗

最新推荐文章于 2024-04-27 23:52:13 发布

阅读量212

点赞数

分类专栏： html 文章标签： html html5

本文链接：https://blog.csdn.net/qq_40666149/article/details/105511571

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

（一）文本

1.大小写转换

text-transform属于处理文本的大小写，有4个值：

none（默认值）
uppercase（全部大写）
lowercase（全部小写）
capitalize（首字母大写）

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
 .t1{
  text-transform:uppercase;
 }
 .t2{
  text-transform:lowercase;
 }
 .t3{
  text-transform:capitalize;
 }
</style>
</head>
<body>
<p>ssss</p>
<p class="t1">sss</p>
<p class="t2">AAA</p>
<p class="t3">string</p>
</body>
</html>

2.文本线条

text-decoration有5个值：

none
underline
overline
line-through
blink（以前只有Firefox支持，现在也不支持了）

例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t1{
   text-decoration:underline;
  }
  .t2{
   text-decoration:overline;
  }
  .t3{
   text-decoration:line-through overline underline;
  }
 </style>
</head>
<body>
 <p>ssss</p>
 <p class="t1">sss</p>
 <p class="t2">AAA</p>
 <p class="t3">string</p>
</body>
</html>

3.文本阴影

text-shadow属性，参数顺序为：阴影颜色，水平偏移量，垂直偏移量，模糊度

例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t1{
   text-shadow:rgb(0,0,255) 5px 5px 5px;
  }
  /*.t2{
   text-decoration:overline;
  }
  .t3{
   text-decoration:line-through;
  }*/
 </style>
</head>
<body>
 <!-- <p>ssss</p> -->
 <p class="t1">sss</p>
 <!-- <p class="t2">AAA</p>
 <p class="t3">string</p> -->
</body>
</html>

4.文本空白

white-space属性，默认值normal，空白会被浏览器忽略。

例子：如果打出多个空白，除了使用

与转义字符&nbsp；之外还可以：

 <style type="text/css">
  .t1{
   white-space:pre;
  }
  </style>
  <body>
 <p class="t1">sss      eeeeee wwww
 wwwwwww</p>
</body>

但是上述操作不会自动换行。

white-space:pre-line;//可以自动换行，但是会合并空格

white-space:pre-wrap;;//可以自动换行，不会合并空格

white-space:nowrap;//不换行，合并空格

5.文本溢出

overflow：hidden;隐藏
text-overflow:ellipsis;(把隐藏的内容用…代替）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t1{
   width: 200px;
   border:solid 1px red;
   white-space:nowrap;
   overflow: hidden;
   text-overflow:ellipsis;
  }
</style>
</head>
<body>
 <!-- <p>ssss</p> -->
 <p class="t1">
  sss      eeeeee wwwwdddsdsdsds fff
  属性你手机
     </p>
</body>
</html>

当鼠标放上去是，让隐藏的内容出现

p:hover{
   overflow: visible;
  }

visible：是默认值，内容不会被修剪，会显示在元素框外
hidden：内容被隐藏，且其余内容不可见
scroll：内容被修剪，但是浏览器会显示滚动条以便查看其他内容
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其他内容

6.对齐与缩进

text-indent，设置首行缩进

例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t1{
   white-space:pre-line;
   text-indent:20px;
  }
 </style>
</head>
<body>
 <p class="t1">sss      eeeeee wwwwdddsdsdsds fff
  属性你手机
     </p>
</body>
</html>

text-indent的值设置像素时，如果字体发生变化，它缩进的大小就会改变，耦合行很强

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t1{
   font-size: 50px;/*将字体大小改为20px*/
   white-space:pre-line;
   text-indent:20px;
  }
 </style>
</head>
<body>
 <p class="t1">sss      eeeeee wwwwdddsdsdsds fff
  属性你手机
     </p>
</body>
</html>

现在将text-indent设置为2em

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t1{
   font-size: 50px;/*将字体大小改为20px*/
   white-space:pre-line;
   text-indent:2em;
  }
 </style>
</head>
<body>
 <p class="t1">提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、
  葡萄牙语、越南语、印尼语、意大利语全文翻译、网页翻译、文档翻译服务。
     </p>
</body>
</html>

text-align只对元素中的文本有效，对元素无效
值：left，center，right，justify

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/c**ss">
  .t1{
   text-align: center;
  }
  .t2{
   text-**align:left;
  }
  .t3{
   text-align:right;
  }
</style>
</head>
<body>
 <p class="t1">t1今天真好</p>
 <p class="t2">t2今天真好</p>
 <p class="t3">t3今天真好</p>
</body>
</html>

justify可以实现两端对齐（两端对齐是要求有宽度的，需要对文本外的框设置宽度；且只有一行填满才会显示两端对齐，一行没有填满，就不会显示）

例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t4{
   width: 200px;
   border:  solid 1px red;
   text-align: justify;
  }
 </style>
</head>
<body>
 <p class="t4">今天真好今天真好今天真好今天真好今天真好今天真好</p>
</body>
</html>

改进：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .t4{
   width: 200px;
   border:  solid 1px red;
   text-align: justify;
  }
  p span{
   display: inline-block;
   width: 100%;
  }
  /* 或者p:after{
   content: "";
   display: inline-block;
   width: 100%;
  }*/
 </style>
</head>
<body>
 <p class="t4">今天真好今天真好今天真好今天真好<span></span></p>
</body>
</html>

垂直对齐：
vertical-align，使用满足两点，文本，inline类元素或表格单元格

值	描述
baseline	默认。元素放在父元素的基线上
sub	垂直对齐文本的下标
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放在父元素中部
bottom	把元素的顶端与行中最低元素顶端对齐
text-bottom	把元素的底端与父元素字体的底端对齐
length
%	使用line-height属性的百分比值来排列此元素允许使用负值