HTML開發網頁樣式剖析

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * CSS的屬性 文字、文本屬性 背景屬性 列表屬性 盒子模型 浮動屬性 定位屬性 字體屬性 字體屬性小結 屬性 描述 font-style 設置字體風格 font-weight 設置字體粗細 font-size 設置字體的尺寸 font-family 設置字體系列 font 簡寫屬性，作用是把所有針對字體的屬性設置在一個聲明中(注意順序) 例如：font: italic bold 16px "楷體"; 文本屬性 文本屬性小結 屬性 描述 color 設置文本的顏色，如 red，#FF0000 line-height 設置文本的行高 text-align 設置文本的對齊方式, 如 left 、center、right text-decoration 設置文本裝修，如underline、none、line-through 課堂演示 需求說明 使一級標題居中顯示，二級分類字體為藍色，字體為斜體、加粗、16px、楷體，且加上下劃線，并讓分類之間的行高為30px； 演示示例：文本屬性 課堂練習 需求說明 制作北大青鳥網站新聞信息展示頁面 使用外部樣式表創建頁面樣式 完成時間：10分鐘 共性問題集中講解 小標題

行高28px，字體大小12px 字體大小18px，行高40px ，居中顯示 居中顯示，文字大小12px，字體顏色#666666 段落字體12px行高20px 設置頁面元素的背景樣式 背景屬性 屬性 描述 background-color 背景色，取值如，red，#FF0000 background-image 背景圖片,如: background-image : url ( “./images/bg.png” ); background-position 背景開始位置,包括水平方向(X軸)和豎直方向(Y軸)的設置 X軸取值：left，center，right 或 像素值 或 百分比 Y軸取值：top，center，bottom 或 像素值 或 百分比 background-repeat 背景填充方式,取值： repeat-x | repeat-y | no-repeat background 合寫方式，如 background：#fff url(bg.png) left top no-repeat; 課堂演示 需求說明 使用外部樣式表創建頁面樣式 一級標題為紅色背景色且帶向下圖標 主體部分為灰色(#D7D7D7)背景色 二級分類均有向右箭頭圖標 演示示例：商品分類側邊欄 列表屬性 超鏈接偽類 鼠標形狀控制 知識點分類 列表屬性 超鏈接偽類 鼠標形狀控制 列表屬性 屬性 描述 舉例 list-style-image 將列表設置為列表標志 list-style-image:url('./arrow.gif'); list-style-type 設置列表項標志的類型: disc(實心圓) | circle (空心圓) | square(正方形) list-style-type : circle ; list-style 以上屬性的合并簡寫,或 none 去掉默認屬性設置 list-style:square url('/i/arrow.gif'); 列表屬性 超鏈接偽類 鼠標形狀控制 超鏈接偽類 a:link {color: red} /* 未訪問的鏈接 */ a:visited {color: blue} /* 已訪問的鏈接 */ a:hover {color: green} /* 當有鼠標懸停在鏈接上 */ a:active {color: yellow} /* 被選擇的鏈接 */ 示例 1、在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的 2、在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的 3、記憶方法： love hate ! 經驗 鼠標形狀控制 cursor屬性，其值： 鼠標形狀控制 課堂演示 需求說明 完善商品分類側邊欄 去掉默認小黑點 鼠標移至分類文字超鏈接時 字體為紅色 文字有下劃線 鼠標移至紅色標題上時，鼠標形狀為可移動形狀 演示示

總結

以上是生活随笔為你收集整理的html 做成ppt样式,HTML开发网页样式.ppt的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。