CSS知識(shí)點(diǎn)總結(jié)_第1頁(yè)
CSS知識(shí)點(diǎn)總結(jié)_第2頁(yè)
CSS知識(shí)點(diǎn)總結(jié)_第3頁(yè)
已閱讀5頁(yè)，還剩18頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、1.1 1CSScss是什么CSS指層疊樣式表(CascadingStyleSheets)樣式定義如何顯示HTML元素樣式通常存儲(chǔ)在樣式表【.css文件、css區(qū)域】中把樣式添加到HTML4.0中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題外部樣式表可以極大提高工作效率外部樣式表通常存儲(chǔ)在CSS文件中多個(gè)樣式定義可層疊為css作用樣式表解決了html的內(nèi)容與表現(xiàn)分離使用樣式表極大的提高了工作效率。css書寫規(guī)則本語(yǔ)法Css規(guī)則主要由兩部分組成1選擇器2條或多條屬性聲明選擇器主要作用是為了確定需要改變樣式的HTML元素每一條聲明由一個(gè)屬性和一個(gè)值組成，使用花括號(hào)來(lái)包圍聲明，屬性與值之間使用冒號(hào)（:）分開如圖

2、：屬性值尿性值1-一一卜一一Ihlcolor:ed;font-size:14px;干八十遶擇器聲明聲明值的單位尺寸%百分比in英寸cmmmemlem琴于當(dāng)前齡述尺寸d：on等于幻前宇飭尺才俯和剛?cè)?，帕果杲元走?2PC顯示，那么aem最Z4p“在"5如GE是非常有用的判0因?yàn)樗晌宜葎?dòng)適應(yīng)用戶所使用的宇館ex今ex是一個(gè)宇體的x-heght（x-height通第是手律尺寸的一半。）pt確（1pt孝丁1/72英寸）pc13點(diǎn)話字（1皿等于口點(diǎn)）IPX嗓素（計(jì)耳機(jī)瞬黠上的一-卜點(diǎn)）裁色單恆（顏色宕）顏色名稱購(gòu)red）rgbtXrXjX)RGBffi(比如rgb(255A0»rg

3、b(x4t>,x%,x%)RG日百分比值（比如gb（100%e怖R%）-irgflbb十六進(jìn)制數(shù)（比如0001書寫注意事項(xiàng)如果值為若干單詞，則要給值加引號(hào)多個(gè)聲明之間使用分號(hào)（;）分開css對(duì)大小寫不敏感,如果涉及到與html文檔一起使用時(shí)，class與id名稱對(duì)大小寫敏感1.4導(dǎo)入css方式第一種：內(nèi)聯(lián)樣式表要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。Style屬性可以包含任何CSS屬性例如:<divstyle=”border:1pxsolidblack”>這是一個(gè)DIV</div>注意:慎用這種方式，它將內(nèi)容與顯示混合在一起，損失了樣式表的

4、優(yōu)勢(shì)一般情況下，這種方式只有在一個(gè)標(biāo)簽上只應(yīng)用一次樣式時(shí)才會(huì)使用第二種：內(nèi)部樣式表我們可以使用style標(biāo)簽在html文檔的head中來(lái)定義樣式表。例如:1<EDOCTYPEhtml>3 <head>4 <metacharset=，TUTF-8rt>5 ftititlghm廣電/title?<styletypestxt/css1Ispancolor:rec/;3</style>|9<7head>|10<body>in12 <divstyle="border:lpxsolidred;">

5、3SftDiv</div>131|4<span>pt±?f</span>16 </body>17 </html>這種方式，樣式只適合應(yīng)用于一個(gè)頁(yè)面第三種：外部樣式表如果想要在多個(gè)頁(yè)面使用同一個(gè)樣式表，可以使用外部樣式表來(lái)導(dǎo)入。我們可以在html頁(yè)面上使用link標(biāo)簽來(lái)導(dǎo)入外部樣式表。例如：外部樣式表，應(yīng)該以css為后綴來(lái)保存，可以使用任意文本編輯器對(duì)css文件進(jìn)行編輯。第四種：import導(dǎo)入這種方式也是外部導(dǎo)入。.de1mohtrnl王丨1<!DOCTYPEhtmlA2-<htrnl>3<head&

6、gt;Jjnnystyt"9説1 spancolor;red;divborder：IpxsoLidrec/;4 <metacharset-"UTF-8">5 titJ電廣電電:>6 -<styletype=<<text/css,r>-import"rystyLe.csss七yl信789</head>IB<body>1112 4,Div</div>1313 <span>ft<tTS</span>1516</t>ody>|17impo

