CSS基礎知識 （二）

這東西還挺好玩的，又簡單又能馬上看到結果。←我覺得這個“馬上能看到結果”很受用，我就是那種急性子的人，如果代碼寫了半天都不見效果我一定寫不下去的=v=
不過入門知識都很輕鬆，但是真正要弄好就麻煩……

CSS的模式稱為盒模式，就像一個套著一個的盒子（圖不畫了）
最中間的是內容層，包括各種要顯示的文字等；
內容外層的是補白 padding；
補白即是在內容層和邊框之間的部份，邊框：border；
邊框和其他的元素之間的距離為邊界： margin。

補白、邊界的設置可以統一設置：
pad ding: 25px;
mar gin: 25px: /*表示補白邊界都為25像素*/
也可以分別一一設置：
pad ding-left: 25px;
mag rin-bottom: 25px /*左邊補白部份設置為25像素、下邊界設置為25像素*/
還可以一起設置：
pad ding:25px 75px 50px 100px; /*設置的順序是上、右、下、左*/

邊框的式樣有：solid（實線）、double（雙線）、groove（略有浮雕效果？）、dotted（點）、dashed（虛線）等等。
邊框線也能分別設置，如：
borde r- top -style: solid; /*上邊框是實線*/

邊框線的粗細，除了用像素表示，還能用默認的：thick thin meduim（粗、細、中等）來表示。

HTML文件中一個段落用< p>

來表示，但是如果要單獨定義其中一個段落的格式的時候，可以給這個段落加標籤類型，如
< p.tea>
..
.

在這個時候CSS指定的方式就要寫成：
.tea {
} /*應該寫成p.tea，但是這個p可以省略 */

在HTML文件中，id也可以表示一個唯一的類型，如
< p id="tea">
...

這個時候在CSS中指定的話用#tea來表示。

Div：表示一個區塊，本身無顯示方式，用於標記一個邏輯區域，如：
< div id="tea">
< p> ...

< h1>... < /h1>
< /div>

行高設置：
line -height: 1.6em /*em表示倍數，行高同樣可以直接用像素或者百分比來設置*/

背景圖片的設置方法：
background -image: url(具體地址); /*加URL是爲了讓CSS文件能知道後面跟著的是地址*/

背景圖片的重複與否：
background -repeat: no-repeat; /*不重複*/
background -repeat: repeat-x; /*x軸上重複*/
background -repeat: repeat-y; /*y軸上重複*/

文字的對齊方法：
text- align: left /*左*/
text- align: right /*右*/
text- align: center /*居中*/


具體的一個CSS例子：

bo dy { /*設置整體的一個風格*/
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em; /* em表示倍數，也可以用百分比和像素直接表示 */
}

h1, h2{ /*HTML文件中存在h1、h2兩個段落，對其進行設置*/
color:#007e7e;
}
h1{
font-size: 150%;
}

h2{
font-size: 130%;
}

#guarantee{ /* p id="guarantee" */
line-height: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
color: #444444;

border-color: white; /* 邊框的顔色為白色*/
border-width: 1px; /* 邊框的大小為1像素*/
border-style: dashed; /* 邊框的樣式*/

/*border-top-style:solid;
border-right-style:double;
border-bottom-style:dashed;
border-left-style:dotted;*/ /* 邊框可以分別設置樣式顔色粗細*/

background-color: #a7cece; /* 段落的背景顔色*/
padding: 25px; /*補白的像素設置*/
padding-left: 80px;
/*padding-left: 25px;
padding-right: 50px;
padding-top: 75px;
padding-bottom: 100px; */ /* 補白的上下左右分別設置方法*/
margin: 30px; /*邊界大小的設置*/
margin-right: 250px;
background-image: url(images/background.gif); /*插入背景圖片*/
background-repeat: no-repeat; /*背景圖片不重復*/
background-position: top left; /*背景圖片的位置*/
}

#elixirs{ /* html中定義了

*/
line-height: 1;
border-width: thin;
border-style: solid;
border-color: #007e7e;
width: 200px;

padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;

margin-left: 20px;

text-align: center; /*字體居中*/

background-image: url(images/cocktail.gif);
background-repeat: repeat-x; /*背景圖片在x軸上重復*/

}

#elixirs h2{ /*標誌在div的id elixirs下的h2部分*/
color: black;
}
#elixirs h3{
color: #d12c47;
}