自己寫的web標準教程，幫你走進web標準設計的世界——第五講（css篇2）

作者: 鐵拐李來源: 博客園發布時間: 2010-09-09 09:55 閱讀: 870 次推薦: 0 原文鏈接 [收藏]

　　本節概況：

1.前端網頁項目文件的基本結構

2.在html中插入css的三種方式

3.如果網頁禁用了css？

4.css定義格式

5.css注釋格式

6.css實例講解

　　前端網頁項目文件的基本結構：

首先創建一個文件夾并命名為項目名（這里舉例命名為index），該文件夾中包含：

　　在html中插入css的三種方式：

1.在html頁面中插入

　　a)建立單獨的css區塊插入

　　b)在標簽中直接插入

2. 引入外部的css文件：請下載視頻演示

　　如果網頁禁用了css？

禁用了css的博客園有點“狼藉”。

　　css定義格式：

選擇器｛

屬性名：屬性值；

｝

　　css注釋格式：/*注釋內容，最好不要采用中文注釋*/

　　css實例講解：

1.       顏色和背景（color,background）

a)         color：

設置格式：

element {

                            color:colorValue;

}

所有的css標簽的設置格式都是一樣的，以后我就不重復說明了。

功能：設置某個html元素內的文本顏色（用于指定元素的前景色）

實例（我用三種調用形式，以后為了方便我的代碼都采用第二種引入css的形式，在實際工作中大家最好采用第三種調用css的方式，便于代碼的閱讀和維護，提高網頁的加載速度，至于性能方面我們以后再說，我們現在會實現簡單的效果就行了）：

新建一個html文件，命名為：colorAndBg。采用第一種引用css的代碼為（只寫了body部分）：

<body>

<div style="color: #F00 ">我是不是變顏色了？</div>

</body>

運行：

提示1：顏色值#F00等價于#FF0000,是一種縮寫方式，比如顏色值#CC4523，就沒有辦法所寫了

提示2：還記得上節課的那個取色小工具嗎？喜歡什么顏色就“偷”過來吧。

疑問：為什么要采用縮寫？主要是為了減少文件的大小，節省帶寬，提高性能（不懂可跳過），大家都采用全寫方式就可以了，以后自然就明白了

采用第二種引用css的代碼為：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ColorAndBgEmp</title>

<style type="text/css">//代碼塊放在title下面，head的里面

         div {

                   color:#F00;

         }

</style>

</head>

<body>

<div>我是不是變顏色了？</div>

</body>

采用第三種引用css方式的代碼下載

a)         background:

                         i.              background-color//設置背景顏色，值為顏色值

                       ii.              background-image//設置背景圖片，值為圖片的路徑值

                      iii.              background-repeat//設置背景圖片的重復方式

1.         repead-x//x方向重復，下面的不言而喻

2.         repead-y

3.         no-repead

                      iv.              *background-attachment//（初級作為了解）設置背景圖片是否固定，該屬性只使用于body和html

令人苦惱的兼容，大家了解：

1.background-attachment在標準瀏覽器中（即IE6以外的瀏覽器），僅在html 和body中才起作用（html和body的background-attachment默認是scroll，可以設置成fixed；其他元素 overflow:scroll滾動時的background-attachment始終是fixed，并且設置scroll無效）；

2.IE系列（IE6-8）在不指定文檔類型的時候（進入quirks mode模式），元素中的background-attachment支持scroll和fixed，而FF等其他內核瀏覽器仍然無效。

3.在不給元素設置background-attachment，并且該元素overflow:scroll滾動時，標準瀏覽器中默認是fixed效果，而在IE6中默認是scroll效果。

4.在IE6下，不管在任何時候設置background-attachment的fixed或scroll都起作用；即，IE6支持任何元素的background-attachment的一切。

                       v.              background-position//設置背景圖片的位置，當容器出現滾動條的時候，拖動滾動條時可以通過設置background-position的值來控制背景圖片是否跟著滾動

注意：他的值可以是left之類的表示位置的單詞，也可以是10px之類的具體像素值，也可以是百分比值，但是不建議混合使用，使用該屬性時background-repeat值應設為no-repead否則屬性失效

background實例下載（請詳細的看源代碼和注釋）