【實驗題目】HTML&CSS實驗(4)css
【實驗目的】學習CSS選擇器的使用方法。html
----------------------我的做業,若是有後輩的做業習題一致,能夠參考學習,一塊兒交流,請勿直接copychrome
【調試工具】瀏覽器和編輯器。三種可選編輯方式:編程
(1) 本地調試:記事本瀏覽器
(2) 在線調試:http://172.18.187.11:8080/lab/html4/index.jspjsp
* 在線圖像存放地點:http://172.18.187.11:8080/lab/html4/images編輯器
【實驗要求】工具
除了題目中有說明,本次實驗均不使用鏈接符~和+,也不能自行加id和class,不能修改正文(<body>的內容),只能按題意增長或修改樣式(<style>的內容)。學習
不能用!important。字體
【實驗內容】
一、爲網頁sohu.html添加樣式。首先要求對於連接的訪問,平時和訪問過的連接都沒有下劃線而且顯示爲黑色字,鼠標移動到連接上方時連接文字顯示下劃線和藍色字,點擊(按下)連接時連接文字顯示下劃線而且變爲紅色字;而後,設計樣式讓每行的偶數連接顯示綠色字而且沒有下劃線(以下圖所示),懸浮和活動連接與原來同樣。
參考效果:
完成後保存網頁(sohu.html)並截屏瀏覽器(ctrl+alt+PrintScreen):
樣式表:
可行√ 不可行:最後一句的僞類屬性沒法做用
l a沒法適應於nth-child,選擇odd時全選,選擇even時不執行;
l li可以使用nth-child但必須結合a的僞類選擇器使用(不結合a則無顯示,由於li沒有直接的文字內容);
l 單純在a的標籤下修改顏色,使用僞類選擇器可執行(優先級問題,僞類選擇器優先於元素選擇器);可是若是利用nth-child僞類選擇器選擇以後,同時使用僞類選擇器,那麼僞類選擇器的內容不會被執行(前者的優先級高,會覆蓋僞類選擇器),須要從新編寫一遍偶數的僞類連接效果。
l 綜上考慮到這個緣由,能夠經過利用nth-child僞類選擇器全選,來提升其連接僞類語句的優先級,以下:可正常執行。
可行√
二、爲網頁register.html添加樣式,使得:被聚焦的輸入域的背景變爲黃色,單選或多選的選中項的文字顯示爲紅色字;disabled的按鈕的字體顯示爲灰色字;textarea中選中的文字顏色變爲白色,背景變爲藍色。
參考效果:
完成後進行保存(register.html)並截屏瀏覽器:
樣式表:
//從新閱讀了老師的表單樣例,對錶單的實現有了新的理解,也發現了以前沒有找到的能夠實現邊框帶文字的<legend>標籤(僅用於表單<form>)
三、(sohu1.html)實現下圖樣式。注意:除了加指定的選擇器,不要修改任何代碼。參考效果:
完成後保存網頁(sohu1.html)並截屏瀏覽器(ctrl+alt+PrintScreen):
樣式表:
l 第三個選擇器的even不會覆蓋第二個選擇器的3~9之間的樣式,因此第二個選擇器要加上not的內容(一樣是優先權的緣由)
l 並列的內容中不能夠有空格,若是「:not」以前有空格,則瀏覽器不會執行這一選擇器的內容
四、爲網頁ZhuZiQing.html加上選擇器,使得:
(1) 連接和訪問過的連接顯示爲藍色字體而且沒有下劃線
(2) 按下連接顯示爲棕色字體且沒有下劃線
(3) 每一個段落左對齊而且首行縮進兩個字
(4) 每一個段落首字母爲1個半字大小
(5) 每一個段落第一行用斜體字
(6) 鼠標移動到段落上方時,段落文字顯示爲綠色字
(7) 偶數段落顯示爲粗體字
(8) 引用文獻採用上標 {vertical-align:super;font-size:10px}
參考效果:
用文件ZhuZiQing.html保存完成後的網頁並截屏瀏覽器(ctrl+alt+PrintScreen):
樣式表:
五、爲網頁(LotusPond .html)編寫樣式,使得其平時顯示以下:
當把鼠標移動到某個段落(下面爲第二段)上方時,顯示以下:
用文件LotusPond .html保存完成後的網頁並截屏瀏覽器(ctrl+alt+PrintScreen):
樣式表:
//一樣的style格式,在不一樣的瀏覽器下,會有不一樣的表現形式,好比在如上截圖的chrome中,hover的選擇器選中以後,first-letter中的內容會一塊兒做用,顯示爲藍色大1.5倍;可是在edge中,則不會同時做用,並且hover離開後,做用效果會消失,變成普通字體,以下:
六、在網頁(calendar.html)中增長選擇器(不要改動樣式的次序或增長樣式)後獲得以下網頁顯示:
用文件calendar.html保存完成後的網頁並截屏瀏覽器(ctrl+alt+PrintScreen):
樣式表:
//若是最後一條語句不加「:after」,則這條語句不會做用-----:after 選擇器在被選元素的內容後面插入內容,須要使用 content 屬性來指定要插入的內容。(也就是說,若是使用content來插入內容,就必須使用:after選擇器)
七、用網頁(chess.html)設計一個國際象棋棋盤和棋子:
(1)設計棋盤並擺設棋子(棋子圖像文件在images目錄中),只能使用標籤h一、table、tr、td、img(已給出了它們的樣式),不能使用其餘標籤,也不能使用類和id屬性:
*其中的白色棋子不顯眼
完成後截圖:
//修改了h1的font-size爲4倍,table和td的屬性爲-------border:solid 2px gray;
html文件的主要內容:
(2)按以下步驟和要求爲棋盤加上樣式:
A、通常狀態下,每一個格子(td)具備兩種背景色(background-color)之一:rgb(100,100,100), rgb(200,200,200)。
B、鼠標移動到淡色格上方時,淡色格的背景色(background-color)變爲rgb(200,200,240):
C、鼠標移動到深色格上方時,深色格的背景色(background-color)變爲rgb(100,100,160):
D、當鼠標移到白色棋子(img)上方時,白色棋子邊框顯示黃色虛線border:dashed 1px yellow。參見步驟B和步驟C的圖。
E、當鼠標移到黑色棋子(img)上方時,黑色棋子邊框顯示紅色虛線border:dashed 1px red。參見步驟B和步驟C的圖。
F、要求懸浮在棋子上時格子線不動。
用文件chess.html保存完成後的網頁,當鼠標移到黑色棋子和白色棋子上分別截一幅圖:
與步驟(1)相比,步驟(2)新增的樣式表:
問題:爲了實現步驟E增長的樣式是什麼?
tr:nth-child(-n+2) td>img:hover{
border:dashed 1px red;
}
問題:爲了實現步驟F增長的樣式是什麼?
tr:nth-child(n+7) td>img:hover{
border:dashed 1px yellow;
margin:auto;
}
tr:nth-child(-n+2) td>img:hover{
border:dashed 1px red;
margin:auto;
}
//一樣的,在這個例子中,使用一樣的style,在不一樣的瀏覽器下會有不一樣的結果:在edge瀏覽器中,即便不加margin:auto;使其自動適應居中,也不會有table格線偏移的問題;可是在IE瀏覽器和chrome瀏覽器中若是不加,則會出現hover移動指向後出現格線偏移的後果,添加後正常。
【完成狀況】
是否完成了這些步驟?(√完成 ×未作或未完成)
1 [√ ] 2 [√] 3 [√] 4 [√] 5 [√] 6 [√ ] 7(1)[ √] 7(2) [√ ]
【實驗體會】
寫出實驗過程當中遇到的問題,解決方法和本身的思考;並簡述實驗體會(若是有的話)。
在實驗中遇到的問題在此前的分小節的實驗樣例中已經提到了問題和解決方法,在這裏不詳細描述,只列出總結要點:
l a沒法適應於nth-child,選擇odd時全選,選擇even時不執行
l li可以使用nth-child但必須結合a的僞類選擇器使用(不結合a則無顯示,由於li沒有直接的文字內容)
l 單純在a的標籤下修改顏色,使用僞類選擇器可執行(優先級問題,僞類選擇器優先於元素選擇器);可是若是利用nth-child僞類選擇器選擇以後,同時使用僞類選擇器,那麼僞類選擇器的內容不會被執行(前者的優先級高,會覆蓋僞類選擇器),須要從新編寫一遍偶數的僞類連接效果
l 綜上考慮到這個緣由,能夠經過利用nth-child僞類選擇器全選,來提升其連接僞類語句的優先級便可正常執行
l 從新閱讀了老師的表單樣例,對錶單的實現有了新的理解,也發現了以前沒有找到的能夠實現邊框帶文字的<legend>標籤(僅用於表單<form>)
l 並列的內容中不能夠有空格,若是「:not」以前有空格,則瀏覽器不會執行這一選擇器的內容
l 相同優先權選擇器的even不會覆蓋第二個選擇器的3~9之間的樣式,因此第二個選擇器要加上not的內容(一樣是優先權的緣由
l 一樣的style格式,在不一樣的瀏覽器下,會有不一樣的表現形式,好比在chrome中,hover的選擇器選中以後,first-letter中的內容會一塊兒做用,顯示爲藍色大1.5倍;可是在edge中,則不會同時做用,並且hover離開後,做用效果會消失,變成普通字體;在edge瀏覽器中,即便不加margin:auto;使其自動適應居中,也不會有table格線偏移的問題;可是在IE瀏覽器和chrome瀏覽器中若是不加,則會出現hover移動指向後出現格線偏移的後果,添加後正常。
l :after 選擇器在被選元素的內容後面插入內容,須要使用 content 屬性來指定要插入的內容。(也就是說,若是使用content來插入內容,就必須使用:after選擇器)
若是說以前的Web設計編程只是把內容編寫出來,應用一些css的style屬性,那麼這一部分就有些設計的成分在裏面了。只是簡單的style添加,就能體現出一些簡單實用看上去舒服的設計感,雖然只是按照老師所給的模板來完成,可是仍舊讓我感到新奇和激動,對從此的實驗也愈來愈期待了。