css

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 屬性)

eg:p {text-indent: 5em;}

注意:可以為所有塊級(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ì)合并。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末兼呵,一起剝皮案震驚了整個(gè)濱河市腊敲,隨后出現(xiàn)的幾起案子碰辅,更是在濱河造成了極大的恐慌,老刑警劉巖凌彬,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件循衰,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡会钝,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門俭正,熙熙樓的掌柜王于貴愁眉苦臉地迎上來掸读,“玉大人闹蒜,你說我怎么就攤上這事±焉粒” “怎么了砌烁?”我有些...
    開封第一講書人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長函喉。 經(jīng)常有香客問我避归,道長,這世上最難降的妖魔是什么管呵? 我笑而不...
    開封第一講書人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任梳毙,我火速辦了婚禮,結(jié)果婚禮上捐下,老公的妹妹穿的比我還像新娘账锹。我一直安慰自己,他們只是感情好坷襟,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開白布奸柬。 她就那樣靜靜地躺著,像睡著了一般婴程。 火紅的嫁衣襯著肌膚如雪廓奕。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,821評(píng)論 1 290
  • 那天铃肯,我揣著相機(jī)與錄音,去河邊找鬼宴胧。 笑死恕齐,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的士骤。 我是一名探鬼主播拷肌,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼若锁!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起口予,我...
    開封第一講書人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎木张,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體郊闯,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谨履,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了害捕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖疮跑,靈堂內(nèi)的尸體忽然破棺而出祖娘,到底是詐尸還是另有隱情渐苏,我是刑警寧澤琼富,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布择诈,位于F島的核電站哗戈,受9級(jí)特大地震影響唯咬,放射性物質(zhì)發(fā)生泄漏奈附。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望草娜。 院中可真熱鬧,春花似錦移袍、人聲如沸葡盗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽评雌。三九已至砂轻,卻和暖如春厨喂,著一層夾襖步出監(jiān)牢的瞬間蜕煌,已是汗流浹背斜纪。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來泰國打工因块, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留涡上,地道東北人拒名。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓耻警,卻偏偏與公主長得像,于是被迫代替她去往敵國和親甸怕。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評(píng)論 1 92
  • CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識(shí)選擇器(重要D寂小=斓妗H汀)繼承妄迁、特殊性、層疊登淘、重要性CSS格式化排版單位和值盒模型浮動(dòng)...
    廖少少閱讀 3,066評(píng)論 0 40
  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,033評(píng)論 0 1
  • 本文為閱讀《Head First HTML 與 CSS》的css部分的讀書筆記黔州,方便回顧書上的知識(shí),另一篇為Hea...
    兼續(xù)閱讀 1,813評(píng)論 0 17
  • 放假這幾天,宅在家里看了過去幾個(gè)月沒看的電影、電視劇君躺。比如說《人民的名義》,當(dāng)初電視臺(tái)放的時(shí)候,網(wǎng)絡(luò)上大火,周圍的...
    呢喃靜語閱讀 342評(píng)論 0 0