Web前端開(kāi)發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版） 課件 任務(wù)5.2 美化非遺活動(dòng)詳情頁(yè)面

項(xiàng)目5CSS基礎(chǔ)信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》任務(wù)5.2

美化非遺活動(dòng)詳情頁(yè)面正文區(qū)域前端技術(shù)開(kāi)發(fā)任務(wù)引入一非遺資訊頁(yè)面的原型圖UI設(shè)計(jì)最終網(wǎng)頁(yè)效果將復(fù)雜的頁(yè)面劃分成不同的區(qū)塊，分而治之任務(wù)描述美化非遺活動(dòng)詳情頁(yè)面正文區(qū)域?qū)⒕W(wǎng)頁(yè)內(nèi)容劃分為2大區(qū)塊，分別為正文區(qū)域和底部“編輯部”區(qū)域。采用CSS總體設(shè)置正文區(qū)域的字體及樣式，“編輯部”區(qū)域需要單獨(dú)設(shè)置對(duì)齊方式及字體顏色等?；睘楹?jiǎn)，從大處著眼，從細(xì)節(jié)處著手。前端技術(shù)開(kāi)發(fā)知識(shí)儲(chǔ)備文本縮進(jìn)屬性1設(shè)置行高屬性2文本修飾屬性3字間距與詞間距屬性4任務(wù)實(shí)施二312設(shè)置內(nèi)容層，形成網(wǎng)頁(yè)基本布局根據(jù)UI設(shè)計(jì)，劃分內(nèi)容區(qū)域設(shè)置各個(gè)段落的縮進(jìn)，對(duì)齊，字體大小和顏色等HTML層嵌套HTML創(chuàng)建層CSS排版任務(wù)實(shí)施二<p>2023年6月10日是“文化和自然遺產(chǎn)日”。6月9日，2023年“文化和自然遺產(chǎn)日”...非物質(zhì)文化遺產(chǎn)公約》通過(guò)20周年紀(jì)念活動(dòng)在京舉行</p><p>每年六月的第二個(gè)星期六是“文化和自然遺產(chǎn)日”。每年遺產(chǎn)日期間，...推出形式厚氛圍</p><p>啟動(dòng)儀式后，嘉賓們參觀了國(guó)家圖書(shū)館舉辦的...圖書(shū)館同步展出</p><pid="edit">編輯部</p>HTML代碼任務(wù)實(shí)施二<styletype="text/css">p{text-indent:2em;font-size:20px;line-height:1.5;}#edit{text-align:right;color:#000;opacity:0.5;}</style>CSS代碼設(shè)置段落的縮進(jìn)、字體大小和行高設(shè)置底部“編輯部”的對(duì)齊方式、字體顏色和透明度感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》文本縮進(jìn)屬性信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》文本縮進(jìn)屬性前端技術(shù)開(kāi)發(fā)01中文正文段落的排版習(xí)慣需要將每個(gè)段落的首行縮進(jìn)，CSS屬性text-indent可以設(shè)置文本縮進(jìn)。長(zhǎng)度包括長(zhǎng)度值和長(zhǎng)度單位，長(zhǎng)度單位同樣可以使用之前提到的所有單位。百分比則是相對(duì)上一級(jí)元素的寬度而定的。允許負(fù)值，此時(shí)首行會(huì)被凸出到左邊，產(chǎn)生“懸掛縮進(jìn)”的效果。語(yǔ)法text-indent:Length|Percentage;說(shuō)明文本縮進(jìn)屬性前端技術(shù)開(kāi)發(fā)01設(shè)置文本縮進(jìn)<pid="one">2023年6月10日是“文化和自然遺產(chǎn)日”。6月9日，2023年“文化和自然遺產(chǎn)日”非遺宣傳展示活動(dòng)啟動(dòng)儀式暨《保護(hù)非物質(zhì)文化遺產(chǎn)公約》通過(guò)20周年紀(jì)念活動(dòng)在京舉行。文化和旅游部黨組成員、副部長(zhǎng)饒權(quán)出席活動(dòng)并講話，宣布活動(dòng)啟動(dòng)。</p><pid="two">啟動(dòng)儀式后，嘉賓們參觀了國(guó)家圖書(shū)館舉辦的“茶和天下典籍里的茶”“年華易老，技憶永存——列入聯(lián)合國(guó)教科文組織非物質(zhì)文化遺產(chǎn)名錄、名冊(cè)項(xiàng)目相關(guān)傳承人記錄成果特展”。</p>#one{text-indent:2em;}#two{margin-left:20px;text-indent:-1em;}小結(jié)前端技術(shù)開(kāi)發(fā)02/*<length>值*/text-indent:3mm;text-indent:40px;/*<percentage>值，相對(duì)于包含區(qū)塊的寬度*/text-indent:15%;text-indent屬性用于區(qū)塊元素中文本行前面空格（縮進(jìn)）的長(zhǎng)度?？s進(jìn)值的設(shè)置可以是長(zhǎng)度值length或百分比。感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》段落文本縮進(jìn)設(shè)置信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》段落文本縮進(jìn)設(shè)置前端技術(shù)開(kāi)發(fā)01制作《三國(guó)演義》第一回任務(wù)目標(biāo)段落文本縮進(jìn)設(shè)置前端技術(shù)開(kāi)發(fā)011制作網(wǎng)頁(yè)元素<h1>《三國(guó)演義》</h1><h2>第一回 宴桃園豪杰三結(jié)義 斬黃巾英雄首立功</h2><pclass="one">詩(shī)曰：</p><pclass="poem">滾滾長(zhǎng)江東逝水，浪花淘盡英雄。</p><pclass="poem">是非成敗轉(zhuǎn)頭空。</p><pclass="poem">青山依舊在，幾度夕陽(yáng)紅。</p><pclass="poem">白發(fā)漁樵江渚上，慣看秋月春風(fēng)。</p><pclass="poem">一壺濁酒喜相逢。</p><pclass="poem">古今多少事，都付笑談中。</p><pclass="quot">——調(diào)寄《臨江仙》</p><pclass="content">話說(shuō)天下大勢(shì)，分久必合，合久必分。周末七國(guó)分爭(zhēng)，并入于秦。及秦滅之后，楚、漢分爭(zhēng)，又并入于漢。漢朝自高祖新白蛇而起義，一統(tǒng)天下，后來(lái)光武中興，傳至南帝，遂分為一睡，誰(shuí)其致亂之由，殆始于相、靈二帝，相帝禁細(xì)善，崇信高官。及相帝罪，靈帝即位，大將軍蜜武、太健陳蕃，共招輔佐。時(shí)有宦官曹節(jié)等弄權(quán)，竇武、陳蕃謀誅之，機(jī)事不密，反為所害，中涓自此愈橫。</p>段落文本縮進(jìn)設(shè)置前端技術(shù)開(kāi)發(fā)012設(shè)置第一行縮進(jìn)<h1>《三國(guó)演義》</h1><h2>第一回 宴桃園豪杰三結(jié)義 斬黃巾英雄首立功</h2><pclass="one">詩(shī)曰：</p><pclass="poem">滾滾長(zhǎng)江東逝水，浪花淘盡英雄。</p><pclass="poem">是非成敗轉(zhuǎn)頭空。</p><pclass="poem">青山依舊在，幾度夕陽(yáng)紅。</p><pclass="poem">白發(fā)漁樵江渚上，慣看秋月春風(fēng)。</p><pclass="poem">一壺濁酒喜相逢。</p><pclass="poem">古今多少事，都付笑談中。</p><pclass="quot">——調(diào)寄《臨江仙》</p><pclass="content">話說(shuō)天下大勢(shì)，分久必合，合久必分。周末七國(guó)分爭(zhēng)，并入于秦。及秦滅之后，楚、漢分爭(zhēng)，又并入于漢。漢朝自高祖新白蛇而起義，一統(tǒng)天下，后來(lái)光武中興，傳至南帝，遂分為一睡，誰(shuí)其致亂之由，殆始于相、靈二帝，相帝禁細(xì)善，崇信高官。及相帝罪，靈帝即位，大將軍蜜武、太健陳蕃，共招輔佐。時(shí)有宦官曹節(jié)等弄權(quán)，竇武、陳蕃謀誅之，機(jī)事不密，反為所害，中涓自此愈橫。</p>.one{text-indent:2em;}段落文本縮進(jìn)設(shè)置前端技術(shù)開(kāi)發(fā)013設(shè)置詩(shī)詞部分縮進(jìn)<h1>《三國(guó)演義》</h1><h2>第一回 宴桃園豪杰三結(jié)義 斬黃巾英雄首立功</h2><pclass="one">詩(shī)曰：</p><pclass="poem">滾滾長(zhǎng)江東逝水，浪花淘盡英雄。</p><pclass="poem">是非成敗轉(zhuǎn)頭空。</p><pclass="poem">青山依舊在，幾度夕陽(yáng)紅。</p><pclass="poem">白發(fā)漁樵江渚上，慣看秋月春風(fēng)。</p><pclass="poem">一壺濁酒喜相逢。</p><pclass="poem">古今多少事，都付笑談中。</p><pclass="quot">——調(diào)寄《臨江仙》</p><pclass="content">話說(shuō)天下大勢(shì)，分久必合，合久必分。周末七國(guó)分爭(zhēng)，并入于秦。及秦滅之后，楚、漢分爭(zhēng)，又并入于漢。漢朝自高祖新白蛇而起義，一統(tǒng)天下，后來(lái)光武中興，傳至南帝，遂分為一睡，誰(shuí)其致亂之由，殆始于相、靈二帝，相帝禁細(xì)善，崇信高官。及相帝罪，靈帝即位，大將軍蜜武、太健陳蕃，共招輔佐。時(shí)有宦官曹節(jié)等弄權(quán)，竇武、陳蕃謀誅之，機(jī)事不密，反為所害，中涓自此愈橫。</p>.poem{text-indent:4em;}段落文本縮進(jìn)設(shè)置前端技術(shù)開(kāi)發(fā)014設(shè)置”——調(diào)寄《臨江仙》”縮進(jìn)<h1>《三國(guó)演義》</h1><h2>第一回 宴桃園豪杰三結(jié)義 斬黃巾英雄首立功</h2><pclass="one">詩(shī)曰：</p><pclass="poem">滾滾長(zhǎng)江東逝水，浪花淘盡英雄。</p><pclass="poem">是非成敗轉(zhuǎn)頭空。</p><pclass="poem">青山依舊在，幾度夕陽(yáng)紅。</p><pclass="poem">白發(fā)漁樵江渚上，慣看秋月春風(fēng)。</p><pclass="poem">一壺濁酒喜相逢。</p><pclass="poem">古今多少事，都付笑談中。</p><pclass="quot">——調(diào)寄《臨江仙》</p><pclass="content">話說(shuō)天下大勢(shì)，分久必合，合久必分。周末七國(guó)分爭(zhēng)，并入于秦。及秦滅之后，楚、漢分爭(zhēng)，又并入于漢。漢朝自高祖新白蛇而起義，一統(tǒng)天下，后來(lái)光武中興，傳至南帝，遂分為一睡，誰(shuí)其致亂之由，殆始于相、靈二帝，相帝禁細(xì)善，崇信高官。及相帝罪，靈帝即位，大將軍蜜武、太健陳蕃，共招輔佐。時(shí)有宦官曹節(jié)等弄權(quán)，竇武、陳蕃謀誅之，機(jī)事不密，反為所害，中涓自此愈橫。</p>.quot{text-indent:70%;}段落文本縮進(jìn)設(shè)置前端技術(shù)開(kāi)發(fā)014設(shè)置”——調(diào)寄《臨江仙》”縮進(jìn)<h1>《三國(guó)演義》</h1><h2>第一回 宴桃園豪杰三結(jié)義 斬黃巾英雄首立功</h2><pclass="one">詩(shī)曰：</p><pclass="poem">滾滾長(zhǎng)江東逝水，浪花淘盡英雄。</p><pclass="poem">是非成敗轉(zhuǎn)頭空。</p><pclass="poem">青山依舊在，幾度夕陽(yáng)紅。</p><pclass="poem">白發(fā)漁樵江渚上，慣看秋月春風(fēng)。</p><pclass="poem">一壺濁酒喜相逢。</p><pclass="poem">古今多少事，都付笑談中。</p><pclass="quot">——調(diào)寄《臨江仙》</p><pclass="content">話說(shuō)天下大勢(shì)，分久必合，合久必分。周末七國(guó)分爭(zhēng)，并入于秦。及秦滅之后，楚、漢分爭(zhēng)，又并入于漢。漢朝自高祖新白蛇而起義，一統(tǒng)天下，后來(lái)光武中興，傳至南帝，遂分為一睡，誰(shuí)其致亂之由，殆始于相、靈二帝，相帝禁細(xì)善，崇信高官。及相帝罪，靈帝即位，大將軍蜜武、太健陳蕃，共招輔佐。時(shí)有宦官曹節(jié)等弄權(quán)，竇武、陳蕃謀誅之，機(jī)事不密，反為所害，中涓自此愈橫。</p>.content{text-indent:2em;}感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》設(shè)置行高屬性信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》設(shè)置行高屬性前端技術(shù)開(kāi)發(fā)01行高line-height=相鄰兩條基線(baseline)之間的距離=上半行距+文本高度+下半行距設(shè)置行高屬性前端技術(shù)開(kāi)發(fā)01可以使用CSS屬性line-height控制行高，通過(guò)它可以調(diào)整行間距。實(shí)際行間距受字體大小和行高影響。語(yǔ)法line-height:

