網(wǎng)頁設(shè)計方案與制作ppt課件

1、網(wǎng)頁設(shè)計與制造網(wǎng)頁設(shè)計與制造江西信息運用職業(yè)技術(shù)學院電子商務(wù)與管理系第第7章章 運用運用CSS款式控制網(wǎng)頁外觀款式控制網(wǎng)頁外觀 教學目的： 運用CSS款式控制網(wǎng)頁外觀。 教法：教、學、做一體認識認識CSS CSS：Cascading Style Sheets，層疊款式表，級聯(lián)款式表。 一組格式設(shè)置規(guī)那么，以控制頁面外觀。 網(wǎng)頁表現(xiàn)與內(nèi)容分別的一種款式設(shè)計言語。頁面內(nèi)容存放在頁面里，而CSS款式存放在CSS文件或頁面文檔的某個位置，普通是在 。 更容易維護站點；閱讀器下載頁面速度快；利于搜索引擎搜索軟件抓取站點信息?？钍椒N類款式種類 外部款式：將網(wǎng)頁鏈接到外部款式表。 本頁款式：在網(wǎng)頁上創(chuàng)建嵌入

2、的款式表。 元素款式：內(nèi)嵌款式到某個網(wǎng)頁元素。層疊？層疊？ 層疊次序：當一個網(wǎng)頁元素被不止一個款式定義時，會運用哪個款式呢？ 元素款式在 html 元素內(nèi)部本頁款式位于 標簽內(nèi)部外部款式表。外部款式表外部款式表 作用：在站點上一切或部分網(wǎng)頁上一致地運用一樣款式時，可運用外部款式表，以到達網(wǎng)頁外觀的一致性。 假設(shè)更改款式，只需在外部款式表中修正一次，而該更改會反映到一切與該款式表相鏈接的網(wǎng)頁上。 通常外部款式表以 .css 做為文件擴展名，例如 styles.css。 在需求此款式的頁面中將其鏈接進來，如： 本頁款式表本頁款式表 當只是要定義當前網(wǎng)頁的款式，可運用嵌入的款式表。 嵌入的款式表“嵌

3、在網(wǎng)頁的 標志符內(nèi)。 嵌入的款式表中的款式只能在這個網(wǎng)頁上運用。元素款式元素款式 針對某個網(wǎng)頁中某個元素設(shè)置款式。 例如：江西通達CSS 根底語法根底語法 選擇器+聲明。選擇器通常是需求設(shè)置款式的網(wǎng)頁元素通常是HTML標簽。每條聲明由一個屬性和一個值組成。 例如：h1 color:red; font-size:14px;。將 h1 元素內(nèi)的文字顏色定義為紅色，字體大小為 14 像素。h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。本例中，除了英文單詞 red，還可以運用十六進制的顏色值 #ff0000 例如：p text-align: center; c

4、olor: black; font-family: arial; 定義一段紅色文字的居中等格式。 公司精神：誠信、聰明、勤勞、專注創(chuàng)建創(chuàng)建設(shè)置設(shè)置CSSCSS款式款式面板面板 詳細如何操作？類類 可創(chuàng)建自定義的款式。 .ww font-family: 黑體;font-size: 18px;color: #FF0000; 款式名字前邊要有一個句點。假設(shè)沒有輸入這個句點，DW自動輸入。 可運用于任何標簽。class 屬性 江西通達 搜狐標簽重新定義特定標簽的外觀標簽重新定義特定標簽的外觀 對某種標簽的外觀重新定義、規(guī)范或擴展其屬性。 例如：a text-decoration: line-throu

5、gh; 要重新定義 HTML 標簽款式，可以鍵入一個 HTML 標簽或者從彈出菜單中選擇一個。高級高級ID、偽類選擇器、偽類選擇器 對標簽組合定義或定義ID標簽 ID標簽屬性用于定義一個元素獨特的款式。 用于控制鏈接的顯示效果，共有4種選擇器： a:link 未訪問的鏈接 a:visited 已訪問的鏈接 a:hover 當有鼠標懸停在鏈接上 a:active 被選擇的鏈接 寫法，一定要按以上順序。運用運用CSS款式款式附加款式表附加款式表 屬性面板 文本菜單/CSS款式/練習練習 創(chuàng)建CSS文件控制站點一切網(wǎng)頁外觀。 一切網(wǎng)頁鏈接到CSS文件。 設(shè)置：網(wǎng)頁背景圖片、上邊境頂格。 標簽組合td p：單元格中段落行高200%，字體文本微軟雅黑，14像素。 類1：字體黑體，18像素，粗體，傾，藍色，用于首頁車名 制造頁面底部：經(jīng)過表格ID，文字居中，白色，行高200%等。 設(shè)置圖