1. CSS基礎教程

1.1 CSS注釋

CSS中只有這一種注釋方式

/*這是一行注釋*/

1.2 CSS選擇器

// id選擇器 #
#id{attr: value}

// class選擇器
.classname{attr: value}

//標簽選擇器
標簽{attr: value}

1.3 CSS創建

在html中插入css方式有三種:

• 外部樣式表: css文件在html外面,是單獨的文件.
• 內部樣式表: css卸載html的head里面, 以style包括.
• 內聯樣式表: 卸載html標簽里面如: <p style="color:sienna;">This is a paragraph.</p>

多重樣式:
如果某些屬性在不同的樣式表中被同樣的選擇器定義, 那么屬性值將從更具體的樣式表中繼承過來. 例如, 外層div設置顏色red, 內部div設置顏色green, 那么內部div顏色會被設置成green.

多重樣式將層疊為一個:
html允許使用三種不同方式定義樣式表, 當html元素樣式被不止一次定義時候, 所有的樣式都會層疊于一個新的虛擬樣式表中, 層疊的規則如下.

1. 瀏覽器缺省設置.
2. 外部樣式表
3. 內部樣式表( 在HTML的head內部 )
4. 內聯樣式表( 在HTML元素內部 )

如上表, 4代表最高的優先級

1.4 CSS Background(背景)

background屬性用于定義背景效果.
background屬性包括:

• background-color: 默認是透明的transparent, 可選value: 合法color值, transparent, inherit(繼承) .
• background-image: value值: url('URL'), none, inherit .
• background-repeat: value值: repeat, repeat-x, repeat-y, no-repeat, inderit . 默認repeat .
• background-attachment: 設置背景圖像是否固定或者隨著頁面的其余部分滾動. value: scroll, fixed, inherit .
• background-position : 設置背景圖像的起始位置。
• background : 語法: background: color position size repeat origin clip attachment image; 缺少是被允許的.

.set-bg{
    background-color: red;
    background-image: url('https://www.baidu.com/img/baidu_jgylogo3.gif');
    background-repeat: no-repeat; /*默認是repeat, 可選值有: repeat, repeat-x, repeat-y, no-repeat*/
    background-attachment: scroll;

    background: green url('https://www.baidu.com/img/baidu_jgylogo3.gif') fixed;
}

// 用法如上測試代碼所示, 當設置了background屬性時候, 關于background的其它屬性設置將會失效. 

1.5 CSS Text (背景)

.div-item p{
    text-align: center; /*文字對齊方式*/
    color: red; /*文字顏色*/
    line-height: 30px; /*行高*/
    text-indent: 40px; /*縮進元素中文本的首行, value是縮進的距離*/
    letter-spacing: 9px; /*字符間距*/
    text-shadow: 5px 2px 2px black; /*前兩個表示在x,y軸的偏移量, 第三個模糊,第四個陰影顏色*/
    text-decoration: underline; /*none:默認的, underline下劃線, overline上劃線, line-through刪除線*/
    text-transform: uppercase; /*capitalize:每個單詞大寫字母開頭, uppercase:僅有大寫字母, lowercase: 僅有小寫字母*/
    white-space: nowrap;/*元素空白處理方式: pre:空白被瀏覽器保留, nowrap:不換行 知道遇到br, 
    pre-wrap:保留空白符, 正常換行, pre-line: 合并空白符 保留換行符.*/
}

1.6 CSS link(鏈接)

a:link {
    background-color:#B2FF99;
    text-decoration: none;
}
a:visited {
    background-color:#FFFF85;
}
a:hover {
    background-color:#FF704D;
}
a:active {
    background-color:#FF704D;
}
/*
a:hover 必須跟在 a:link 和 a:visited后面
a:active 必須跟在 a:hover后面

a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當用戶鼠標放在鏈接上時
a:active - 鏈接被點擊的那一刻
*/

1.7 CSS Fonts (字體)

.div-item{
    font-weight: bold; /*加粗*/
    font-size: 18px; 
    font-family: "Times New Roman", Times, serif; 
    font-style: italic;

}
/* 
font-style
p.normal {font-style:normal;}  正常的
p.italic {font-style:italic;}  傾斜的
p.oblique {font-style:oblique;}  

為了避免Internet Explorer 中無法調整文本的問題，許多開發者使用 em 單位代替像素。
em的尺寸單位由W3C建議。
1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。
因此，1em的默認大小是16px。可以通過下面這個公式將像素轉換為em：px/16=em
*/