Java編譯優化
阿新 • • 發佈：2021-01-11
CSS3簡介
CSS3簡介
- CSS3是最新的CSS標準。
CSS3新增選擇器
-
屬性選擇器
-
以box開頭
-
<style> div[class^="box"] { background:red; } </style> <div class="box">box</div> <div class="abox">abox</div> <div class="boxa">boxa</div> <div class="aboxa">aboxa</div>
-
-
以box結尾
-
<style> div[class$="box"] { background:red; } </style> <div class="box">box</div> <div class="abox">abox</div> <div class="boxa">boxa</div> <div class="aboxa">aboxa</div>
-
-
包含box
-
<style> div[class*="box"] { background:red; } </style> <div class="box">box</div> <div class="abox">abox</div> <div class="boxa">boxa</div> <div class="aboxa">aboxa</div>
-
-
-
結構性偽類選擇器
-
:first-child 選擇器：用於選取屬於其父元素的首個子元素的指定選擇器
-
<style> li:first-child { background:red; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
-
-
:last-child 選擇器：用於選取屬於其父元素的最後一個子元素的指定選擇器
-
<style> li:last-child { background:red; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
-
-
:nth-child(n)選擇器：匹配屬於其父元素的第n個子元素，n可以是數字、關鍵字或公式
-
<style> li:nth-child(2) { background:red; } li:nth-child(even) { background:red; } li:nth-child(odd) { background:red; } li:nth-child(2n) { background:red; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
-
-
:nth-last-child()選擇器：匹配屬於其元素的第n個子元素的每個元素，不論元素的型別，從最後一個子元素開始計數。n可以是數字、關鍵字或公式
-
<style> li:nth-last-child(2) { background:red; } li:nth-last-child(even) { background:red; } li:nth-last-child(odd) { background:red; } li:nth-last-child(3n) { background:red; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
-
-
:nth-of-type(n)：選擇器匹配屬於父元素的特定型別的第n個子元素。n可以是數字、關鍵字或公式
-
<style> .wrap h2:nth-of-type(2) { background:red; } .wrap p:nth-of-type(odd) { background:red; } .wrap p:nth-of-type(even) { background:red; } .wrap p:nth-of-type(3n) { background:yellow; } </style> <div class="wrap"> <h2>標題1</h2> <p>段落文字1</p> <p>段落文字2</p> <p>段落文字3</p> <h2>標題2</h2> <p>段落文字4</p> <p>段落文字5</p> </div>
-
-
:nth-last-of-type(n)：選擇器匹配屬於父元素的特定型別的第N個子元素的每個元素，從最後一個子元素開始計數。n可以是數字、關鍵字或公式
-
<style> .wrap h2:nth-last-of-type(2) { background:red; } .wrap p:nth-last-of-type(odd) { background:red; } .wrap p:nth-last-of-type(even) { background:red; } .wrap p:nth-last-of-type(3n) { background:yellow; } </style> <div class="wrap"> <h2>標題1</h2> <p>段落文字1</p> <p>段落文字2</p> <p>段落文字3</p> <h2>標題2</h2> <p>段落文字4</p> <p>段落文字5</p> </div>
-
-
-
狀態偽類選擇器
-
:checked匹配使用者介面上處於選中狀態的元素
-
:enabled匹配使用者介面上處於可用狀態的元素
-
:disabled匹配使用者介面上處於禁用狀態的元素
-
<style> input[type=text]:enabled { color:#f00; } input[type=text]:disabled { color:#ff0; } input[type=radio]:checked { color:#f0f; } </style> <form action="#"> <input type="text" value="請輸入使用者名稱" enabled> <input type="text" value="請輸入別名" disabled> <input type="radio" checked name="sex"> <input type="radio" name="sex"> </form>-
選擇器 例子 例子描述 CSS .class .intro 選擇class="intro"的所有元素 1 #id #firstname 選擇id="firstname"的所有元素 1 * * 選擇所有元素 2 element p 選擇所有p元素 1 element，element div,p 選擇所有div元素和所有p元素 1 element element div p 選擇div元素內部的所有p元素 1 element>element div>p 選擇父元素為div元素的所有p元素 2 element+element div+p 選擇緊接在div元素之後的p元素 2 [attribute] [target] 選擇帶有target屬性所有元素 2 [attribute=value] [target=_blank] 選擇target="_blank"的所有元素 2 :link a:link 選擇所有未被訪問的連結 1 :visited a:visited 選擇所有已被訪問的連結 1 :active a:active 選擇點選那一刻的連結 1 :hover a:hover 選擇滑鼠指標位於其上的連結 1 :focus input:focus 選擇獲得焦點的input元素 2 :first-letter p:first-letter 選擇每個p元素的首字母 1 :first-line p:first-line 選擇每個p元素的首行 1 :first-child li:first-child 選擇屬於父元素的第一個子元素的每個li元素 2 :before p:before 在每個p元素的內容之前插入內容 2 :after p:after 在每個p元素的內容之後插入內容 2 element1~element2 div~p 選擇前面有div元素的p元素 3 [attribute^=value] a[src^="https"] 選擇其src屬性值以“https”開頭的每個a元素 3 [attribute$=value] a[src$=".pdf"] 選擇其src屬性以“pdf”結尾的所有a元素 3 [attribute*=value] a[src*="abc"] 選擇其src屬性中包含“abc”子串的每個a元素 3 :nth-child(n) p:nth-child(n) 選擇屬於其父元素的第二個子元素的每個p元素 3 :nth-last-child(n) p:nth-last-child(n) 同上，從最後一個子元素開始計數 3 :nth-of-type(n) p:nth-of-type(n) 選擇屬於其父元素第二個p元素的每個p元素 3 :nth-last-of-type(n) p:nth-last-of-type(n) 同上，但是從最後一個子元素開始計數 3 :last-child li:last-child 選擇屬於其父元素最後一個子元素每個li元素 3 :root :root 選擇文件的根元素 3 :empty p:empty 選擇沒有子元素的每個p元素（包括文字節點，空格，換行也不可以） 3 :target #news:target 選擇當前活動的#news元素 3 :enabled input:enabled 選擇每個啟用的input元素 3 :disabled input:disabled 選擇每個禁用的input元素 3 :checked input:checked 選擇每個被選中的input元素 3 :not(selector) :not(p) 選擇非p元素的每個元素，需要設定p元素屬性 3 ::selection ::selection 選擇被使用者選取的元素部分 3
-
-
CSS3常用邊框屬性
-
border-radius
- border-radius: top-left top-right bottom-right bottom-left ;
-
box-shadow
- box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow 必需，水平陰影的位置，允許負值；
- v-shadow 必需，垂直陰影的位置，允許負值；
- blur 可選，模糊距離；
- spread 可選，陰影的尺寸；
- color 可選，陰影的顏色；
- inset 可選，將外部陰影改為內部陰影
-
text-shadow
-
text-shadow: h-shadow v-shadow blur color;
-
h-shadow 必需，水平陰影的位置，允許負值；
-
v-shadow 必需，垂直陰影的位置，允許負值；
-
blur 可選，模糊距離；
-
color 可選，陰影的顏色；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 100%; height: 150px; background-color: red; font-size: 100px; color: #fff; /* text-shadow 1.水平位置，必需 2.垂直位置，必需 3.模糊距離 4.陰影的顏色 */ text-shadow: 10px 10px 10px black; } .box1 { width: 100%; height: 150px; line-height: 150px; text-align: center; background-color: blue; font-size: 100px; color: #fff; text-shadow: 0 0 5px gold ,0 0 10px gold ,0 0 15px gold ,0 0 20px gold; } .box2 { width: 100%; height: 150px; line-height: 150px; text-align: center; background-color: #ccc; font-size: 100px; color: #ccc; text-shadow: -1px -1px #fff,1px 1px #000; } .box3 { width: 100%; height: 150px; line-height: 150px; text-align: center; background-color: #ccc; font-size: 100px; color: #ccc; text-shadow: 1px 1px #fff,-1px -1px #000; } </style> </head> <body> <div class="box"> hello world </div> <div class="box1"> hello world </div> <div class="box2"> hello world </div> <div class="box3"> hello world </div> </body> </html>
-
CSS3背景屬性
-
多背景
-
background-image:url(圖片路徑)，url(圖片路徑)。。。；
-
<style> .box { width: 1000px; height: 500px; background-image: url(images/pic1.jpeg), url(images/pic2.jpeg); background-repeat: no-repeat; background-postion: left top, right bottom; border: 1px solid; } </style> -
background-size: length|percentage|cover|contain;
- length: 設定背景影象的高度和寬度。第一個值設定寬度，第二個值設定高度。如果只設置一個值，則第二個值會被設定為“auto”。
- percentage: 以父元素的百分比來設定背景影象的寬度和高度。第一個值設定寬度，第二個值設定高度。如果只設置一個值，則第二個值會被設定為“auto”。
- cover: 把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。背景影象的某些部分也可能無法完全顯示在背景區域中。
- contain: 把影象擴充套件至最大尺寸，以使其寬度和高度完全適應內容區域。
-
background-origin: 規定背景圖片的定位區域。背景圖片可以放置於content-box、padding-box或border-box區域。
- content-box 背景影象相對於內容框來定位
- padding-box 背景影象相對於內邊距來定位（預設）
- border-box 背景影象相對於邊框來定位
-
background-clip: 規定背景的繪製區域
- border-box 背景被裁剪到邊框盒 (預設)
- padding-box 背景被裁剪到內邊距框
- content-box 背景被裁剪到內容框
- text
-
CSS3漸變屬性
-
linear-gradient
-
#grad { background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */ background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1-12.0 */ background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6-15 */ background: linear-gradient(red,yellow,blue); /* 標準語法 */ }
-
-
radial-gradient
-
#grad { background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1- 6.0 */ background: -o-radial-gradient(red, green, blue); /* Opera 11.6-12.0 */ background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6-15 */ background: radial-gradient(red, green, blue); /* 標準語法 */ } -
第一個屬性值(形狀):是可選的，一共有下面兩種選擇： circle 圓形 ellipse 橢圓形，預設值 第一個屬性值還可以設定，發散的位置，值如下所示： at center（預設），at top,at left,at right,at bottom,at top left…… 第一個屬性值還可以設定，發散的半徑，關鍵字值如下所示： closest-side 指定徑向漸變的半徑長度為從圓心到離圓心最近的邊 closest-corner 指定徑向漸變的半徑長度為從圓心到離圓心最近的角 farthest-side 指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊 farthest-corner 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
-
使用者介面
瀏覽器的私有字首(相容高版本，提前相容)
-
核心 私有字首 瀏覽器 Gecko -moz- 火狐 Webkit -webkit- Chrome、Safari Presto -o- Opera Trident -ms- IE -
-moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px;
-
resize 屬性
-
resize 屬性規定是否可由使用者調整元素的尺寸。
註釋：如果希望此屬性生效，需要設定元素的 overflow 屬性，值可以是 auto、hidden 或 scroll。
- none 使用者無法調整元素的尺寸。
- both 使用者可調整元素的高度和寬度。
- horizontal 使用者可調整元素的寬度。
- vertical 使用者可調整元素的高度。
-
-
box-sizing 屬性
- content-box：寬度和高度分別應用到元素的內容框；即在寬度和高度之外繪製元素的內邊距和邊框
- border-box：為元素設定的寬度和高度決定了元素的邊框盒。也就是說，為元素指定的任何內邊距和邊框都不會改變盒子大小
-
calc函式 （實現不同單位之間換算），-兩邊要加空格
多列布局
-
通過CSS3,能夠建立多個列來對文字進行佈局一就像報紙那樣
-
column-count 規定元素應該被分隔的列數
-
column-width 該屬性指定一個長度值，用於規定每個欄目的寬度
-
column-gap 規定列之間的間隔
-
column-rule 屬性設定列之間的分隔線
-
p { column-count: 3; column-width: 300px; column-gap: 30px; column-rule: 1px dashed red; }
-