網(wǎng)站設計與網(wǎng)頁制作立體化項目教程（第4版） 課件 1-3 課件：樣式設計-人物介紹頁面美化_第1頁
網(wǎng)站設計與網(wǎng)頁制作立體化項目教程（第4版） 課件 1-3 課件：樣式設計-人物介紹頁面美化_第2頁
網(wǎng)站設計與網(wǎng)頁制作立體化項目教程（第4版） 課件 1-3 課件：樣式設計-人物介紹頁面美化_第3頁
網(wǎng)站設計與網(wǎng)頁制作立體化項目教程（第4版） 課件 1-3 課件：樣式設計-人物介紹頁面美化_第4頁
網(wǎng)站設計與網(wǎng)頁制作立體化項目教程（第4版） 課件 1-3 課件：樣式設計-人物介紹頁面美化_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費閱讀

付費下載

下載本文檔

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

文檔簡介

1-3任務3：樣式設計-人物介紹頁面美化單元一：基本技能篇1-3任務3：樣式設計-人物介紹頁面美化（1）掌握CSS樣式的分類。（2）掌握CSS語法規(guī)則。（3）掌握CSS選擇器。（4）掌握CSS字體、文本、背景常用樣式屬性。（5）能對頁面進行基本樣式的設計。能力要求學習導覽任務概述為錢學森先生的人物介紹頁面設計基本樣式，包括引入外部樣式表，設置頁面中字體、文本、背景樣式。1-3任務3：樣式設計-人物介紹頁面美化任務思考（1）為什么稱CSS是層疊樣式表？

（2）ID選擇器與類選擇器有何區(qū)別，兩者的應用場景是怎樣的？

（3）對多個選擇器設置相同的樣式，如何寫CSS規(guī)則？1-3任務3：樣式設計-人物介紹頁面美化回顧1-3任務3：樣式設計-人物介紹頁面美化CSS簡介CSS全稱為“層疊樣式表(CascadingStyleSheets)”，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如字體、文本、背景等。1.內容與表現(xiàn)分離

2.網(wǎng)頁的表現(xiàn)統(tǒng)一，容易修改

3.豐富的樣式，使得頁面布局更加靈活

4.減少網(wǎng)頁的代碼量，增加網(wǎng)頁的瀏覽速度，節(jié)省網(wǎng)絡帶寬

5.運用獨立于頁面的CSS，有利于網(wǎng)頁被搜索引擎收錄CSS優(yōu)勢：1-3任務3：樣式設計-人物介紹頁面美化CSS優(yōu)勢<span>標簽定義及使用說明<span>用于對文檔中的行內元素進行組合。<span>標簽沒有固定的格式表現(xiàn)。當對它應用樣式時，它才會產(chǎn)生視覺上的變化。如果不對<span>應用樣式，那么<span>元素中的文本與其他文本不會任何視覺上的差異。<span>標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式。1-3任務3：樣式設計-人物介紹頁面美化CSS語法CSS由三個部分構成：選擇器（selector），屬性（properties）和屬性的取值（value）?；靖袷饺缦拢簊elector{property:value}（選擇符{屬性：值}）1-3任務3：樣式設計-人物介紹頁面美化樣式表種類（1）內聯(lián)式CSS樣式

<pstyle="font-size:12px;color:red;">字體是12像素的紅色字</p>。（2）嵌入式CSS樣式

<head><styletype="text/css"> p{font-family:"宋體";font-size:12px;color:red;}</style></head>（3）外部式CSS樣式把所有的樣式存放在一個以.css為擴展名的文件里，然后鏈接到各個網(wǎng)頁中：

