說(shuō)明：有難得有簡(jiǎn)單的，盡量都要做完凉驻，我盡量包含多的知識(shí)點(diǎn)腻要，如有錯(cuò)誤，題比較難理解涝登，歡迎指正雄家。
基礎(chǔ)部分
- 瀏覽區(qū)缺省設(shè)置，外部樣式表胀滚，內(nèi)部樣式表趟济，內(nèi)聯(lián)樣式，這四個(gè)的優(yōu)先度如何咽笼。
- 顏色的表示方式有哪些顷编。
- 怎樣同時(shí)使用多個(gè)選擇器
- 使用一下ID選擇器
- 使用一下類選擇器
- 現(xiàn)有10個(gè)div，有的有title屬性褐荷，有的沒(méi)有勾效，使用屬性選擇器選中有title這個(gè)屬性的div
- 現(xiàn)有10個(gè)div，有的有title屬性叛甫，有的沒(méi)有這個(gè)屬性层宫，帶有title屬性的，值也不一樣其监，現(xiàn)使用屬性選擇器選中屬性值是demo的div萌腿。
- 現(xiàn)有10個(gè)div，有的有title屬性抖苦，有的沒(méi)有這個(gè)屬性毁菱，帶有title屬性的，值也不一樣锌历，現(xiàn)使用屬性選擇器選中屬性值中包含demo的div贮庞。
- 現(xiàn)有10個(gè)div，有的有title屬性究西，有的沒(méi)有這個(gè)屬性窗慎，帶有title屬性的，值也不一樣，現(xiàn)使用屬性選擇器選中屬性值是zh或者是zh-開(kāi)頭的
- 現(xiàn)在有10個(gè)input元素遮斥，選中屬性type是text的input
- 選中某屬性值以zh開(kāi)頭的
- 選中某屬性值以zh結(jié)尾的
- 選中某屬性值包含zh的
- 在head中手寫(xiě)一個(gè)連接外部樣式表的方法吧
背景篇
- 給p標(biāo)簽設(shè)置一個(gè)背景顏色
- 給a標(biāo)簽設(shè)置一個(gè)背景圖片
- 設(shè)置背景圖片縱向重復(fù)
- 把背景圖像定位在中間峦失，為了保證這個(gè)屬性在opera和firefox中正常運(yùn)行，還要添加一個(gè)什么設(shè)置术吗？寫(xiě)出來(lái)尉辑，記住。
- 設(shè)置背景圖像在左上较屿，右下隧魄。
- 使用百分比值把背景圖像設(shè)置在中間的位置
- 使用像素單位設(shè)置背景圖像的位置。
- 怎樣防止背景圖像隨著頁(yè)面滾動(dòng)條而滾動(dòng)
- 怎樣把背景圖像吝镣，顏色堤器，重復(fù)，定位末贾，是否滾動(dòng)放在一個(gè)聲明中闸溃。
文字篇
- 給一段文字添加一個(gè)縮進(jìn)，在塊級(jí)元素和內(nèi)聯(lián)元素中拱撵，縮進(jìn)的方式是否有不同辉川，都演示一下看看。
- 演示一下縮進(jìn)的繼承
- text-align到底是干嘛的拴测？另外針對(duì)阿拉伯語(yǔ)和希伯來(lái)語(yǔ)之類的語(yǔ)言乓旗，該怎樣做。
- text-algin和center標(biāo)簽的異同集索。
- 設(shè)置單詞之間的間距
- 設(shè)置字母的間距
- 設(shè)置全部英文大寫(xiě)
- 設(shè)置全部英文小寫(xiě)
- 設(shè)置首字母大寫(xiě)
- 修改文本修飾屿愚，去除文本修飾，添加下劃線务荆，添加上劃線妆距，添加貫穿線，添加閃動(dòng)效果函匕。
- 怎樣去除文字中多余的空格
- 怎樣保留文字中多余的空格
- 怎樣使文字不可以換行娱据，除非使用了br
- 怎樣可以使文字可以保留空格同時(shí)可以自動(dòng)換行。
- 怎樣可以使文字去除空格但是保留換行盅惜，同時(shí)允許自動(dòng)換行中剩。
-
針對(duì)以上，放一個(gè)小小的參考
參考 - direction是干嘛的抒寂，怎么使用结啼，適用于什么元素。
- 給文字設(shè)置一個(gè)陰影
字體篇
- css中五種通用的字體系列都是什么屈芜，請(qǐng)默寫(xiě)出來(lái)妆棒。
- 怎樣設(shè)置字體
- 怎樣設(shè)置多個(gè)字體，設(shè)置多個(gè)字體的時(shí)候要注意什么沸伏？
- font-style屬性是干嘛的糕珊，有哪些值？
-
怎樣把文字設(shè)置成下面這樣的毅糟？示例
- 設(shè)置字體大小
- 設(shè)置字體加粗红选，以值的形式設(shè)置
- px，em姆另，rem這幾個(gè)單位有什么不同喇肋。
鏈接篇
- 設(shè)置為被訪問(wèn)過(guò)鏈接的樣式
- 設(shè)置已經(jīng)被訪問(wèn)過(guò)鏈接的樣式
- 設(shè)置鼠標(biāo)移動(dòng)上去的時(shí)候鏈接的樣式
- 設(shè)置正在點(diǎn)擊的時(shí)候的鏈接的樣式
- 這4中狀態(tài)有什么要求。
列表篇
- 怎樣修改列表項(xiàng)中的標(biāo)志類型
- 有哪些標(biāo)志類型
- 怎樣把標(biāo)志類型設(shè)置為圖像
- 怎樣簡(jiǎn)寫(xiě)列表樣式
- list-style-position是干嘛的迹辐，怎么使用
- 怎樣在一個(gè)聲明中定義所有列表屬性
表格篇
-
完成這個(gè)效果
演示 - border-collapse這個(gè)屬性是干嘛的
-
實(shí)現(xiàn)下面這個(gè)效果演示
- 給表格添加一個(gè)高度和寬度
- 設(shè)置表格內(nèi)文字對(duì)其方式
- 設(shè)置表格內(nèi)文字的水平對(duì)其方式
- 給每個(gè)單元格一個(gè)內(nèi)邊距蝶防！
- 給表格一個(gè)背景顏色！
- 設(shè)置表格每個(gè)單元格之間的距離明吩！
- 設(shè)置表格標(biāo)題的位置间学！參考
- 設(shè)置是否顯示空白的單元格，參考
- table-layout是干嘛的印荔，有哪些值低葫？
輪廓篇
- 現(xiàn)在有個(gè)段落p，給這個(gè)段落一個(gè)邊框仍律，然后再給一個(gè)輪廓嘿悬，tip：outline，設(shè)置樣式水泉，顏色善涨，寬度
框模型/盒模型
概述
- 描述一下框模型
- 框模型的寬度個(gè)高度是怎么計(jì)算的
- 如何改變框模型的寬度高度計(jì)算方式
內(nèi)邊距篇
- 內(nèi)邊距是什么？怎么設(shè)置草则？
邊框篇
- 邊框是什么钢拧，怎么設(shè)置？
外邊距篇
- 外邊距是什么畔师，怎設(shè)置娶靡，使用2個(gè)值的時(shí)候，順序是怎么樣的看锉。
外邊距合并篇
- 什么是外邊距合并姿锭，顯示一下，有幾種情況會(huì)發(fā)生外邊距合并伯铣？都寫(xiě)出來(lái)呻此。
- 外邊距合并的意義在哪？舉一個(gè)例子腔寡。
定位
概述
- 什么定位可以使元素脫離文檔流焚鲜，
- 描述position中的四個(gè)屬性的意思。
- 怎樣處理溢出元素，設(shè)置成隱藏忿磅，滾動(dòng)糯彬，自動(dòng)。
- 怎樣剪切一個(gè)圖像葱她，case
-
圖片和文字對(duì)其方式怎么設(shè)置撩扒？
演示
相對(duì)定位篇
- 解釋一下什么是相對(duì)定位，會(huì)不會(huì)脫離文檔流吨些，位置計(jì)算是怎樣的搓谆？
絕對(duì)定位篇
- 解釋一下什么是絕對(duì)定位，會(huì)不會(huì)脫離文檔流豪墅，是怎樣計(jì)算位置的泉手？
浮動(dòng)
- 浮動(dòng)會(huì)不會(huì)脫離文檔流？
- 解釋一下浮動(dòng)的原理是什么偶器。
- 多個(gè)元素一起浮動(dòng)會(huì)發(fā)生什么情況斩萌？
- 如果容器的寬度不夠了會(huì)發(fā)生什么？
- 清除浮動(dòng)的原理是什么?
-
實(shí)現(xiàn)這個(gè)效果
演示 -
實(shí)現(xiàn)這個(gè)效果
演示 -
完成這個(gè)效果
演示 -
使用浮動(dòng)完成這個(gè)布局状囱，演示
參考html：
<div class="container">
<div class="header"><h1 class="header">W3School.com.cn</h1></div>
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3School.com.cn you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>
<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div>
CSS選擇器
元素選擇器篇
- 選中文檔中的h1標(biāo)簽术裸。
- 同時(shí)選中文檔中的h2和p元素
選擇器分組篇
類選擇器篇
- 選中文檔中的demo類
- 選中p標(biāo)簽中包含的demo類
- 選中即包含demo類的又包含hello類的元素
ID選擇器篇
- 使用一個(gè)ID選擇器吧~
屬性選擇器篇
- 選中含有title屬性的所有元素
- 選中所有帶有href的a元素
- 選中所有電郵href和title屬性的a元素
- 選中所有帶有alt屬性的img元素
- 演示一下怎么在XML文檔中使用屬性選擇器
- 選中herf等于“http://www.baidu.com”的a元素
- 選中class值是demo hello的p元素
- 選中class的值中包含demo值的p元素
- 選中title中以en開(kāi)頭的p元素
- 選中title中以en結(jié)尾的p元素
- 選中title中包含en的p元素
- 選中title中屬性值等于en或者以en-開(kāi)頭的p元素
后代選擇器篇
- CSS選擇器中有空格和每空格有啥區(qū)別
- 后代選擇器是什么，怎么用亭枷。
子元素選擇器篇
- 寫(xiě)一個(gè)子元素
- 子元素選擇器必須選擇直接子元素嗎袭艺？
相鄰兄弟選擇器篇
- 選擇緊接在h1元素后面的p元素。
偽類篇
- 使用偽類完成叨粘，鏈接的樣式猾编，包括未點(diǎn)擊，點(diǎn)擊過(guò)升敲，鼠標(biāo)滑過(guò)答倡，鼠標(biāo)按下的樣式
- 偽類結(jié)合類用一下
- focuse這個(gè)偽類是怎么使用的
- 現(xiàn)有10個(gè)li，選中第一個(gè)驴党，
- 同上瘪撇，選最后一個(gè)
- 同上，選偶數(shù)
- 同上港庄，選奇數(shù)
- lang這個(gè)偽類怎么使用倔既？
偽元素篇
- 給文本的第一個(gè)字母添加特殊樣式。
- 給文本的首行添加特殊樣式
- 給元素之前添加特殊樣式
- 給元素之后添加內(nèi)容
高級(jí)
對(duì)齊篇
- 使用margin居中對(duì)其一個(gè)塊元素
- 把一個(gè)元素垂直居中對(duì)其
- 把一個(gè)元素放置在另外一個(gè)元素正中央鹏氧，可以使用flex渤涌。
-
使用float完成這個(gè)
演示
尺寸篇
- 使用元素的最大尺寸有什么意義？
- 行高有什么意義把还，有哪些具體的使用場(chǎng)景实蓬。
分類篇
- 內(nèi)聯(lián)元素和塊級(jí)元素到底有什么異同
- 把鼠標(biāo)樣式設(shè)置為小手
導(dǎo)航欄篇
- 寫(xiě)一個(gè)水平導(dǎo)航條
- 寫(xiě)一個(gè)垂直導(dǎo)航條
圖片庫(kù)篇
圖片透明篇
- 把一張圖片設(shè)置為辦透明的茸俭。
-
實(shí)現(xiàn)這個(gè)效果演示
媒介類型篇
- 媒介查詢都有哪些屬性，分別是干嘛的安皱？
- 演示一下媒介查詢的屏幕查詢
注意事項(xiàng)篇
CSS3
邊框篇
- 給一個(gè)矩形添加一個(gè)圓角
- 給一個(gè)矩形添加一個(gè)陰影调鬓，并且說(shuō)明每個(gè)值的意義
-
給一個(gè)div添加一個(gè)邊框圖片。演示
素材
背景篇
- 調(diào)整一個(gè)body的背景圖像的大小
- context-box,padding-box,border-box都是什么练俐？
- 怎樣利用以上這幾個(gè)屬性規(guī)定背景圖像的起源袖迎。
- 給一個(gè)body同時(shí)添加兩個(gè)背景圖像看看會(huì)發(fā)生什么？
- background-clip是干嘛的腺晾，演示一下
文本效果篇
- 給圖片添加一個(gè)陰影。
- word-wrap這個(gè)屬性是干嘛的辜贵，怎么使用悯蝉？
- word-break是干嘛的，怎么使用托慨？
- 如果一個(gè)容器的文本溢出了怎么處理成顯示···
- text-justify屬性是干嘛的鼻由？
字體篇
- 定義一個(gè)自己的字體吧！要求要有多個(gè)格式的文件厚棵。
- 在定義一個(gè)自己的字體蕉世，要求要設(shè)置自己加粗。
- 運(yùn)用一下自定義的字體吧婆硬！
2D轉(zhuǎn)換篇
- 把一個(gè)div從原本的位置沿x軸移動(dòng)100px狠轻，沿著y軸移動(dòng)50px。
- 把一個(gè)div從原本的位置順時(shí)針旋轉(zhuǎn)30度
- 把一個(gè)div橫向方法2倍彬犯，縱向放大3倍向楼。
- 擺一個(gè)元素沿x軸斜切30度，沿y軸斜切60度谐区。
- 解釋一下這行代碼的意思：
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
- transform-origin是什么屬性湖蜕，是干嘛的，怎么使用宋列？
3D轉(zhuǎn)換篇
- 使div圍繞x軸旋轉(zhuǎn)120度昭抒。
- 使div圍繞Y軸旋轉(zhuǎn)100度。
過(guò)度篇
- 一個(gè)提示炼杖，過(guò)渡是transition灭返，說(shuō)明一下這個(gè)屬性怎么使用。
- 怎么可以讓動(dòng)畫(huà)效果延遲2s出現(xiàn)嘹叫？
動(dòng)畫(huà)篇
- 定義一個(gè)動(dòng)畫(huà)婆殿，背景顏色從紅色變成綠色。
- 應(yīng)用這個(gè)動(dòng)畫(huà)罩扇，設(shè)置動(dòng)畫(huà)執(zhí)行的時(shí)間婆芦。
- 使用百分比的方式定義一個(gè)四步的動(dòng)畫(huà)怕磨。
- 設(shè)置動(dòng)畫(huà)延遲2s后執(zhí)行。
- 設(shè)置動(dòng)畫(huà)反復(fù)執(zhí)行消约。
- 設(shè)置動(dòng)畫(huà)無(wú)限循環(huán)肠鲫。
- 簡(jiǎn)寫(xiě)動(dòng)畫(huà)執(zhí)行方式，提示：動(dòng)畫(huà)名或粮，運(yùn)行時(shí)間导饲，運(yùn)行方式，延遲執(zhí)行時(shí)間氯材，是否循環(huán)執(zhí)行渣锦，是否下一個(gè)動(dòng)畫(huà)周期逆向播放。
多列篇
- 把一個(gè)div中的文字分為三列氢哮。
- 設(shè)置每列文字的間隙是40px袋毙。
- 設(shè)置每列之間的分割線的樣式。
- 設(shè)置分割線的顏色和寬度冗尤。
- 設(shè)置文字跨越3列听盖。
- 把寬度和列數(shù)寫(xiě)到一起。
用戶界面
- 寫(xiě)一個(gè)div裂七，并且允許用戶更改div的大小皆看。
- 更改盒模型的計(jì)算方式。
- 給元素設(shè)置一個(gè)outline背零，設(shè)置距離元素的距離腰吟。
