網頁設計與制作-HTML5 + CSS3 課件 任務6 設計“學習資料”子頁面_第1頁
網頁設計與制作-HTML5 + CSS3 課件 任務6 設計“學習資料”子頁面_第2頁
網頁設計與制作-HTML5 + CSS3 課件 任務6 設計“學習資料”子頁面_第3頁
網頁設計與制作-HTML5 + CSS3 課件 任務6 設計“學習資料”子頁面_第4頁
網頁設計與制作-HTML5 + CSS3 課件 任務6 設計“學習資料”子頁面_第5頁
已閱讀5頁,還剩61頁未讀 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

網頁設計與制作HTML5+CSS3任務6設計“學習資料”子頁面第3章網頁的表現標準知識目標技能目標素質目標(1)掌握CSS的相關概念。(2)掌握CSS的定義與使用方法。(3)掌握CSS文本修飾的常用屬性。(1)能夠書寫規范的CSS樣式,引用CSS樣式。(2)能夠使用CSS設置頁面中不同的文本樣式。(3)能夠靈活運用CSS選擇器(1)掌握并遵循Web開發標準,培養嚴謹的工作作風。(2)培養歸納思維能力。(3)加強實踐教育,提升實踐能力。CSS基礎與語法CSS字體、段落與文本修飾設置任務實現第3章網頁的表現標準1.CSS基礎與語法1.1CSS樣式設置規則1.2引用CSS樣式表1.3CSS選擇器1.4選擇器的優先級第3章網頁的表現標準1.1CSS樣式設置規則1.CSS基礎與語法CSS:是CascadingStyleSheet的縮寫,即層疊樣式表,是用來美化網頁的。通過CSS樣式設置網頁頁面的格式,可以實現結構標準與表現標準的分離,即頁面的內容與頁面的格式分離。只要修改CSS樣式表文件,就可以改變整個網站的風格,使得網站維護格式方便、高效,還可以統一整個網站站點的風格。1.1CSS樣式設置規則1.CSS基礎與語法樣式表的每個規則都有兩個主要部分:選擇器和聲明部分。CSS樣式規則的語法格式如下:選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;……}選擇器用于指定CSS樣式要應用在哪個對象上。大括號中是具體CSS屬性的設置,用來給指定的元素設置具體的樣式。聲明則用于定義樣式屬性,聲明由屬性和屬性值兩部分組成;屬性是指對指定的對象設置的樣式屬性,如字體大小、文本顏色等;屬性和屬性值以“鍵值對”的形式出現的;屬性和屬性值之間用英冒號“:”連接;多個屬性的設置用英文分號“;”隔開。1.1CSS樣式設置規則1.CSS基礎與語法書寫CSS樣式時,除了要遵循CSS樣式規則外,還必須注意以下幾點。(1)CSS樣式中的選擇器嚴格區分大小寫,但屬性和屬性值不區分大小寫;建議選擇器、屬性和屬性值都采用小寫的方式。(2)屬性的設置之間用英文逗號隔開,最后一個屬性分號可以省略;建議保留。(3)屬性值由多個單詞組成且中間包含空格,必須為屬性值加上英文引號;例如:h1{font-family:"arialblack";}(4)在編寫CSS代碼時,為了提高代碼的可讀性,通常需要加上CSS注釋。1.2引用CSS樣式表1.CSS基礎與語法要使用CSS修飾網頁,就需要在HTML文件中引入CSS樣式表。通常引用CSS樣式表有3種引用方式。1.行內樣式表也稱為內聯樣式表,是直接在HTML標簽中添加的style標簽屬性,屬性的內容就是CSS屬性的設置。格式:<標簽名style=”屬性1:屬性值1;屬性2:屬性值2……”>內容</標簽名>例如:<pstyle=”color:red;font-size:24px;”>文本內容</p>行內樣式表用法簡單,效果直觀;但不能做到網頁的結構標準(網頁內容)與表現標準(樣式)的分離,不利于后期網站的維護,不推薦使用。1.2引用CSS樣式表1.CSS基礎與語法2.內部樣式表內部樣式表是將CSS樣式表嵌入到HTML文件的文件頭<head>。格式:<head><styletype="text/css">選擇器{樣式屬性:屬性值;……}</style></head>type的屬性值為"text/css",讓瀏覽器知道<style>標簽包含的是CSS代碼1.2引用CSS樣式表1.CSS基礎與語法內部樣式表中的所有代碼都集中到head標簽對中,便于查找和修改;看上去好像實現了網頁的結構標準(網頁內容)與表現標準(樣式)的分離;但此方法只適合于單個頁面的制作,若某網站中的網頁頁面數量龐大,當需要對頁面進行統一改變時,需要一個頁面一個頁面地修改,工作量大,不推薦使用。<styletype="text/css">h1{color:red;text-align:center;}</style><body><h1>這是一個一級標題</h1></body>1.2引用CSS樣式表1.CSS基礎與語法3.外部樣式表將所有的樣式規則放在一個或多個以“.css”為擴展名的外部樣式表文件中,在HTML文檔中的<head></head>標簽中加入link標簽來引用外部樣式表文件。link標簽的語法格式如下:<linkhref="CSS文件的路徑"rel="stylesheet"type="text/css"/>1.2引用CSS樣式表1.CSS基礎與語法link標簽需要包含在head標簽中使用,它的3個標簽屬性分別為:(1)href:指定CSS文件的路徑,可以使用相對路徑,也可以使用絕對路徑。(2)rel="stylesheet":指定當前文檔與被鏈接文檔之間的關系,此處stylesheet表示被鏈接的文檔是一個樣式表文件。(3)type="text/css":用來規定被鏈接文檔的類型,此處“text/css”表示鏈接的外部文件為CSS樣式表。1.2引用CSS樣式表1.CSS基礎與語法example2.html頁面如下<head><linkrel="stylesheet"type="text/css"href="exampe2.css"></head><body><h1>這是一個一級標題</h1></body>exampe2.css樣式如下h1{color:red;/*設置顏色為紅色*/text-align:center;/*水平居中*/}1.3CSS選擇器1.CSS基礎與語法1.基礎選擇器基礎選擇器有四種:元素選擇器、類選擇器、id選擇器和通用選擇器。(1)元素選擇器:用HTML元素名作為選擇器,其語法格式如下:元素名{屬性1:屬性值1;屬性2:屬性值2;……}將CSS樣式應用于指定的HTML元素,首先需要找到該目標標簽,在CSS中,能夠完成這一任務被稱為選擇器。CSS選擇器分類:基礎選擇器、復合選擇器、偽類選擇器、偽元素選擇器、屬性選擇器。1.3CSS選擇器1.CSS基礎與語法<body><h1>信息工程學院黨總支開展黨的二十大精神宣講暨入黨申請人集體談話</h1><div><p>為學習宣傳貫徹黨的二十大精神,做好入黨申請人的教育培養工作,3月30日晚,信息工程學院黨總支在報告廳開展黨的二十大精神宣講暨入黨申請人集體談話,活動由信息工程學院黨總支組織委員姚玲潔主持。</p></div></body><styletype="text/css">h1{color:red;/*設置顏色為紅色*/text-align:center;/*水平居中*/}div{width:500px;/*寬度500px*/height:500px;/*高度500px*/margin:0auto;/*設置div標記居中*/}p{text-indent:2em;/*設置段落標記的內容首行縮進2字符*/}</style>1.3CSS選擇器1.CSS基礎與語法(2)class類選擇器class類選擇器也稱為自定義選擇器,它能夠把相同元素分類定義成不同的樣式。類選擇器使用“.”(英文點號)開頭,后面緊跟類名,語法格式如下:.類名{屬性1:屬性值1;屬性2:屬性值2;……}要注意以下幾點:1)類選擇器嚴格區分大小寫,屬性和值不區分大小寫,一般將“選擇器、屬性和值”都采用小寫的方式。2)盡量使用英文,英文簡寫或者統一使用拼音。不能數字開頭,建議以字母開頭。3)盡量不要使用縮寫,除非一看就懂的單詞。1.3CSS選擇器1.CSS基礎與語法<h1class="redindent">信息工程學院黨總支開展黨的二十大精神宣講暨入黨申請人集體談話</h1><div><pclass="redcenter">為學習宣傳貫徹黨的二十大精神,做好入黨申請人的教育培養工作,3月30日晚,信息工程學院黨總支在報告廳開展黨的二十大精神宣講暨入黨申請人集體談話,活動由信息工程學院黨總支組織委員姚玲潔主持。</p></div><styletype="text/css">.red{color:red;/*設置顏色為紅色*/}h1{text-align:center;/*水平居中*/}.center{width:500px;/*寬度500px*/margin:0auto;/*設置div標記居中*/}.indent{text-indent:2em;/*設置段落標記的內容首行縮進2字符*/}</style>1.3CSS選擇器1.CSS基礎與語法(3)id選擇器id選擇器是用來對某個單一元素定義單獨的樣式,使用時以“#”開頭,后面緊跟id名稱。語法格式如下:#id名{屬性1:屬性值1;屬性2:屬性值2;……}id選擇器要慎用。由于id是頁面中唯一的,一般會留給頁面里的JavaScript使用;而class選擇器一般用來定義元素公用的規則,更具有通用性,復用性強,從某種程度上來說,還能減少代碼量,維護起來也方便。1.3CSS選擇器1.CSS基礎與語法<styletype="text/css">#box1{width:100px;height:100px;background:red;}#box2{width:100px;height:100px;background:green;}</style><body><divid="box1"></div><divid="box2"></div></body>1.3CSS選擇器1.CSS基礎與語法(4)通用選擇器通用選擇器是一種特殊的選擇器,用“*”來表示,可以定義頁面上的所有的HTML元素的樣式。語法格式如下:*{屬性1:屬性值1;屬性2:屬性值2;……}例如,通常在制作網頁時首先將頁面中所有元素的外邊距和內邊距設置為0,代碼如下:*{margin:0px;/*外邊距設置為0*/padding:0px;/*內邊距設置為0*/}通用選擇器在實際開發中很少使用。1.3CSS選擇器1.CSS基礎與語法2.復合選擇器復合選擇器是由基礎選擇器組合形成的,也叫組合選擇器。通常是由兩個或者多個基礎選擇器通過不同的方式組合而成。常用的復合選擇器有:后代選擇器、子選擇器、并集選擇器、交集選擇器、偽類選擇器等等。(1)后代選擇器后代選擇器又稱為包含選擇器,派生選擇器。用來選擇元素或元素組的后代,其寫法就是把外層標簽寫在前面,內層標簽寫在后面,中間使用“空格”分割。語法格式如下:選擇器1選擇器2{屬性1:屬性值1;……}1.3CSS選擇器1.CSS基礎與語法<styletype="text/css">/*使用后代選擇器為div元素里的所有p元素加下劃線*/divp{text-decoration:underline;}</style><body><h1>信息工程學院黨總支開展黨的二十大精神宣講暨入黨申請人集體談話</h1><div><p>為學習宣傳貫徹黨的二十大精神,做好入黨申請人的教育培養工作,3月30日晚,信息工程學院黨總支在報告廳開展黨的二十大精神宣講暨入黨申請人集體談話,活動由信息工程學院黨總支組織委員姚玲潔主持。</p></div></body>1.3CSS選擇器1.CSS基礎與語法(2)子選擇器子選擇器只能選擇某個元素的子元素,使用時用“>”連接。語法格式如下:選擇器1>選擇器2{屬性1:屬性值1;屬性2:屬性值2;……}與后代選擇器相比子選擇器只能選擇作為某元素子元素的元素,如果不希望選擇任意的后代元素,而是希望縮小范圍,只選擇某個元素的子元素,就可以使用子選擇器。1.3CSS選擇器1.CSS基礎與語法<div><divclass="style1">讓我們看看<p><span>子選擇器</span>的使用方法</p></div><divclass="style2">讓我們看看<p><span>子選擇器</span>的使用方法</p></div></div><styletype="text/css">.style1span{font-size:24px;text-decoration:underline;}.style2>span{font-size:24px;text-decoration:underline;}</style>1.3CSS選擇器1.CSS基礎與語法(3)并集選擇器并集選擇器也叫分組選擇器,可以選擇多組標簽(元素)并定義相同的樣式。使用時用英文逗號連接。語法格式如下:選擇器1,選擇器2{屬性1:屬性值1;屬性2:屬性值2;……}例如代碼:h1,.box{color:#f000;font-size:24px;}h1{color:#f000;font-size:24px;}.box{color:#f000;font-size:24px;}等同于1.3CSS選擇器1.CSS基礎與語法(4)交集選擇器交集選擇器是指選中同時符合多個選擇器條件的元素,使用時不用任何符號連接。其中第一個為元素選擇器,第二個為類選擇器或者id選擇器。兩個選擇器之前不能有空格。語法格式如下:選擇器1選擇器2{屬性1:屬性值1;屬性2:屬性值2;……}1.3CSS選擇器1.CSS基礎與語法<styletype="text/css">/*選擇既是span,同時類名又是number的元素*/span.number{text-decoration:underline;}</style><body><p>這是一個普通的段落</p><spanclass="number">45</span><divclass="number">100</div><span>這是普通的span</span></body>1.3CSS選擇器1.CSS基礎與語法(5)相鄰兄弟選擇器相鄰兄弟選擇器選擇緊貼在元素之后的另一個元素,而且它們具有相同的父元素。語法格式如下:選擇器1+選擇器2{屬性1:屬性值1;屬性2:屬性值2;……}1.3CSS選擇器1.CSS基礎與語法<styletype="text/css">div+p{text-decoration:underline;}</style><h1>相鄰兄弟選擇器</h1><p>選擇所有作為指定元素的相鄰的同級元素。</p><div><p>div中的段落1。</p><p>div中的段落2。</p></div><p>段落3。不在div中。</p><p>段落4。不在div中。</p>1.3CSS選擇器1.CSS基礎與語法(6)通用兄弟選擇器通用兄弟選擇器選擇指定元素后面的所有兄弟元素,而且它們具有相同的父元素。語法格式如下:選擇器1~選擇器2{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;……}1.3CSS選擇器1.CSS基礎與語法<styletype="text/css">div~p{

