01.CSS3布局 · 程序員開發筆記

[TOC] #### 元素選擇器 div>p 選擇父元素為 <div> 元素的所有 <p> 元素。 p~ul 選擇前面有 p>元素的每個 ul 元素。 div+p 選擇緊接在 <div> 元素之后的所有 <p> 元素。 <style type="text/css"> /*選擇的是#hd里的兒子輩的p標簽*/ /*#hd>p{ color: red; font-size: 25px; }*/ /*選擇的是緊鄰在#one后面的p標簽*/ /*#one+p{ color: red; font-size: 25px; }*/ /*選擇的是#one后面所有同級的p標簽*/ /*#one~p{ color: red; font-size: 25px; }*/ /*選擇的是#hd里有id屬性的p標簽,不論id是多少,只要有id屬性就行!*/ /*#hd p[id]{ color: red; font-size: 25px; }*/ /*選擇的是#hd里name屬性值是shuai的元素*/ /*#hd p[name=shuai]{ color: red; font-size: 25px; }*/ /*選擇的是#Hd里id屬性以o開頭的p標簽*/ /*#hd p[id^=o]{ color: red; font-size: 25px; }*/ /*選擇的是#hd中id屬性以e結尾的p標簽*/ /*#hd p[id$=e]{ color: red; font-size: 25px; }*/ /*選擇的是#hd里id屬性值中有iv的p標簽*/ #hd p[id*=iv]{ color: red; font-size: 25px; } /*選中頁面的根元素(html標簽)*/ /*:root{ background: red; }*/ /*選擇的是#hd里空的p標簽*/ /*#hd p:empty{ width: 200px; height: 40px; background: blue; }*/ /*選擇#hd里所有的p標簽,排除掉id是one的*/ /*#hd p:not(#one){ width: 200px; height: 40px; background: blue; }*/ /*擇用戶被選取的部分*/ p::selection{ background: green; color: white; } p::-moz-selection{ background: green; color: white; } 火狐 -moz- 谷歌 -webkit- ie -ms- opera -o- </style> <div id="hd"> <p>后盾人人人做后盾0</p> <p id="one">后盾人人人做后盾1</p> <p>后盾人人人做后盾2</p> <p name='shuai'>后盾人人人做后盾3</p> <p>后盾人人人做后盾4</p> <p id="five">后盾人人人做后盾5</p> <p>后盾人人人做后盾6</p> <p>后盾人人人做后盾7</p> <div> <p>我們也是p標簽</p> <p>我們也是p標簽</p> <p>我們也是p標簽</p> </div> </div> :target #news:target 選擇當前活動的 #news eg: <a href="#one">第一章</a> <a href="#two">第二章</a> <h2 id="one">第一章朝氣蓬勃</h2> <h2 id="two">第二章骨文</h2> #### 偽類選擇器 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/index.css" /> <title></title> <style type="text/css"> /*獲取div下面的所有第一個p標簽(0,8,12)*/ /*div p:first-of-type{ color: red; font-size: 25px; }*/ /*獲取div兒子的第一個p標簽((0,8,12)*/ /*div>p:first-of-type{ color: red; font-size: 25px; }*/ /*獲取div下面的所有最后一個p標簽(7,10,12)*/ /*div P:last-of-type{ color: red; font-size: 25px; }*/ /*獲取div兒子的第一個p標簽(7,10,12)*/ /*div>P:last-of-type{ color: red; font-size: 25px; }*/ /*選擇的是獨生子的p標簽(12)*/ /*不能有任何兄弟元素*/ /*p:only-child{ color: blue; font-size: 20px; }*/ /*獲取倒數第3個元素（6，8）*/ /*div p:nth-last-child(3){ color: blue; font-size: 20px; }*/ /*獲取div下面的第三個p標簽元素，不管你有幾個其他的兄弟元素（2，10）*/ /*div p:nth-of-type(3){ color: blue; font-size: 20px; }*/ /*獲取div下面的倒數第三個p標簽元素，不管你有幾個其他的兄弟元素（8，5）*/ /*div p:nth-last-of-type(3){ color: blue; font-size: 20px; }*/ /*獲取div下兒子的最后一個元素*/ /*div p:last-child{ color: blue; font-size: 20px; }*/ /*獲取div下兒子的第一個元素*/ /*div p:first-child{ color: blue; font-size: 20px; }*/ </style> </head> <body> <div id="hd"> <p>后盾人人人做后盾0</p> <p id="one">后盾人人人做后盾1</p> <p>后盾人人人做后盾2</p> <p name='shuai'>后盾人人人做后盾3</p> <p>后盾人人人做后盾4</p> <p id="five">后盾人人人做后盾5</p> <p>后盾人人人做后盾6</p> <p>后盾人人人做后盾7</p> <div> <span>11</span> <p>我們也是p標簽8</p> <p>我們也是p標簽9</p> <p>我們也是p標簽10</p> </div> </div> <div> <p>我們也是p標簽12</p> </div> </body> </html> #### 文本選擇器 :first-letter p:first-letter 選擇每個 <p> 元素的首字母。 :first-line p:first-line 選擇每個 <p> 元素的首行。 :before p:before 在每個 <p> 元素的內容之前插入內容。 :after p:after 在每個 <p> 元素的內容之后插入內容。 eg: <style type="text/css"> div{ width: 800px; margin: 200px; } div:before{ content: '123'; } div:after{ content: '456'; } /*div:first-line{ color: blue; font-size: 20px; }*/ div:first-letter{ color: blue; font-size: 20px; } </style> <div>后盾 HDPHP 框架是一個為用 PHP 程序語言編寫網絡應用程序的人員提供的軟件包。提供強大的、完整的類庫包，滿足開發中的項目需求，HDPHP 框架可以將需要完成的任務代碼量最小化，大大提高項目開發效率與質量，當然使用是非常簡便、快捷的。高效的核心編譯處理機制讓系統運行更快，提供豐富的的錯誤解決方案，讓修正代碼變得更快速。做為優秀的框架產品，HDPHP在系統性能上做了大量的優化處理，只為讓程序員使用 HDPHP 框架強悍的功能，用最短的時間完成項目的開發。為了便于快速進行項目開發，框架也提供了相應的前端功能組件使程序員從繁瑣的組件調試中解脫出來。</div> eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ padding: 100px 200px; } ul li{ list-style: none; line-height: 25px; font-size: 16px; position: relative; padding-left: 20px; } /*ul li:after{ content: ' '; display: block; width: 5px; height: 5px; background: mediumpurple; position: absolute; left: 0; top: 10px; border-radius: 50%; }*/ ul li:after{ content: ' '; display: block; width: 5px; height: 16px; background: mediumpurple; position: absolute; left: 0; top: 5px; } </style> </head> <body> <ul> <li>后盾人人人做后盾</li> <li>后盾人人人做后盾</li> <li>后盾人人人做后盾</li> <li>后盾人人人做后盾</li> <li>后盾人人人做后盾</li> <li>后盾人人人做后盾</li> <li>后盾人人人做后盾</li> <li>后盾人人人做后盾</li> </ul> </body> </html> #### 表單選擇器選擇器示例描述 :focus input:focus 選擇獲得焦點的 input 元素。 :enabled input:enabled 選擇每個啟用的 <input> 元素。 :disabled input:disabled 選擇每個禁用的 <input> 元素 :checked input:checked 選擇每個被選中的 <input> 元素。 #### 子選擇器 :first-of-type p:first-of-type 選擇屬于其父元素的首個p元素的每個p元素 :last-of-type p:last-of-type 選擇屬于其父元素的最后p元素的每個p元素 :only-of-type p:only-of-type 選擇屬于其父元素唯一的p元素的每個p元素 :only-child p:only-child 選擇屬于其父元素的唯一子元素的每個p元素 :nth-child(n) p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個p元素 :nth-last-child(n) p:nth-last-child(2) 同上，從最后一個子元素開始計數 :nth-of-type(n) p:nth-of-type(2) 選擇屬于其父元素第二個元素的每個p元素 :nth-last-oftype(n) p:nth-last-of-type(2) 同上，但是從最后一個子元素開始計數 :last-child p:last-child 選擇屬于其父元素最后一個子元素每個p元素 :first-child p:first-child 選擇屬于父元素的第一個子元素的每個 p元素 #### RBGA顏色設置 ? rgb表示紅、綠、藍、a表示透明度1為不透明，0.5為半透明示例： #div1~div { background: rgba(255,0,0,0.5); } #### 字體單位 px: 使用具體像素點為單位，好處是比較穩定和精確。但在瀏覽器中放大或縮放瀏覽頁面時會存在一個問題 em: em是以父級大小為參考的單位。好處是字體可以自適應。但父元素標簽發生改變時字體大小將不確定。 rem： rem是相對于根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值即可。示例： html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/} #### 文字樣式屬性規定當文本溢出包含元素時發生的事情： ? text-overflow: clip|ellipsis|string; 參數說明： clip 修剪文本。 ellipsis 顯示省略符號來代表被修剪的文本。 string 使用給定的字符串來代表被修剪的文本。示例： h2{ width:100px; overflow: hidden; white-space: nowrap;/*文字不換行*/ text-overflow:ellipsis; } #### 文本陰影 ? 向文本添加陰影語法：text-shadow: h-shadow v-shadow blur color 說明： h-shadow 水平陰影的位置。允許負值 v-shadow 垂直陰影的位置。允許負值 blur 模糊距離 color 陰影的顏色示例： h2{ text-align:center; text-shadow: 20px 20px 15px red; } #### 盒子陰影 ? 向元素添加盒子陰影語法：box-shadow: h-shadow v-shadow blur spread color 說明： h-shadow 水平陰影的位置。允許負值 v-shadow 垂直陰影的位置。允許負值 blur 模糊距離 spread 陰影的尺寸 color 陰影的顏色 eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ margin: 100px auto; width: 500px; height: 300px; background: dodgerblue; /*box-shadow: -20px -10px 30px 10px red;*/ box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.3); } </style> </head> <body> <div id="box"></div> </body> </html> #### 盒子尺寸 ? min-width 元素最小可接受的寬度 ? max-width 元素最大可接受的寬度 ? min-height 元素最小可接受的高度 ? max-height 元素最大可接受的高度 #box img{ max-width: 780px; } #### 盒子空間屬性允許您以特定的方式定義匹配某個區域的特定元素 box-sizing: content-box|border-box; 參數說明： ? content-box border和padding不計算入width之內 ? border-box border和padding計算入width之內，其實就是怪異模式了 #box{ width: 300px; height: 400px; border: 4px solid mediumpurple; margin: 50px auto; padding-top: 100px; /*box-sizing: border-box;*/ } #### 分欄 ? column-width 欄寬 ? column-count 列數 ? column-gap 列間距 ? column-rule 分隔線說明： -moz是針對firefox的設置，-webkit是針對chrome與蘋果 safari的設置 <style type="text/css"> #news{ border: 1px solid mediumpurple; /*欄寬*/ /*column-width: 400px;*/ /*分欄數量*/ column-count: 6; /*欄間距*/ column-gap: 50px; /*分割線*/ column-rule: 2px dotted blue; } </style> #### 更改背景圖像大小 background-size: ? 規定背景圖像的尺寸語法： ? background-size:寬度高度 <style type="text/css"> *{ padding: 0; margin: 0; } html{ width: 100%; height: 100%; } body{ background: url(bg.jpg) no-repeat; background-size: 100% 100%; width: 100%; height: 100%; } </style> #### 線性漸變 linear-gradient ? 語法：linear-gradient( [<point> || <angle>,]? <stop>,<stop> [, <stop>]* ) 示例： ? background: linear-gradient(top right,green,red,blue); #box{ width: 700px; height: 400px; margin: 100px auto; border: 2px solid mediumpurple; /*瀏覽器前綴火狐 -moz- 谷歌 -webkit- 歐朋(Opera) -o- IE -ms-*/ /*background: -moz-linear-gradient(left,yellow,blue,green,pink,purple);*/ background: -moz-linear-gradient(top,yellow,blue,green,pink,purple); /*background: -webkit-linear-gradient(left,yellow,blue);*/ } //示例：按鈕。 <style type="text/css"> #btn{ width: 300px; height: 50px; margin: 100px auto; border: #D27D00 1px solid ; background: -moz-linear-gradient(top,#F6E6B3,#ED9319); border-radius: 5px; </style> <div id="btn"></div> #### outline輪廓線 ? outline （輪廓）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用 ? 輪廓線不同于邊框，不占用空間尺寸。 ? 只有在獲得焦點或者激活時呈現屬性值： outline-color 規定邊框的顏色 outline-style 規定邊框的樣式 outline-width規定邊框的寬度 <style type="text/css"> div{ width: 200px; height: 400px; background: dodgerblue; float: left; margin: 20px; } div:hover{ outline: 3px solid black; } </style> <div></div> <div></div> <div></div> <div></div> <div></div>