CSS3新增選擇器與背景圖片的設定
CSS3新增選擇器與背景圖片的設定
1.選擇器
1.1基本選擇器
1.2(層次)關係選擇器
1.3動態偽類選擇器
1.4目標偽類選擇器
例:
#html:target h3{color:#f00;}
//點選a時,#html下的h3字型顏色改變
<a href="#html">點選a標籤時,修改#html的樣式</a>
<div id="html">
<h3>html是什麼</h3>
<p>html是xxx</p>
</div>
1.5 UI元素狀態偽類選擇器
1.6 結構選擇器
1.7 否定選擇器
1.8 屬性選擇器
Input[value]{background:red;}
Input[value=”abc”]{background:green;} 匹配屬性值一樣的元素
Input[value^=”abc”]{background:#ff0;} 匹配起始位置
Input[value$=”abc”]{background:#00f;} 匹配結束位置
Input[value*=”abc”]{background:#00f;} 無論任何位置都可以匹配到
<input type=”text”>
<input type=”text” value=”abc”>
<input type=”text” value=”def”>
<input type=”text” value=”abc_123”>
<input type=”text” value=”def_abc”>
1.9偽元素選擇器
:after 指定元素之後
:before 指定元素之前
:first-letter 對第一個字元的操作
P : first-letter{color:#f00}
:first-line 對第一行的操作
P : first-line{color:#ff0}
p::selection 選中元素的一個操作(火狐不支援需要加字首-moz-)
p::selection{color:#f00}
2.新增屬性
2.1文字的陰影 text-shadow
Eg:text-shadow:5px 5px 5px #f66,.....;//多個用逗號隔開
Eg:(引數形式為:X座標 Y座標 陰影模糊度 顏色)
2.2文字溢位text-overflow
值:clip 無省略號 ellipsis省略號
配合width和overflow:hidden和white-space:nowrap一塊使用
2.3文字換行word-wrap(預設一行顯示)
在長單詞或URL地址內部進行換行
2.4 字型圖示
@font-face{//字型匯入
font-family: name;//
src:url(設定路徑);
}
P{
font-family: name;
font-size: 100px;
}
2.5 背景屬性設定
2.5.1背景尺寸
Background-size:數值(水平)數值(垂直);等比縮放(水平垂直);
Background-size: cover ; 等比縮放到背景完全覆蓋(背景圖顯示不完全);
例:配合/*background-position:center;*/使用;重要內容居中顯示
Background-size: contain ; 背景圖被包裹,可能會有區域留白;
2.5.2 背景圖片定位區域
Background-origin:border-box,padding-box,center-box;
(預設是以padding-box區域開始擺放)
2.5.3 背景最終顯示區域
Background-clip:border-box,padding-box,center-box;
(預設是以padding-box區域顯示)
2.5.4 多張背景圖設定
注意:多張背景圖是以逗號隔開
例:
background:url(路徑) no-repeat,
url(路徑) no-repeat,
url(路徑) no-repeat,
........;
2.6 邊框圓角 border-radius
例:
border-radius: 10px;
一個值表示上下左右
border-radius: 10px 20px;
第一個值表示左上角、右下角;第二個值表示右上角、左下角
border-radius: 10px 20px 30px;
第一個值表示左上角;第二個值表示右上角、左下角;第三個值表示右下角。
border-radius:10px 20px 30px 40px;
左上角 右上角 右下角 左下角
2.7 邊框圖片border-image
2.7.1 圖片匯入 border-image
border-image:url("url") A B C D/border-width;border-image中必須至少指定5個引數,
第一個引數作為邊框使用影象的路徑,
後4個引數表示影象進行分隔時的上邊距,右邊距,下邊距,左邊距
border-width:表示邊框的寬度
border-image: url(borderimage.png) 25 25 25 25/5px ;連寫
2.7.2 圖片路徑border-image-source:url();使用絕對或相對地址指定影象。
2.7.3 圖片剪裁border-image-slice:位置,其有1~4個引數.
2.7.4邊框圖片的平鋪 border-image-repeat:
repeat(重複)/round(平鋪)/stretch(拉伸);重複性border-image-outset:邊框擴充套件
2.7.5 向外延伸 border-image-outset:數值;
2.8 邊框陰影 box-shadow
水平 垂直 模糊 延伸 顏色 [inset盒子內部](預設為外部)
例:
Box-shadow:0px 0px 0px 0px red [inset];//紅字可以為負值
2.9 漸進增強和優雅降級
2.9.1 漸進增強
針對低版本瀏覽器進行構建頁面,保證最基本的功能
2.9.2 優雅降級
一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容
2.9.3 區別
*優雅降級是從複雜的現狀開始
*漸進增強則是從一個非常基礎的,最低版本開始,不斷擴充,以適應未來環境的需要。
例:
.transition { /*漸進增強寫法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.transition { /*優雅降級寫法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}