一、選擇器

CSS規則由選擇器以及聲明組成。

/*選擇器分組*/
h1, h2, h3 {}

/*後代選擇器*/
p em {}

/*子元素選擇器*/
p > em {}

/*兄弟選擇器（選擇位於其後具有相同父元素的元素）*/
h3 + p {}

/*id選擇器*/
#id {}

/*類選擇器*/
.class {}

/*屬性選擇器*/
[attr] {}

屬性選擇器使用。

二、樣式

/*背景*/
body {
    background-color: lightblue;
    background-image: url("wallpaper.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed; /*
 
防止背景隨文檔滾動而滾動*/
}

/*文本*/
p {
    text-indent: 5%; /*縮進*/
    text-align: justify-all; /*水平對齊*/
    word-spacing: normal; /*單詞間隔*/
    letter-spacing: normal; /*字母間隔*/
    text-transform: capitalize; /*字符轉換（單詞首字母大寫）*/
    text-decoration: underline; /*文本裝飾*/
}

/*字體*/
body {
    font-family: "MS Reference Sans Serif", monospace
 
;
    font-style: italic;
    font-variant: small-caps; /*小型大寫字母*/
    font-weight: bold; /*字體加粗*/
}

/*未被訪問的鏈接*/
a:link {
    color: #FF0000;
}

/*已被訪問的鏈接*/
a:visited {
    color: #00FF00;
}

/*懸停鏈接*/
a:hover {
    color: #FF00FF;
}

/*點擊鏈接*/
a:active {
    color: #0000FF;
}

/*列表*/
ul {
    list-style-image: url("icon.png"); /*列表項圖像*/
    list-style-type: circle; /*列表項標誌*/
    list-style-position: inside;
}

/*表格*/
table, th, td {
    border-width: 1px;
    border-style: solid;
    border-color: lightblue;
    border-collapse: collapse; /*折疊邊框*/
    text-align: left; /*表格文本對齊*/
    padding-left: auto; /*表格內左邊距*/
    background-color: lightgreen;
}

/*輪廓*/
table {
    outline-color: lightpink;
    outline-style: dotted;
    outline-width: thick;
}

三、框模型

框模型規定了元素框處理元素內邊距、外邊距、邊框和內容的方式。

table {
    padding: 10%; /*內邊距*/
    margin: 10%; /*外邊距*/
}

四、定位

定位運訓定義元素框相對於其正常位置應該出現的位置，或者相對於父元素甚至瀏覽器窗口的位置。CSS由三種基本定位機制：普通流、浮動和絕對定位。除非指定，否則所有框都在普通流中定位，而普通流中的元素位置由HTML文檔中的出現順序決定。

• 相對定位：元素框會偏移某個距離。元素仍然保持其未定位前的形狀。
• 絕對定位：元素框從文檔流中完全刪除，相對於包含其的塊定位。
• 浮動：浮動框不在普通流中，可以向左或向右移動，直至觸碰包含框或其他浮動框為止。

/*相對定位*/
#information {
    position: relative;
    left: 10%;
    right: 10%;
}

/*絕對定位*/
#information {
    position: absolute;
    left: 10%;
    right: 10%;
}

/*浮動*/
#information {
    float: right;
}

CSS筆記：基礎教程