第一篇：常用CSS縮寫語法總結

font字體縮寫字體縮寫是針對字體樣式的縮寫形式，包含字體、字號等屬性，使用方法如下：

font:font-style font-variant font-weight font-size line-height font-family 對于字體的樣式縮寫，只需要使用font作為屬性名稱，后接各個屬性的值即可，使用空格分開，例如：

p {font:italic normal bold 12pt/18pt 宋體;} 此代碼將使p對象出現斜體、大小寫默認、加粗、12pt大小、18pt行高、宋體的字體樣式。使用css縮寫時，不需要的參數可以使用normal 代替，也可以直接去掉這個參數，因為css中的各個屬性的值寫法并不是都相同，因此直接去掉某個參數不會影響順序與值的關系。但是也會有例外，如本例中的 12pt/18pt指的是font-size字號與line-height行號使用反斜線分隔，因為font-size與line-height的值有可能使用同一計量單位，為了保證css對兩個值所對應的屬性一致，必須使用反斜線來分隔兩個數值。如果對于傳統寫法，我們必須使用以下的形式：

p { font-style:italic;font-variant:normal;font-weight;bold;font-siize:12pt;font-height:18pt;font-family:宋體;} 字體縮寫只用一句話便完成了上述的6個屬性的設置，節省了大量的css代碼，對于其它屬性的縮寫也是如此。

常見margin與padding邊距縮寫margin外邊距與padding內邊距是制作布局時常用到的兩個屬性，在傳統寫法上，我們通常使用以下形式： margin-top:120px;margin-left:80px;margin-right:20px;margin-bottom:10px;padding也是如此，而在css縮寫中，可以使用縮寫的編寫方式，margin及padding的縮寫在默認狀態下需要提供4個參數，按順序分別為上、右、下、左。： margin:margin-top margin-right margin-bottom margin-left padding:padding-top padding-right padding-bottom padding-left 也可以使用1個、2個或3個參數來進行編寫，例如： p {margin:20px;} 單獨使用一個參數，將表示p對象四周的外邊距都為20px;p {margin:20px 10px;} 使用兩個參數是非常特殊的寫法，表示對上下或左右的樣式控制，當前樣式表示p對象的上下邊距為20px，而左右邊距為10px。p {margin:20px 10px 100px;} 使用3個參數表示上邊距為20px，左右邊距為10px，下邊距為100px。p {margin:120px 20px 10px 80px;} 4個參數則是margin屬性的完整寫法，分別表示上邊距120px，右邊距20px，下邊距10px及左邊距80px。整個對象的margin為從上開始順時針方向的邊距設置，對于padding屬性，設置方法與margin完全相同。

border邊框縮寫border對象本身是一個非常復雜的對象，包含了四條邊的不同寬度、不同顏色及不同樣式，所以border對象提供的縮寫形式相對來說也要豐富很多，不僅可以對整個對象進行border縮寫，也可以對單獨某一個邊進行縮寫，對于整個對象而言，使用如下的格式進行縮寫： border:border-width border-style color 代碼示例：

p {border:1px solid blue;}實線邊框

p對象將被設置4個邊均為1px寬度、實線、藍色邊框的樣式。border對于4個邊都可以單獨使用此樣式，語法格式如下： border-top:border-width boeder-style color border-right:border-width boeder-style color border-bottom:border-width boeder-style color border-left:border-width boeder-style color 通過上面的屬性，我們就可以針對每一個邊都設置不同的樣式，例如： p { border-top:1px solid blue;border-right:1px dashed red;} 上邊框我們設置為1px藍色實線，而右邊框則是1px紅色實線。

除了對于邊框整體及4個邊單獨的縮寫之外，border還為我們提供了對于border-style、border-width以及border-color的單獨縮寫方式，語法格式如下：

border-width:top right bottom left border-color:top right bottom left border-style:top right bottom left 代碼示例：

p { border-width:1px 2px 3px 4px;border-color:blue white red green;border-style:solid dashed;} 通過以上的代碼，p對象的4個邊框的寬度將分別為上1px右2px下3px左4px，而顏色為藍、白、紅、綠4個顏色，邊框風格上下為單線，左右為虛線。同margin與padding的縮寫一樣，所有參數的順序都是上右下左的順時針順序，而且支持1-4個參數不同的編寫方式。

list列表縮寫list縮寫是針對list-style-type、list-style-position等用于ul的list屬性，語法格式如下：

list-style:list-style-type list-style-position list-style-image 代碼示例：

ul {list-style:disc outside none;} ul對象將被設置為圓點、出現在對象外、不帶圖像的list-style樣式。background背景縮寫

背景縮寫用于針對背景控制的相關屬性進行縮寫，其語法格式如下： background:background-color background-image background-repeat background-attachment background-position 再來回顧一下背景控制中有關背景縮寫的實例，對比一下目前提供的完整語法格式。

