（一）文本

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属性的百分比值来排列此元素允许使用负值

Html文本学习内容-2的更多相关文章

  1. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  2. Excel自文本导入内容时如何做到单元格内换行

    前言:今天在处理数据的时候,在数据库中用到了\n换行符号,目的是在同表格内做到数据多行显示,比如  字段名1  字段名2  字段名3  1 数据一行 数据二行 数据三行 例子是在sql查询后的结果  ...

  3. 同步文本框内容的JS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. STM32学习内容和计划

    一.STM32学习内容(流程) 1.学习STM32开发流程 ①MDK使用.建立工程.调试等 ②库开发方法 2.学习STM32常用外设开发 ①GPIO ②中断 ③定时器 ④串口 ⑤CAN 3.学习STM ...

  5. u-boot代码学习内容

    前言  u-boot代码庞大,不可能全部细读,只能有选择的读部分代码.在读代码之前,根据韦东山教材,关于代码学习内容和深度做以下预先划定. 一.Makefile.mkconfig.config.mk等 ...

  6. 2.Freshman阶段学习内容的确定

    我刷知乎.在知乎上答题的程序员,不是很牛逼就是更牛逼,说起各种系统.各种系统的各种版本.各种语言.数据库.算法.IT届的各种圣战都有板有眼.信手拈来.头头是道,不得不服.这导致了一些非常严重的问题:我 ...

  7. Swift - 文本输入框内容改变时响应，并获取最新内容

    1,问题描述 有时我们开发的时候需要先把“确认”按钮初始设置为不可用,当文本框中输入文字以后,再将输入按钮变为可用. 2,实现原理 (1)要检测文本框内容的变化,我们需要让新界面的Controller ...

  8. 捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)

    input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...

  9. C# 全选中数字文本框内容

    /// <summary>        /// 全选中数字文本框内容        /// </summary>        /// <param name=&quo ...

  10. python中用xpath匹配文本段落内容的技巧

    content = item.xpath('//div[@class="content"]/span')[0].xpath('string(.)') content = item. ...

随机推荐

  1. AIGC：新AI时代，推动数字人进化的引擎

    摘要:CV.NLP.大模型...AI技术的加持下,让数字人内外在更加生动真实.在未来的发展中,数字人的应用场景越来越广泛,并将发挥出重要的作用,让美好照进生活. 本文分享自华为云社区<AIGC: ...

  2. Oracle随机生成大数据

    Oracle随机插入大数据 话不多说,安排 示例: -- 创建新表并批量插入五千万数据 create table TEST_TAB as select rownum as id, to_char(sy ...

  3. 2021-7-7 Vue的for使用实例

    <!DOCTYPE html> <html> <head> <title> </title> </head> <body& ...

  4. Redis 主从同步原理

    一.什么是主从同步? 主从同步,就是将数据冗余备份,主库(Master)将自己库中的数据,同步给从库(Slave). 从库可以一个,也可以多个,如图所示: 二.为什么需要主从同步? Redis 虽然有 ...

  5. 无linux基础也能熟练掌握git的基本操作

    git是一个用来管理项目的工具,它的远程仓库有github.gitee.gitlab代码托管中心,既可以用于个人共享代码,又可以用于团队进行项目的协作与发布,那么我们一起来了解一下git该如何使用~ ...

  6. Hutool：一行代码搞定数据脱敏

    1. 什么是数据脱敏 1.1 数据脱敏的定义 数据脱敏百度百科中是这样定义的: 数据脱敏,指对某些敏感信息通过脱敏规则进行数据的变形,实现敏感隐私数据的可靠保护.这样就可以在开发.测试和其它非生产环境 ...

  7. 针对sarasa-shuffle.woff2加密字体进行解密

    本文针对的是类似于sarasa-shuffle.woff2加密字体的一个研究. 字体加密是使用Unicode编码将其映射到不同的字体显示的一种前端显示加密手段.在反爬虫中能够起到较好的效果,爬虫将只能 ...

  8. MIT6.s081/6.828 lectrue4：page tables 以及 Lab3 心得

    不管是计算机组成还是操作系统,虚拟内存都是其中的重要内容,所以这一节我会结合 CSAPP 第九章:虚拟内存 来一起复习(顺便一说,CSAPP 这一节的 lab 是要求设计一个内存分配器,也是很有意思的 ...

  9. Mysql高级8-触发器

    一.触发器 触发器是与表有关的数据库对象,指在insert/update/delete之前或者之后,触发并执行触发器中定义的sql语句集合,触发器的这种特性可以协助应用在数据库端确保数据的完整性,日志 ...

  10. Windows校验文件MD5和SHA值的方法

    1.需求背景 下载或传输文件后,需要计算文件的MD5.SHA256等校验值,以确保下载或传输后的文件和源文件一致 2.校验方法 如上图所示,可以使用Windows自带的certutil命令来计算一个文 ...