欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談css之屬性及剩余的選擇符

  發(fā)布時(shí)間：2016-08-11 11:59:45   作者：佚名   我要評論
下面小編就為大家?guī)硪黄獪\談css之屬性及剩余的選擇符。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

今天的課程加速了，比平時(shí)快了些，但覺得很不錯(cuò)。nice~

屬性選擇符

E[att]       選擇具有att屬性的E元素。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. input[type]{color: #red;}<input type="radio">  

E[att="val"]      選擇具有att屬性且屬性值等于val的E元素。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. input[type="radio"]{color: #red;}   
  2. <input type="radio">  

E[att~="val"]     選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個(gè)等于val的E元素。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. a[class~="ht"]{font-size: 16px;}   
  2. <a href="www.dbjr.com.cn" class="ht sss"></a>  

E[att^="val"]    選擇具有att屬性且屬性值為以val開頭的字符串的E元素。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. a[href^="www"]{font-size: 16px;}<a href="www.dbjr.com.cn"></a>  

E[att$="val"]     選擇具有att屬性且屬性值為以val結(jié)尾的字符串的E元素。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. input[type$="o"]{color: red;}   
  2.   
  3. <input type="radio">  

E[att*="val"]      選擇具有att屬性且屬性值為包含val的字符串的E元素。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. input[type*="ad"]{color: red;}   
  2.   
  3. <input type="radio">  

E[att|="val"]      選擇具有att屬性且屬性值為以val開頭并用連接符"-"分隔的字符串的E元素。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. input[class|="te"]{color: red;}   
  2.   
  3. <input type="radio" class="te-ss">  

E:first-letter/E::first-letter       設(shè)置對象內(nèi)的第一個(gè)字符的樣式。

就是匹配的到的元素的第一個(gè)字。

E:first-line/E::first-line       設(shè)置對象內(nèi)的第一行的樣式。

E:before/E::before          設(shè)置在對象前（依據(jù)對象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來和content屬性一起使用

E:after/E::after              設(shè)置在對象后（依據(jù)對象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來和content屬性一起使用

E::placeholder               設(shè)置對象文字占位符的樣式。

E::selection                 設(shè)置對象被選擇時(shí)的顏色。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <p class="t1">測試css的偽對象選擇符，天氣晴朗，陽光明媚!</p>  
  2. p.t1{width:100px;border:1px solid black;} /* CSS3的語法改成 ::,原本是: */   
  3. p.t1::first-letter {font-size:20px;font-weight:bold;}/*第一個(gè)字符*/   
  4. p.t1::first-line {color:blue;}/* 第一行 */   
  5. css: .t2::before{content:'123';}   
  6. .t2::after{content:'123';}  

兼容：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. html：<input type="search" placeholder="測試">   
  2. css:    
  3.    input::-webkit-input-placeholder {   
  4.     color: green;}   
  5.   
  6.    input:-ms-input-placeholder { // IE10+   
  7.     color: green;}   
  8.   
  9.    input:-moz-placeholder { // Firefox4-18   
  10.     color: green;}   
  11.   
  12.    input::-moz-placeholder { // Firefox19+   
  13.     color: green;}  
CSS Code復(fù)制內(nèi)容到剪貼板
  1. <h3>請使用鼠標(biāo)選取我</h3>   
  2.  <p>請使用鼠標(biāo)選取我</p>   
  3.   
  4. p::-moz-selection{ background-color:#E13300; color: white;}   
  5. p::selection{ background-color: #E13300; color: white; }  

css的樣式

font-family    設(shè)置文字名稱，可以使用多個(gè)名稱，或者使用逗號 分隔，瀏覽器則按照先后順序依次使用可用字體。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. p { font-family:‘宋體'，'黑體', 'Arial’ }  

font-size       設(shè)置文字的尺寸

注：如果用百分比作為單位，則是基于父元素字體的大小

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. p { font-size:14px;}      

font-weight       控制字體粗細(xì)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. p { font-weight:bold;}  

font-style       控制字體是否傾斜

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. p { font-style: normal; }    
  2. p { font-style: italic; }   
  3. p { font-style: oblique; }   

font(字體樣式縮寫)

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. font : font-style || font-variant || font-weight || font-size || / line-height || font-family   
  2. p { font:italic bold 14px/22px 宋體}  

color     控制文本的字體顏色

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. p{   
  2.     color:#FF0000;   
  3. }  

text-decoration(文本裝飾線條)      控制文本裝飾線條

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. text-decoration : none || underline || blink || overline || line-through    
  2.   
  3. p { text-decoration:overline;}   
  4.   
  5. p { text-decoration:underline;}   
  6.   
  7. p { text-decoration:line-through;}  

text-shadow(文字陰影)     控制文字的陰影部分。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. text-shadow: h-shadow v-shadow blur color;   
  2.   
  3. h-shadow         必需。水平陰影的位置。允許負(fù)值。   
  4. v-shadow         必需。垂直陰影的位置。允許負(fù)值。   
  5. blur                   可選。模糊的距離。   
  6. color                 可選。陰影的顏色。    
  7.   
  8. h1{   
  9.     text-shadow: 2px 2px #ff0000;   
  10. }  

width   寬度

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. width : auto | length        
  2.   
  3. p { width:300px;}   
  4.   
  5. div { width:50%;}  

height    高度

CSS Code復(fù)制內(nèi)容到剪貼板
  1. height : auto | length    
  2.   
  3. img { height:200px;}   
  4.   
  5. div { height:100px;}  

margin     外邊距

CSS Code復(fù)制內(nèi)容到剪貼板
  1. margin : auto | length    
  2.   
  3. margin-top         設(shè)置上邊的外邊距   
  4. margin-bottom         設(shè)置下邊的外邊距   
  5. margin-left        設(shè)置左邊的外邊距   
  6. margin-right        設(shè)置右邊的外邊距   
  7.   
  8. div { width:300px; height:100px; margin:10px;}   
  9.   
  10. div { width:300px; height:100px; margin:0 auto;}   
  11.   
  12. 縮寫型式：   
  13.   
  14. margin: 上邊距  右邊距  下邊距  左邊距   
  15.   
  16. margin: 上下邊距    左右邊距   
  17.   
  18. margin: 上邊距  左右邊距  下邊距  

padding      內(nèi)邊距

CSS Code復(fù)制內(nèi)容到剪貼板
  1. padding : length   
  2.   
  3. div { width:300px; height:100px; padding:10px;}   
  4.   
  5.   
  6. padding-top         設(shè)置上邊的內(nèi)邊距   
  7. padding-bottom     設(shè)置下邊的內(nèi)邊距   
  8. padding-left        設(shè)置左邊的內(nèi)邊距   
  9. padding-right        設(shè)置右邊的內(nèi)邊距   
  10.   
  11.   
  12. 縮寫型式：   
  13.   
  14. padding: 上邊距  右邊距  下邊距  左邊距   
  15.   
  16. padding : 上下邊距    左右邊距   
  17.   
  18. padding : 上邊距  左右邊距  下邊距  

補(bǔ)充知識：

padding內(nèi)邊距

當(dāng)一個(gè)盒子設(shè)置了背景圖像后，默認(rèn)情況下背景圖像覆蓋的范圍是padding和內(nèi)容組成的范圍，并以padding的左上角為基準(zhǔn)點(diǎn)平鋪背景圖像。

border邊框

border邊框里在IE并不顯示背景圖像的內(nèi)容，在Firefox則顯示背景圖像的內(nèi)容。

因?yàn)檫吙蚴墙橛趦?nèi)邊距和外邊距之間的，當(dāng)邊框設(shè)置為虛線時(shí)，在IE中，虛線空白的地方露

出來的是padding部分的背景，而在Firefox中，虛線空白的地方露出來的是margin部分的背景。

margin外邊距

body是個(gè)特殊的盒子，它的背景色會延伸到margin的部分，而其他盒子的背景色只會覆蓋“padding+內(nèi)容 部分”（IE瀏覽器中）或者“border+padding+內(nèi)容”部分（Firefox瀏覽器中）

margin用于控制塊與塊之間的距離。

倘若將盒子模型比作展覽館里展出的一幅幅畫，那么content就是畫面本身，padding就是畫面與畫框之間的留白，border就是畫框，而margin就是畫與畫之間的距離。

以上這篇淺談css之屬性及剩余的選擇符就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論