完整版《CSS樣式》習題

1、亠、選擇題1 . CSS 是（ C）的縮寫。A.Colorful Style SheetsB.Computer Style SheetsC . CascadingStyle SheetsD . Creative Style Sheets2.引用外面款式表的格式是（B）。A.vstyle src=mystyle.cssB . C.mystyle.css3.引用外面款式表的元素應該放在 .（C）。A.HTML 文檔的開始的地址B . HTML 文檔的結束的地址C .在 head 元素中D .在 body 元素中4.內(nèi)部款式表的元素是（A）。A.B.C.5.元素中定義款式表的屬性名是（A）。A.st

2、yleB.classC.stylesD.font6.以下一（ C）是定義款式表的正確格式。A. body:color=black（bodyB.body:color=blackC . body color: blackD. body;color:black7.以下（A）是定義款式表中的說明語句。A./*說明語句*/B ./說明語句C . /說明語句/D.說明語句8 若是要在不相同的網(wǎng)頁中應用相同的款式表定義，應該（C）A 直接在 HTML 的元素中定義款式表B 在 HTML 的 標記中定義款式表C 經(jīng)過一個外面款式表文件定義款式表D 以上都可以9 款式表定義 #title color:red 表

3、示（ B）A 網(wǎng)頁中的標題是紅色的B 網(wǎng)頁中某一個 id 為 title 的元素中的內(nèi)容是紅色的C 網(wǎng)頁中元素名為 title 的內(nèi)容是紅色的D 以上任意一個都可以10 款式表定義 .outer background-color:yellow 表示（ B ）。 A 網(wǎng)頁 中某一個id 為 outer 的元素的背景色是紅色的 B 網(wǎng)頁中含有 class= ”outer ”元素的背景色是紅色的 C 網(wǎng)頁中元素名為 outer 元素的 背景色是紅色的 D 以上任意一個都可以47.光標搬動文本框上方時，文本框邊框的顏色就改變，這是因為激發(fā)了以下的 （ C）事件。A. onFocusB. onMouse

4、UpC. onMousrOverD. onMousMOve48. 以部下性哪一個可以實現(xiàn)層的隱蔽？（C ）A. display:falseB. display:hiddenC. display:noneD. display: 49. 以下選項中，不屬于文本屬性的是（D）A. font-sizeB. font-styleC. text-alignD. font-color50.頁面上有一個按鈕 btn，同時定義好了一個類款式（按鈕圖片款式表btnPic）,那么使用（ B）就可以實現(xiàn)背景圖片的改變。A. onMouseOver=className=btnPicB. onMouseOver=this

5、.className=btnPicC. onMouseOver=this.style.className=btnPicD. this.btn.style.className=btnPic二、簡答題1、什么是標記選擇器并舉例說明。CSS 標記選擇器就是聲明哪些標記采用哪一種 CSS 款式。比方： h1 color:red;font-size:25px; 2、 什么是種類選擇器并舉例說明。種類選擇器的名字可以由用戶自定義，用做 html 頁面某標簽的 class 屬性值。 比方： .red color:red; font-size:18px3、 什么是 ID 選擇器并舉例說明。ID 選擇器是針對

6、html 頁面中某個擁有此 ID 屬性的標簽設置的CSS 款式。比方：#bold font-weight:bold;4、舉例說明什么是行內(nèi)式CSS 款式。行內(nèi)式是直接對 html 的標記使用 style 屬性，爾后將 CSS 代碼直接寫在其中 比方： 正文內(nèi)容 5、舉例說明什么是內(nèi)嵌式CSS 款式。內(nèi)嵌款式表就是將CSS 寫在head與 v/head之間，并且用style和/style標記進行聲明。比方： p color:#0000ff6、舉例說明什么是鏈接式CSS 款式。鏈接式 CSS 款式表是經(jīng)過使用 html 鏈接文件標簽 link 將外面 CSS 應用到本頁面 的款式使用方法。比方：

7、7、 舉例說明什么是導入式CSS 款式。采用 import 方式導入的款式表，在 html 文件初始化時，會被導入到 html 文件內(nèi)，作 為文件的一部分，近似內(nèi)嵌式的收效。比方： import url（sheet.css）;8、 什么是交集選擇器，并舉例說明。交集選擇器是由兩個選擇器直接連結構成， 其結果是選中二者各自元素范圍的交集。 其中第 1 個必定是標記選擇器，第 2 個必定是種類選擇器也許 ID 選擇器。比方：p.special color:red 9、什么是并集選擇器，并舉例說明。 并集選擇器也許稱為“集體聲明” ，它的結果是同時選中各個基本選擇器所選擇 的范圍。比方： h1,h2

8、,p color:purple; font-size:15px10、什么是后代選擇器，并舉例說明。 后代選擇器的寫法就是把外層的選擇器名字寫在前面， 內(nèi)層的選擇器名字寫在后 面，之間用空格分開。比方： p spancolor:red11、 在 CSS 中一個獨立的盒子模型有哪幾部分組成？content （內(nèi)容）、 border （邊框）、 padding （內(nèi)邊距）和 margin （外邊距）12、 舉例說明什么是塊級元素和行內(nèi)元素？ 塊級元素總是占有一個矩型地域， 并且同級兄弟塊依次豎直排列， 左右撐滿。例 如： 行內(nèi)元素不占有獨立的地域，并且同級元素之間橫向排列，到最右端自動這行。比方：