Length

|

Number

|

Percentage;說(shuō)明：該屬性的取值如表所示前端技術(shù)開(kāi)發(fā)設(shè)置文本行高<pid="one">2023年6月10日是“文化和自然遺產(chǎn)日”。6月9日，2023年“文化和自然遺產(chǎn)日”非遺宣傳展示活動(dòng)啟動(dòng)儀式暨《保護(hù)非物質(zhì)文化遺產(chǎn)公約》通過(guò)20周年紀(jì)念活動(dòng)在京舉行。文化和旅游部黨組成員、副部長(zhǎng)饒權(quán)出席活動(dòng)并講話，宣布活動(dòng)啟動(dòng)。</p><pid="two">啟動(dòng)儀式后，嘉賓們參觀了國(guó)家圖書(shū)館舉辦的“茶和天下典籍里的茶”“年華易老，技憶永存——列入聯(lián)合國(guó)教科文組織非物質(zhì)文化遺產(chǎn)名錄、名冊(cè)項(xiàng)目相關(guān)傳承人記錄成果特展”。</p><pid="three">非遺的宣傳、弘揚(yáng)方面，十年來(lái)，中國(guó)篆刻藝術(shù)院組織了幾十場(chǎng)重大的篆刻藝術(shù)主題展，在弘揚(yáng)中國(guó)傳統(tǒng)文化，傳承保護(hù)和發(fā)展篆刻藝術(shù)上，取得了突出成果</p>設(shè)置行高屬性01前端技術(shù)開(kāi)發(fā)設(shè)置文本行高<pid="one">2023年6月10日是“文化和自然遺產(chǎn)日”。6月9日，2023年“文化和自然遺產(chǎn)日”非遺宣傳展示活動(dòng)啟動(dòng)儀式暨《保護(hù)非物質(zhì)文化遺產(chǎn)公約》通過(guò)20周年紀(jì)念活動(dòng)在京舉行。文化和旅游部黨組成員、副部長(zhǎng)饒權(quán)出席活動(dòng)并講話，宣布活動(dòng)啟動(dòng)。</p><pid="two">啟動(dòng)儀式后，嘉賓們參觀了國(guó)家圖書(shū)館舉辦的“茶和天下典籍里的茶”“年華易老，技憶永存——列入聯(lián)合國(guó)教科文組織非物質(zhì)文化遺產(chǎn)名錄、名冊(cè)項(xiàng)目相關(guān)傳承人記錄成果特展”。</p><pid="three">非遺的宣傳、弘揚(yáng)方面，十年來(lái)，中國(guó)篆刻藝術(shù)院組織了幾十場(chǎng)重大的篆刻藝術(shù)主題展，在弘揚(yáng)中國(guó)傳統(tǒng)文化，傳承保護(hù)和發(fā)展篆刻藝術(shù)上，取得了突出成果</p>body{font-size:20px;}#one{font-size:10px;line-height:2;}#two{line-height:26px;}#three{line-height:40px;}第1段行高20px，

