css知識點匯總_第1頁
css知識點匯總_第2頁
css知識點匯總_第3頁
css知識點匯總_第4頁
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡介

1、CS坤習(xí)知識點1、css是什么？CSS(CascadingStyleSheet)可譯為“層疊樣式表"或"級聯(lián)樣式表”，它定義如何顯示HTML元素，用于控制網(wǎng)頁的外觀。2、為什么使用css,優(yōu)點是什么？1：【內(nèi)容】和【表現(xiàn)】相分離HTM戊件中只存放文本信息，將樣式部分放在一個獨立樣式文件中。頁面對搜索引擎更加友好。2:提高頁面瀏覽速度采用CSS布局的頁面容量要比TABLED局的頁面文件容量小得多，前者一般只有后者的1/2大小。3:易于維護(hù)和改版只要簡單的修改對應(yīng)CSS文件，就可以重新設(shè)計整個網(wǎng)站的頁面。4:使用CSS布局更符合現(xiàn)在的亞3瓶準(zhǔn)W3C組織是對網(wǎng)絡(luò)標(biāo)準(zhǔn)制定的一個非贏

2、利組織，像HTML、CSS、XML的標(biāo)準(zhǔn)就是由它來定制。3、CSS樣式表的調(diào)用方式哪幾種？1、內(nèi)部樣式：把CSS樣式表放到<head>文檔中：格式如下：<styletype="text/css”></style>2、內(nèi)聯(lián)式：把CSS樣式表寫在HTML對應(yīng)的標(biāo)記內(nèi)。格式如下：<pstyle="font-size:14pt;color:blue”>藍(lán)色14號文字</p>3、外部樣式：把編輯好的CSS文檔保存成“.CSS”文件，然后在<head>中定義。格式如下：<head><linkrel

3、=stylesheethref="css的文件地址">.</head>4、導(dǎo)入樣式：與鏈入外部樣式的功能基本相同，只是語法和實現(xiàn)方式上有差別。格式如下：<style>importurl(css.css);</style>4、幾種調(diào)用方式的優(yōu)先級？從高到低：內(nèi)聯(lián)樣式外部樣式內(nèi)部樣式導(dǎo)入樣式5、CSS的語法：CSS的定義是由三部分構(gòu)成：選擇器，屬性和屬性值。語法：selectorproperty:value;選擇符屬性:值舉例：bodycolor:#006666;font-size:18px;屬性和屬性值之間是冒號，多個屬性值之間用分號

4、隔開。6、css選擇器分類1、類選擇器定義：類選擇器根據(jù)類名來選擇，前面以".”來命名，如.democolor:#FF0000;使用方法：在HTML中，標(biāo)記可以定義一個class的屬性來調(diào)用。如<pclass="demo">.</p>2、id選擇器定義：根據(jù)元素ID來選擇元素，具有唯一性。前面以"#號來標(biāo)志，如：#democolor:#FF0000;使用方法：在HTML中，標(biāo)記可以定義一個id的屬性來調(diào)用。如<pid="demo">.</p>3、標(biāo)簽選擇器定義：HTML頁面是有很多不同的

5、標(biāo)簽組成，標(biāo)簽選擇器，則是決定對應(yīng)標(biāo)簽采用相應(yīng)的CSS樣式。使用方法：pfont-size:12px;background:#900;color:090;,頁面里對應(yīng)的p標(biāo)記全部應(yīng)用此樣式。4、偽類選擇器（針對超鏈接）一般偽類都只會被應(yīng)用在鏈接的樣式上，格式如下：a:linkcolor:#000099;帶有超鏈接的文字顯示的樣式。a:visitedcolor:#000099;訪問過的超鏈接顯示的樣式。a:hovercolor:#000099;鼠標(biāo)放在超鏈接上顯示的樣式。a:activecolor:#000099;鼠標(biāo)按下去是超鏈接顯示樣式。acolor:#000099;標(biāo)簽選擇器，鏈接的顏色。

6、5、后代選擇器（派生選擇器）通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式，可以使標(biāo)記更加簡潔。#demopcolor:#ff0000;size:14px;6、通用選擇器通用選擇器用*來表示。例如：*font-size:12px;表示所有的元素的字體大小都是12px。7、并集選擇器（群組選擇器）當(dāng)幾個元素樣式屬性一樣時，可以共同調(diào)用一個聲明，元素之間用逗號分隔。比如：p,td,liline-height:20px;color:#ff0000;7、常用CSS縮寫語法在網(wǎng)頁設(shè)計中使用css縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。css縮寫的主要規(guī)則如下:一、顏色16進(jìn)制的色彩值，如果每兩位的

7、值相同，可以縮寫一半，例如：#000000可以縮寫為#000;#336699可以縮寫為#369;二、盒尺寸通常有下面四種書寫方法：property:value1;表示所有邊都是一個值valuel;property:value1value2;表示top和bottom的值是value1,right和left的值是value2property:value1value2value3;表示top的值是value1,right和left的值是value2,bottom的值是value3property:value1value2value3value4;四個值依次表示top,right,bottom,lef

8、t方便的記憶方法是順時針：上、右、下、左。具體應(yīng)用在margin和padding的例子如下：margin:1px02px5px;三、邊框（border）邊框的屬性如下：border-width:1px;邊框?qū)挾萣order-style:solid;邊框樣式（實線，虛線等）border-color:#000;邊框顏色可以縮寫為一句：border:1pxsolid#000;（屬性值沒有順序。）四、背景(Backgrounds)背景的屬性如下：background-color:#f00;背景顏色background-image:url(background.gif);背景圖片background-r

9、epeat:no-repeat;背景圖片是否重復(fù)background-attachment:fixed;背景圖片是否固定background-position:。0;背景圖片位置可以縮寫為一句：background:#f00url（background.gif）no-repeatfixed00;語法是：background:colorimagerepeatattachmentposition;你可以省略其中一個或多個屬性值，如果省略，該屬性值將用瀏覽器默認(rèn)值默認(rèn)值為：color:transparent,image:none,repeat:repeat,attachment:scroll,pos

10、ition:0%0%五、字體（fonts）字體的屬性如下：font-style:italic;字體風(fēng)格（斜體，正常體等）font-variant:small-caps;字體的小型大寫字母的字體顯示font-weight:bold;字體的粗名田font-size:1em;字體的大小line-height:140%;字體的行距font-family:"LucidaGrande",sans-serif;字體系列(宋體,楷體等)可以縮寫為一句：font:italicsmall-capsbold1em/140%"LucidaGrande",sans-serif;注

11、意，如果你縮寫字體定義，至少要定義font-size和font-family兩個值。六、列表(lists)list的屬性如下：list-style-type:square;(none代表什么都沒有)list-style-position:inside;list-style-image:url(image.gif);可以縮寫為一句：list-style:squareinsideurl(image.gif);取消默認(rèn)的圓點和序號可以這樣寫list-style:none;,CSSa意事項：1、如果屬性值是若干單詞，則要給值加上引號；比如：pfont-family:Georgia,"sansserif,Palatino;2、CSS語法里不分大小寫，(日.是元素在調(diào)用id和class是區(qū)分大小寫的。比如：#dividcolor:#FFFF00;size:20px;,調(diào)用時應(yīng)寫成id="divid",不能寫id="DIVID"。class也一樣。3、養(yǎng)成寫完每個屬性值后加上“；”號的好習(xí)慣。比如：bodycolor:#006666

溫馨提示

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

評論

0/150

提交評論