（一）文本

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的更多相关文章

web前端开发学习内容
应该具备的知识技能 :懂web标准,熟练手写 xhtml css3 并符合符合w3c标准代码能兼容主流浏览器.ie6.7.8.9 ff 等. ...
Excel自文本导入内容时如何做到单元格内换行
前言:今天在处理数据的时候,在数据库中用到了\n换行符号,目的是在同表格内做到数据多行显示,比如字段名1 字段名2 字段名3 1 数据一行数据二行数据三行例子是在sql查询后的结果 ...
同步文本框内容的JS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
STM32学习内容和计划
一.STM32学习内容(流程) 1.学习STM32开发流程 ①MDK使用.建立工程.调试等 ②库开发方法 2.学习STM32常用外设开发 ①GPIO ②中断 ③定时器 ④串口 ⑤CAN 3.学习STM ...
u-boot代码学习内容
前言 u-boot代码庞大,不可能全部细读,只能有选择的读部分代码.在读代码之前,根据韦东山教材,关于代码学习内容和深度做以下预先划定. 一.Makefile.mkconfig.config.mk等 ...
2.Freshman阶段学习内容的确定
我刷知乎.在知乎上答题的程序员,不是很牛逼就是更牛逼,说起各种系统.各种系统的各种版本.各种语言.数据库.算法.IT届的各种圣战都有板有眼.信手拈来.头头是道,不得不服.这导致了一些非常严重的问题:我 ...
Swift - 文本输入框内容改变时响应，并获取最新内容
1,问题描述有时我们开发的时候需要先把“确认”按钮初始设置为不可用,当文本框中输入文字以后,再将输入按钮变为可用. 2,实现原理 (1)要检测文本框内容的变化,我们需要让新界面的Controller ...
捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)
input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...
C# 全选中数字文本框内容
/// <summary> /// 全选中数字文本框内容 /// </summary> /// <param name=&quo ...
python中用xpath匹配文本段落内容的技巧
content = item.xpath('//div[@class="content"]/span')[0].xpath('string(.)') content = item. ...

随机推荐

现代C++（Modern C++）基本用法实践：四、模板
概述 C++的模板是泛型编程思想的一种实现.C++是强类型语言,处处强调类型.同样的加法运算,int和float的加法运算需定义两个函数(重载),而使用模板则可以只用一个函数(见下面示例). 这类似我 ...
数据库连接池之c3p0-0.9.1.2，线上偶发APPARENT DEADLOCK，如何解？
前言本篇其实是承接前面两篇的,都是讲定位线上的c3p0数据库连接池,发生连接泄露的问题. 第二篇讲到,可以配置两个参数,来找出是哪里的代码借了连接后没有归还.但是,在我这边的情况是,对于没有归还的连 ...
订单逆向履约系统的建模与 PaaS 化落地实践
导读本文重点介绍了京东零售电商业务在订单逆向履约上面的最佳技术实践,京东零售快退平台承接了零售几乎所有售前逆向拦截和退款业务,并在长期的业务和技术探索中沉淀了丰富的业务场景设计方案.架构设计经验,既 ...
windows下安装及配置JDK（详解版）
1.下载JDK 本文以JDK1.8为主 JDK1.8官方下载链接 https://www.oracle.com/java/technologies/javase/javase-jdk8-downloa ...
flash 游戏分析 - 1
游戏我们就以<猎人的生存日记>(Orion Sandbox)这款游戏来分析. 下载链接用FlashStart打开Orion Sandbox 1.swf 我们需要反复进入游戏,可以先打开 ...
测试与爬虫—抓包神器之Charles
前言之前我们讲到过fiddler(https://www.cnblogs.com/zichliang/p/16067941.html),wireshark(https://www.cnblogs.c ...
RedHat8静默安装was
前言 was(websphere application server),类似weblogic.tomcat,由IBM开发的一种企业级Java容器. 系统版本:redhat 8.2 was版本:was ...
[故障处理]WindowsServer休眠后黑屏
情况 Windows Server 2016休眠后无法被远程桌面,现场连接显示器也是黑屏.直连显示器的情况下,有时候长按 ctrl键能亮屏. 处理步骤先扫描是否有系统文件损坏:Dism /Onlin ...
.NET Core基础到实战案例零碎学习笔记
前言:前段时间根据 [老张的哲学] 大佬讲解的视频做的笔记,讲的很不错.此文主要记录JWT/DI依赖注入/AOP面向切面编程/DTO/解决跨域等相关知识,还包含一些.NET Core项目实战的一些案例 ...
论文解读（BSFDA）《Black-box Source-free Domain Adaptation via Two-stage Knowledge Distillation》
Note:[ wechat:Y466551 | 可加勿骚扰,付费咨询 ] 论文信息论文标题:Black-box Source-free Domain Adaptation via Two-stage ...

Html文本学习内容-2

（一）文本

1.大小写转换

例子

2.文本线条

例子

3.文本阴影

例子

4.文本空白

例子：如果打出多个空白，除了使用
与转义字符&nbsp；之外还可以：

5.文本溢出

6.对齐与缩进

例子

例子

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

随机推荐

热门专题

Html文本学习内容-2

（一）文本

1.大小写转换

例子

2.文本线条

例子

3.文本阴影

例子

4.文本空白

例子：如果打出多个空白，除了使用 与转义字符&nbsp；之外还可以：

5.文本溢出

6.对齐与缩进

例子

例子

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

随机推荐

热门专题

例子：如果打出多个空白，除了使用
与转义字符&nbsp；之外还可以：