第2段行高26px，

第3段行高40px。設(shè)置行高屬性01前端技術(shù)開(kāi)發(fā)設(shè)置文本行高<pid="one">2023年6月10日是“文化和自然遺產(chǎn)日”。6月9日，2023年“文化和自然遺產(chǎn)日”非遺宣傳展示活動(dòng)啟動(dòng)儀式暨《保護(hù)非物質(zhì)文化遺產(chǎn)公約》通過(guò)20周年紀(jì)念活動(dòng)在京舉行。文化和旅游部黨組成員、副部長(zhǎng)饒權(quán)出席活動(dòng)并講話，宣布活動(dòng)啟動(dòng)。</p><pid="two">啟動(dòng)儀式后，嘉賓們參觀了國(guó)家圖書(shū)館舉辦的“茶和天下典籍里的茶”“年華易老，技憶永存——列入聯(lián)合國(guó)教科文組織非物質(zhì)文化遺產(chǎn)名錄、名冊(cè)項(xiàng)目相關(guān)傳承人記錄成果特展”。</p><pid="three">非遺的宣傳、弘揚(yáng)方面，十年來(lái)，中國(guó)篆刻藝術(shù)院組織了幾十場(chǎng)重大的篆刻藝術(shù)主題展，在弘揚(yáng)中國(guó)傳統(tǒng)文化，傳承保護(hù)和發(fā)展篆刻藝術(shù)上，取得了突出成果</p>body{font-size:20px;}#one{font-size:10px;line-height:2;}#two{line-height:26px;}#three{line-height:40px;}第1段行高20px，

