selector
派生選擇器(宜居元素位置及其上下文關係來定義樣式),
id選擇器(常常用於簡歷派生選擇器),
類選擇器,
多類選擇器(
.class.class)
eg:class="p1 p2" .p1.p2
屬性選擇器(對帶有指定屬性的html元素設定樣式),
屬性和值選擇器(input[type=button],a[href="#"],[title="bye"])
相鄰兄弟選擇器(li+li//除了第乙個子元素的所有兄弟)
background-position:lefttop;只寫乙個,另外乙個預設為center,即位置在左邊中間
background-attachment(是否固定或隨著頁面的其餘部分滾動)
如果屬性值設定為fixed,即不隨頁面而滾動
上圖引用自
有三個屬性值:
border-box(忽略border,即會覆蓋border的位置)
padding-box(忽略padding,即會覆蓋padding的位置,不會覆蓋border)
content-box(只顯示在content中,不會覆蓋border和padding)
注釋:如果背景影象的 background-attachment 屬性為 "fixed",則該屬性沒有效果。
瀏覽器支援 ie9+、firefox 4+、opera、chrome 以及 safari 5+ 支援 background-origin 屬性。
屬性值同background-origin
瀏覽器支援internet explorer 8 以及更早的版本不支援 background-clip 屬性。
ie9+、firefox、opera、chrome 以及 safari 支援 background-clip 屬性。
詳細見background-origin和background-clip的區別和聯絡
direction 文字方向(
ltr:預設文字方向從左到右。
rtl:
文字方向從右到左)
unicode-bidi 設定文字方向(和direction一起使用)
letter-spacing 字元間距(可正負,px em)
word-spacing 字間距(每個單詞之間的距離,可正負,px em; 對中文無效)
text-indent 首行縮排(2em)
text-transform 元素中的字母(大小寫)
white-space 元素中空白的處理方式(nowrap等)
text-shadow 向文字新增陰影(1px 1px 2px #f00;陰影距離左邊距離,距離上邊距離,陰影範圍大小,陰影顏色)
word-wrap 規定文字的換行規則(不會把單詞拆開)
border-collapse:collapse;(摺疊邊框)outline outline-style outline-color outline-width
2015 12 13複習之CSS3盒子樣式
box sizing content box,border box 預設值是content box content box 內容大小不把border,padding包含在內 通俗的講就是,首先設定好了寬高分別為100px,再設定border和padding分別為1px,此時,容器總大小為104px,...
複習css3的部分屬性
css3 1 圓角 border radius 100 border top left radius 5px 2 變形 3 動畫 animation使用方法 3.1 利用 keyframes定義動畫效果 keyframes animatename 必備,表示動畫開始時的效果 30 非必備,表示經過了...
CSS3之圓角製作
如今css3中的border radius出現後,讓我們沒有那麼多的煩惱了,首先製作圓角的時間是省了,而且其還有多個優點 其一減少 的維護的工作量,少了對的更新製作,的替換等等 其 二 提高 的效能,少了對進行http的請求,網頁的載入速度將變快 其三增加視覺美觀性。既然border radius有...