1、掌握CSS3中屬性選擇器幾種用法
1、要求使用div css實現以下效果,但要求css文件中全部使用屬性選擇器來設定元素樣式
附加說明:
1、整個div寬為850,要求在頁面中居中顯示
2、標題大小為28,加粗顯示
3、其他字體14px大小
4、點擊明星八卦,跳到tobagua.html,點擊軍事新聞跳到toaffairs.html
1、因為案例不需要一些額外的素材,所以準備素材這一步就可以省略了
2、創造好index.html,寫好架構,架構如何分析呢
#想法分析:
1、目標分成左右2個部分,每個部分都是顯示新聞列表,只是每個新聞的類別不一樣,而且一些樣式也不同
2、含有林心如的新聞顏色要單獨設置
3、含有f15的新聞顏色也要單獨設定
4、兩個部分的標題也要單獨設置,所以要給他們單獨設置一些屬性,這才可以透過屬性選擇器來匹配到
5 、因為每個部分都是列表,所以我們可以使用ul,但是兩個ul都是平齊的,所以需要用到float,既然是float了,那麼為了確保外層的容器依然能包裹住浮動的元素,所以最後需要加上clear元素來清除浮動
根據分析,我們得到以下程式碼
<!doctype html> <html> <head> <meta charset="utf-8"> <title>属性选择器</title> </head> <body> <div container="true"> <div left="true"> <span title="true"><a href="tobagua.html">明星八卦</a></span> <ul> <li class="news lxr">->林心如女儿小海豚正面照被公开颜值撞脸年轻时的霍建华,太美了 </li> <li class="news">->倪萍还是胖点好,瘦下来后太显老了,一点精神没有穿衣也不好看! </li> <li class="news">->汪小菲晒儿女沙滩上顽皮玩耍,儿子长高不少,女儿一身泥被指酷似奶奶张兰 </li> <li class="news">->伊能静给婆婆安排了个小次卧, 走进秦妈妈的表情变化让人心疼! </li> </ul> </div> <div right="true"> <span title="true"><a href="toaffairs.html">军事新闻</a></span> <ul> <li class="affairs news f15">->F15E成为首型接收B61-12核弹的战斗机 </li> <li class="affairs news">->越南的骑兵警队,马略矮了点啊 </li> <li class="affairs news">->美军运输机降落时冲出跑道后撞墙起火 4人受伤 </li> <li class="affairs news">->不到一个月又出事:美军F-35降落时起落架折断 </li> </ul> </div> <div class="clear"> </div> </div> </body> </html>
3、寫樣式,建立css資料夾,裡面新建index.css ,裡面的樣式怎麼寫了,以下是分析思路
思路分析:
#container容器的所有子元素
1、因為要求每個樣式必須使用屬性選擇器來匹配設置,所以我們的思路是首先要獲取到屬性container=true的元素,然後給它設置一些共同的樣式,比如最常見的padding,margin,因為不這樣設定的話,有些元素的預設padding你未必清楚,為了讓你專心寫邏輯,我們統一他們的padding,margin都為0
所以index.css中加入程式碼如下:
div[container =true] *{ padding:0; margin:0; }
container容器
1、根據要求得知,最外層容器的寬為850,要居中,上下左右都有padding,有灰色邊框,預設字體大小為14px,哪個是container容器呢,就是container屬性=true的元素
所以index.css中加入程式碼如下:
div[container =true] { width: 850px; margin: 0 auto; font-size: 14px; border: 1px solid lightgray; padding: 10px; }
2個標題公共樣式設定
#1、因為標題都要求居中,字體大小為28px,加粗顯示,哪些是標題呢,就是屬性title=true的所有元素
所以index.css中加入程式碼如下:
span[title=true] { text-align: center; font-size: 28px; font-weight: bold; }
2個標題連接的單獨設定
1、八卦標題顏色是帶有紅色的
2、軍事標題顏色是藍色的
3、屬性href含有bagua字串的就是左邊的標題連接,href屬性以toaffairs開頭的就是右邊標題連接
*= 表示包含,^=表示開頭
#所以index.css中加入程式碼如下:
a[href *=bagua] { color: rgb(234, 84, 23); } a[href ^=toaffairs] { color: green; }
左右浮動div設定
#1、左邊div需要向左浮動,那哪個是左邊那個div呢,其實就是left屬性為true的div
2、右邊div需要向右浮動,那哪個是右邊那個div呢,其實就是right屬性為true的div
3、作用為清除浮動的div,其實就是class 以clear結尾的那個
註:$= 表示以什麼結束
所以index.css中加入程式碼如下:
div[left =true] { float: left; } div[right =true] { float: right; } div[class $= clear] { clear: both; float: none; width: 0; height: 0; }
# li設定
1、li不包含黑色圓點,所以list-style:none
2、屬性class包含news字串的元素即為li
3、根據效果得出上下左右有一定的間距
所以index.css中添加代碼如下:
li[class =news] { list-style: none; height: 42px; line-height: 42px; padding:3px 10px; }
#含有林心如的標題設定
1、此標題顏色為土黃色,字體加粗
2、class屬性以lxr結尾的為林心如的標題,所以用$=
[class $=lxr]{ color:peru; font-weight: bold; }
#含有f15的標題設定
1、此標題顏色為藍色,字體加粗
2、class屬性包含f15字串的標題為目標設定標題,所以用*=
[class*=f15]{ color:blue; font-weight: bold; }
到此為止,index.css的全部內容如下:
div[container =true] *{ padding:0; margin:0; } div[container =true] { width: 850px; margin: 0 auto; font-size: 14px; border: 1px solid lightgray; padding: 10px; } span[title=true] { text-align: center; font-size: 28px; font-weight: bold; } a[href *=bagua] { color: rgb(234, 84, 23); } a[href ^=toaffairs] { color: green; } div[left =true] { float: left; } div[right =true] { float: right; } div[class $= clear] { clear: both; float: none; width: 0; height: 0; } li[class *=news] { list-style: none; height: 42px; line-height: 42px; padding:3px 10px; } [class $=lxr]{ color:peru; font-weight: bold; } [class*=f15]{ color:blue; font-weight: bold; }
然後將index.css引入index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>属性选择器</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> </head> <body> <div container="true"> <div left="true"> <span title="true"><a href="tobagua.html">明星八卦</a></span> <ul> <li class="news lxr">->林心如女儿小海豚正面照被公开颜值撞脸年轻时的霍建华,太美了 </li> <li class="news">->倪萍还是胖点好,瘦下来后太显老了,一点精神没有穿衣也不好看! </li> <li class="news">->汪小菲晒儿女沙滩上顽皮玩耍,儿子长高不少,女儿一身泥被指酷似奶奶张兰 </li> <li class="news">->伊能静给婆婆安排了个小次卧, 走进秦妈妈的表情变化让人心疼! </li> </ul> </div> <div right="true"> <span title="true"><a href="toaffairs.html">军事新闻</a></span> <ul> <li class="affairs news f15">->F15E成为首型接收B61-12核弹的战斗机 </li> <li class="affairs news">->越南的骑兵警队,马略矮了点啊 </li> <li class="affairs news">->美军运输机降落时冲出跑道后撞墙起火 4人受伤 </li> <li class="affairs news">->不到一个月又出事:美军F-35降落时起落架折断 </li> </ul> </div> <div class="clear"> </div> </div> </body> </html>
#運行結果為:
到此為止,實作了所需的結果
1、講解了屬性選擇器的幾種用法,例如
A=B表示A屬性值等於B字串
A*=B表示A屬性值包含B字串
##A$=B表示A屬性值以B字串結尾A^=B表示A屬性值以B字串開頭以上是CSS3屬性選擇器的幾個用法(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!