縮寫前的代碼：

#content { background-color:#ededed background-image:url(img/bg.GIF);background-repeat:no-re[eat;background-position:30% 20px;} 改進后的代碼：

#content {background:#ededed url(img/bg.GIF)no-repeat 30% 20px;}

color顏色縮寫css對于顏色代碼也提供了簡單的縮寫模式，主要針對16進制顏色代碼。16進制代碼傳統寫法一般使用#ABCDEF，ABCDEF分別代表6個 16進制數，css的顏色縮寫必須符合一定要求，當A與B數字相同，C與D數字相同，E與F數字相同時，可以使用顏色縮寫，如 #ffffff 可以縮寫為 #fff，#2255bb可以縮寫為 #25b。

第二篇：總結縮寫

洪山鎮雙河小學2013年學校工作總結

2013過去了,現將一年來的工作總結如下：

一、學校堅持育人為本、德育為先，把立德樹人作為學校教育的根本任務，以創建“書香校園、溫馨班級”為基點，加強教師隊伍建設和學生教育工作。

二、以落實“營造書香校園、締造完美教室、構建理想課堂”三大行動為引領，促進新教育實驗的全面推進。本學期，我校共選取教師參加各級各類培訓活動達11人次，其中，羅永華等4名教師參加縣繼續中心組織的國培活動，郭香等4名教師參加了縣繼教中心組織的新課程、新教師培訓學習活動，鄒歡等2名教師參加了班主任培訓活動，有1名教師參加了“湖北省農村教師素質提高工程”培訓。同時，學校組織15教師參加了吳山鎮小學、唐鎮小學、環潭鎮第二小學等學校開展的“教育教學開放周”活動。

三、安全衛生管理齊抓共管。強化落實“一崗雙責制”，安全責任事故一票否決制。加強傳染病防控工作。加強校園周邊環境綜合治理。為校園環境清潔、環境優美等創超了良好的環境。

四、義務教育均衡發展建設成績突出, 投資11萬余元新修建了學生餐廳，改造了食堂，維修了學生宿舍及圍墻，更換了超市柜臺、貨架等設施。加強各功能室的建設、逐步實現教學設施標準化和現代化。學校爭取縣教育局的支持，裝備了各功能室電教設備，配置了班班通電教網絡。學校還自籌資金2.6萬余元改善辦學條件，暑假期間裝修12間校舍，維修206套課桌椅和粉刷了65套課桌，加高和加固教學樓梯護欄，徹底消除校園安全隱患。加強校園文化。今秋學校投入1萬余元加強校園文化建設，教室、寢室、餐廳、圍墻處處充滿濃濃的文化氣息，使校園成為一部立體的、多彩的有吸引力的教科書。

五、后勤管理務實高效。隱患圍墻、宿舍危房、教學樓走廊護欄高度不達標等安全隱患得到治理。幼兒園娛樂場西邊圍欄上又安裝了一排亮蹭蹭的不銹鋼欄桿，排除了隱患，增強了校園的安全性。物資采購規范化。凡各部門欲采購的物品先向校長提交采購申請，嚴格執行物品采購、驗收、入庫登記、領用或借用簽字手續，避免了物資的重復采購、莫名丟失和破損。后勤服務優質細致。學校組織分管后勤領導、總務處、食堂工作人員到三里崗鎮中學、鎮小學習后勤管理經驗，回來后召開后勤工作專題會議，確定了整改目標，完善了各項管理制度，簽訂了目標責任書。提高學生餐飲質量，真心服務于學生，辦群眾滿意食堂。

六、工會組織教職工開展了豐富多彩的活動。對全校21名退休教師，每位教師慰問金200元和其它物資。全校教職工開展了慶“三八”婦女節活動。對葉成才、黃克菊困難家庭各送去慰問金400元，讓困難職工感受到大家庭的溫暖。特別是陳雙陽老師的女兒患白血病后，全校師生共捐款8939.5元，學校領導、工會領導、教師代表先后兩次赴武漢協和醫院去看望，送去了全校師生的愛心。除此之外，今秋師生又捐救災款和愛心款共計5000余元。

2013年已經過去，有喜也有憂。展望明天，我們堅信，有中心學校的正確領導和親切關懷，有全體教師的團結奮進和勤懇踏實，雙河小學的明天一定會更好！

第三篇：css 實驗報告

實驗題目使用CCS美化“北京奧運吉祥物——福娃”網站

一、實驗目的