9、13、講解一下 div 標簽的作用 是一個區(qū)塊容器標記， 即 與 之間相當于一個容器， 可以容納段落、標題、表格、圖片等各種 html 元素。14、講解一下 span 標簽的作用 標記和 相同，作為容器可以容納各種html 元素，但它是一個行內(nèi)元素，在它的前后不會換行。15、講解盒子模型的 float 屬性。float 屬性默認為 none ，也就是標準流平時的情況。若是將 float 屬性的值設置為 left 或right ，元素會向其父元素的左側或右側湊近，同時默認情況下，盒子的寬度 不再伸展，而是縮短，依照盒子里面的內(nèi)容的寬度來確定。16、講解盒子模型的display 屬性。displa

10、y 屬性用于確定盒子的種類。 display 屬性設為 inline ，即為“行內(nèi)”；設為 block ，即為“塊級”；設為 none ，即為“無”，也就是隱蔽盒子。17、圓角框主要有哪幾種制作方法？ 兩背景圖像法、四圖像不固定寬度圓角框、五圖像二維滑動門圓角框。18、 使用 CSS 主要有哪幾種布局方式？ 兩列布局、三列布局、多列布局。19、 CSS 布局方法與表格布局方法對照，有哪些優(yōu)勢？（ 1）頁面載入更快；（ 2）降低網(wǎng)站流量花銷；（ 3）易于更正；（ 4）視覺一致（ 5）更易于被找尋引擎找到。20、使用 CSS 布局的網(wǎng)頁應實現(xiàn)哪些要求？（ 1）寬度使用多列布局，并保證頁頭和頁腳正確

11、顯示；（ 2）可以指定列寬度固定，其余列寬度自適應；（ 3）在 html 中，個列可以任意序次排列，最后收效都正確顯示。三、案例解析題1、 講解以下 CSS 款式的含義。 tableborder: 1px #333 solid;font: 12px arial;width: 500pxtd,thpadding: 5px; border: 2px solid #EEE;border-bottom-color: #666; border-right-color:#666;將表格邊框寬度設為1px ，顏色設為 #333 ，邊框為實線；表格中的字體大小設為12px,字體種類為 arial;表格寬度為

12、500px。設置單元格和表頭部分的款式： 內(nèi)邊距為 5px ，邊框寬度 2px ，實線，顏色為 #EEE ，底部和右側邊框顏色特別設為#6662、 講解以下 CSS 款式的含義。 formborder:1px dotted #AAAAAA;padding:3px 6px 3px 6px; margin:0px;font:14px Arial;selectwidth:80px; background-color:#ADD8E6;設置表單邊框寬度為 1 px ，點劃線，顏色為 #AAAAAA ，內(nèi)上、右、下、左側距分 別為：3px 6px 3px 6px，外邊距為 Opx，字體為 14px 大小的

13、 Arial 字體。設置選擇框寬度為 80px，背景顏色為#ADD8E63、 講解以下 CSS 款式的含義。inputcolor:#00008B;in put.bt nbackgrou nd-color:#ADD8E6;paddi ng:1px 2px 1px 2px;設置 in put 標簽中字體顏色為#00008B ;in put 標簽中 id 屬性為 btn 的按鈕背景顏色設為#ADD8E6，內(nèi)上、右、下、左側距分別設為 1px、2px、1px、2px4、講解以下 CSS 款式的含義。.roun ded backgro und: url(images-no tebook/left-top

14、.gif)top left no-repeat;.roun ded h2 backgro und: url(images-no tebook/right-top.gif)top right no-repeat;padd in g:20px 20px 10px;margi n:0;定義類選擇器.rounded :背景圖像為 left-top.gif，從左上角開始，不平鋪定義后代選擇器.rounded h2 :背景圖像為 right-top.gif，從右上角開始，不平鋪; 內(nèi)上、左右、下邊距分別是 20px 20px 10px，外邊距為 01II5、畫出一個 1-( 1-2)+1)-1 的布局結構

15、表示圖。-1 的布局結構表示圖111 1 111M7、 講解以下 CSS 款式的含義。#header,#pagefooter,#containermargin:0 auto;width:85%;#contentposition:absolute;width: 300px;設置 id 屬性為 header 、pagefooter 、 container 的 div 層上下外邊框為0，左右外邊框為 auto ，寬度為相對于父元素寬度的85%設置 id 屬性為 content 的 div 層為絕對定位，寬度為固定寬度300px8、 講解以下 CSS 款式的含義。A:link COLOR: #3333

16、cc; TEXT-DECORATION: noneA:visited COLOR: #990099; TEXT-DECORATION: noneA:active COLOR: #ff0000; TEXT-DECORATION: underlineA:hover COLOR: #3333cc; TEXT-DECORATION: underline 設置超鏈接款式：未操作時：顏色為 #3333cc ，無下劃線；單擊過后：顏色為 #990099 ，無下劃線；單擊時：顏色為 # ff0000 ，有下劃線；懸停時：顏色為 # 3333cc ，有下劃線；完好版CSS 款式習題9、寫出以下要求的CSS 款式

17、表（ 1 ）設置頁面背景圖像為 ，并且背景圖像垂直平鋪。（ 2 ）使用類選擇器，設置按鈕的款式，按鈕背景圖像：login_submit.gif ；字體顏色：#FFFFFFF ;字體大?。?4px ;字體粗細：bold ;按鈕的界線、邊框和填 充均為 0px。bodybackground-image:url（img/login_back.gif）; background-repeat:repeat-y;8.picButton background-image:url（img/login_submit.gif）; color:#FFFFFF;font-size: 14px;font-weight:bold;margin: 0px;border:0px; padding: 0px