7、rt與引用外部樣式表的區(qū)別【了解】1. import這種方式只有firefox支持，而ie不支持。2. import這種方式導(dǎo)入的css，會(huì)在整個(gè)頁(yè)面加載后，才會(huì)加載樣式。如果網(wǎng)絡(luò)不好情況下，會(huì)先看到無(wú)樣式修飾的頁(yè)面，閃爍一下后，才會(huì)看到有樣式修飾的頁(yè)面。而使用外部樣式表，會(huì)先裝載樣式表，這樣看到的就是有樣式修飾的頁(yè)面。3. import不支持通過(guò)javascript修改樣式，而link支持。優(yōu)先級(jí)問(wèn)題1.5 內(nèi)聯(lián)樣式表>內(nèi)部樣式表>外部樣式表：就近原則CSS選擇器css選擇器主要是用于選擇需要添加樣式的html元素。對(duì)于css來(lái)說(shuō)，它的選擇器有很多，我們主要介紹以下幾種id選擇器

8、id選擇器使用#引入，它引用的是id屬性中的值。<styletype="text/cssrt>background-color:;width:100pXjheight:100px;</style>body<divid=,rdivlr,>iiA一個(gè)Div</</body>類選擇器類選擇器使用時(shí)，需要在類名前加一個(gè)點(diǎn)號(hào)(.)項(xiàng)目中，絕大部都是用類選擇器排版< head><metacharset="UTF-8fl>< styletype="text/cssfr>background

9、-color:gray;width:100px;height:100px;border:Ipxsolidred;</style></head><body><divclass="divl"這是一個(gè)Divv/div</body></html>|元素選擇器這是最常見(jiàn)的選擇器，簡(jiǎn)單說(shuō)，文檔中的元素就是選擇器<head><metacharset="UTF-8f,><styletype="text/css">Idivbackground-color:gra

10、ywidth:100pXjheight;200px;border:IpxsoLidred;</style></head><body>Kdip專這是一個(gè)Diy</MiQ<p></p>陡是一個(gè)Di曾c/div</body>|屬性選擇器如果需要選擇有某個(gè)屬性的元素，而不論屬性是什么，可以使用屬性選擇器inputtype=*text'background-cclor:gray;width10&px;height4&pxjborder:Ipxsotxdred;</style></hea

11、d><body>tinputtype=ritext"placeholder="ifcA/*<inputtype®"text"placeholders"<inputtype=,fpassword<inputtype="button"value="r，,>偽類css偽類用于向某些選擇器添加特殊效果。F面我們介紹一下錨偽類。在支持css的瀏覽器中，鏈接的不同狀態(tài)都可以不同的方式顯示這些狀態(tài)包括：活動(dòng)狀態(tài)，已被訪問(wèn)狀態(tài)，未被訪問(wèn)狀態(tài)，和鼠標(biāo)懸念狀態(tài)。/*未話岡的宦提*/*

12、已詁問(wèn)的質(zhì)接/*鼠標(biāo)移動(dòng)到錯(cuò)搖上V/*選走的騎接Va:linkicier:0aiccLct：#0CFFQO-a:hevereolor:activecelcr:*CiOCOFfJ<metacharset=,orF-S,l><styletype="text/css">a.1visited(color:blue;/*訪問(wèn)后狀態(tài)業(yè)/a:activecolor:green;/*點(diǎn)擊狀態(tài)羊/arLinkcolor:purpLe;/*曹通狀態(tài)宰/a.hovercolor:blacky鬣標(biāo)懸浮狀態(tài)這個(gè)只能放在肓面，不能獲</style></head

13、><body><ahref=rrhttp:/wwinf.baidu.百度</呂<ahref=",f>SJ±</a><ahref="http:/mm,t></a></body>層級(jí)選擇器Id、元素、類、屬性選擇器的結(jié)合<metacharset=*L*TF-8H><styletypes'text/cssd,>diudivifplwidth:l&Qpx;height:100px;border：Ipxsotidjroy;</style&g

14、t;</head>cbody><div><diu><pid=ttpl，r>SiSCSS+DIV</p></div><div><P>aCSS+DIV</ps</div></div></body>CSS屬性字體Css字體屬性定義文本的字體系列，大小，加粗，風(fēng)格（如斜體）和變形（如小型大寫字母）常用屬性：font:簡(jiǎn)寫屬性，作用是把所有針對(duì)字體的屬性設(shè)置在一個(gè)聲明中?！緎tylesizefamily】font-family:定義字體系列font-size:定

15、義字體的尺寸font-style:定義字體風(fēng)格<head><metacharset,rUrF-3Jr><styletype=*ftext/css'*>加2/*font-family:黑郎;font-size:32px;font-style:italic;*/font:itaLic32px尊他</style></head><body><pid=>l">只墓我堅(jiān)為一定會(huì)有收莊hJlcK/pA<pid？、只要我堅(jiān)持,定會(huì)有收獲</body>文本CSS文本屬性可定義文本的外觀。