第2段行高26px，

第3段行高40px。設(shè)置行高屬性01前端技術(shù)開(kāi)發(fā)特別注意：1.line-height的大小與font-size大小相等時(shí),行間距為0!相當(dāng)于沒(méi)有行間距!2.ine-height的大小不能小于當(dāng)前元素的font-size大小!否則算出來(lái)的行間距會(huì)負(fù)數(shù)，導(dǎo)致每一行之間的文本重疊!設(shè)置行高屬性01小結(jié)前端技術(shù)開(kāi)發(fā)02line-height的取值可以是：數(shù)字：該屬性的應(yīng)用值是這個(gè)無(wú)單位數(shù)字<數(shù)字>乘以該元素的字體大小長(zhǎng)度：指定<長(zhǎng)度>用于計(jì)算linebox的高度;如：px、em等百分比：計(jì)算值是給定的百分比值乘以元素計(jì)算出的字體大小line-height控制行高，通過(guò)它可以調(diào)整行間距。感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》調(diào)整文本行高信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》前端技術(shù)開(kāi)發(fā)知識(shí)儲(chǔ)備設(shè)置合適的行高1設(shè)置文本垂直居中201設(shè)置合適的行高前端技術(shù)開(kāi)發(fā)設(shè)置合適的行高前端技術(shù)開(kāi)發(fā)01如何設(shè)置合適的行高呢？line-height:16px;font-size:16px;line-height:24px;font-size:16px;line-height:32px;font-size:16px;行高最好是文字大小的1.5倍或2倍如果font-size:16px;那么line-height可以設(shè)置為32px150%或200%02設(shè)置文本垂直居中前端技術(shù)開(kāi)發(fā)設(shè)置文本垂直居中前端技術(shù)開(kāi)發(fā)02要使單行文本垂直居中，只需要設(shè)置文本的line-height與父元素的height相等即可。<divclass="main">世界文化遺產(chǎn)</div>.main{height:100px;width:400px;margin:auto;border:2pxsolidgainsboro;font-size:16px;line-height:100px;}小結(jié)前端技術(shù)開(kāi)發(fā)03line-height一般設(shè)置為字體font-size高度的1.5倍或2倍要設(shè)置單行文本居中，需要設(shè)置文本的行高(line-height)與父元素的高度(height)相等。感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》文本修飾屬性信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》文本修飾屬性前端技術(shù)開(kāi)發(fā)01文本修飾主要包括給文字添加下劃線、刪除線、上劃線的效果。

