CSS
—-分離網頁內容結構和格式控制
使用
- css語法結構由3部分組成：選擇符、樣式屬性、值
- 選擇符：選擇要修飾的對象，可以使HTML的標籤，也可以是特定id、class的標籤
- 屬性：顏色、大小，定位、浮動方式
- 值：屬性值
語法：選擇符{樣式屬性:值; 樣式屬性:值; ...}- 添加CSS方法
- 鏈接外部樣式表
- 內部樣式表
- 導入外部樣式表
- 內嵌樣式
1、鏈接外部樣式表
<head>
<link rel=stylesheet type=text/css href=slstyle.css >
</head>2、內部樣式表
<head>
<style type="text/css">
body{
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
.style1{
color:#fbe333;
font-size:12px;
}
</style>
</head>3、導入外部樣式
指在內部樣式表的<styple>中使用@import導入外部樣式表
<head>
<style type="text/css">
@import slstyle.css
</style>
</head>4、內嵌樣式
<table style=color:red; margin-right:220px>選擇器
- 選擇器：
css樣式聲明定義
選擇器{
樣式;
}- 標籤選擇器
h1{
...;
}
h1,p,body{
....;
}- 通用選擇器
它使用一個（*）號指定，它的作用是匹配html中所有標籤元素
* {color:red;}- 類選擇器
.類選器名稱{css樣式代碼;}
h1.類選擇器{ ...; }
*.類選擇器{ ...; }
<span class="stress">膽小如鼠</span>- 多類選擇器
.類1.類2{ ...; }
.important.warning {background:silver;}
<p class="important warning">
This paragraph is a very important warning.
</p>
<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>- ID選擇器
在很多方面，ID選擇器都類似於類選擇符，但也有一些重要的區別：
1、爲標籤設置id=”ID名稱”，而不是class=”類名稱”。
2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。
ID選擇器和類選擇器區別：
相同點：可以應用於任何元素
不同點：
ID選擇器只能在文檔中使用一次
可以使用類選擇器詞列表方法爲一個元素同時設置多個樣式。
<span class="stress bigsize">三年級</span>
什麼時候用id，什麼時候用class?
- W3C標準這樣規定的，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。這樣，一般網站分爲頭，體，腳部分，因爲考慮到它們在同一個頁面只會出現一次，所以用id，其他的，比如說你定義了一個顏色爲red的class，在同一個頁面也許要多次用到，就用class定義。另外，當頁面中用到js或者要動態調用對象的時候，要用到id，所以要根據自己的情況運用。自己的語言
#intro {font-weight:bold;} 等價 *#intro {font-weight:bold;}- 屬性選擇器
*[屬性]{ ...; }
*[title] {color:red;} 應用<h2 title="Hello world">Hello world</h2>
a[href] {color:red;} 應用<a href="http://w3school.com.cn">W3School</a>
a[href][title] {color:red;} 需同時擁有這兩個屬性
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} 可以設定值，不能應用於其他值中
p[class="important warning"] {color: red;}
還可以匹配屬性的開頭，結尾等- 包含（後代）選擇器
包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側代碼編輯器中的代碼：
.first span{color:red;}
>作用於元素的第一代後代，空格作用於元素的所有後代。- 子選擇器
子選擇器，即大於符號(>),用於選擇指定標籤元素的第一代子元素。（不包括孫子）
.food>li{border:1px solid red;}
可結合後代選擇器：
table.company td > p
相鄰兄弟選擇器
h1 + p {margin-top:50px;}
選擇緊接在 h1 元素後出現的段落，h1 和 p 元素擁有共同的父元素,用一個結合符只能選擇兩個相鄰兄弟中的第二個元素
結合其他選擇器:
html > body table + ul {margin-top:20px;}
僞類選擇符
它允許給html不存在的標籤（標籤的某種狀態）設置樣式，比如說我們給html中一個標籤元素的鼠標滑過的狀態來設置字體顏色：
a:hover{color:red;}分組選擇符
當你想爲html中多個標籤元素設置同一個樣式時，可以使用分組選擇符（，），如下代碼爲右側代碼編輯器中的h1、span標籤同時設置字體顏色爲紅色：
h1,span{color:red;}
.first, #second span{color:green;}屬性
字體
.font_css{
font-family:"宋體","黑體",...; // 類似<font face> ,宋體不支持，則黑體，否則系統默認字體
font-size:12px // 還支持 xx-small ...
font-style:normal / italic / oblique
font-weight:normal / bold / bolder / lighter / 自定義數字
font-variant:normal / small-caps(小寫英文轉大寫英文)
font:bold italic "宋體"
}顏色背景
.back_css{
color:#fff098
background:#ffff00
backgroun-image:url(images/ber_12.gif(地址))
background-repeat:no-repeat / repeat / repeat-x / repeat-y // 背景平鋪方式
background-attachment:scroll / fixed // 設置背景是否隨對象滾動
background-position:0% 50% / left top (center right bottom)
}段落
.paragraph_css{
word-spacing:3px / -1px //單詞間隔
letter-spacing:3px / -1px // 字符間隔
text-decoration:none / underline / overline / line-through / blink // 文字修飾，下劃線...
vertical-align:baseline / sub / super / top / text-top middle / text-bottom // 垂直對齊方式
text-align:left / right / center / justify(兩端對齊)
text-transform:none / capitalize / uppercase / lowercase
text-indent:25px // 文本縮進
line-height:12px // 文本行高
white-space:normal(默認，將多個空格合併) / pre (保留) // 處理空格
direction:ltr / rtl / inherit
}外邊距內邊距
- 外邊距：元素周圍邊界寬度
- 內邊距：邊框與元素的間距
盒子模型
- 組成：Content（內容）、padding（內邊距）、border（邊框）、margin（外邊距）
- Content：屬性有width、height、overflow
- padding：內容區與邊框之間的空間，屬性有padding-top、padding-bottom、padding-left、padding-right
- border：屬性有：border-style、border-width、border-color
- margin：邊框外的空間，屬性有margin-top、margin-bottom、margin-left、margin-right
定位
.pos_css{
position: static / absolute / fixed / relative
top:
right:
bottom:
left:
}。。。。。。。。。。。。。。。。。。。。
列表
ol{
list-style-type:disc / circle / sqare / ..
list-style-image:url(path)
list-style-position:outside / inside // 列表縮進
}光標
ol{
..
cursor:.....
}