2015 12 09複習之CSS 3 基礎

2021-07-08 17:47:09 字數 2061 閱讀 7840

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有...