HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：為網(wǎng)頁添加CSS樣式表_第1頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：為網(wǎng)頁添加CSS樣式表_第2頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：為網(wǎng)頁添加CSS樣式表_第3頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：為網(wǎng)頁添加CSS樣式表_第4頁
HTML5+CSS3網(wǎng)頁設(shè)計與制作課件：為網(wǎng)頁添加CSS樣式表_第5頁
已閱讀5頁，還剩18頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

HTML5+CSS3網(wǎng)頁設(shè)計與制作為網(wǎng)頁添加CSS樣式表能夠敘述CSS的概念。能夠使用外部樣式法為D清單網(wǎng)頁添加CSS樣式表。能夠使用CSS標(biāo)簽選擇符選擇目標(biāo)標(biāo)簽，使用正確的語法格式編寫樣式代碼。能夠使用CSS設(shè)置文字的大小、顏色和加粗效果。任務(wù)目標(biāo)

為網(wǎng)頁添加CSS樣式表本次任務(wù)要求在上一階段的D清單網(wǎng)頁內(nèi)容基礎(chǔ)上，使用外部樣式法為網(wǎng)頁添加CSS樣式表，并使用CSS樣式設(shè)置整個頁面通用的文字大小樣式效果。完成后的效果圖如圖2-1所示。任務(wù)描述圖2-1設(shè)置頁面通用文字大小后的效果圖

為網(wǎng)頁添加CSS樣式表要使用外部樣式法為D清單頁面添加CSS樣式表，并設(shè)置整個頁面通用的文字大小樣式，需要：學(xué)習(xí)CSS3的基本語法；學(xué)習(xí)引入CSS樣式的方法，正確使用外部樣式法引入CSS樣式表；分析D清單頁面中文字大小樣式，正確使用CSS設(shè)置D清單頁面文字大小樣式。D清單頁面文字大小分析如圖2-1-1所示。任務(wù)分析

為網(wǎng)頁添加CSS樣式表圖2-1-1D清單頁面文字大小分析圖知識與技能準備CSS（CascadingStyleSheet）稱為層疊樣式表，也可以稱為CSS樣式表（或樣式表），其文件擴展名為.css。CSS是用于增強或控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。CSS3是CSS技術(shù)的升級版本，于1999年開始制訂，內(nèi)容涵括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。最終于2001年5月23日W3C完成工作草案并正式公布。1、認識CSS知識與技能準備每個樣式包含兩部分內(nèi)容：選擇器和聲明（或稱為規(guī)則），如圖2-1-2所示：2、CSS3的基礎(chǔ)語法圖2-1-2CSS樣式基本格式知識與技能準備（1）行內(nèi)樣式把CSS樣式代碼添加到HTML5的標(biāo)記中，即作為HTML5標(biāo)記的屬性標(biāo)記存在。例如：<pstyle=”color:red”>紅色字體</p>（2）內(nèi)嵌樣式將CSS樣式代碼添加到<head>與</head>標(biāo)簽之間，并且用<style>和</style>標(biāo)記進行聲明。例如：這種用法也稱為網(wǎng)頁內(nèi)部樣式，適合為單頁面定義CSS樣式，不適合為一個網(wǎng)站或多個頁面定義樣式。其中/*字體為紅色*/為CSS的注釋格式。3、引入CSS樣式12345678<head> <metacharset="utf-8"><title>使用CSS3樣式</title><style>p{color:red;/*字體為紅色*/font:16px;/*字體大小為16px*/

}</style></head>打開VisualStudioCode軟件，輸入如下標(biāo)簽：課堂練習(xí)2-1-1使用CSS樣式設(shè)置文字12345678910111213141516<!doctypehtml><html><head>

<metacharset="utf-8"><title>使用CSS3樣式</title>