用CCS美化網站，來控制網頁樣式。首先進行布局分析包括網頁的頭部，網頁主體等。然后是摸塊布局設計，頁面總體布局設計、鏈接頁面的CSS的文件、要遵循設計頁面的通用規則，設計#heard對象部分由網頁的logo部分和導航區構成，在是設計#content對象部分，content分為三列，第一行由分為頭片新聞區，新聞區和公告欄，第二行分為福娃簡介和福娃揭秘，第三行是精彩圖片區、名人說福娃和投票調查區。最終使CSS用美化網站.。通過本次實驗能熟練掌握CSS美化網站的基本技巧和技能，在以后的學習、工作生活中能夠應用，為我們工作帶來，生活帶來方便。

二、實驗內容

1、頁面總體布局設計，可以通過對選擇“插入記錄

布局對象

DIV標簽”命令的方法進行布局，也可以通過在代碼視圖中直接編寫源代碼的方進行布局，布局頁面的HTM框架的代碼。、連接頁面的CSS文件，先建一個名為styie.css的文件，然后打開CSS樣式面板，單擊附加樣式表，連接超鏈接。、設計網頁的通用規則。通用規則對所有的標記都起作用，絕大部分標記都會涉及屬性。打開CSS樣式面板雙擊新建的那個文件，單擊確定按鈕，用相同的方法設置BODAY的字體和方法。、設計#header對象部分。包括logo#logo和導航#nav.網頁logo部分是一個中間欄固定，左右欄自適應的結構，并在fianshlogo中插入透明fiansh、動畫；導航區域由#NAV#navbgl兩個區組成，使用css中超鏈接屬性。、設計#content對象部分，#maincon為中間列，寬度固定，左右兩列沒有內容因此不需要考慮，而主體顯示部分為三行，分別顯示網頁不同區域。、設計#footer對象部分。

三、實驗情況和實驗結果 頁面總體布局

2網頁logo效果圖

3網頁導航區效果圖

4網頁#firstmain效果圖

四、CSS層疊樣式表，是用于控制網頁樣式，是以HTML為基礎提供豐富的格式化功能，由字體，顏色，背景，整體排版等。

1、了解了css的概念和特點，在網頁中使用css的四種方式及選擇器的語法格式及三種選擇器；標簽選擇器、類選擇器和ID選擇器。

2、掌握了CSSde 創建及管理方式和其中常用的屬性，應用css+DIV進行頁實驗體會 面布局的DIV標記，SPNA標記，盒子模型，元素的定位方式，布局流程和常用的布局類型。

3、學會了應用SCC+DIV對“北京奧運混吉祥物——福娃”網站的主頁重新進行了設計的過程。、CSS是以HTML為基礎，提供豐富的格式化功能，是將樣式信息與網頁內容分離的一種記性語言。

5、在學會使用CSS美化網站后，感CSS是一個神奇的東西，使我感覺好奇，是什么力讓網頁可以這樣變化，在自己完完整整做了一遍后才知道其中的奧妙。

第四篇：CSS小結

一、避免IE下未指定樣式內容的閃爍。

如果您僅僅靠 @import 來輸入外部樣式表，早晚您會發現IE有“閃爍”的毛病。在應用CSS樣式之前，未經格式化的HTML文本會短暫地出現。這是可以避免的。

二、確保您期望的效果確實存在

許多特定的瀏覽器專有的CSS擴展在正式標準中并不存在。如果您對 filter（濾鏡）或滾動條指定了樣式，那么您就用了私有代碼，除了IE之外，在別的瀏覽器中毫無作用。如果驗證器告訴您代碼沒有定義，極有可能您用了私有樣式，這樣在不同的瀏覽器中很難達到一致的效果。

如果布局中一定要用浮動對象，別忘了適時使用清除（clear）屬性。

浮動對象似易實難，而且不總是令人如愿以償。如果您發現浮動對象伸出了容器的邊界，或者不像您所期望的那樣顯示，請檢查您的期望是否正確。關于這個問題請看Eric Meyer的教程

邊距的合并：可用padding 或 border 來避免。

您可能被多余的（或者想要卻不出現的）空白搞得焦頭爛額。如果您用了 margins，邊距的合并可能就是問題的根源。Andy Budd 對此的解釋可能為你解惑。

避免將 padding/border 和固定寬度同時應用到同一元素。

IE5 的區塊模型是錯誤的，是它把事情辦壞了。對此也有權宜之計，不過最好是繞過這個問題，當子元素的寬度固定時，為父元素指定padding。

三、有疑問，先驗證

在調試時，先對您的代碼進行驗證往往能省去不少麻煩事。格式不正確的XHTML/CSS 會導致許多布局上的錯誤。

在其他瀏覽器中進行測試之前，請先在最先進的瀏覽器中撰寫和測試CSS代碼，而不是相反。

如果您在破舊的瀏覽器中編寫和測試，你的代碼就不得不依賴那個破舊瀏覽器的糟糕的顯示，然后在符合標準的瀏覽器中進行測試，看到顯示結果“不正常” 時，你會很沮喪的。相反，您應該先將您的代碼完善，然后再設法為較低級的瀏覽器打算。這樣從一開始您的代碼就是符合標準的，你不必再為支持其他瀏覽器而勞心費神。當然了，目前遵從標準的瀏覽器無疑就是 Mozilla，Safari 或 Opera。