<linkhref=“css/style.css"rel="stylesheet"type="text/css">記住他們的優(yōu)先級：內聯(lián)式>嵌入式>外部式1-3任務3：樣式設計-人物介紹頁面美化任務一打開“1-3-1.html”，學習樣式表種類，比較三者的優(yōu)先級。1-3任務3：樣式設計-人物介紹頁面美化CSS選擇器每一條css樣式聲明（定義）由兩部分組成，形式如下：元素選擇器類選擇器ID選擇器子選擇器后代選擇器通用選擇器偽類選擇器分組選擇器1-3任務3：樣式設計-人物介紹頁面美化任務二打開“qianxshtml及style.css”，學習css選擇器。1-3任務3：樣式設計-人物介紹頁面美化元素選擇器元素選擇器其實就是html代碼中的標簽。如編輯器中的<html>、<body>、<h1>、<p>、<img>語法如下：h1{font-size:36px;color:#1a2857;text-align:center;}1-3任務3：樣式設計-人物介紹頁面美化類選擇器類選擇器在css樣式編碼中是最常用到的，如為文字段落添加類名indent，設置字符縮進2em。語法如下：注意：1、英文圓點開頭2、類選擇器名稱一般以英文字母開頭，有一定的語義.類選擇器{text-indent:2em;}1-3任務3：樣式設計-人物介紹頁面美化ID選擇器ID選擇器用法類似于類選擇符，語法如下：注意：1、為標簽設置id="ID名稱"，而不是class="類名稱"。2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。#ID選擇器{font-size:14px;color:#ff0000;}1-3任務3：樣式設計-人物介紹頁面美化區(qū)別1、ID選擇器只能在文檔中使用一次。下面代碼是正確的：下面代碼是錯誤的：<p>之后，他通過類型電影<spanclass="redTxt">《戰(zhàn)狼》</span>系列找到了具有個人獨特風格的電影之路，并在戰(zhàn)爭類型片領域里取得了巨大的成功。吳京在<spanclass="redTxt">《戰(zhàn)狼2》</span>中的搏命演出沒有白費，他使得冷門的國產(chǎn)軍事片引發(fā)了觀影熱潮。</p><p>之后，他通過類型電影<spanid="redTxt">《戰(zhàn)狼》</span>系列找到了具有個人獨特風格的電影之路，并在戰(zhàn)爭類型片領域里取得了巨大的成功。吳京在<spanid="redTxt">《戰(zhàn)狼2》</span>中的搏命演出沒有白費，他使得冷門的國產(chǎn)軍事片引發(fā)了觀影熱潮。</p>1-3任務3：樣式設計-人物介紹頁面美化區(qū)別2、可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。下面的代碼是正確的下面的代碼是不正確的<p>之后，他通過類型電影<spanclass="redTxtbigsize">《戰(zhàn)狼》</span>系列找到了具有個人獨特風格的電影之路，并在戰(zhàn)爭類型片領域里取得了巨大的成功。吳京在《戰(zhàn)狼2》中的搏命演出沒有白費，他使得冷門的國產(chǎn)軍事片引發(fā)了觀影熱潮。</p><p>之后，他通過類型電影<spanid="redTxtbigsize">《戰(zhàn)狼》</span>系列找到了具有個人獨特風格的電影之路，并在戰(zhàn)爭類型片領域里取得了巨大的成功。吳京在《戰(zhàn)狼2》中的搏命演出沒有白費，他使得冷門的國產(chǎn)軍事片引發(fā)了觀影熱潮。</p>1-3任務3：樣式設計-人物介紹頁面美化子選擇器用于選擇指定標簽元素的第一代子元素，語法如下：.works>li{border:1pxsolid#ff0000;}1-3任務3：樣式設計-人物介紹頁面美化后代選擇器用于選擇指定標簽元素下的后輩元素，語法如下：.worksli{border:1pxsolid#ff0000;}1-3任務3：樣式設計-人物介紹頁面美化后代選擇器如為文本“兩彈一星”添加strong標簽，并設置為紅色，可以用后代選擇器。.indentstrong{color:#ff0000;}1-3任務3：樣式設計-人物介紹頁面美化偽類選擇器

我們最常用的是4種a（錨）元素的偽類，它表示動態(tài)鏈接在4種不同的狀態(tài)：link、visited、active、hover。我們把它們分別定義不同的效果：a:link{color:#ff0000;text-decoration:none}/*未訪問的鏈接*/a:visited{color:#00ff00;text-decoration:none}/*已訪問的鏈接*/a:hover{color:#ff00ff;text-decoration:underline}/*鼠標在鏈接上*/a:active{color:#0000ff;text-decoration:underline}/*激活鏈接*/1-3任務3：樣式設計-人物介紹頁面美化其他選擇器通用選擇器：使用一個（*）號指定，它的作用是匹配html中所有標簽元素語法如下：分組選擇器：當你想為html中多個標簽元素設置同一個樣式時，可以使用分組選擇符（,）*{color:#ff0000;}p,span{color:#ff0000;}1-3任務3：樣式設計-人物介紹頁面美化CSS基礎樣式css樣式包含背景、文本、列表、表格、邊框、定位等：參考文檔：css2.0中文手冊.chm1-3任務3：樣式設計-人物介紹頁面美化CSS字體屬性1-3任務3：樣式設計-人物介紹頁面美化CSS文本屬性1-3任務3：樣式設計-人物介紹頁面美化CSS背景屬性1-3任務3：樣式設計-人物介紹頁面美化CSS背景屬性1-3任務3：樣式設計-人物介紹頁面美化屬性描述length設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為auto(自動)percentage將計算相對于背景定位區(qū)域的百分比。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"auto(自動)"cover此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。contain此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。

background-size屬性值CSS背景屬性1-3任務3：樣式設計-人物介紹頁面美化【示例代碼】1-3-2.html,background-size取值為：cover、100%和contain的區(qū)別。background-size取值為100%background-size取值為coverbackground-s

溫馨提示

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

最新文檔

評論

0/150

提交評論