<!--CSS樣式--><style>h1{text-align:center;/*字體居中*/

}p{color:blue;/*字體為藍色*/}</style></head>17181920212223<body><h1>CSS樣式</h1><p>內(nèi)嵌樣式</p><p>適合為單頁面定義CSS樣式，不適合為一個網(wǎng)站或多個頁面定義樣式。</p></body></html>課堂練習(xí)2-1-1使用CSS樣式設(shè)置文字效果圖如下：圖2-1-3使用內(nèi)嵌樣式效果圖知識與技能準備（3）外部樣式把樣式放在獨立的文件中，然后使用<link>標(biāo)簽或者@import關(guān)鍵字導(dǎo)入，一般網(wǎng)站都采用這種方法來設(shè)計樣式，真正實現(xiàn)HTML結(jié)構(gòu)和CSS樣式的分離，以便統(tǒng)籌規(guī)劃、設(shè)計、編輯和管理CSS樣式。使用<link>標(biāo)簽使用<link>標(biāo)簽導(dǎo)入外部樣式表文件的代碼如下：rel：用于定義文檔關(guān)聯(lián)，這里表示關(guān)聯(lián)樣式表。type：定義導(dǎo)入文件類型，同style元素一樣。href：指定CSS樣式表所在的位置，此處表示當(dāng)前路徑下名稱為001.css的文件。這里使用的是相對路徑，如果HTML文檔和CSS樣式表沒有在同一路徑下，則需要指定樣式表的絕對路徑或引用位置。3、引入CSS樣式<linkrel=”stylesheet”type=”text/css”herf=”001.css”>知識與技能準備使用@import命令在<style>標(biāo)簽內(nèi)使用@import關(guān)鍵字導(dǎo)入外部樣式表文件的方法如下：使用@import命令導(dǎo)入樣式表，在HTML5文件初始化時，會被導(dǎo)入HTML5文件內(nèi)，作為文件的一部分，類似于內(nèi)嵌效果。而使用<link>標(biāo)簽導(dǎo)入樣式表是在HTML5標(biāo)記需要樣式風(fēng)格時才以鏈接方式引入。3、引入CSS樣式<styletype=”text/css”>@importurl(“001.css”);</style>（1）打開VisualStudioCode軟件，輸入如下標(biāo)簽：課堂練習(xí)2-1-2使用鏈接樣式12345678910111213<!doctypehtml><html><head> <metacharset="utf-8"><title>使用CSS3樣式</title><linkrel="stylesheet"type="text/css"href="a1.css"></head><body><h1>CSS樣式</h1><p>內(nèi)嵌樣式</p><p>適合為單頁面定義CSS樣式，不適合為一個網(wǎng)站或多個頁面定義樣式。</p></body></html>（2）在HTML同一路徑下，新建HTML對應(yīng)的CSS文件（命名為a1.css），輸入如下代碼：12p{color:blue;}/*字體藍色*/h1{text-align:center;}/*字體居中*/知識與技能準備CSS3選擇器用于指定樣式設(shè)置對應(yīng)的目標(biāo)，CSS3選擇器寫法多樣，可針對同種標(biāo)簽進行統(tǒng)一設(shè)置，也可針對指定標(biāo)簽進行設(shè)置。這里先介紹標(biāo)簽選擇器，標(biāo)簽選擇器也稱為類型選擇器，它直接引用HTML標(biāo)簽名稱，用來匹配同名的所有標(biāo)簽。例如上一任務(wù)中的p選擇器，就是用于聲明頁面中所有<p>標(biāo)記的樣式風(fēng)格。其中tagName表示標(biāo)記名稱，例如p、h1等HTML標(biāo)記；property表示CSS3的屬性；value表示CSS3的屬性值。4、CSS3選擇器語法：tagName{property:value}知識與技能準備CSS樣式效果用于設(shè)置不同的標(biāo)簽樣式效果，格式為“屬性名：值1值2…；”。5、CSS樣式效果知識與技能準備font-size屬性用來控制字體的大小。在設(shè)置字體大小時，可以使用絕對單位，也可以使用相對單位。px（pixel，像素），根據(jù)屏幕像素點的尺寸變化而變化。em，相對于父輩字體即包含其元素的頁面標(biāo)簽（如沒有包含元素則按<body>標(biāo)簽）所設(shè)定的大小來定義字體大小。ex，相對于父輩字體的x高度來定義字體的大小。%，以百分比的形式定義字體大小，它與em效果相同，相對于父輩字體的大小來定義字體大小。larger和smaller這兩個關(guān)鍵字將以父元素的字體大小為參考進行換算。5.1文字大?。篺ont-size語法：font-size：字體大小；知識與技能準備CSS使用color屬性來定義字體顏色。5.2文字顏色：color語法：color：顏色值；屬性值說明color_name規(guī)定顏色值為顏色名稱的顏色（如red）hex_number規(guī)定顏色值為十六進制值的顏色（如#ff0000）rgb_number規(guī)定顏色值為RGB代碼的顏色（如rgb(255,0,0)）inherit規(guī)定應(yīng)該從父元素繼承顏色hsl_number規(guī)定顏色值為HSL代碼的顏色（如hsl(0,75%,50%)）hsla_number規(guī)定顏色值為HSLA代碼的顏色（如hsla(120,50%,50%,1)）rgba_number規(guī)定顏色值為RGBA代碼的顏色（如rgba(125,10,45,0.5)）表2-1-1color屬性知識與技能準備font-weight屬性定義字體的粗細程度。normal：正常的字體。相當(dāng)于數(shù)字值400。bold：粗體。相當(dāng)于數(shù)字值700。bolder：定義相對于父標(biāo)簽更重的值。lighter：定義相對于父標(biāo)簽更輕的值。粗度數(shù)值：用數(shù)字表示文本字體粗細。可選用100|200|300|400|500|600|700|800|900數(shù)值。5.3文字加粗：font-weight語法：font-weight：100-900|bold|bolder|lighter|normal；（1）打開VisualStudioCode軟件，輸入如下標(biāo)簽：課堂練習(xí)2-1-3使用CSS設(shè)置文字樣式1234567<div><p>HTML5</p><span>HTML5</span>是構(gòu)建Web內(nèi)容的一種語言描述方式。HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語言方式，被認為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標(biāo)準，并廣泛應(yīng)用于互聯(lián)網(wǎng)應(yīng)用的開發(fā)。</div>（2）設(shè)置<div>內(nèi)的字體大小為20像素，<p>字體大小為父標(biāo)簽的1.5倍，字體加粗，<span>字體顏色為紅色。CSS樣式設(shè)置如下：12345678<style>div{font-size:20px;}p{font-size:1.5em;font-weight:bold;}span{color:red;}</style>課堂練習(xí)2-1-3使用CSS設(shè)置文字樣式效果圖如下：圖2-1-4使用CSS設(shè)置文字樣式任務(wù)實施1、在D清單網(wǎng)頁文件相同的目錄下新建一個文件夾，命名為css。2、創(chuàng)建index.css文件，并將其保存在css文件夾，便于管理，如圖2-1-5所示。3、在階段1完成的index.html網(wǎng)頁頭部<head>中添加<link>標(biāo)簽，引入CSS文件。至此完成了使用外部樣式添加D清單網(wǎng)頁的CSS樣式。參考代碼如下：圖2-1-5保存CSS文件123456<head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width,initial-scale=1"> <title>D清單</title><linkrel="stylesheet"href="css/index.css"/></head>任務(wù)實施4、CSS文件一般可分為兩個部分。第一部分是通用樣式，主要設(shè)置網(wǎng)頁標(biāo)簽的通用樣式效果，將對整個網(wǎng)頁生效，以減少網(wǎng)頁各模塊相同效果的重復(fù)設(shè)置，并且可以在其它頁面中實現(xiàn)復(fù)用，提高開發(fā)效率，此任務(wù)要求完成這一設(shè)置。第二部分是對各具體內(nèi)容獨立設(shè)置效果，個性化強但復(fù)用性差，我們在后面的任務(wù)中進行的樣式設(shè)置主要是此種類型。在移動端添加文本格式設(shè)置

溫馨提示

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

評論

0/150

提交評論