CSS屬性text-decoration可以設(shè)置文本修飾。語(yǔ)法text-decoration:none|underline|line-through|overline;text-decoration屬性的取值文本修飾屬性前端技術(shù)開(kāi)發(fā)01文本修飾屬性<pclass="p1">我有下劃線</p><pclass="p2">我有刪除線</p><pclass="p3">我有上劃線</p><pclass="p4">默認(rèn)沒(méi)有裝飾線</p>.p1{text-decoration:underline;}.p2{text-decoration:line-through;}.p3{text-decoration:overline;}

.p4{text-decoration:none;}文本修飾屬性前端技術(shù)開(kāi)發(fā)01underline、line-through、overline這三個(gè)屬性可以組合使用<pclass="p5">組合使用文本修飾屬性</p>.p5{text-decoration:underlineoverlineline-through;}文本修飾屬性前端技術(shù)開(kāi)發(fā)01可以使用text-decoration-color設(shè)置文本修飾的線的顏色語(yǔ)法text-decoration-color:red;文本修飾屬性前端技術(shù)開(kāi)發(fā)01可以使用text-decoration-style設(shè)置文本修飾的線的線型語(yǔ)法text-decoration-style:solid|double|dotted|dashed;文本修飾屬性前端技術(shù)開(kāi)發(fā)01<pclass="p6red">設(shè)置下劃線顏色和線型:solid</p><pclass="p7red">設(shè)置下劃線顏色和線型:double</p><pclass="p8red">設(shè)置下劃線顏色和線型:dashed</p><pclass="p9red">設(shè)置下劃線顏色和線型:wavy</p>.red{text-decoration:underline;text-decoration-color:red;}.p6{text-decoration-style:solid;}.p7{text-decoration-style:double;}.p8{text-decoration-style:dashed;}.p9{text-decoration-style:wavy;}文本修飾屬性前端技術(shù)開(kāi)發(fā)01<pclass="p10">文本修飾簡(jiǎn)寫(xiě)屬性</p>.p10{text-decoration:underlinedoubleblue;}text-decoration也可以使用簡(jiǎn)寫(xiě)的方式設(shè)置屬性小結(jié)前端技術(shù)開(kāi)發(fā)02文本修飾屬性text-decoration用于給文字添加下劃線、刪除線、上劃線的效果。underline：添加下劃線overline：添加上劃線line-through：添加刪除線none：默認(rèn)，沒(méi)有裝飾線。感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》超鏈接樣式設(shè)置信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》超鏈接樣式設(shè)置前端技術(shù)開(kāi)發(fā)01任務(wù)目標(biāo)制作《中國(guó)傳統(tǒng)文化——茶》超鏈接樣式設(shè)置前端技術(shù)開(kāi)發(fā)011制作網(wǎng)頁(yè)元素<h1>中國(guó)傳統(tǒng)文化——茶</h1>中國(guó)茶文化的歷史最早可追溯到公元前2700年之前，<span>當(dāng)時(shí)茶葉被當(dāng)作一種草藥使用</span>，而茶葉被正式當(dāng)作飲品大約在公元前59年。世界上第一部關(guān)于茶葉和飲茶的著作——<ahref="/a/29177258_239453"target="_blank">茶經(jīng)</a>》便是被譽(yù)為“中國(guó)茶圣”的<ahref="/authorv_aa25735b0226.aspx"target="_blank">陸羽</a>所作。其中對(duì)茶葉的起源和歷史、茶葉的加工及生長(zhǎng)等問(wèn)題的介紹，對(duì)當(dāng)時(shí)及后代具有深遠(yuǎn)影響。超鏈接樣式設(shè)置前端技術(shù)開(kāi)發(fā)012設(shè)置h1標(biāo)題下劃線<h1>中國(guó)傳統(tǒng)文化——茶</h1>中國(guó)茶文化的歷史最早可追溯到公元前2700年之前，<span>當(dāng)時(shí)茶葉被當(dāng)作一種草藥使用</span>，而茶葉被正式當(dāng)作飲品大約在公元前59年。世界上第一部關(guān)于茶葉和飲茶的著作——<ahref="/a/29177258_239453"target="_blank">茶經(jīng)</a>》便是被譽(yù)為“中國(guó)茶圣”的<ahref="/authorv_aa25735b0226.aspx"target="_blank">陸羽</a>所作。其中對(duì)茶葉的起源和歷史、茶葉的加工及生長(zhǎng)等問(wèn)題的介紹，對(duì)當(dāng)時(shí)及后代具有深遠(yuǎn)影響。h1{text-decoration:underlinedoublered;color:red;}將<h1>標(biāo)記樣式設(shè)置為下劃線，且是紅色雙下劃線設(shè)置<h1>字體顏色為紅色超鏈接樣式設(shè)置前端技術(shù)開(kāi)發(fā)013設(shè)置刪除線<h1>中國(guó)傳統(tǒng)文化——茶</h1>中國(guó)茶文化的歷史最早可追溯到公元前2700年之前，<span>當(dāng)時(shí)茶葉被當(dāng)作一種草藥使用</span>，而茶葉被正式當(dāng)作飲品大約在公元前59年。世界上第一部關(guān)于茶葉和飲茶的著作——<ahref="/a/29177258_239453"target="_blank">茶經(jīng)</a>》便是被譽(yù)為“中國(guó)茶圣”的<ahref="/authorv_aa25735b0226.aspx"target="_blank">陸羽</a>所作。其中對(duì)茶葉的起源和歷史、茶葉的加工及生長(zhǎng)等問(wèn)題的介紹，對(duì)當(dāng)時(shí)及后代具有深遠(yuǎn)影響。span{text-decoration:line-through;color:red;}將<span>標(biāo)記樣式設(shè)置為刪除線，字體為紅色。超鏈接樣式設(shè)置前端技術(shù)開(kāi)發(fā)014設(shè)置超鏈接樣式<h1>中國(guó)傳統(tǒng)文化——茶</h1>中國(guó)茶文化的歷史最早可追溯到公元前2700年之前，<span>當(dāng)時(shí)茶葉被當(dāng)作一種草藥使用</span>，而茶葉被正式當(dāng)作飲品大約在公元前59年。世界上第一部關(guān)于茶葉和飲茶的著作——<ahref="/a/29177258_239453"target="_blank">茶經(jīng)</a>》便是被譽(yù)為“中國(guó)茶圣”的<ahref="/authorv_aa25735b0226.aspx"target="_blank">陸羽</a>所作。其中對(duì)茶葉的起源和歷史、茶葉的加工及生長(zhǎng)等問(wèn)題的介紹，對(duì)當(dāng)時(shí)及后代具有深遠(yuǎn)影響。a{text-decoration:none;color:blue;}將<a>標(biāo)記樣式設(shè)置為none，去除刪除線，字體為藍(lán)色。小結(jié)前端技術(shù)開(kāi)發(fā)02HTML中的a標(biāo)記用于創(chuàng)建超鏈接,默認(rèn)鏈接文字下方有下劃線。設(shè)置text-decoration:none;可以去掉下劃線。text-decoration可以同時(shí)設(shè)置下劃線或刪除線的顏色和線型。