text-decoration:underline;}</style><h1>通用兄弟選擇器</h1><p>選擇指定元素的所有同級元素。</p><div><p>div中的段落1。</p><p>div中的段落2。</p></div><p>段落3。不在div中。</p><code>一些代碼</code><p>段落4。不在div中。</p>1.3CSS選擇器1.CSS基礎與語法3.偽類選擇器偽類之所以名字中有個“偽”字,是因為它所指定的對象在文檔中并不存在,它指定的是一個或者與其相關的選擇器的狀態。為元素添加對應樣式時,這個狀態是根據用戶行為而動態變化的。使用偽類時用英文冒號來表示,偽類的分為狀態偽類和結構性偽類。狀態偽類:是基于元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的,因此該元素會根據其狀態呈現不同的樣式。當元素處于某狀態時會呈現該樣式,而進入另一狀態后,該樣式也會失去。超級鏈接偽類是最應用最廣泛的狀態偽類。鏈接能夠以不同的方式顯示。常見的超級鏈接偽類主要包括:(1):link應用于未訪問過的鏈接狀態,即超鏈接點擊之前;(2):visited應用于已訪問過的鏈接狀態,即超鏈接被訪問過之后;(3):hover應用于鼠標懸停到鏈接上的狀態,也就是鼠標放到頁面的某個元素上時或劃過某個元素時;(4):active應用被激活的鏈接狀態,即鼠標點擊頁面中的某個鏈接但是不松手時;1.3CSS選擇器1.CSS基礎與語法<styletype="text/css">a:link{color:red;}a:visited{color:green;}a:hover{text-decoration:none;}a:active{color:blue;}</style><body><ahref="#">這是一個鏈接</a></body>未訪問過已訪問過的鼠標懸停時鼠標點擊時1.3CSS選擇器1.CSS基礎與語法4.偽元素選擇器CSS偽元素用于設置元素指定部分的樣式。用于創建一些不在文檔樹中的元素,并為其添加樣式。語法格式如下:選擇器::偽元素{屬性1:屬性值1;屬性2:屬性值2;}以下是常用的偽元素:(1)::first-letter選擇元素文本的第一個字母;(2)::first-line選擇元素文本的第一行;(3)::before在元素內容的最前面添加新內容;(4)::after在元素內容的最后面添加新內容;(5)::selection匹配用戶被用戶選中或者處于高亮狀態的部分;(6)::placeholder匹配占位符的文本,只有元素設置了placeholder屬性時,該偽元素才能生效。其中偽元素為“::before”和“::after”的偽元素選擇器,必須配合content屬性給元素添加一些內容。1.3CSS選擇器1.CSS基礎與語法<styletype="text/css">.style1::before{content:'***';}.style2::after{content:'***';}</style><body><pclass="style1">這是段落1</p><p>這是段落2</p><pclass="style2">這是段落3</p></body>1.4選擇器的優先級1.CSS基礎與語法選擇器的優先級關系如下:行內樣式>id選擇器>類選擇器>元素選擇器>通配符選擇器>繼承>瀏覽器默認屬性。行內樣式>內部樣式>外部樣式。1.4選擇器的優先級1.CSS基礎與語法<styletype="text/css">div{color:yellow;}#box{color:blue;}.dv{color:green;}*{color:black;}</style><body><divid="box"class="dv"style="color:red;">這是一個div</div></body>CSS基礎與語法CSS字體、段落與文本修飾設置任務實現第3章網頁的表現標準2.CSS字體、段落與文本修飾設置2.1字體樣式常用屬性2.2段落樣式常用屬性2.3文本修飾常用屬性第3章網頁的表現標準2.1字體樣式常用屬性2.CSS字體、段落與文本修飾設置

