|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 最近對前端的一些知識進行了歸納總結,方便自己以后查看,同時也分享給大家,希望大家少走彎路。這篇文章主要總結了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; box-shadow: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標簽內第一個字大小為20px 10、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中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!