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

下載本文檔

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

文檔簡介

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

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

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

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

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

溫馨提示

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

評論

0/150

提交評論