CSS的網頁排版不僅可以控制文本的大小、顏色、對齊方式、字體,還可以控制行高、首行縮進、字母間距和字符間距等。1.font-family屬性:font-family屬性用于設置元素的字體。語法格式如下:font-family:“字體1”,”字體2”,”字體3”;例如下面代碼:p{font-family:"微軟雅黑","宋體","楷體";}2.1字體樣式常用屬性2.CSS字體、段落與文本修飾設置2.font-size屬性:font-size屬性用于設置字體的大小。語法格式如下:font-size:length(數值)|關鍵字|%(百分比);font-size屬性具體的值及含義2.1字體樣式常用屬性2.CSS字體、段落與文本修飾設置<styletype="text/css">h1{font-size:40px;}h2{font-size:30px;}.font1{font-size:14px;}.font3{font-size:20px;}</style><h1>這是標題1</h1><h2>這是標題2</h2><pclass="font1">這是段落1。</p><p>這是段落2。</p><pclass="font3">這是段落3。</p>2.1字體樣式常用屬性2.CSS字體、段落與文本修飾設置3.font-weight屬性:用于定義字體的粗細。語法格式如下:font-weight:normal|bold|bolder|lighter|number|initial|inherit;font-weight屬性具體的值及含義2.1字體樣式常用屬性2.CSS字體、段落與文本修飾設置4.font-style屬性:用于設置字體傾斜。語法格式如下:font-style:normal|italic|oblique|inherit;font-style屬性具體的值及含義2.1字體樣式常用屬性2.CSS字體、段落與文本修飾設置<style>p.normal{font-style:normal;font-weight:normal;}p.thick{font-weight:bold;}p.thicker{font-weight:900;}p.italic{font-style:italic;}p.oblique{font-style:oblique;}</style><body><pclass="normal">這是一個段落,正常</p><pclass="light">這是一個段落,細的字符</p><pclass="thick">這是一個段落,粗體</p><pclass="thicker">這是一個段落.粗體</p><pclass="italic">這是一個段落,斜體。</p><pclass="oblique">這是一個段落,斜體。</p></body>2.1字體樣式常用屬性2.CSS字體、段落與文本修飾設置5.font屬性:復合屬性,用于綜合設置字體樣式。。語法格式如下:選擇器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}等價于p{font:italicbold24px"宋體";}p{font-style:italic;font-weight:bold;font-size:24px;font-family:"宋體";}2.1字體樣式常用屬性2.CSS字體、段落與文本修飾設置6.color屬性:復合屬性,用于綜合設置字體樣式。。用來定義文本的顏色。其屬性值常用的取值方式有如下幾種:(1)關鍵字,即預定義的顏色值。如red、green、blue等;(2)十六進制值,即用#RRGGBB規定十六進制顏色,其中RR(紅色)、GG(綠色)和BB(藍色)十六進制整數指定顏色的成分(分量)。所有值必須在00到FF之間。(3)顏色值由rgb()函數規定,語法格式如下:rgb(red,green,blue)其中參數red、green、blue用來定義顏色的強度,可以是0到255之間的整數,也可以是從0%到100%百分比值。(4)rgba值rgba顏色值在是rgb顏色值的基礎上加上alpha通道,用來指定了顏色的透明度。語法格式如下:rgba(red,green,blue,alpha)其中alpha參數是一個介于0.0(完全透明)和1.0(完全不透明)之間的數字。2.1字體樣式常用屬性2.CSS字體、段落與文本修飾設置<styletype="text/css">.p1{color:red}/*紅色*/.p2{color:#00ff00;}/*綠色*/.p3{color:#00f;}/*藍色*/</style><body><pclass="p1">這是段落1</p><pclass="p2">這是段落1</p><pclass="p3">這是段落1</p></body>2.2段落樣式常用屬性2.CSS字體、段落與文本修飾設置1.text-align屬性:用于設置元素中文本的水平對齊方式。語法格式如下:text-align:left|right|center|justify;text-align屬性值及含義2.2段落樣式常用屬性2.CSS字體、段落與文本修飾設置2.text-indent屬性:用于實現首行縮進。語法格式如下:text-indent:length(長度)|百分比|inherit;text-indent屬性值及含義2.2段落樣式常用屬性2.CSS字體、段落與文本修飾設置3.line-height屬性:控制行與行之間的垂直距離。語法格式如下:line-height:normal|數字|length|百分比;line-height屬性值及含義2.2段落樣式常用屬性2.CSS字體、段落與文本修飾設置<styletype="text/css">h1,h5{text-align:center;}h5{

