最近對前端的一些知識進行了歸納總結,方便自己以後查看,同時也分享給大家,希望大家少走彎路。這篇文章主要總結了CSS3中的相關知識,有需要的朋友可以參考一下,希望對你有用。
1、設定字型(相容所有瀏覽器)
@font-face { font-family: 'iconfont'; src: url("fonts/iconfont/iconfont.eot"); src: url("fonts/iconfont/iconfont.eot?#iefix") format("embedded-opentype"), url("fonts/iconfont/iconfont.ttf") format("truetype"), url("fonts/iconfont/iconfont.woff") format("woff"), url("fonts/iconfont/iconfont.svg#icomoon") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family : name ; src : url( url ) ; sRules }
說明:
name : 字型名稱
# url : 使用絕對或相對位址指定OpenType字型
sRules : 樣式表定義
設定嵌入HTML文件的字型。
@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }
#2、div[class^="test"]
設定只有div內class 屬性值以"test" 開頭的所有div 元素的背景色:
div[class^="test"] { background:#ffff00; }
3、 [class*="abc"]
class的值中含有"abc"的元素。
div[class*="abc"]
代表只有div內class=abc的樣式
4、指定最後一個p標籤背景樣式
p:last-child{ background:#ff0000;}
5、顯示裝置解析度最小768且最大979時候顯示abc(CSS3)
@media (min-width: 768px) and (max-width: 979px) { .abc{} }
ie6-ie9支援
<style> @media screen and (min-width: 1201px) { .y-row { width: 1200px; border:1px solid #333; height:300px; min-width: 1200px; } } @media screen and (max-width: 1200px) { .y-row { width: 900px; border:1px solid #333; height:300px; min-width: 900px; } } </style> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
6、div > span (IE6不支援)
div > span{字體12px}
div標籤內的兒子span樣式為字體12px,div內孫子span不起作用,具有優先
#7、字體陰影
.blue { background:#01dbff; text-shadow:2px 2px 2px #09a5ef; }
#陰影字體靠左距離靠下距離陰影距離範圍陰影顏色
字體背景字體陰影
8、盒子陰影
-moz-border-radius:0px 5px 5px 0px; -webkit- border-radius:0px 5px 5px 0px; border-radius:0px 5px 5px 0px; -moz-box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff inset; -webkit-box-shadow:0px 0px 1px #fff 0px 0px 1px #fff inset;
-moz代表firefox瀏覽器私有屬性
-ms代表IE瀏覽器私有屬性
-webkit代表chrome、safari私有屬性
-o代表opera蘋果瀏覽器
設定
border-radius:0px 5px 5px 0px; 代表邊框右上和右下圓角為5px
box-shadow:0px 0px 1px #fff inset;代表邊框間距靠左0 靠上0 和1px陰影範圍陰影顏色為白色
有inset 代錶框內陰影不帶inset 代錶框外陰影
注意:box-shadow:0px 0px 1px #fff
第1個值為0時,代表左右邊框陰影為1px範圍
第1個值為正整數代表左邊框陰影
第1個值為負整數代表右邊框陰影
同理
第2個值為0 代表上下邊框陰影
##第2個值為正整數代表1px陰影距離上邊框多少第1個值為負整數代表下邊框陰影設定border-radius圓角#9、:first-letter
p:first-letter{font-size:20px}代表p標籤內第一個字大小為20px10、div:first-line { color:red;font-size:16px; }
代表DIV中第一行文字為紅色字體為16px#11、p a:first-child { color: green }
代表p盒子裡第一個a超連結字型顏色為綠色12、p :before { content:"我在這裡" }
代表p標籤物件前面加入一段內容:「我在這裡」13、table:after { content : END OF TABLE }
代表在table物件後面顯示內容「END OF TABLE 」14、單冒號與雙冒號
#偽元素由雙冒號和偽元素名稱組成。雙冒號是在當前規範中引入的,用於區分偽類和偽元素。但偽類相容現存樣式,瀏覽器需要同時支援舊的偽類,例如:first-line、:first-letter、:before、:after等。 那麼現在就可以完整的回答標題中的問題了,對於CSS2之前已有的偽元素,比如:before,單冒號和雙冒號的寫法::before作用是一樣的。 所以,如果你的網站只需要相容webkit、firefox、opera等瀏覽器,建議對於偽元素採用雙冒號的寫法,如果不得不相容IE瀏覽器,還是用CSS2的單冒號寫法比較安全。15、.uploader input[type=file]{}
#代表class為uploader 盒子內input標籤屬性為type=file設定樣式#############################################。以上是前端開發CSS3技術經驗分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!