如：p{text-decoration:underlinedottedred;}span{text-decoration:line-throuthwavyblue;}使用text-decoration時(shí)要注意：

感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》字間距和詞間距信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》前端技術(shù)開(kāi)發(fā)知識(shí)儲(chǔ)備設(shè)置字間距1設(shè)置詞間距2字間距前端技術(shù)開(kāi)發(fā)01在英文中，可以控制字母之間的間距，在中文中可以控制字與字之間的間距。CSS中使用letter-spacing控制字間距。語(yǔ)法letter-spacing:normal|length;字間距前端技術(shù)開(kāi)發(fā)01字間距l(xiāng)etter-spacing<h1>中國(guó)世界遺產(chǎn)名單</h1><pclass="p1">長(zhǎng)城TheGreatWall</p><pclass="p2">麗江古城OldTownofLijiang</p><pclass="p3">莫高窟M(jìn)ogaoCaves</p>.p1{letter-spacing:normal;}.p2{letter-spacing:5px;

}.p3{letter-spacing:1em;}字間距前端技術(shù)開(kāi)發(fā)01說(shuō)明letter-spacing用于設(shè)置字間距；默認(rèn)值為normal,等同于設(shè)置為0；用letter-spacing只對(duì)文字起作用對(duì)于圖片失效；用letter-spacing對(duì)漢字是以一個(gè)字進(jìn)行間隔的，對(duì)于英文是以一個(gè)字母進(jìn)行間隔的。詞間距前端技術(shù)開(kāi)發(fā)02word-spacing屬性控制英文單詞與單詞之間的間距。語(yǔ)法word-spacing:normal|length;設(shè)置對(duì)象中的單詞之間插入的間隔；默認(rèn)值為normal,等同于設(shè)置為0；允許使用負(fù)值，會(huì)使得字母之間變得更緊湊；這個(gè)屬性，可能會(huì)創(chuàng)建字間隔太寬的文檔，所以，word-spacing要謹(jǐn)慎使用說(shuō)明詞間距前端技術(shù)開(kāi)發(fā)02詞間距word-spacing<h1>中國(guó)世界遺產(chǎn)名單</h1><pclass="p1">長(zhǎng)城TheGreatWall</p><pclass="p2">麗江古城OldTownofLijiang</p><pclass="p3">莫高窟M(jìn)ogaoCaves</p>.p1{word-spacing:normal;}.p2{word-spacing:5px;}.p3{word-spacing:10px;}小結(jié)前端技術(shù)開(kāi)發(fā)03CSS中的word-spacing增加或減少單詞間的空白(即字間隔)；letter-spacing增加或減少字符間的空白(即字符間距)；字符間距l(xiāng)etter-spacing一般直接采用瀏覽器默認(rèn)樣式。感謝觀看信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》字間距和詞間距設(shè)置信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開(kāi)發(fā)》案例前端技術(shù)開(kāi)發(fā)01設(shè)置字間距和詞間距<p>China'stourismsectorisseeinganotherbookingfrenzyaheadofthefive-dayMayDayholiday,withlong-hauldomestictripsandoutboundtoursbeingparticularlysoughtbyvisitors,industryplayerssaid.業(yè)內(nèi)人士表示，為期五天的五一假期（5月1日-5日）臨近，中國(guó)旅游業(yè)又迎來(lái)了一輪出行預(yù)訂熱潮，游客尤其青睞國(guó)內(nèi)長(zhǎng)途旅行和出境游。</p><pid="two">China'stourismsectorisseeinganotherbookingfrenzyaheadofthefive-dayMayDayholiday,withlong-hauldomestictripsandoutboundtoursbeingparticularlysoughtbyvisitors,industryplayerssaid.業(yè)內(nèi)人士表示，為期五天的五一假期（5月1日-5日）臨近，中國(guó)旅游業(yè)又迎來(lái)了一輪出行預(yù)訂熱潮，游客尤其青睞國(guó)內(nèi)長(zhǎng)途旅行和出境游。</p>#two{letter-spacing:3px;}案例前端技術(shù)開(kāi)發(fā)01設(shè)置字間距和詞間距<p>China'stourismsectorisseeinganotherbookingfrenzyaheadofthefive-dayMayDayholiday,withlong-hauldomestictripsandoutboundtoursbeingparticularlysoughtbyvisitors,industryplayerssaid.業(yè)內(nèi)人士表示，為期五天的五一假期（5月1日-5日）臨近，中國(guó)旅游業(yè)又迎來(lái)了一輪出行預(yù)訂熱潮，游客尤其青睞國(guó)內(nèi)長(zhǎng)途旅行和出境游。</p><pid="three">China'stourismsectorisseeinganotherbookingfrenzyaheadofthefive-dayMayDayholiday,withlong-hauldomestictripsandoutboundtoursbeingparticularlysoughtbyvisitors,industryplayerssaid.業(yè)內(nèi)人士表示，為期五天的五一假期（5月1日-5日）臨近，中國(guó)旅游業(yè)又迎來(lái)了一輪出行預(yù)訂熱潮，游客尤其青睞國(guó)內(nèi)長(zhǎng)途旅行和出境游。</p>#three{word-spacing:10px;}案例前端技術(shù)開(kāi)發(fā)01設(shè)置字間距和詞間距<p>China'stourismsectorisseeinganotherbookingfrenzyaheadofthefive-dayMayDayholiday,withlong-hauldomestictripsandoutboundtoursbeingparticularlysoughtbyvisitors,industryplayerssaid.業(yè)內(nèi)人士表示，為期五天的五一假期（5月1日-5日）臨近，中國(guó)旅游業(yè)又迎來(lái)了一輪出行預(yù)訂熱潮，游客尤其青睞國(guó)內(nèi)長(zhǎng)途旅行和出境游。</p><pid="four">China'stourismsectorisseeinganotherbookingfrenzyaheadofthefive-dayMayDayholiday,withlong-hauldomestictripsandoutboundtoursbeingparticularlysoughtbyvisitors,industryplayerssaid.</p>

<