16、通過(guò)文本屬性，您可以改變文本的顏色、字符間距,對(duì)齊文本，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)，等等。常用屬性?color:定義文本顏色?text-align:定義文本對(duì)齊方式?letter-spacing:定義字符間隔<head><metacharset=,rL*TF-3,l><sty1etype="text/css">嘶colordtve;text-align：right;letter-spacing：5px'|</style></head><body><pid=>l">P堅(jiān)持

17、.一定會(huì)有收莪h(huán)ello<p即只禎我堅(jiān)持，一定會(huì)有O.hello</p></bcdy>只更我堊持，一定會(huì)有收Shcllo只要我背景CSS允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。CSS在這方面的能力遠(yuǎn)遠(yuǎn)在HTML之上。常用屬性：background:簡(jiǎn)寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中background-color:定義背景顏色background-image:定義背景圖片background-position:定義背景圖片的起始位置【left,center,right】background-repeat:定義背景圖片是否及如何重復(fù)<

18、;head><metacharset="UTF-8">cstyletype="text/匚百占"切2background-color:ue;background-image;urL(“imagQs/nl.pngbackground-position:cente尸；background-repeat:norepeot;/repeatjrepeat-re|width:400pxjheight:400px;</styIea</head><body><pid="pl->只要我堅(jiān)持，一定會(huì)有收獲

19、hello</p><pid=f,p2,F>只耍我堅(jiān)捋*一恵會(huì)有收Shello</p></body>尺寸CSS尺寸(Dimension)屬性允許你控制元素的高度和寬度。常用屬性:?width:設(shè)置元素的寬度?height:設(shè)置元素的高度列表CSS列表屬性允許你放置、改變列表項(xiàng)標(biāo)志，或者將圖像作為列表項(xiàng)標(biāo)志。常用屬性:?list-style:簡(jiǎn)寫屬性。用于把所有用于列表的屬性設(shè)置于一個(gè)聲明中。?list-style-image:定義列表項(xiàng)標(biāo)志為圖象?list-style-position:定義列表項(xiàng)標(biāo)志的位置list-style-type:定義列表項(xiàng)

20、標(biāo)志的類型。'丁叭己基礎(chǔ)虹JavaWeb2丁護(hù)它£E童妄a企業(yè)項(xiàng)目<head><metacha5芒七="U丁F-W<styletype="text/csstr>11border:solidgray;/*list-style-type:square;1ist-s:url("irages/卡。廠曰廠小.gif'1;1ist-styliposition:inside;*/list-style：insideurt("inages/</s七ylEA</head><body><

21、;ul><li>JavaFi</li><li>JavaWeb</li><li>±4k項(xiàng)目</li></ul></body>表格CSS表格屬性可以幫助您極大地改善表格的外觀常用屬性：?border-collapse:定義是否把表格邊框合并為單一的邊框。?border-spacing:定義分隔單元格邊框的距離caption-side:定義表格標(biāo)題的位置【top,bottom】<head><retarharset='UTF-5,r>-<styletyp

22、e="text/csstiible/4border-coLlapse:collapse;*/*宅文是否把読格邊框合井為*caption-side;bottom;/*宦丸表裕標(biāo)題的GLH*/border-spacing:lJpx;/*s號(hào)冃申亓咋-?憲和</hed><body><tablebcrder=N1"><caption7caption><trheight-vth>名字"th</tr><tr><td>*LE</td><td>40</td

23、></tr><tr><td>E3</td><td>29</td></tr></table></body>輪廓輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。CSSoutline屬性規(guī)定元素輪廓的樣式、顏色和寬度。常用屬性：?outline:在一個(gè)聲明中設(shè)置所有的輪廓屬性?outline-color:定義輪廓的顏色?outline-style:定義輪廓的樣式outline-width:定義輪廓的寬度列表:<hedd><tac

24、harset*3<5tyletype-"亡xt/rssH>tablef/*outline-color:blu«outline-stylerdotted;outLine-midth:5px;+/outline:5pxdattrdbtue;</style></head><body><tableborder-"I">ccdption>f|</captlDn><trheight="50px"></tr><tr><td>

25、4&</td</tr><tr>d>$23</td><td>29</td></tr></tahle></body>定位CSS定位(Positioning)屬性允許你對(duì)元素進(jìn)行定位?；蛘叨ㄎ坏幕舅枷牒芎?jiǎn)單，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置,相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置CSS有三種基本的定位機(jī)制：普通流、浮動(dòng)和絕對(duì)定位。常用屬性：?position:把元素放置到一個(gè)靜態(tài)的，相對(duì)的，絕對(duì)的，或固定的位置中。?top:定義了定位元素的上外邊距邊界與其包

26、含塊上邊界之間的偏移量?right:定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移left:定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移相對(duì)定位是一個(gè)非常容易掌握的概念。如對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。<head><metacharet=rtUTF-8"><styletype=,rtext/css">width:height:backgroundcolor:red;#d2width:200px;height:200px;background

27、-color:greenyposition:retative;left:20px;/*在原來(lái)的垃置左移20個(gè)像素*/margin:100</style></head><body><divid=J,dl<divid=J,d2,rx/div></body>絕對(duì)布局1<head><metacharset="UrF-8"><styletype="text/cssrr>width:200pxiheight:20&pxbackground-color:red;#d2w

28、idth:200px;height:200px;backgroundecolor:green;position:absoLut;/便用div脫離文檔流top:8px;left:20Spx;</style></head><body><divid=*fd2"></div><divid=,fd2</div></body>分類相對(duì)于其css分類屬性允許你控制如何顯示元素，設(shè)置圖像顯示于另一元素中的何處,正常位置來(lái)定位元素，使用絕對(duì)值來(lái)定位元素，以及元素的可見(jiàn)度。常用屬性?clear:設(shè)置一個(gè)元素的側(cè)面是

29、否允許其它的浮動(dòng)元素?float:定義元素在哪個(gè)方向浮動(dòng)cursor:當(dāng)指向某元素之上時(shí)顯示的指針類型visibility:定義元素是否可見(jiàn)或不可見(jiàn)。浮動(dòng)：<head><metcharset»,t；7'F-fi"><styletype="text/css,f>#日工width:200px;height:2&6px;background-color:red;flost:£eft;#(i2width;200px;height:20&px;hackground-color:reen;float:Lef

30、t;#dJwidth:;height:2&&px;background-color:btde;flcat:te/t;</style></head><body><divid="dl>l</div><divid=Md2*>2</div>dividW站火/di“</body>display<head><metacharset="l/TF-8*><styletype="text/csstr>/*値描述none此元素不會(huì)袒見(jiàn)示。

31、block此元素將顯示為塊級(jí)元爲(wèi)此元素前后會(huì)帶有按行符冃inlineSt認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素.元索前后沒(méi)有換行符*/adisplay:block*</style></head><body><a>AA</a><a>BB</a></body></html>visibility<head>chasetrrcr7F-'H,-<styletype="text/css">avisibility|/*display:門on借；divwidth

32、:100px;height!100px；background-colorred;</style></head><body><a>AA</axa>BB</a><divid=Vl">l</dil</t>ody>clear3«<head><nietacharset=-8"><styletype=,ftext/css,f>imgfloat:Left;clear:both;0</style>1</head>2

33、-<body>(<|imgsrc-"images/ml,pngrt/>|<imgsrc="zfnages/ml.png"/></body>CSS框模型盒子模型CSS框模型(BoxModel)規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框和外邊距的方式。css粧窯型槪述border型痼margin佇卜邊距）hetght倚度）padding（內(nèi)邊距）element氏索）wichlh匱廃）元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)

34、遮擋其后的任何元素邊框元素的邊框（border）是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。CSSborder屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。?常用屬性：border:簡(jiǎn)寫屬性，用于把針對(duì)于四個(gè)邊的屬性設(shè)置在一個(gè)聲明。border-color:簡(jiǎn)寫屬性，定義元素邊框中可見(jiàn)部分的顏色，或?yàn)樗膫€(gè)邊分別設(shè)置顏色。border-style:用于定義所有邊框的樣式，或者單獨(dú)為各邊設(shè)置邊框樣式。border-width:簡(jiǎn)寫屬性，用于為元素的所有邊框設(shè)置寬度，或則單獨(dú)地為各邊邊框設(shè)置寬度border-top:簡(jiǎn)寫屬性，用于把上邊框的所有屬性設(shè)置到一個(gè)聲明中border-right:簡(jiǎn)寫屬性，用于把右邊框所有屬性設(shè)置到一個(gè)聲明中border-bottom:簡(jiǎn)寫屬性，用于把下邊框

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論