導(dǎo)讀
- 文本屬性列表
- 字體和文本區(qū)別
- text-align屬性
文本屬性列表
| 屬性 | 描述 |
|---|---|
| text-align | 設(shè)置文本的水平對(duì)齊方式。 |
| text-decoration | 設(shè)置文本裝飾。 |
| text-shadow | 設(shè)置文本陰影。 |
| text-indent | 設(shè)置塊級(jí)元素內(nèi)容的首行縮進(jìn)。對(duì)行內(nèi)元素?zé)o效。 |
| text-transform | 控制文本的大小寫(xiě)轉(zhuǎn)換。 |
| letter-spacing | 設(shè)置字符間距。 |
| word-spacing | 設(shè)置單詞間距。 |
| white-space | 處理空白。 |
字體和文本屬性的區(qū)別
- 文本是內(nèi)容，而字體用于顯示內(nèi)容。
- 文本屬性研究的一組字的外觀。字體屬性研究的是一個(gè)字的外觀。
text-align屬性
定義：設(shè)置塊元素內(nèi)容（文本和圖片）的對(duì)齊方式。
語(yǔ)法
p{
text-align: left | center | right | justify
}
屬性值
- left : 規(guī)定文本左對(duì)齊。默認(rèn)值
- center: 規(guī)定文本水平居中對(duì)齊。
- right: 規(guī)定文本右對(duì)齊。
- justify: 規(guī)定文本兩端對(duì)齊。
text-decoration屬性
定義： 設(shè)置文本修飾線。
語(yǔ)法
p{
text-decoration: overline | line-through | underline | none
}
屬性值
- overline: 添加上劃線
- line-through : 添加刪除線
- underline: 添加下劃線
- none: 取消修飾線。默認(rèn)值
text-shadow屬性
定義： 設(shè)置文本陰影。
語(yǔ)法
h1{
text-shadow: 水平偏移 垂直偏移 模糊半徑 顏色;
}
屬性值
- x-offset: 設(shè)置水平偏移。單位是像素。正直向右，負(fù)值向左。
- y-offset：設(shè)置垂直偏移。單位是像素。正值向下，負(fù)值向上。
- blur： 設(shè)置模糊半徑。數(shù)值越大越模糊。
- color：設(shè)置陰影的顏色。
text-indent屬性
定義： 設(shè)置文本縮進(jìn)。
語(yǔ)法
p{
text-indent: 相對(duì)值 | 固定值
}
屬性值
- 使用相對(duì)值設(shè)置縮進(jìn)量。（推薦使用em）
- 使用絕對(duì)值設(shè)置縮進(jìn)量。
- 可以使用負(fù)值設(shè)置縮進(jìn)量。（負(fù)值向左縮進(jìn)）
letter-spacing屬性
定義： 設(shè)置英文字母的小寫(xiě)轉(zhuǎn)換。
語(yǔ)法
body{
text-transform: none | capitalize | uppercase | lowercase
}
屬性值
- none : 默認(rèn)值。對(duì)原字母不進(jìn)行轉(zhuǎn)換。
- capitalize：文本中的每個(gè)單詞以大寫(xiě)字母開(kāi)頭。(轉(zhuǎn)成大寫(xiě)字母開(kāi)頭）
- uppercase: 定義僅有大寫(xiě)字母。（全部轉(zhuǎn)成大寫(xiě)字母）
- lowercase: 定義無(wú)大寫(xiě)字母，僅有小寫(xiě)字母。（全部轉(zhuǎn)成小寫(xiě)字母）
word-spacing屬性
定義： 設(shè)置英文字母的小寫(xiě)轉(zhuǎn)換。
語(yǔ)法
body{
text-transform: none | capitalize | uppercase | lowercase
}
屬性值
- none : 默認(rèn)值。對(duì)原字母不進(jìn)行轉(zhuǎn)換。
- capitalize：文本中的每個(gè)單詞以大寫(xiě)字母開(kāi)頭。(轉(zhuǎn)成大寫(xiě)字母開(kāi)頭）
- uppercase: 定義僅有大寫(xiě)字母。（全部轉(zhuǎn)成大寫(xiě)字母）
- lowercase: 定義無(wú)大寫(xiě)字母，僅有小寫(xiě)字母。（全部轉(zhuǎn)成小寫(xiě)字母）
text-transform屬性
定義： 設(shè)置英文字母的大小寫(xiě)轉(zhuǎn)換。
語(yǔ)法
body{
text-transform: none | capitalize | uppercase | lowercase
}
屬性值
- none : 默認(rèn)值。對(duì)原字母不進(jìn)行轉(zhuǎn)換。
- capitalize：文本中的每個(gè)單詞以大寫(xiě)字母開(kāi)頭。(轉(zhuǎn)成大寫(xiě)字母開(kāi)頭）
- uppercase: 定義僅有大寫(xiě)字母。（全部轉(zhuǎn)成大寫(xiě)字母）
- lowercase: 定義無(wú)大寫(xiě)字母，僅有小寫(xiě)字母。（全部轉(zhuǎn)成小寫(xiě)字母）
white-space
定義： 處理文檔中的空白：空格、換行符、制表符。
語(yǔ)法
body{
white-space: normal | nowrap | pre | pre-wrap | pre-line
}
hyphens
word-break
line-break
overflow-wrap
white-space
屬性值
- normal : 連續(xù)多個(gè)空格壓縮成一個(gè)空格；換行符變成空白。
- 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; /*空白屬性：設(shè)置空格和換行符的處理方式。*/
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 首發(fā)：極客公園作者：</div>
<p class="summay">
關(guān)于“元宇宙”，比較認(rèn)可的思想源頭是美國(guó)數(shù)學(xué)家和計(jì)算機(jī)專家弗諾·文奇教授，在其1981年出版的小說(shuō)<span class="bold">《真名實(shí)姓》</span>中，創(chuàng)造性地構(gòu)思了一個(gè)通過(guò)腦機(jī)接口進(jìn)入并獲得感官體驗(yàn)的虛擬世界。
</p>
<p>
關(guān)于“元宇宙”，比較認(rèn)可的思想源頭是美國(guó)數(shù)學(xué)家和計(jì)算機(jī)專家弗諾·文奇教授，在其1981年出版的小說(shuō)<span class="bold">《真名實(shí)姓》</span>中，創(chuàng)造性地構(gòu)思了一個(gè)通過(guò)腦機(jī)接口進(jìn)入并獲得感官體驗(yàn)的虛擬世界。 [4] [24] 元宇宙始于1992年國(guó)外科幻作品<span class="bold">《雪崩》</span>里提到的“metaverse（元宇宙）”和“Avatar（化身）”這兩個(gè)概念。人們?cè)凇癕etaverse”里可以擁有自己的虛擬替身，這個(gè)虛擬的世界就叫做“元宇宙”。 [23]
20世紀(jì)70年代到95年代出現(xiàn)了大量的開(kāi)放性多人游戲，也就是說(shuō)游戲本身的開(kāi)放世界形成了元宇宙的早期基礎(chǔ)。后來(lái)，2003年有一款游戲叫<span class="bold">《Second Life》</span>發(fā)布，它在理念上給我們部分解放了現(xiàn)實(shí)世界所面臨的窘境，這句話怎么理解？就是我們?cè)诂F(xiàn)實(shí)世界中最痛苦的一件事是不能快速調(diào)整自己的身份，而在虛擬世界當(dāng)中，我們可以通過(guò)擁有自己的分身來(lái)實(shí)現(xiàn)，所以<span class="bold">《Second Life》</span>給了我們過(guò)一種新生活的可能性。
2020年人類社會(huì)到達(dá)虛擬化的臨界點(diǎn)，疫情加速了新技術(shù)的發(fā)展，加速了非接觸式文化的形成。 [24]
中國(guó)民營(yíng)科技實(shí)業(yè)家協(xié)會(huì)元宇宙工作委員會(huì)
中國(guó)民營(yíng)科技實(shí)業(yè)家協(xié)會(huì)元宇宙工作委員會(huì)
2021年是元宇宙元年。 [24] 2021年初，Soul App在行業(yè)內(nèi)首次提出構(gòu)建“社交元宇宙”。 [7] 2021年3月，被稱為元宇宙第一股的羅布樂(lè)思（Roblox）正式在紐約證券交易所上市；5月，微軟首席執(zhí)行官薩蒂亞·納德拉表示公司正在努力打造一個(gè)“企業(yè)元宇宙”；8月，海爾率先發(fā)布的制造行業(yè)的首個(gè)智造元宇宙平臺(tái)，涵蓋工業(yè)互聯(lián)網(wǎng)、人工智能、增強(qiáng)現(xiàn)實(shí)、虛擬現(xiàn)實(shí)及區(qū)塊鏈技術(shù)，實(shí)現(xiàn)智能制造物理和虛擬融合，融合“廠、店、家”跨場(chǎng)景的體驗(yàn)，實(shí)現(xiàn)了消費(fèi)者體驗(yàn)的提升。 [51-53] 8月，英偉達(dá)宣布推出全球首個(gè)為元宇宙建立提供基礎(chǔ)的模擬和協(xié)作平臺(tái)；8月，字節(jié)跳動(dòng)斥巨資收購(gòu)VR創(chuàng)業(yè)公司Pico；10月28日，美國(guó)社交媒體巨頭臉書(shū)（Facebook）宣布更名為“元”（Meta），來(lái)源于“元宇宙”（Metaverse）；11月，虛擬世界平臺(tái)Decentraland公司發(fā)布消息，巴巴多斯將在元宇宙設(shè)立全球首個(gè)大使館，暫定2022年1月啟用 [2] [8] [11] [23-24] [26] 。11月，中國(guó)民營(yíng)科技實(shí)業(yè)家協(xié)會(huì)元宇宙工作委員會(huì)揭牌 [31-32] 。
2021年12月21日，百度發(fā)布的首個(gè)國(guó)產(chǎn)元宇宙產(chǎn)品“希壤”正式開(kāi)放定向內(nèi)測(cè)，用戶憑邀請(qǐng)碼可以進(jìn)入希壤空間進(jìn)行超前體驗(yàn)。 [41]
2021年12月27日，百度Create AI開(kāi)發(fā)者大會(huì)將發(fā)布元宇宙產(chǎn)品“希壤”，2021年的Create大會(huì)在“希壤APP”里舉辦，這是國(guó)內(nèi)首次在元宇宙中舉辦的大會(huì)，可同時(shí)容納10萬(wàn)人同屏互動(dòng)。 [3] [34]
2021年，全球首款A(yù)I人工智能數(shù)字皮影藏品登錄元宇宙。 [76] 2021年12月，入選<span class="bold">《柯林斯詞典》</span>2021年度熱詞 [21] ；12月6日，入選“2021年度十大網(wǎng)絡(luò)用語(yǔ)”。 [22] 12月8日，入選《咬文嚼字》“2021年度十大流行語(yǔ)”。 [30] 2022年1月，入選智庫(kù)公布2021年度十大熱詞。 [49]
2022年1月，索尼（Sony）宣布了下一代虛擬現(xiàn)實(shí)頭盔（PS VR2）的新細(xì)節(jié)，以及一款適配PS VR2的新游戲。 [45]
2022年1月4日 高通技術(shù)公司在2022年國(guó)際消費(fèi)電子展（CES）上宣布與微軟合作，擴(kuò)展并加速AR在消費(fèi)級(jí)和企業(yè)級(jí)市場(chǎng)的應(yīng)用。雙方對(duì)元宇宙的發(fā)展充滿信心，高通技術(shù)公司正與微軟在多項(xiàng)計(jì)劃中展開(kāi)合作，共同推動(dòng)生態(tài)系統(tǒng)發(fā)展，包括開(kāi)發(fā)定制化AR芯片以打造新一代高能效、輕量化AR眼鏡，從而提供豐富的沉浸式體驗(yàn)；并計(jì)劃集成Microsoft Mesh應(yīng)用和驍龍Spaces? XR開(kāi)發(fā)者平臺(tái)等軟件。 [46]
2022年1月，新鮮熱詞“元宇宙”屢登委員提案 [48]
2022年2月，中國(guó)科技巨頭向“元宇宙”進(jìn)發(fā)。 [55]
2022年2月14日，香港海洋公園宣布：香港海洋公園、伙拍The Sandbox合作布局元宇宙。 [57]
2022年4月25日晚間消息，據(jù)報(bào)道，F(xiàn)acebook母公司Meta宣布，其第一家“元宇宙”實(shí)體店將于5月開(kāi)業(yè)，消費(fèi)者可以在那里試用和購(gòu)買虛擬現(xiàn)實(shí)（VR）頭顯和其他設(shè)備。 [63]
2022年4月26日，在渝舉行的中國(guó)元宇宙產(chǎn)業(yè)發(fā)展高峰論壇上，重慶市元宇宙先導(dǎo)試驗(yàn)區(qū)正式揭牌。 [64]
2022年5月9日，“元宇宙首爾市政廳”向公眾開(kāi)放。 [65]
2022年5月25日，據(jù)媒體報(bào)道稱，有淘寶內(nèi)部人士向其透露：為了備戰(zhàn)2022年的618大促活動(dòng)，淘寶內(nèi)部專門成立了元宇宙專項(xiàng)項(xiàng)目組。 [68]
2022年6月1日, 世界牛奶日這一天, 以“i牛奶 i生活 i未來(lái)”為主題的第三屆北京牛奶文化節(jié)在“元宇宙”空間盛大開(kāi)幕。 [71]
2022年6月6日，龍華元宇宙數(shù)字孿生艙體驗(yàn)日活動(dòng)在深圳龍華區(qū)舉辦。 [72]
北京時(shí)間2022年6月22日消息，微軟公司、Facebook母公司Meta以及其他競(jìng)相構(gòu)建新興元宇宙概念的其他科技巨頭，已經(jīng)成立了一個(gè)組織，目的是促進(jìn)元宇宙產(chǎn)業(yè)標(biāo)準(zhǔn)的制定，以便這些公司新推出的數(shù)字世界能夠相互兼容。 [73]
2022年6月22日，由東方美谷集團(tuán)與歐萊雅中國(guó)攜手，為雙方合作的第三屆BIG BANG 美妝科技創(chuàng)造營(yíng)，打造的中國(guó)首個(gè)美妝科技元宇宙路演——“BIG BANG EXPO@METAVERSE”在線上啟動(dòng)亮相，6月25日正式面向公眾開(kāi)放。 [74]
2022年6月30日，全國(guó)首個(gè)家居元宇宙平臺(tái)在南康正式發(fā)布。 [75]
2022年7月22日，廈門市人民政府與中國(guó)移動(dòng)咪咕公司就元宇宙建設(shè)正式簽訂合作戰(zhàn)略協(xié)議，咪咕元宇宙總部成立并落戶廈門。 [80]
2022年9月，全國(guó)科學(xué)技術(shù)名詞審定委員會(huì)邀請(qǐng)20余位來(lái)自學(xué)界、產(chǎn)業(yè)屆的各領(lǐng)域?qū)＜?，?duì)元宇宙及核心術(shù)語(yǔ)概念展開(kāi)了研討。 [83] 10月，2022 服貿(mào)會(huì)Web3.0發(fā)展趨勢(shì)高峰論壇上發(fā)布的<span class="bold">《中國(guó)元宇宙發(fā)展報(bào)告（2022）》</span>顯示，中國(guó)元宇宙上下游產(chǎn)業(yè)產(chǎn)值超過(guò)4000億元，主要體現(xiàn)在游戲娛樂(lè)、VR和AR硬件等方面，未來(lái)五年，國(guó)內(nèi)元宇宙市場(chǎng)規(guī)模至少突破2000億元大關(guān)。
</p>
<div class="copyright small">
歡迎轉(zhuǎn)載或引用法制晚報(bào)電子版的所載內(nèi)容，但以下內(nèi)容除外：a.法制晚報(bào)電子版所指向的非法制晚報(bào)電子版內(nèi)容的相關(guān)鏈接內(nèi)容；b.已作出不得轉(zhuǎn)載或未經(jīng)許可不得轉(zhuǎn)載聲明的內(nèi)容；c.未由法制晚報(bào)電子版署名或本網(wǎng)引用、轉(zhuǎn)載的他人作品等
</div>
</div>
</body>
</html>
知識(shí)點(diǎn)
- 記住文本兩端對(duì)齊
- 如何添加文本陰影
- 如何添加刪除線
- 設(shè)置文本縮進(jìn)的正確姿勢(shì)
