导读
- 文本属性列表
- 字体和文本区别
- text-align属性
文本属性列表
| 属性 | 描述 |
|---|---|
| text-align | 设置文本的水平对齐方式。 |
| text-decoration | 设置文本装饰。 |
| text-shadow | 设置文本阴影。 |
| text-indent | 设置块级元素内容的首行缩进。对行内元素无效。 |
| text-transform | 控制文本的大小写转换。 |
| letter-spacing | 设置字符间距。 |
| word-spacing | 设置单词间距。 |
| white-space | 处理空白。 |
字体和文本属性的区别
- 文本是内容，而字体用于显示内容。
- 文本属性研究的一组字的外观。字体属性研究的是一个字的外观。
text-align属性
定义：设置块元素内容（文本和图片）的对齐方式。
语法
p{
text-align: left | center | right | justify
}
属性值
- left : 规定文本左对齐。默认值
- center: 规定文本水平居中对齐。
- right: 规定文本右对齐。
- justify: 规定文本两端对齐。
text-decoration属性
定义： 设置文本修饰线。
语法
p{
text-decoration: overline | line-through | underline | none
}
属性值
- overline: 添加上划线
- line-through : 添加删除线
- underline: 添加下划线
- none: 取消修饰线。默认值
text-shadow属性
定义： 设置文本阴影。
语法
h1{
text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;
}
属性值
- x-offset: 设置水平偏移。单位是像素。正直向右，负值向左。
- y-offset：设置垂直偏移。单位是像素。正值向下，负值向上。
- blur： 设置模糊半径。数值越大越模糊。
- color：设置阴影的颜色。
text-indent属性
定义： 设置文本缩进。
语法
p{
text-indent: 相对值 | 固定值
}
属性值
- 使用相对值设置缩进量。（推荐使用em）
- 使用绝对值设置缩进量。
- 可以使用负值设置缩进量。（负值向左缩进）
letter-spacing属性
定义： 设置英文字母的小写转换。
语法
body{
text-transform: none | capitalize | uppercase | lowercase
}
属性值
- none : 默认值。对原字母不进行转换。
- capitalize：文本中的每个单词以大写字母开头。(转成大写字母开头）
- uppercase: 定义仅有大写字母。（全部转成大写字母）
- lowercase: 定义无大写字母，仅有小写字母。（全部转成小写字母）
word-spacing属性
定义： 设置英文字母的小写转换。
语法
body{
text-transform: none | capitalize | uppercase | lowercase
}
属性值
- none : 默认值。对原字母不进行转换。
- capitalize：文本中的每个单词以大写字母开头。(转成大写字母开头）
- uppercase: 定义仅有大写字母。（全部转成大写字母）
- lowercase: 定义无大写字母，仅有小写字母。（全部转成小写字母）
text-transform属性
定义： 设置英文字母的大小写转换。
语法
body{
text-transform: none | capitalize | uppercase | lowercase
}
属性值
- none : 默认值。对原字母不进行转换。
- capitalize：文本中的每个单词以大写字母开头。(转成大写字母开头）
- uppercase: 定义仅有大写字母。（全部转成大写字母）
- lowercase: 定义无大写字母，仅有小写字母。（全部转成小写字母）
white-space
定义： 处理文档中的空白：空格、换行符、制表符。
语法
body{
white-space: normal | nowrap | pre | pre-wrap | pre-line
}
hyphens
word-break
line-break
overflow-wrap
white-space
属性值
- normal : 连续多个空格压缩成一个空格；换行符变成空白。
- nowrap ：禁止文本换行。除非使用br换行。
- pre： 保留空白
- pre-wrap：空白保留、换行保留。
- pre-line：空白压缩、换行保留。
text-overflow
The element's width must be constrained in px (pixels). Width in % (percentage) won't work.
The element must have overflow:hidden and white-space:nowrap set.
text-overflow.png
课堂DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
body,html{
/* 字体属性① */
/* font-family: Georgia, Helvetica,'PingFang SC',sans-serif; */
/* 字体属性② */
/* font-size: 16px; */
/* 字体属性③ */
/* line-height: 1.5; */
/* 字体属性⑥ */
font-variant:small-caps;
/* 字体属性⑦ */
font: normal normal 16px/1.5 Georgia, Helvetica,'PingFang SC',sans-serif;
/* 文本属性① */
color: #333;
}
h1{
font-size:2rem;
}
h2{
font-size:1.6rem;
/* 文本属性② */
text-align:center;
color:lime;
/* 文本属性⑤ */
text-shadow: 2px 2px 2px black;
/* 文本属性⑥ */
letter-spacing: .5em;
/* text-overflow: ; */
}
h3{
font-size:1.2rem;
/* 文本属性⑦ */
word-spacing: 1em;
}
.small{
font-size:0.875rem;
font-style: normal;/*表示字体不倾斜*/
font-style: italic;/*表示字体不倾斜*/
font-style: oblique;/*表示字体不倾斜*/
text-align: right;
}
.container{
width:600px;
margin:0 auto;
}
.bold{
color:red;
/* 文本属性③ */
text-decoration: line-through;
/* 字体属性④ */
font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: 400;
font-weight:900;
}
p{
/* font-size:20px; */
text-align:justify;
/* 文本属性④ */
text-indent: 2em;
}
.summay{
height:24px;
background-color: pink;
border:2px dashed palevioletred;
/* 字体属性⑤ */
font-style: italic;
/* 文本属性⑧ */
text-overflow:ellipsis;
white-space:nowrap; /*空白属性：设置空格和换行符的处理方式。*/
overflow: hidden;
}
</style>
</head>
<body>
<pre>
fdsaf fdsaf ff fdsa
fdsaf fdsaf ff fdsa
fdsaf fdsaf ff fdsa
</pre>
<div class="container">
<h2>元宇宙的奥秘</h2>
<h3>元宇宙 的奥秘</h3>
<div class="small">作者：佚名 2022-11-08 首发：极客公园作者：</div>
<p class="summay">
关于“元宇宙”，比较认可的思想源头是美国数学家和计算机专家弗诺·文奇教授，在其1981年出版的小说<span class="bold">《真名实姓》</span>中，创造性地构思了一个通过脑机接口进入并获得感官体验的虚拟世界。
</p>
<p>
关于“元宇宙”，比较认可的思想源头是美国数学家和计算机专家弗诺·文奇教授，在其1981年出版的小说<span class="bold">《真名实姓》</span>中，创造性地构思了一个通过脑机接口进入并获得感官体验的虚拟世界。 [4] [24] 元宇宙始于1992年国外科幻作品<span class="bold">《雪崩》</span>里提到的“metaverse（元宇宙）”和“Avatar（化身）”这两个概念。人们在“Metaverse”里可以拥有自己的虚拟替身，这个虚拟的世界就叫做“元宇宙”。 [23]
20世纪70年代到95年代出现了大量的开放性多人游戏，也就是说游戏本身的开放世界形成了元宇宙的早期基础。后来，2003年有一款游戏叫<span class="bold">《Second Life》</span>发布，它在理念上给我们部分解放了现实世界所面临的窘境，这句话怎么理解？就是我们在现实世界中最痛苦的一件事是不能快速调整自己的身份，而在虚拟世界当中，我们可以通过拥有自己的分身来实现，所以<span class="bold">《Second Life》</span>给了我们过一种新生活的可能性。
2020年人类社会到达虚拟化的临界点，疫情加速了新技术的发展，加速了非接触式文化的形成。 [24]
中国民营科技实业家协会元宇宙工作委员会
中国民营科技实业家协会元宇宙工作委员会
2021年是元宇宙元年。 [24] 2021年初，Soul App在行业内首次提出构建“社交元宇宙”。 [7] 2021年3月，被称为元宇宙第一股的罗布乐思（Roblox）正式在纽约证券交易所上市；5月，微软首席执行官萨蒂亚·纳德拉表示公司正在努力打造一个“企业元宇宙”；8月，海尔率先发布的制造行业的首个智造元宇宙平台，涵盖工业互联网、人工智能、增强现实、虚拟现实及区块链技术，实现智能制造物理和虚拟融合，融合“厂、店、家”跨场景的体验，实现了消费者体验的提升。 [51-53] 8月，英伟达宣布推出全球首个为元宇宙建立提供基础的模拟和协作平台；8月，字节跳动斥巨资收购VR创业公司Pico；10月28日，美国社交媒体巨头脸书（Facebook）宣布更名为“元”（Meta），来源于“元宇宙”（Metaverse）；11月，虚拟世界平台Decentraland公司发布消息，巴巴多斯将在元宇宙设立全球首个大使馆，暂定2022年1月启用 [2] [8] [11] [23-24] [26] 。11月，中国民营科技实业家协会元宇宙工作委员会揭牌 [31-32] 。
2021年12月21日，百度发布的首个国产元宇宙产品“希壤”正式开放定向内测，用户凭邀请码可以进入希壤空间进行超前体验。 [41]
2021年12月27日，百度Create AI开发者大会将发布元宇宙产品“希壤”，2021年的Create大会在“希壤APP”里举办，这是国内首次在元宇宙中举办的大会，可同时容纳10万人同屏互动。 [3] [34]
2021年，全球首款AI人工智能数字皮影藏品登录元宇宙。 [76] 2021年12月，入选<span class="bold">《柯林斯词典》</span>2021年度热词 [21] ；12月6日，入选“2021年度十大网络用语”。 [22] 12月8日，入选《咬文嚼字》“2021年度十大流行语”。 [30] 2022年1月，入选智库公布2021年度十大热词。 [49]
2022年1月，索尼（Sony）宣布了下一代虚拟现实头盔（PS VR2）的新细节，以及一款适配PS VR2的新游戏。 [45]
2022年1月4日 高通技术公司在2022年国际消费电子展（CES）上宣布与微软合作，扩展并加速AR在消费级和企业级市场的应用。双方对元宇宙的发展充满信心，高通技术公司正与微软在多项计划中展开合作，共同推动生态系统发展，包括开发定制化AR芯片以打造新一代高能效、轻量化AR眼镜，从而提供丰富的沉浸式体验；并计划集成Microsoft Mesh应用和骁龙Spaces™ XR开发者平台等软件。 [46]
2022年1月，新鲜热词“元宇宙”屡登委员提案 [48]
2022年2月，中国科技巨头向“元宇宙”进发。 [55]
2022年2月14日，香港海洋公园宣布：香港海洋公园、伙拍The Sandbox合作布局元宇宙。 [57]
2022年4月25日晚间消息，据报道，Facebook母公司Meta宣布，其第一家“元宇宙”实体店将于5月开业，消费者可以在那里试用和购买虚拟现实（VR）头显和其他设备。 [63]
2022年4月26日，在渝举行的中国元宇宙产业发展高峰论坛上，重庆市元宇宙先导试验区正式揭牌。 [64]
2022年5月9日，“元宇宙首尔市政厅”向公众开放。 [65]
2022年5月25日，据媒体报道称，有淘宝内部人士向其透露：为了备战2022年的618大促活动，淘宝内部专门成立了元宇宙专项项目组。 [68]
2022年6月1日, 世界牛奶日这一天, 以“i牛奶 i生活 i未来”为主题的第三届北京牛奶文化节在“元宇宙”空间盛大开幕。 [71]
2022年6月6日，龙华元宇宙数字孪生舱体验日活动在深圳龙华区举办。 [72]
北京时间2022年6月22日消息，微软公司、Facebook母公司Meta以及其他竞相构建新兴元宇宙概念的其他科技巨头，已经成立了一个组织，目的是促进元宇宙产业标准的制定，以便这些公司新推出的数字世界能够相互兼容。 [73]
2022年6月22日，由东方美谷集团与欧莱雅中国携手，为双方合作的第三届BIG BANG 美妆科技创造营，打造的中国首个美妆科技元宇宙路演——“BIG BANG EXPO@METAVERSE”在线上启动亮相，6月25日正式面向公众开放。 [74]
2022年6月30日，全国首个家居元宇宙平台在南康正式发布。 [75]
2022年7月22日，厦门市人民政府与中国移动咪咕公司就元宇宙建设正式签订合作战略协议，咪咕元宇宙总部成立并落户厦门。 [80]
2022年9月，全国科学技术名词审定委员会邀请20余位来自学界、产业届的各领域专家，对元宇宙及核心术语概念展开了研讨。 [83] 10月，2022 服贸会Web3.0发展趋势高峰论坛上发布的<span class="bold">《中国元宇宙发展报告（2022）》</span>显示，中国元宇宙上下游产业产值超过4000亿元，主要体现在游戏娱乐、VR和AR硬件等方面，未来五年，国内元宇宙市场规模至少突破2000亿元大关。
</p>
<div class="copyright small">
欢迎转载或引用法制晚报电子版的所载内容，但以下内容除外：a.法制晚报电子版所指向的非法制晚报电子版内容的相关链接内容；b.已作出不得转载或未经许可不得转载声明的内容；c.未由法制晚报电子版署名或本网引用、转载的他人作品等
</div>
</div>
</body>
</html>
知识点
- 记住文本两端对齐
- 如何添加文本阴影
- 如何添加删除线
- 设置文本缩进的正确姿势
