CSS 基礎(chǔ)語法
1.如果屬性值是若干單詞,則要給其加雙引號(hào)????? eg:p {font-family:"sans serif";}
2.如果要定義不止一個(gè)聲明,則需要用分號(hào)將每個(gè)聲明分開麻捻。? 結(jié)尾最好也加上一個(gè)分號(hào)。
3.CSS 對(duì)大小寫不敏感呀袱。不過存在一個(gè)例外:如果涉及到與 HTML 文檔一起工作的話贸毕,class 和 id 名稱對(duì)大小寫是敏感的。
CSS 高級(jí)語法
1.對(duì)選擇器進(jìn)行分組用逗號(hào)隔開夜赵,代表其享有同樣的樣式??????? eg:h1,h2,h3,h4,h5,h6{? color: green;? }
2.????????????? font-family: Times, "Times New Roman", serif;
如果瀏覽器不支持第一個(gè)字體明棍,則會(huì)嘗試下一個(gè)(都用逗號(hào)隔開)。也就是說击蹲,font-family 屬性的值是用于某個(gè)元素的字體族名稱或/及類族名稱的一個(gè)優(yōu)先表婉宰。瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值心包。
CSS 派生選擇器(上下文選擇器)
li strong{? ? font-style: italic;? ? font-weight: normal;? }
上面的選擇器代表是li標(biāo)簽中的strong標(biāo)簽才會(huì)有此效果馒铃,若不在li中的strong并無此效果。
CSS id 選擇器
1.
#red{ color:red娃殖;}
<p id="red">這個(gè)段落是紅色的</p>
注意:id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次
2.
id 選擇器和派生選擇器常常一起用
#sidebar p
{
}//id 是 sidebar 的元素內(nèi)的段落才應(yīng)用此樣式
即使被標(biāo)注為 sidebar 的元素只能在文檔中出現(xiàn)一次议谷,這個(gè) id 選擇器作為派生選擇器也可以被使用很多次:
#sidebar p
{
}
#sidebar h1
{
}
與頁面中的其他 p 元素明顯不同的是,sidebar 內(nèi)的 p 元素得到了特殊的處理卧晓,同時(shí),與頁面中其他所有 h2 元素明顯不同的是郁稍,sidebar 中的 h2 元素也得到了不同的特殊處理胜宇。
CSS 類選擇器
1.
.center{
}??????????????????????????????????????????? <p class="center">恢着。。财破。。</p>
注意:類名的第一個(gè)字符不能使用數(shù)字狈究!它無法在 Mozilla 或 Firefox 中起作用。
2.
class 被用作派生選擇器
CSS 屬性選擇器
1.
[title] {
color:red;
}
為帶有 title 屬性的所有元素設(shè)置樣式
應(yīng)用:<p title="hello world">...</p>
[title=W3School]{
border:5px solid blue;
}
應(yīng)用:
<img title="W3School">...</img>可以應(yīng)用
<p title="greeting">....</p>無法使用
外部樣式表:當(dāng)樣式需要應(yīng)用于很多頁面時(shí)亿眠,外部樣式表將是理想的選擇磅废。
每個(gè)頁面使用 <link>標(biāo)簽鏈接到樣式表。<link> 標(biāo)簽在(文檔的)頭部
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
瀏覽器會(huì)從文件 mystyle.css 中讀到樣式聲明拯勉,并根據(jù)它來格式文檔。
注意:文件不能包含任何的 html 標(biāo)簽宫峦。樣式表應(yīng)該以 .css 擴(kuò)展名進(jìn)行保存。
內(nèi)部樣式表:當(dāng)單個(gè)文檔需要特殊的樣式時(shí)犀勒,就應(yīng)該使用內(nèi)部樣式表 標(biāo)簽在文檔頭部定義內(nèi)部樣式表 標(biāo)簽在文檔頭部定義內(nèi)部樣式表
妥曲。
多重樣式:如果某些屬性在不同的樣式表中被同樣的選擇器定義,那么屬性值將從更具體的樣式表中被繼承過來檐盟。
外部樣式表中:h3 {? color: red;? text-align:left;? font-size:8pt;? }
內(nèi)部樣式表中:h3 {? text-align:right;? font-size:20pt;? }
擁有內(nèi)部樣式表的這個(gè)頁面同時(shí)與外部樣式表鏈接,那么 h3 得到的樣式是:
color:red;
text-align:right;
font-size:20pt;
CSS 背景
1.可以使用background-color 屬性為元素設(shè)置背景色导犹。
2.要把圖像放入背景陌宿,需要使用background-image 屬性锡足。
eg:body {
background-image: url(/i/eg_bg_04.gif);
}
3.背景重復(fù)
background-repeat 屬性:repeat-x 和 repeat-y 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)舶得,no-repeat 則不允許圖像在任何方向上平鋪沐批。(不允許在任何方向上重復(fù))
4.位置定位(background-position 的默認(rèn)值是 0% 0%,在功能上相當(dāng)于 top left九孩。)
background-position 屬性:top、bottom煤墙、left宪拥、right 和 center
a.關(guān)鍵字:top/bottom/left/right/center等
位置關(guān)鍵字可以按任何順序出現(xiàn),只要保證不超過兩個(gè)關(guān)鍵字 - 一個(gè)對(duì)應(yīng)水平方向脚作,另一個(gè)對(duì)應(yīng)垂直方向缔刹。
如果只出現(xiàn)一個(gè)關(guān)鍵字,則認(rèn)為另一個(gè)關(guān)鍵字是 center亿扁。
b.百分?jǐn)?shù)值
如果圖像位于 0% 0%魏烫,其左上角將放在元素內(nèi)邊距區(qū)的左上角。如果圖像位置是 100% 100%,會(huì)使圖像的右下角放在右邊距的右下角稀蟋。
c.長度值
長度值解釋的是元素內(nèi)邊距區(qū)左上角的偏移退客。偏移點(diǎn)是圖像的左上角。
5.背景關(guān)聯(lián)
background-attachment :fixed:防止當(dāng)文檔向下滾動(dòng)時(shí)档玻,背景圖像也會(huì)隨之滾動(dòng)
6.在一個(gè)聲明中設(shè)置所有背景屬性:
body? {
background:#00FF00 url(bgimage.gif) no-repeat fixed top;
}
CSS 文本
1.縮進(jìn)文本(text-indent 屬性)
注意:可以為所有塊級(jí)元素應(yīng)用 text-indent茫藏,但無法將該屬性應(yīng)用于行內(nèi)元素
2.水平對(duì)齊(text-align)
text-align:center 與<center>的區(qū)別:
<center>不僅影響文本,還會(huì)把整個(gè)元素居中凉当。
text-align不會(huì)影響元素的位置,只是把元素中的文本進(jìn)行對(duì)齊
3.字間隔(word-spacing)
提供一個(gè)正長度值忠藤,那么字之間的間隔就會(huì)增加楼雹。為 word-spacing 設(shè)置一個(gè)負(fù)值,會(huì)把它拉近:
4.字母間隔(letter-spacing)
字母間隔修改的是字符或字母之間的間隔榨咐。
5.字符轉(zhuǎn)換(text-transform) 大小轉(zhuǎn)換等
6.文本裝飾(text-decoration):比如下劃線/閃爍等
7.處理空白符(white-space)
8.文本方向
direction就是影響塊級(jí)元素中文本的書寫方向
9.設(shè)置行高:line-height
CSS字體
1.font-family
只有當(dāng)字體名中有一個(gè)或多個(gè)空格(比如 New York)祭芦,或者如果字體名包括 # 或 $ 之類的符號(hào)憔鬼,才需要在 font-family 聲明中加引號(hào)。
2.字體變形
font-variant 屬性可以設(shè)定小型大寫字母
3.字體加粗
font-weight
css鏈接
1.
2.text-decoration 屬性大多用于去掉鏈接中的下劃線;
3.background-color 屬性規(guī)定鏈接的背景色;
3.
CSS 列表
1.list-style-type可以改變列表項(xiàng)的標(biāo)志類型(比如前面的圓點(diǎn))
2.list-style-image可以將前面的標(biāo)志替換為圖像
CSS 表格
1.表格邊框默認(rèn)為兩條線,border-collapse 屬性設(shè)置是否將表格邊框折疊為單一邊框照雁。
border-collapse:collapse;表示為單一邊框饺蚊。
2.表格文本對(duì)齊
text-align 屬性設(shè)置水平對(duì)齊方式
vertical-align 屬性設(shè)置垂直對(duì)齊方式
3.empty-cells:hide;表示隱藏表格中的空白格
CSS 輪廓(位于邊框邊緣的外圍,可起到突出元素的作用)
CSS 內(nèi)邊距(padding)
1.接受長度值或百分比值裕坊,但不允許使用負(fù)值燕酷。
2.上、右饵蒂、下酱讶、左的順序分別設(shè)置各邊的內(nèi)邊距
3.。若用百分?jǐn)?shù)值得问,則是相對(duì)于其父元素的 width 計(jì)算的。
4.CSS 邊框
border-style:定義樣式(可以為各邊定義不同的樣式)
border-width:定義邊框?qū)挾葅
?????????????????????????????????????????????????????? 指定長度值? /? 使用 3 個(gè)關(guān)鍵字之一【 thin 焚挠、medium(默認(rèn)值) 和 thick漓骚。】
}(可以為各邊定義不同的寬度)
注意:如果沒有定義邊框樣式(style)噩斟,即使定義了邊框?qū)挾龋╳idth)孤个,也沒有效果,因?yàn)槭紫染蜎]有邊框齐鲤。
border-color:邊框顏色(如果沒有為邊框聲明顏色给郊,它將與元素的文本顏色相同)
css外邊距(margin)
1.margin 屬性接受任何長度單位,可以是像素统锤、英寸炭庙、毫米或 em。若用百分?jǐn)?shù)則是相對(duì)于父元素的 width 計(jì)算的免绿。
2.margin 的默認(rèn)值是 0,所以如果沒有為 margin 聲明一個(gè)值淌哟,就不會(huì)出現(xiàn)外邊距迹卢。
注意!M讲帧!在支持 CSS 的瀏覽器中症见,外邊距會(huì)在每個(gè)段落元素的上面和下面生成“空行”谋作。因此,如果沒有為 p 元素聲明外邊距遵蚜,瀏覽器可能會(huì)自己應(yīng)用一個(gè)外邊距吭净。
CSS 外邊距合并
(當(dāng)兩個(gè)垂直外邊距相遇時(shí),它們將形成一個(gè)外邊距囚巴。 合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者)
注釋:只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并彤叉。行內(nèi)框焕檬、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。