CSS簡單介紹
阿新 • • 發佈：2017-08-02
clip 簡單介紹 分組 ger 超鏈接 事情 auto script light
一、方式
1.內聯式引用
2.內部引用
3.外部引用(鏈接式引用，導入式引用)
4.優先級(由高到低) 內聯式》外部鏈接式》內部式》外部導入式
二、內聯式
1.直接從HTNL標簽上註明格式
2。使用方法簡單，不建議使用
3.維護成本高
三、內部引用
1.將樣式聲明在HTMl頁面中
2.使用<style>和</style>標簽進行聲明
3.把CSS代碼集中在同一個區域，不僅便於維護，頁面結構也清晰了
4.內部定義的樣式不能被其他頁面所使用
5.內部引用只使用與對特殊頁面設置獨特風格。
四、外部鏈接式引用
1.使用頻率最高，最實用
2.將CSS樣式定義在一個獨立的文件中，使用.css作為擴展名，使用HTML的Link對象來引用它。
<link rel="stylesheet" type="text/css" href = "./style/1.css" />
將CSS與HTML分離，同一個CSS文件可以被不同的HTML所使用
3.便於維護
五、外部導入式引用
1.以import方式導入的樣式表，在HTML初始化時，會被導入HTML頁面中，作為文件的一部分。
2.鏈接式引用只有在HTML標簽需要此樣式時才被引入。
3.導入式最大用處就是可以在一個HTML中導入多個樣式表。
<style type="text/css"> @import url("./style/1.css”) </style>
六、css註釋與樣式選擇符
1.註釋： /* */
2.樣式選擇符：標簽選擇符 類選擇符 ID選擇符
優先級(由高到低)：ID選擇符》類選擇符》標簽選擇符
3.標簽選擇符
@CHARSET "UTF-8"; body{ color:black /*頁面文字為黑色*/ } p { font-family:"sans serif" /*字體為sans serif"*/ } p { texe-align:center;color:red /*文字居中，文字紅色*/ }
4.類選擇符
/*類選擇符*/
p.right {
texe-align:right /*段落向右對齊*/
}
p.center {
texe-align:center /*段落居中*/
}
/*
<body>
<p class = "right">段落向右對齊</p>
<p class = "center">段落居中</p>
</body>
*/
/*另外一種表達方式*/
.center {
texe-align:center /*段落居中*/
}
/*
<h1 class = "center">標題居中</h1>
<p class = "center">段落居中</p>
*/
5.ID選擇符
/*ID選擇符*/ #center { texe-align:center /*段落居中*/ } /* <body> <p id = "center">段落居中</p> </body> */
6.選擇符的嵌套
/*選擇符的鑲嵌*/ #main li{ color:red /*文字紅色*/ } /* <body> <div id="main"> <ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul> <p>段落1</p> <p>段落2</p> <p>段落3</p> </div> </body> */
7.樣式表的層疊性
1.層疊性就是繼承性
2.樣式表的繼承規則是：外部元素的樣式會被該元素所包含的其他元素所繼承
3.所有在元素中鑲嵌的元素都會繼承外層元素指定的屬性值
<html> <head> <title>樣式表的層疊性--繼承</title> <style type="text/css"> <!-- div{ font-size: 36px; text-decoration: underline; } p{ line-height: 80px; } --> </style> </head> <body> <div id="main"> <ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul> <p>段落1</p> <p>段落2</p> <p>段落3</p> </div> </body> </html>
八、CSS盒子模型
1.組成：內容、邊框border、填充padding、邊界margin等四部分組成。
CSS 字體屬性（Font）
| 屬性 | 描述 | CSS |
|---|---|---|
| font | 在一個聲明中設置所有字體屬性。 | 1 |
| font-family | 規定文本的字體系列。 | 1 |
| font-size | 規定文本的字體尺寸。 | 1 |
| font-size-adjust | 為元素規定 aspect 值。 | 2 |
| font-stretch | 收縮或拉伸當前的字體系列。 | 2 |
| font-style | 規定文本的字體樣式。 | 1 |
| font-variant | 規定是否以小型大寫字母的字體顯示文本。 | 1 |
| font-weight | 規定字體的粗細。 | 1 |
font-weight：字體粗細
| 屬性值 | 描述 |
|---|---|
| normal | 默認值。定義標準的字符。 |
| bold | 定義粗體字符。 |
| bolder | 定義更粗的字符。 |
| lighter | 定義更細的字符。 |
| 100、200…900 | 400 等同於 normal，而 700 等同於 bold。 |
font-size：字體大小
| 屬性值 | 描述 |
|---|---|
| xx-small、x-small、small、medium、large、x-large、xx-large | 把字體的尺寸設置為不同的尺寸，從 xx-small 到 xx-large。默認值：medium。 |
| smaller | 把 font-size 設置為比父元素更小的尺寸。 |
| larger | 把 font-size 設置為比父元素更大的尺寸。 |
| length | 把 font-size 設置為一個固定的值。 |
| % | 把 font-size 設置為基於父元素的一個百分比值。 |
font-family：字體
font-style：斜體
| 屬性值 | 描述 |
|---|---|
| normal | 默認值。瀏覽器顯示一個標準的字體樣式。 |
| italic | 瀏覽器會顯示一個斜體的字體樣式。 |
| oblique | 瀏覽器會顯示一個傾斜的字體樣式。 |
CSS 背景屬性（Background）
| 屬性 | 描述 | CSS |
|---|---|---|
| background | 在一個聲明中設置所有的背景屬性。 | 1 |
| background-attachment | 設置背景圖像是否固定或者隨著頁面的其余部分滾動。 | 1 |
| background-color | 設置元素的背景顏色。 | 1 |
| background-image | 設置元素的背景圖像。 | 1 |
| background-position | 設置背景圖像的開始位置。 | 1 |
| background-repeat | 設置是否及如何重復背景圖像。 | 1 |
| background-clip | 規定背景的繪制區域。 | 3 |
| background-origin | 規定背景圖片的定位區域。 | 3 |
| background-size | 規定背景圖片的尺寸。 | 3 |
CSS 文本屬性（Text）
| 屬性 | 描述 | CSS |
|---|---|---|
| color | 設置文本的顏色。 | 1 |
| direction | 規定文本的方向 / 書寫方向。 | 2 |
| letter-spacing | 設置字符間距。 | 1 |
| line-height | 設置行高。 | 1 |
| text-align | 規定文本的水平對齊方式。 | 1 |
| text-decoration | 規定添加到文本的裝飾效果。 | 1 |
| text-indent | 規定文本塊首行的縮進。 | 1 |
| text-shadow | 規定添加到文本的陰影效果。 | 2 |
| text-transform | 控制文本的大小寫。 | 1 |
| unicode-bidi | 設置文本方向。 | 2 |
| white-space | 規定如何處理元素中的空白。 | 1 |
| word-spacing | 設置單詞間距。 | 1 |
| hanging-punctuation | 規定標點字符是否位於線框之外。 | 3 |
| punctuation-trim | 規定是否對標點字符進行修剪。 | 3 |
| text-align-last | 設置如何對齊最後一行或緊挨著強制換行符之前的行。 | 3 |
| text-emphasis | 向元素的文本應用重點標記以及重點標記的前景色。 | 3 |
| text-justify | 規定當 text-align 設置為 "justify" 時所使用的對齊方法。 | 3 |
| text-outline | 規定文本的輪廓。 | 3 |
| text-overflow | 規定當文本溢出包含元素時發生的事情。 | 3 |
| text-shadow | 向文本添加陰影。 | 3 |
| text-wrap | 規定文本的換行規則。 | 3 |
| word-break | 規定非中日韓文本的換行規則。 | 3 |
| word-wrap | 允許對長的不可分割的單詞進行分割並換行到下一行。 | 3 |
CSS 外邊距屬性（Margin）
| 屬性 | 描述 | CSS |
|---|---|---|
| margin | 在一個聲明中設置所有外邊距屬性。 | 1 |
| margin-bottom | 設置元素的下外邊距。 | 1 |
| margin-left | 設置元素的左外邊距。 | 1 |
| margin-right | 設置元素的右外邊距。 | 1 |
| margin-top | 設置元素的上外邊距。 | 1 |
CSS 內邊距屬性（Padding）
| 屬性 | 描述 | CSS |
|---|---|---|
| padding | 在一個聲明中設置所有內邊距屬性。 | 1 |
| padding-bottom | 設置元素的下內邊距。 | 1 |
| padding-left | 設置元素的左內邊距。 | 1 |
| padding-right | 設置元素的右內邊距。 | 1 |
| padding-top | 設置元素的上內邊距。 | 1 |
CSS 邊框屬性（Border 和 Outline）
| 屬性 | 描述 | CSS |
|---|---|---|
| border | 在一個聲明中設置所有的邊框屬性。 | 1 |
| border-bottom | 在一個聲明中設置所有的下邊框屬性。 | 1 |
| border-bottom-color | 設置下邊框的顏色。 | 2 |
| border-bottom-style | 設置下邊框的樣式。 | 2 |
| border-bottom-width | 設置下邊框的寬度。 | 1 |
| border-color | 設置四條邊框的顏色。 | 1 |
| border-left | 在一個聲明中設置所有的左邊框屬性。 | 1 |
| border-left-color | 設置左邊框的顏色。 | 2 |
| border-left-style | 設置左邊框的樣式。 | 2 |
| border-left-width | 設置左邊框的寬度。 | 1 |
| border-right | 在一個聲明中設置所有的右邊框屬性。 | 1 |
| border-right-color | 設置右邊框的顏色。 | 2 |
| border-right-style | 設置右邊框的樣式。 | 2 |
| border-right-width | 設置右邊框的寬度。 | 1 |
| border-style | 設置四條邊框的樣式。 | 1 |
| border-top | 在一個聲明中設置所有的上邊框屬性。 | 1 |
| border-top-color | 設置上邊框的顏色。 | 2 |
| border-top-style | 設置上邊框的樣式。 | 2 |
| border-top-width | 設置上邊框的寬度。 | 1 |
| border-width | 設置四條邊框的寬度。 | 1 |
| outline | 在一個聲明中設置所有的輪廓屬性。 | 2 |
| outline-color | 設置輪廓的顏色。 | 2 |
| outline-style | 設置輪廓的樣式。 | 2 |
| outline-width | 設置輪廓的寬度。 | 2 |
| border-bottom-left-radius | 定義邊框左下角的形狀。 | 3 |
| border-bottom-right-radius | 定義邊框右下角的形狀。 | 3 |
| border-image | 簡寫屬性，設置所有 border-image-* 屬性。 | 3 |
| border-image-outset | 規定邊框圖像區域超出邊框的量。 | 3 |
| border-image-repeat | 圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。 | 3 |
| border-image-slice | 規定圖像邊框的向內偏移。 | 3 |
| border-image-source | 規定用作邊框的圖片。 | 3 |
| border-image-width | 規定圖片邊框的寬度。 | 3 |
| border-radius | 簡寫屬性，設置所有四個 border-*-radius 屬性。 | 3 |
| border-top-left-radius | 定義邊框左上角的形狀。 | 3 |
| border-top-right-radius | 定義邊框右下角的形狀。 | 3 |
| box-decoration-break | 3 | |
| box-shadow | 向方框添加一個或多個陰影。 | 3 |
CSS 列表屬性（List）
| 屬性 | 描述 | CSS |
|---|---|---|
| list-style | 在一個聲明中設置所有的列表屬性。 | 1 |
| list-style-image | 將圖象設置為列表項標記。 | 1 |
| list-style-position | 設置列表項標記的放置位置。 | 1 |
| list-style-type | 設置列表項標記的類型。 | 1 |
| marker-offset | 2 |
九、使用css控制超鏈接
1.css提供了對超鏈接進行控制的能力，包括了超鏈接不同狀態、偽類、按鈕特效等等。
2.css允許針對超鏈接的未訪問、已訪問、活動、圖標懸停等狀態分別定義了不同的樣式。這樣便於可為網站添加奇妙而實用的效果。可以通過偽類(pseudo-class)來實現這些效果。
3.偽類是針對HTML元素的條件和事件所定義的CSS樣式。
十、css偽類
/*從未訪問過的鏈接樣式*/ a:LINK { color: #6699CC; } /*已訪問的鏈接樣式*/ a:VISITED { color: #660099; } /*活動的鏈接*/ a:ACTIVE { background-color: #FFFF00; } /*有鼠標懸停的鏈接樣式*/ a:HOVER { color: orange; font-style: italic; }
十一、按鈕超鏈接
<!DOCTYPE html> <html> <head> <title>button.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> <!-- a{ font-family: Arial; font-size:1em; text-align: center; margin:3px; } a:LANG,a:VISITED{ color: #002020; padding: 4px 10px 4px 10px; background-color: #00d8db; text-decoration: none; border-top: 1px solid #EE00EE;/*邊框實現陰影效果*/ border-left: 1px solid #EE00EE; border-bottom: 1px solid #710071; border-right: 1px solid #710071; } a:HOVER{ color:#ffffff; padding: 5px 8px 4px 12px; background-color: #00c4c9; text-decoration: none; border-top: 1px solid #710071;/*邊框實現陰影效果*/ border-left: 1px solid #710071; border-bottom: 1px solid #EE00EE; border-right: 1px solid #EE00EE; } --> </style> </head> <body> <a href="#">首頁</a> <a href="#">列出所有聯賽</a> <a href="#">添加新聯賽</a> <a href="#">註冊聯賽</a> <a href="#">用戶登入</a> </body> </html>
十二、css/div頁面布局
1.div標簽是實現頁面布局的重要標簽，是英文Division的縮寫，即分區、分塊的意思，是一個大容器。
2.span是另外一個常用語布局的標簽，span在一行內定義一個區域，也就是一行內可以被多個span劃分成好幾個區域，是一個小容器。
3.大容器中可以放置小容器。
4.css與div
<!DOCTYPE html> <html> <head> <title>css與div</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> #left{ background-color: #CCC0CC; float: left; height: 300px; width: 200px; border: 9px soid #333333; } #right{ background-color: #CCCCCC; float: left; height: 300px; width: 200px; border: 2px soid #333333; } </style> </head> <body> <div id="left">左側區域</div> <div id="right">右側區域</div> </body> </html>
5.布局居中顯示
<!DOCTYPE html> <html> <head> <title>css與div</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> #main{ width: 408px; margin-top: 120px; margin-left: auto; margin-right: auto; margin-bottom: 0px; } #left{ background-color: #CCC0CC; float: left; height: 300px; width: 200px; border: 9px soid #333333; } #right{ background-color: #CCCCCC; float: left; height: 300px; width: 200px; border: 2px soid #333333; } </style> </head> <body> <div id = "main"> <div id="left">左側區域</div> <div id="right">右側區域</div> </div> </body> </html>
CSS簡單介紹