完整版)《CSS樣式》習題答案

1、、選擇題1. CSS是（C ）的縮寫。A. Colorful Style SheetsB. Computer Style SheetsC. CascadingStyle SheetsD. Creative Style Sheets2. 引用外部樣式表的格式是（ B ）。A. B. C. mystyle.css3. 引用外部樣式表的元素應該放在.（ C ）。A. HTML文檔的開始的位置B. HTML文檔的結(jié)束的位置C. 在head元素中D. 在body元素中4. 內(nèi)部樣式表的元素是（ A ）。A. B. C. 5. 元素中定義樣式表的屬性名是（A ） oA. styleB. classC. s

2、tylesD. 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 通過一個外部樣式表文件定義樣式表D. 以上都可以9. 樣式表定義 #title color:red 表示（ B ）

3、。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. onMouseUpC. onMousr

4、OverD. onMousMOve48. 下列屬性哪一個能夠?qū)崿F(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.classNam

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

6、CSS樣式。例如： #bold font-weight:bold; 4、舉例說明什么是行內(nèi)式CSS樣式。行內(nèi)式是直接對html的標記使用style屬性，然后將CSS代碼直接寫在其中。例如：p style=”color:#ff0000; font-size:20px 正文內(nèi)容 v/p5、舉例說明什么是內(nèi)嵌式 CSS樣式。內(nèi)嵌樣式表就是將 CSS寫在head與/head之間，并且用style和v/style標 記進行聲明。例如： vheadvstyle type=”text/css”p color:#0000ff v/stylev/head6、舉例說明什么是鏈接式 CSS 樣式。鏈接式CSS樣式表

7、是通過使用html鏈接文件標簽link將外部CSS應用到本頁面 的樣式使用方法。例如： 7、舉例說明什么是導入式 CSS樣式。采用 import 方式導入的樣式表， 在 html 文件初始化時，會被導入到 html 文件內(nèi)， 作為文件的一部分，類似內(nèi)嵌式的效果。例如： import url（sheet.css）;8、什么是交集選擇器，并舉例說明。交集選擇器是由兩個選擇器直接連接構(gòu)成， 其結(jié)果是選中二者各自元素范圍的交 集。其中第 1個必須是標記選擇器，第 2個必須是類別選擇器或者 ID 選擇器。 例如： p.special color:red 9、什么是并集選擇器，并舉例說明。并集選擇器或者稱

8、為“集體聲明” ，它的結(jié)果是同時選中各個基本選擇器所選擇 的范圍。例如： h1,h2,pcolor:purple; font-size:15px10、什么是后代選擇器，并舉例說明。后代選擇器的寫法就是把外層的選擇器名字寫在前面， 內(nèi)層的選擇器名字寫在后 面，之間用空格分隔。例如： p span color:red 11、在CSS中一個獨立的盒子模型有哪幾部分組成？content （內(nèi)容）、border （邊框）、padding （內(nèi)邊距）和 margin （外邊距）12、舉例說明什么是塊級元素和行內(nèi)元素？塊級元素總是占據(jù)一個矩型區(qū)域， 并且同級兄弟塊依次豎直排列， 左右撐滿。 例 如： 行內(nèi)元

9、素不占有獨立的區(qū)域，并且同級元素之間橫向排列，到最右端自動這行。 例如： 13、解釋一下 div 標簽的作用div是一個區(qū)塊容器標記，即div與/div之間相當于一個容器，可以容納段 落、標題、表格、圖片等各種 html 元素。14、解釋一下 span 標簽的作用vspan標記和div一樣，作為容器可以容納各種 html元素，但它是一個行內(nèi)元 素，在它的前后不會換行。15、解釋盒子模型的 float 屬性。float屬性默認為none,也就是標準流通常的情況。如果將 float屬性的值設置為 left或right，元素會向其父元素的左側(cè)或右側(cè)靠近，同時默認情況下，盒子的寬 度不再伸展，而是收縮

10、，根據(jù)盒子里面的內(nèi)容的寬度來確定。16、解釋盒子模型的 display 屬性。display屬性用于確定盒子的類型。display屬性設為inline，即為“行內(nèi)”；設為 block，即為“塊級”；設為none,即為“無”，也就是隱藏盒子。17、圓角框主要有哪幾種制作方法？ 兩背景圖像法、四圖像不固定寬度圓角框、五圖像二維滑動門圓角框。18、使用 CSS 主要有哪幾種布局方式？ 兩列布局、三列布局、多列布局。19、CSS布局方法與表格布局方法相比，有哪些優(yōu)勢？（1）頁面載入更快；（2）降低網(wǎng)站流量費用； （3）易于修改；（ 4）視覺一致（ 5）更易于被搜索引擎找到。20、使用CSS布局的網(wǎng)頁應

11、實現(xiàn)哪些要求？（1）寬度使用多列布局，并保證頁頭和頁腳正確顯示；（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;將表格邊框?qū)挾仍O為1px，顏色設為#333,邊框為實線；表格中的字體大小設為12

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

13、Arial字體。設置選擇框?qū)挾葹?0px，背景顏色為#ADD8E63、解釋以下CSS樣式的含義。inputcolor:#00008B;in put.bt nbackgrou nd-color:#ADD8E6;padd in g: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.gif) top left n

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

15、的布局結(jié)構(gòu)示意圖7、解釋以下 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: #3333cc; TEXT-DECORATION: no

16、neA:visited COLOR: #990099; TEXT-DECORATION: none A:active COLOR: #ff0000; TEXT-DECORATION: underline A:hover COLOR: #3333cc; TEXT-DECORATION: underline 設置超鏈接樣式：未操作時：顏色為#3333cc無下劃線；單擊過后：顏色為 #990099,無下劃線；單擊時：顏色為# ffOOOO,有下劃線；懸停時：顏色為# 3333cc有下劃線；9、寫出下列要求的CSS樣式表（1）設置頁面背景圖像為login_back.gif，并且背景圖像垂直平鋪。（2）

17、 使用類選擇器，設置按鈕的樣式，按鈕背景圖像：login_submit.gif;字體 顏色：#FFFFFFF;字體大小：14px;字體粗細：bold;按鈕的邊界、邊框和填 充均為 Opx。body background-image:url（img/login_back.gif）;background-repeat:repeat-y; .picButton background-image:url(img/login_submit.gif);color:#FFFFFF;font-size: 14px;font-weight:bold;margin: 0px;border:0px;padding: 0px; 10