資源簡介 (共44張PPT)網頁布局8 使用CSS設計簡單網頁風格學習目標【知識目標】 了解什么是CSS； 掌握CSS樣式表； 掌握CSS選擇器。【技能目標】 使用CSS選擇器控制網頁。引例描述改變搜索表單樣式任務陳述搜索頁面的目的是為用戶提供一個訪問數據庫的界面，通過簡潔美觀的頁面，用戶能快捷的輸入自己準備搜索的內容。因此，本任務要求用戶操作的網頁盡量簡潔美觀。1 CSS簡介2 CSS基本語法和屬性的基本結構知識準備1 CSS簡介CSS全稱：Cascading Style Sheet層疊樣式表單作用：用于布局與美化網頁。表現形式：內嵌式(內聯式)，內部樣式，外部樣式。優勢：方便更換頁面或頁面元素的形式。CSS3CSS3 是最新的 CSS 標準。CSS3具備的新特性如下：更華麗的視覺特效：圓角、陰影、透明度和漸變效果。 更酷炫的動畫效果：支持盒子在2D與3D空間旋轉、縮放和平移等。 新的選擇器：多種新的偽類和選擇器可以更方便定位并控制元素。 國際語言支持：解決跨語言書寫和排版時的兼容性問題。 服務端字體：網頁可以使用服務端字體，不再受用戶計算機上的字體庫限制。 響應不同設備：可以判斷用戶設備以適配，對的不同屏幕分辨率做出不同響應。 彈性盒子：盒子或元素的高度和寬度自適應。 多欄布局：可以不需要使用div或li元素就能方便地實現多欄布局。參考資料：http://www..cn/css3/index.asp樣式表的三類應用方式內聯樣式內部樣式表內部樣式表使用格式如下：外部樣式表文件聲明文檔樣式表結束文檔樣式表開始，類型為CSS樣式樣式規則選擇器樣式規則P {color:red; font-size:30px; font-family:隸書;}屬性屬性的值樣式表的基本語法CSS的定義是由3部分構成：選擇符（selector），屬性（properties）和屬性的取值（value），其語法如下:selector {property: value} (選擇符 {屬性:值})選擇符是可以是多種形式，一般是要定義樣式的HTML標記，如BODY、P、TABLE等，可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開。例如，body {color: black}，此例的效果是使頁面中的文字為黑色。樣式表的基本語法樣式規則靜夜思床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。本頁面中所有的P標簽都應用了此樣式用分號隔開選擇器如何編寫此樣式 字體類型為隸書、大小24px所有的段落都采用P樣式，保證風格統一常用的文本樣式屬性字體屬性常用的文本樣式屬性字體屬性常用的文本樣式屬性CSS顏色值可以用以下方法來規定 CSS 中的顏色：十六進制色RGB 顏色RGBA 顏色HSL 顏色HSLA 顏色預定義/跨瀏覽器顏色名十六進制顏色：所有瀏覽器都支持十六進制顏色值。十六進制顏色是這樣規定的：#RRGGBB，其中的 RR（紅色）、GG（綠色）、BB（藍色）十六進制整數規定了顏色的成分。所有值必須介于 0 與 FF 之間。常用的文本樣式屬性關于大小和距離單位font-size:24px;也可為font-size:1.5em;px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。常用的文本樣式屬性文本陰影在 CSS3 中，text-shadow 可向文本應用陰影。能夠規定水平陰影、垂直陰影、模糊距離，以及陰影的顏色：實例向標題添加陰影：h1 { text-shadow: 5px 5px 5px #FF0000; }常用的背景屬性設置背景屬性常用的背景屬性CSS 背景屬性邊框屬性設置邊框樣式CSS邊框距離示意圖邊框屬性改變邊框樣式1.邊框樣式基礎使用border-style:solid設置一個邊框，定義邊框寬度使用border- width屬性即可，可以指定長度值，比如2px或0.1em；或者使用3個關鍵字之一，它們分別是thin、medium（默認值）和thick，所以，我們可以這樣設置邊框的寬度：p {border-style: solid; border-width: 5px;}或者：p {border-style: solid; border-width: thick;}邊框屬性也可以指定4個邊的寬度，按照top-right-bottom-left（上右下左）的順序設置元素的各邊邊框： p {border-style: solid; border-width: 15px 5px 15px 5px;}同理設置邊框顏色使用border-color屬性，它一次可以接受最多4個顏色值?？梢允褂萌魏晤愋偷念伾?，例如可以是命名顏色，也可以是十六進制和 RGB 值： p {border-style: solid;border-color: blue rgb(25%,35%,45%) #909090 red;}邊框屬性如果顏色值小于4個，顏色值復制功能就會起作用，將相對邊框設置相同顏色。例如下面的規則聲明了段落的上下邊框是藍色，左右邊框是紅色： p {border-style: solid;border-color: blue red;}邊框屬性CSS3中新增了邊框圓角border-radius，我們可以利用此方法讓邊框變為圓角矩形的樣子。例如：border-radius: 4px;圓角為4像素邊框屬性通常在邊框添加陰影會取得更好的效果，我們使用CSS3 的陰影特性box-shadow，設置4 個值：水平陰影、垂直陰影、模糊距離，以及陰影的顏色。如下列代碼：box-shadow: 10px 10px 5px #888888;邊框屬性CSS3 中，邊框border 的屬性除了上述之外，還有邊框圖片屬性，通過CSS3 的 border-image 屬性，還可以使用圖片來創建邊框。使用方法：border-image:url(圖片地址) 邊框寬度 邊框高度 圖片參數;要注意，因為當前不同瀏覽器對CSS3 支持不同，我們在border-image 屬性前加上-webkit-來支持Chrome 和Safari 瀏覽器，加上-o-來支持Opera 瀏覽器，加上-moz-來支持FireFox 瀏覽器。圖片參數則有round（鋪滿）、stretch（拉伸）和repeat（平鋪）。邊框屬性如下所示使用圖片創建圍繞div 元素的圖片，示例代碼如下:div{border-image:url(圖片地址) 30 30 round;-moz-border-image:url(圖片地址) 30 30 round; /* 老的 Firefox */-webkit-border-image:url(圖片地址) 30 30 round; /* Safari 和 Chrome */-o-border-image:url(圖片地址) 30 30 round; /* Opera */}CSS選擇器類型設置不同行具備不同風格樣式：#first{ border: 4px #5e846a solid; }.last{ border: 4px purple solid; }HTML代碼床前明月光，低頭思故鄉。CSS選擇器類型一般選擇器有如下6種類型:（1）普通選擇器，直接聲明某個標簽樣式屬性 。（2）群選擇器，幾個標簽樣式屬性一樣時，可以共同調用一個聲明，樣式之間用“逗號”分隔。（3）組合選擇器，可以使用派生選擇器給一個標簽的后代標簽、子標簽、兄弟標簽定義樣式。（4）ID選擇器，可以為標有特定 id 的 某個標簽指定特定的樣式，如有一個 ， id 選擇器以 “#” 來定義。（5）類選擇器，在CSS里用一個“點”開頭表示類選擇器定義。（6）偽類選擇器，例如，CSS中用4個偽類來定義鏈接的各種狀態，分別是a:link、a:visited、a:hover和a:active。CSS選擇器類型id 選擇器id 選擇器可以為標有特定id的HTML元素指定特定的樣式。id選擇器以“#” 來定義。下面的兩個id選擇器，第一個定義元素的顏色為黑色，第二個定義元素的顏色為藍色： 標題Object：將平面文件抽象為可處理的對象CSS選擇器類型組合選擇器1 后代選擇器(以空格分隔)：用于選取某標簽的后代標簽。CSS選擇器類型組合選擇器2 子選擇器(以大于號分隔)：用于選取某標簽的子標簽。CSS選擇器類型組合選擇器3 相鄰兄弟選擇器(以加號分隔)：用于選擇緊接在另一標簽后的標簽，且二者有相同父標簽。CSS選擇器類型組合選擇器4 普通兄弟選擇器（以破折號分隔）：用于選取所有指定標簽之后的相鄰兄弟標簽。CSS選擇器類型選擇器綜合應用示例任務實施本任務實施步驟如下：第一步：新建網頁；第二步：添加網頁元素；第三步：添加樣式表第四步：展示設計效果。的基本結構任務實施實現效果拓展要求使用CSS實現下列網頁界面效果。小 結 展開更多...... 收起↑ 資源預覽 縮略圖、資源來源于二一教育資源庫