1. CSS基礎(chǔ)教程
1.1 CSS注釋
CSS中只有這一種注釋方式
/*這是一行注釋*/
1.2 CSS選擇器
// id選擇器 #
#id{attr: value}
// class選擇器
.classname{attr: value}
//標(biāo)簽選擇器
標(biāo)簽{attr: value}
1.3 CSS創(chuàng)建
在html中插入css方式有三種:
- 外部樣式表: css文件在html外面,是單獨(dú)的文件.
- 內(nèi)部樣式表: css卸載html的head里面, 以
style包括. - 內(nèi)聯(lián)樣式表: 卸載html標(biāo)簽里面如:
<p style="color:sienna;">This is a paragraph.</p>
多重樣式:
如果某些屬性在不同的樣式表中被同樣的選擇器定義, 那么屬性值將從更具體的樣式表中繼承過(guò)來(lái). 例如, 外層div設(shè)置顏色red, 內(nèi)部div設(shè)置顏色green, 那么內(nèi)部div顏色會(huì)被設(shè)置成green.
多重樣式將層疊為一個(gè):
html允許使用三種不同方式定義樣式表, 當(dāng)html元素樣式被不止一次定義時(shí)候, 所有的樣式都會(huì)層疊于一個(gè)新的虛擬樣式表中, 層疊的規(guī)則如下.
- 瀏覽器缺省設(shè)置.
- 外部樣式表
- 內(nèi)部樣式表( 在HTML的head內(nèi)部 )
- 內(nèi)聯(lián)樣式表( 在HTML元素內(nèi)部 )
如上表, 4代表最高的優(yōu)先級(jí)
1.4 CSS Background(背景)
background屬性用于定義背景效果.
background屬性包括:
- background-color: 默認(rèn)是透明的
transparent, 可選value: 合法color值, transparent, inherit(繼承) . - background-image: value值: url('URL'), none, inherit .
- background-repeat: value值: repeat, repeat-x, repeat-y, no-repeat, inderit . 默認(rèn)repeat .
- background-attachment: 設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng). value: scroll, fixed, inherit .
- background-position : 設(shè)置背景圖像的起始位置。
- background : 語(yǔ)法: 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; /*默認(rèn)是repeat, 可選值有: repeat, repeat-x, repeat-y, no-repeat*/
background-attachment: scroll;
background: green url('https://www.baidu.com/img/baidu_jgylogo3.gif') fixed;
}
// 用法如上測(cè)試代碼所示, 當(dāng)設(shè)置了background屬性時(shí)候, 關(guān)于background的其它屬性設(shè)置將會(huì)失效.
1.5 CSS Text (背景)
.div-item p{
text-align: center; /*文字對(duì)齊方式*/
color: red; /*文字顏色*/
line-height: 30px; /*行高*/
text-indent: 40px; /*縮進(jìn)元素中文本的首行, value是縮進(jìn)的距離*/
letter-spacing: 9px; /*字符間距*/
text-shadow: 5px 2px 2px black; /*前兩個(gè)表示在x,y軸的偏移量, 第三個(gè)模糊,第四個(gè)陰影顏色*/
text-decoration: underline; /*none:默認(rèn)的, underline下劃線, overline上劃線, line-through刪除線*/
text-transform: uppercase; /*capitalize:每個(gè)單詞大寫(xiě)字母開(kāi)頭, uppercase:僅有大寫(xiě)字母, lowercase: 僅有小寫(xiě)字母*/
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 - 正常，未訪問(wèn)過(guò)的鏈接
a:visited - 用戶已訪問(wèn)過(guò)的鏈接
a:hover - 當(dāng)用戶鼠標(biāo)放在鏈接上時(shí)
a:active - 鏈接被點(diǎn)擊的那一刻
*/
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 中無(wú)法調(diào)整文本的問(wèn)題，許多開(kāi)發(fā)者使用 em 單位代替像素。
em的尺寸單位由W3C建議。
1em和當(dāng)前字體大小相等。在瀏覽器中默認(rèn)的文字大小是16px。
因此，1em的默認(rèn)大小是16px。可以通過(guò)下面這個(gè)公式將像素轉(zhuǎn)換為em：px/16=em
*/
