Html文本学习内容-2
（一）文本
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，空白会被浏览器忽略。
例子：如果打出多个空白，除了使用
与转义字符 ；之外还可以：
<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++图像处理函数及程序（一）
C++开源项目: Boost.GIL:通用图像库 CImg :用于图像处理的小型开源C++工具包 CxImage :用于加载,保存,显示和转换的图像处理和转换库,可以处理的图片格式包括 BMP, JP ...
- Ubuntu 20.04使用 VNC远程桌面连接避坑指南
Ubuntu 20.04使用 VNC远程桌面连接避坑指南 自从开始使用Ubuntu 20.04搭建深度学习服务器,就想到使用VNC远程桌面连接使用.可是之前一直使用的是Ubuntu18.04,心里想着 ...
- 行行AI人才直播第12期：风平智能创始人林洪祥《AI数字人的技术实践和商业探讨》
行行AI人才是博客园和顺顺智慧共同运营的AI行业人才全生命周期服务平台. 歌手孙燕姿凭借AI翻唱席卷各大视频平台.有视频博主用AI技术复活已故的奶奶,并且与之对话缅怀亲人填补遗憾.更有国外网红通过GP ...
- CMDB 相关
CMDB 术语 CI(配置项) 配置管理解决方案(如CMDB)中的基本有形或无形实体. 为了交付IT服务而需要管理的任何组件. 通常包括IT服务.硬件.软件.架构.人员和正式文档(如流程文档和sla) ...
- 文心一言 VS 讯飞星火 VS chatgpt （67）-- 算法导论6.5 6题
文心一言 VS 讯飞星火 VS chatgpt (67)-- 算法导论6.5 6题 六.在 HEAP-INCREASE-KEY 的第 5 行的交换操作中,一般需要通过三次赋值来完成.想一想如何利用IN ...
- VS Code 有哪些好用的插件呢？【持续更新】
一.画图工具:vscode-drawio 功能:在 VSCode 中画流程图.数据流图等等. 使用方法: 创建一个后缀名为 .drawio 的文件,然后用 VSCode 打开 ...
- DELPHI应用EXCEL（1）
在介绍使用delphi控制excel之前前,我们首先需要了解关于EXCEL的几个基本概念:EXCEL应用程序.工作薄(book).工作表(sheet)以及单元格(CELLS): 首先,我们是打开exc ...
- Nginx 文件名逻辑漏洞（CVE-2013-4547）(Vulhub)
Nginx 文件名逻辑漏洞(CVE-2013-4547)(Vulhub) 漏洞简介 在Nginx 0.8.41 ~ 1.4.3 / 1.5.0 ~ 1.5.7版本中存在错误解析用户请求的url信息,从 ...
- MIT6.s081/6.828 lectrue4：page tables 以及 Lab3 心得
不管是计算机组成还是操作系统,虚拟内存都是其中的重要内容,所以这一节我会结合 CSAPP 第九章:虚拟内存 来一起复习(顺便一说,CSAPP 这一节的 lab 是要求设计一个内存分配器,也是很有意思的 ...
- # Unity 如何获取Texture 的内存大小
Unity 如何获取Texture 的内存大小 在Unity中,要获取Texture的内存文件大小,可以使用UnityEditor.TextureUtil类中的一些函数.这些函数提供了获取存储内存大小 ...