color:#999;}.p1{

text-indent:2em;}.p2{

line-height:1.5em;}.p3{

text-align:right;}</style><body><h1>信息工程學院黨總支開展“法德講堂”活動</h1><h5>時間:2023-03-14點擊數:15</h5><pclass="p1">為進一步營造“重法厚德、法德并舉”的濃厚氛圍,豐富學生的法律知識,3

月7日,信息工程學院黨總支組織學生在教學樓C406開展“法德講堂”活動。本次活動由信息工程學院輔導員劉浩為主持,50余名學生參與。</p><pclass="p2">本期法德講堂以“青春韶華與法同行”為主題,圍繞思省心、學模范、看短片、誦經典、談感悟、送吉祥六個環節開展,并結合自身的經驗教訓,讓同學們更好地理解國家、社會以及學校為何要不斷加強大學生法治教育,引導大家正確認識民主與法制、自由與紀律、道德與法律的關系,真正做到知法、學法、懂法、守法、用法、護法</p><pclass="p1">活動中,學生們觀看了大學生自制短片——《那一年,我被騙入傳銷》,并分享了心中感受,共同感悟法治的力量,觀看了警示案例。活動最后,學生代表為參加活動的師生送上一本筆記本作為紀念。</p><pclass="p2">通過此次六個環節活動的開展,大家紛紛表示,要學好人,長好心,在社會上當好人,做好事,立德修身、遵紀守法,增強主觀能動性,自覺做一個知法、學法、守法的新時代大學生。</p><pclass="p3">(供稿:劉浩為;編輯:辛國盛)</p></body>2.2文本修飾常用屬性2.CSS字體、段落與文本修飾設置1.text-decoration屬性:實現對文本進行簡單的修飾。語法格式如下:text-decoration:none|underline|overline|line-through;text-decoration屬性值及含義2.3文本修飾常用屬性2.CSS字體、段落與文本修飾設置<body><h1style="text-decoration:underline;">下劃線</h1><h1style="text-decoration:line-through;">刪除線</h1><h1style="text-decoration:overline;">上劃線</h1><p><ahref="#"style="text-decoration:none;">鏈接文本</a>,默認情況下鏈接是有下劃線的,可以設置為無。</p><pstyle="text-decoration:underlineoverline;">上劃線與下劃線</p></body>text-decoration屬性是一個復合屬性,是text-decoration-line、text-decoration-color、text-decoration-style三種屬性的簡寫2.3文本修飾常用屬性2.CSS字體、段落與文本修飾設置2.letter-spacing屬性:用于增加或減少字符間的空白(字符間距)。語法格式如下:letter-spacing:normal|length;letter-spacing屬性值及含義2.3文本修飾常用屬性2.CSS字體、段落與文本修飾設置<styletype="text/css">.title1{letter-spacing:3px;}.title2{

letter-spacing:-3px;}</style><body><h1class="title1">這是標題1</h1><h1>這是標題1</h1><h1class="title2">這是標題1</h1></body>2.3文本修飾常用屬性2.CSS字體、段落與文本修飾設置3.word-spacing屬性:用于指定文本中英文單詞之間的間距(即字間距),這個屬性設置元素中字之間插入多少空白符。語法格式如下:word-spacing:normal|length;word-spacing屬性值及含義2.3文本修飾常用屬性2.CSS字體、段落與文本修飾設置4.text-transf

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論