四、加上明顯的邊框有利于布局調試。

像 div {border： solid 1px #f00;} 之類的全局規則可以暫時為你查出布局問題。為特定的元素加上邊框可幫您找到難以發覺的交錯或空白問題。

對圖片路徑不要用單引號。

當設置背景圖片時，要堅持用雙引號。盡管看起來有些多余，但是如果不這么做，IE5/Mac會噎住。

不要為將來的樣式表（比如手持式設備或打印用樣式表）留個“空位”。

Mac IE5 對空的樣式表比較感冒，會增加頁面的裝入時間。建議樣式表中至少應該有一條規則（哪怕是注釋也好），免得 MacIE噎住。

另外值得一提的還有一些雖然不針對某些功能，但是在開發過程中應當注意的理論

五、好好組織您的CSS文件

恰當地成塊注釋CSS，將相似的CSS選擇符編為一組，養成一致的命名習慣和空白格式（為跨平臺考慮，建議用空白字符而不是tab。）以及適當的次序。

以功能（而不是外觀）為類和ID命名

假如您創建了一個.smallblue 類，后來打算將文字改大，顏色變為紅色，這個類名就不再有任何意義了。相反，您可以用更有描述性的名字如.copyright 和.pullquote。

六、組合選擇符

保持CSS短小對減少下載時間非常重要。請盡量為選擇符分組、利用繼承（inheritance）以及使用簡寫（shorthand）來減少冗余。

使用圖片替換技術時要考慮親和力

已經發現傳統的FIR在屏幕閱讀器，以及關閉圖片顯示［的瀏覽器］中會出問題。對此有其他解決辦法，要根據具體情況，慎重使用。

七、別指望 min-width 在IE中有用。

IE不支持它，但是它將 width 當作 min-width，所以通過一些 IE 的過濾技巧（filtering），可以實現同樣的最終效果。

把CSS過濾器（filters）當作最后的手段

CSS 技巧和過濾器可以使您有選擇地應用到（或者不應用到）某些元素。應當盡可能地找到標準的跨瀏覽器的解決辦法來實現您想要的效果，而不是動不動就使用過濾器。要將它當成走投無路時的救命手段。在這里可以找到大量的CSS 過濾技巧。［譯注：不要把這里的filters和IE中的濾鏡混淆。由于各個瀏覽器對CSS標準的支持程度不一，人們找到了許多技巧，將瀏覽器無法解釋或錯誤解釋的樣式表或規則屏蔽掉。這就是所謂的CSS過濾器或技巧。mb5u.com

如果使用了錨點，在應用超鏈接樣式時要特別小心。

如果您在代碼中使用了傳統的錨點（），您會注意到 ：hover 和 ：active偽類也會作用于它。要避免這種情形，你可以使用 id，或者使用鮮為人知的語法： ：link:hover，：link:active

八、記住“LoVe/HAte”（愛/恨）鏈接規則

要以下面的順序指定超鏈接偽類：Link，Visited，Hover，Acitve。任何其他順序都不妥當。假如用了：focus，次序應為 LVHFA（“Lord Vader?s Handle Formerly Anakin”，Matt Haughey這樣建議）。

請記住“TRouBLED”（麻煩的）邊框。

邊框（border）、邊距（margin）和補白（padding）的簡寫次序為：順時針方向從上開始，即 Top，Right，Bottom，Left。比如 margin： 0 1px 3px 5px;表示上邊距為零，右邊距為1px，依此類推。

九、非零值要指明單位。

在用CSS指定字體、邊距或大小時，必須指明所用的單位。某些瀏覽器對未指明單位的處理方法不足為憑。零就是零，不管是 px還是em還是其他單位，它不需要單位。例如： padding： 0 2px 0 1em;

十、測試不同的字體大小。

像Mozilla和Opera這樣的高級瀏覽器允許對字體進行縮放，不管你用的是什么單位。某些用戶的默認字體大小肯定和您的不同，盡最大努力去滿足他們。

用嵌入式測試，發布時改為輸入。

將樣式表嵌入在你的HTML源代碼中，在測試時可以消除許多緩存引起的錯誤，尤其是某些Mac下的瀏覽器。但在發布前，一定要記住將樣式表移到外部文件，用 @import 或 引入

第五篇：CSS試題

實訓平臺——**課程考試試題

考試學校：黑龍江畜牧獸醫學校

課程名稱：網頁設計和網頁制作

考試時間：2009年12月15號

任課老師：劉濤

一、單項選擇題（20 X 3= 60分）

1、CSS是利用什么XHTML標記構建網頁布局？（）A