298      阿裏雲  技術社區[雲棲]

css知識梳理

寫完之前的一篇"一起領略css3動畫的強大"之後,我發現自己以為的懂得並不是真的懂得,所以現在來好好把css3來梳理一下

css屬性組

動畫屬性(Animation)

@keyframes - 規定動畫

通過@keyframes規則能夠創建動畫,創建動畫的原理是:將一套CSS樣式逐漸變化為另一套樣式;在動畫過程中能夠多次改變這套CSS樣式;以百分比來規定改變發生的時間,或通過關鍵詞"from"/"to",等價於0%和100%;為了獲得最佳的瀏覽器支持,應該始終定義0%和100%選擇器

注釋:請使用動畫屬性來控製動畫的外觀,同時將動畫與選擇器綁定

語法:

@keyframes animationname {keyframes-selector {css-styles;}}

舉例:在一個動畫中添加多個keyframe選擇器改變多個 CSS 樣式:

@keyframes mymove{
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove{ / Firefox /
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove{ / Safari and Chrome /
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}
@-o-keyframes mymove{ / Opera /
  0%   {top:0px; left:0px; background:red;}
  25%  {top:0px; left:100px; background:blue;}
  50%  {top:100px; left:100px; background:yellow;}
  75%  {top:100px; left:0px; background:green;}
  100% {top:0px; left:0px; background:red;}
}

animation - 除animation-play-state外所有動畫屬性的簡寫屬性

animation屬性是一個簡寫屬性,用於設置六個動畫屬性:

語法:

animation: name duration timing-function delay iteration-count direction;

animation-fill-mode介紹

背景屬性(Background)

在一個聲明中設置所有的背景屬性

background-color

background-color屬性為元素設置一種純色,這種顏色會填充元素的內容/內邊距/邊框區域,擴展到元素邊框的外邊界(但不包括外邊距),如果邊框有透明部分(如虛線邊框),會透過這些透明部分顯示出背景色

background-color可能的值

background-attachment

設置背景圖像是否固定或隨著頁麵的其餘部分滾動

background-attachment可能的值

background-image

為元素設置背景圖像;元素的背景占據了元素的全部尺寸,包括內邊距和邊框,但不包括外邊距,默認地,背景圖像位於元素的左上角,並在水平和垂直方向上重複

提示:請設置一種可用的背景顏色,這樣的話,假如背景圖像不可用,頁麵也可獲得良好的視覺效果

background-image可能的值

background-position

設置背景圖像的起始位置;這個屬性設置背景原圖像(由background-image定義)的位置;背景圖像如果要重複,將從這一點開始

提示:需要把background-attachment屬性設置為"fixed",才能保證該屬性在Firefox和Opera中正常工作

background-position可能的值

background-repeat

設置是否及如何重複背景圖像;默認地,背景圖像在水平和垂直方向上重複

提示:背景圖像的位置是根據background-position屬性設置的;如果未規定background-position屬性,圖像會被放置在元素的左上角

background-repeat可能的值

background-clip

規定背景的繪製區域

語法

background-clip: border-box|padding-box|content-box;

background-clip可能的值

background-origin

規定background-position屬性相對於什麼位置來定位;如果背景圖像的background-attachment屬性為"fixed",則該屬性沒有效果

語法

background-origin: padding-box|border-box|content-box;

background-origin可能的值

background-size

規定背景圖片的尺寸

語法

background-size: length|percentage|cover|contain;

background-size可能的值

邊框屬性(Border和Outline)

border

在一個聲明中設置所有的邊框屬性;可以按順序設置如下屬性:border-width/border-style/border-color;如果不設置其中的某個值也不會出問題,比如 border:solid #ff0000;也是允許的

border-width

為元素的邊框設置寬度;隻有當邊框樣式不是none時才起作用;如果邊框樣式是none,邊框寬度實際上會重置為0,不允許指定負長度值

border-width可能的值

border-style

用於設置元素邊框的樣式,隻有當這個值不是none時邊框才可能出現

border-style可能的值

最不可預測的邊框樣式是double,它定義為兩條線的寬度再加上這兩條線之間的空間等於border-width值;不過CSS規範並沒有說其中一條線是否比另一條粗或者兩條線是否應該是一樣的粗,也沒有指出線之間的空間是否應當比線粗,所有這些都有用戶代理決定,創作人員對這個決定沒有任何影響

border-color

設置四條邊框的顏色,此屬性可設置1到4種顏色;border-color屬性是一個簡寫屬性,可設置一個元素的所有邊框中可見部分的顏色,或者為4個邊分別設置不同的顏色

border-color可能的值

border-top/border-right/border-bottom/border-left

單獨設置上邊框/右邊框/下邊框/左邊框的樣式

可能的值

border-radius

border-radius屬性是一個簡寫屬性,用於設置四個border-*-radius屬性

語法

border-radius: 1-4 length|% / 1-4 length|%;

注釋：按此順序設置每個radii的四個值；如果省略bottom-left,則與top-right相同;如果省略bottom-right,則與top-left相同;如果省略top-right,則與top-left相同

可能的值

border-top-left-radius:定義邊框左上角的形狀;border-top-right-radius:定義邊框右上角的形狀;border-bottom-left-radius：定義邊框左下角的形狀；border-bottom-right-radius：定義邊框右下角的形狀

border-image

設置所有 border-image-* 屬性

box-shadow

box-shadow向框添加一個或多個陰影,該屬性是由逗號分隔的陰影列表,每個陰影由2-4個長度值/可選的顏色值/可選的inset關鍵詞來規定,省略長度的值是0

語法

box-shadow: h-shadow v-shadow blur spread color inset;

box屬性

overflow-x / overflow-y

規定如果溢出元素內容區域的話,是否對內容的左/右或上/下邊緣進行裁剪

語法

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

overflow-style

規定溢出元素的首選滾動方法 - 目前瀏覽器都不支持

語法

overflow-style: auto|scrollbar|panner|move|marquee;

rotation

rotation屬性圍繞由rotation-point屬性定義的指定點,對塊級元素進行逆時針旋轉 - 目前瀏覽器都不支持

語法

rotation: angle;

outline

outline(輪廓)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用;可以按順序設置如下屬性:outline-color/outline-style/outline-width

注釋:輪廓線不會占據空間,也不一定是矩形;outline簡寫屬性在一個聲明中設置所有的輪廓屬性

outline-color

outline-color屬性設置一個元素整個輪廓中可見部分的顏色;要記住,輪廓的樣式不能是none,否則輪廓不會出現;請始終在outline-color屬性之前聲明outline-style屬性,元素隻有獲得輪廓以後才能改變其輪廓的顏色

outline-color可能的值

outline-style

outline-style屬性用於設置元素的整個輪廓的樣式,樣式不能是none,否則輪廓不會出現

outline-style可能的值

outline-width

outline-width屬性設置元素整個輪廓的寬度,隻有當輪廓樣式不是none時,這個寬度才會起作用;如果樣式為none,寬度實際上會重置為0,不允許設置負長度值

outline-width可能的值

color屬性

Content for Paged Media 屬性

CSS 尺寸屬性(Dimension)

width/height

這個屬性定義元素內容區的寬度/高度,在內容區外麵可以增加內邊距/邊框/外邊距,行內非替換元素會忽略這個屬性

可能的值

max-width / max-height / min-width / min-height

該屬性值會對元素的寬度/高度設置一個最高/最低限製;因此,元素隻能處於最大值和最小值之間.不允許指定負值

注釋：max-width/max-height/min-width/min-height屬性不包括外邊距/邊框/內邊距。

可伸縮框屬性(Flexible Box)

box-align / box-pack

語法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

box-align屬性規定如何對齊框的子元素,實現垂直方向的位置

box-pack屬性規定當框大於子元素的尺寸,在何處放置子元素;該屬性規定水平框中的水平位置

語法

box-align: start|end|center|baseline|stretch;

語法

box-pack: start|end|center|justify;

box-direction

規定框元素的子元素以什麼方向來排列

語法

box-direction: normal|reverse|inherit;

box-flex

規定框的子元素的尺寸是否可伸縮

提示:可伸縮元素能夠隨著框的縮小或擴大而縮寫或放大,隻要框中有多餘的空間,可伸縮元素就會擴展來填充這些空間

語法

box-flex: value;

value:元素的可伸縮行;柔性是相對的,例如box-flex為2的子元素兩倍於box-flex為1的子元素

box-flex-group

box-flex-group屬性用於向柔性分組分配可伸縮元素

提示:可伸縮元素能夠隨著框的縮小和擴大而伸縮。

語法

box-flex-group: integer;

integer:一個整數;(第一個柔性分組是1,後麵的柔性分組是更大的值)

box-lines

規定如果列超出了父框中的空間,是否要換行顯示

提示:默認地,水平框會在單獨的行中排列其子元素,而垂直框會在單獨的列中排列其子元素

語法

box-lines: single|multiple;

box-ordinal-group

規定框中子元素的顯示次序,值更低的元素會顯示在值更高的元素前麵顯示

注釋:分組值相同的元素,它們的顯示次序取決於其源次序

目前沒有瀏覽器支持box-ordinal-group屬性;Firefox支持替代的-moz-box-ordinal-group屬性,Safari和Chrome支持替代的-webkit-box-ordinal-group屬性

語法

box-ordinal-group: integer;

integer:一個整數,指示子元素的顯示次序

box-orient

box-orient屬性規定框的子元素應該被水平或垂直排列

提示:水平框中的子元素從左向右進行顯示,而垂直框的子元素從上向下進行顯示;不過,box-direction/box-ordinal-group能夠改變這種順序

語法

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

字體屬性(Font)

font簡寫屬性用於在一個聲明中一次設置元素字體的兩個或更多方麵字體屬性;此屬性也有第六個值:"line-height",可設置行間距;使用icon等關鍵字可以適當地設置元素的字體,使之與用戶計算機環境中的某個方麵一致;注意:如果沒有使用這些關鍵詞,至少要指定字體大小和字體係列

可以按順序設置如下屬性:font-style / font-variant / font-weight / font-size/line-height / font-family;可以不設置其中的某個值,比如:font:100% verdana; 也是允許的。未設置的屬性會使用其默認值

可能的值

內容生成(Generated Content)

content

與:before/:after偽元素配合使用來插入生成內容,該屬性用於定義元素之前/之後放置的生成內容,默認往往是行內內容,不過該內容創建的框類型可以用屬性display控製

<style>
a:after{
  content: " (" attr(href) ")"
}
</style>
<p><a href="https://www.w3school.com.cn">W3School</a> contains free tutorials and references.</p>

counter-increment

counter-increment屬性設置某個選取器每次出現的計數器增量,默認增量是1;利用這個屬性,計數器可以遞增/遞減某個值,這可以是正值或負值;如果沒有提供number值,則默認為1

可能的值

counter-reset

counter-reset屬性設置某個選擇器出現次數的計數器的值,默認為0;利用這個屬性,計數器可以設置或重置為任何值,可以是正值/負值;如果沒有提供number,則默認為0

可能的值

<style type="text/css">
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before{
  counter-increment:section;
  content:"Section " counter(section) ". ";
}
h2:before{
  counter-increment:subsection;
  content:counter(section) "." counter(subsection) " ";
}
</style>
<h1>HTML tutorials</h1> //Section 1.
<h2>HTML Tutorial</h2> //1.1
<h2>XHTML Tutorial</h2> //1.2
<h2>CSS Tutorial</h2> //1.3
<h1>Scripting tutorials</h1> //Section 2.
<h2>JavaScript</h2> //2.1
<h2>VBScript</h2> //2.2
<h1>XML tutorials</h1> //Section 3.
<h2>XML</h2> //3.1
<h2>XSL</h2> //3.2

quotes

quotes屬性設置嵌套引用(embedded quotation)的引號類型

可能的值

<style type="text/css">
q:lang(en){
  quotes: '"' '"' "'" "'"
}
</style>
<p><q>This is a <q>big</q> quote.</q></p>

引號字符

crop

允許被替換元素僅僅是對象的矩形區域,而不是整個對象

move-to

從流中刪除元素,然後在文檔中後麵的點上重新插入

page-policy

確定元素基於頁麵的occurrence應用於計數器還是字符串值

Grid屬性 - 目前沒有瀏覽器支持

使用網格係統對於打印設計師來說具有巨大的價值,現在相同的改變被應用到在線內容上;網格屬性提供了在可伸縮網格中調整標題,文本和圖片尺寸和位置的能力

語法

grid-columns/grid-rows: length|%|none|inherit;

grid-columns/grid-rows: length|%|none|inherit;

Hyperlink屬性 - 目前沒有瀏覽器支持

列表屬性(List)

list-style

該屬性是一個簡寫屬性,涵蓋了所有其他列表樣式屬性;由於它應用到所有display為list-item的元素,所以在普通的HTML和XHTML中隻能用於li元素,不過實際上它可以應用到任何元素,並由list-item元素繼承;可以按順序設置如下屬性:list-style-type/list-style-position/list-style-image;可以不設置其中的某個值,比如:"list-style:circle inside;" 也是允許的。未設置的屬性會使用其默認值

list-style-type

設置列表項標記的類型

可能的值

<style type="text/css">
ul.none {list-style-type: none}
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
</style>
<ul >
  <li>"none" 類型</li><li>茶</li><li>可口可樂</li>
</ul>

list-style-position

list-style-position屬性用於聲明列表標誌相對於列表項內容的位置;外部(outside)標誌會放在離列表項邊框邊界一定距離處,不過這距離在CSS中未定義;內部(inside)標誌處理為好像它們是插入在列表項內容最前麵的行內元素一樣

可能的值

list-style-image

list-style-image屬性使用圖像來替換列表項的標記;這個屬性指定作為一個有序或無序列表項標誌的圖像,圖像相對於列表項內容的放置位置通常使用list-style-position屬性控製

注釋:請始終規定一個"list-style-type"屬性以防圖像不可用

可能的值

<style type="text/css">
ul{
  list-style-image: url('/i/eg_arrow.gif')
}
</style>
<ul>
  <li>咖啡</li><li>茶</li><li>可口可樂</li>
</ul>

marker-offset

設置或檢索標記容器和主容器之間水平補白,即兩個容器靠近的一邊的間距

語法

marker-offset : auto | length

auto:默認值,瀏覽器自動設置間距;length:由浮點數字和單位標識符組成的長度值,可為負值

舉例:

li:before { display: marker; marker-offset: 5px; }

外邊距屬性(Margin) / 內邊距屬性(Padding)

Marquee屬性

多列屬性(Multi-column)

columns

columns屬性是一個簡寫屬性,用於設置列寬和列數

columns: column-width column-count; //列寬 列數

舉例

<style> 
.newspaper{
  columns:100px 3;
  -webkit-columns:100px 3; / Safari and Chrome /
  -moz-columns:100px 3; / Firefox /
}
</style>
<div >
人民網北京2月24日電 (記者 劉陽)國家發展改革委近日發出通知，決定自2月25日零時起將汽、柴油價格每噸分別提高300元和290元，折算到90號汽油和0號柴油（全國平均）每升零售價格分別提高0.22元和0.25元。
</div>

column-width

column-width 屬性規定列的寬度

column-width: auto|length;

auto:由瀏覽器決定列寬;length:規定列的寬度

column-count

語法

column-count: number|auto;

number:元素內容將被劃分的最佳列數;auto:由其他屬性決定列數

column-gap

語法

column-gap: length|normal;

column-gap屬性規定列之間的間隔;length:把列間的間隔設置為指定的長度;normal:規定列間間隔為一個常規的間隔,W3C建議的值是1em

注釋:如果列之間設置了column-rule,它會在間隔中間顯示

column-rule

column-rule屬性是一個簡寫屬性,用於設置所有column-rule-*屬性;column-rule屬性設置列與列之間的寬度/樣式/顏色規則

語法

column-rule: column-rule-width column-rule-style column-rule-color;

<style> 
.newspaper{
  -moz-column-count:3; / Firefox /
  -webkit-column-count:3; / Safari and Chrome /
  column-count:3;
  -moz-column-gap:40px; / Firefox /
  -webkit-column-gap:40px; / Safari and Chrome /
  column-gap:40px;
  -moz-column-rule:4px outset #ff0000; / Firefox /
  -webkit-column-rule:4px outset #ff0000; / Safari and Chrome /
  column-rule:4px outset #ff0000;
}
</style>
<div >
人民網北京2月24日電 (記者 劉陽)國家發展改革委近日發出通知,決定自2月25日零時起將汽、柴油價格每噸分別提高300元和290元，折算到90號汽油和0號柴油（全國平均）每升零售價格分別提高0.22元和0.25元。
</div>

column-fill

column-fill屬性規定如何填充列(是否進行協調) - 目前主流瀏覽器都不支持column-fill屬性

column-fill: balance|auto;

balance:對列進行協調,瀏覽器應對列長度的差異進行最小化處理;auto:按順序對列進行填充,列長度會各有不同

column-span

column-span屬性規定元素應橫跨多少列

column-span: 1|all;

1:元素應橫跨一列;all:元素應橫跨所有列

<style> 
.newspaper{
  -moz-column-count:3; / Firefox /
  -webkit-column-count:3; / Safari and Chrome /
  column-count:3;
}
h2{
  -webkit-column-span:all; / Chrome /
  column-span:all;
}
</style>
<div >
<h2>成品油價格25日淩晨上調 汽柴油漲300、290元/噸</h2>
人民網北京2月24日電 (記者 劉陽)國家發展改革委近日發出通知，決定自2月25日零時起將汽、柴油價格每噸分別提高300元和290元，折算到90號汽油和0號柴油（全國平均）每升零售價格分別提高0.22元和0.25元。
</div>

Paged Media屬性

定位屬性(Positioning)

top/bottom/left/right

規定元素的上部/底部/左邊/右邊邊緣,該屬性定義了定位元素上/下/左/右外邊距邊界與其包含塊上/下/左/右邊界之間的偏移

注釋:如果"position"屬性的值為"static",那麼設置"top/bottom/left/right" 屬性不會產生任何效果

對於static元素為auto;對於長度值則為相應的絕對長度,對於百分比數值為指定值,否則為auto;對於相對定義元素,如果bottom和top都是auto,其計算值則都是0;如果其中之一為 auto,則取另一個值的相反數;如果二者都不是auto,bottom將取top值的相反數;left和right同理

可能的值

float

float屬性定義元素在哪個方向浮動;在CSS中任何元素都可以浮動,浮動元素會生成一個塊級框,而不論它本身是何種元素;如果浮動非替換元素,則要指定一個明確的寬度,否則它們會盡可能地窄

注釋:假如在一行之上隻有極少的空間可供浮動元素,那麼這個元素會跳至下一行,這個過程會持續到某一行擁有足夠的空間為止

可能的值

clear

clear屬性規定元素的哪一側不允許其他浮動元素

可能的值

display

display屬性用於定義建立布局時元素生成的顯示框類型,對於HTML等文檔類型,如果使用display不謹慎可能違反HTML中已經定義的顯示層次結構

可能的值

visibility

visibility屬性規定元素是否可見;即使不可見的元素也會占據頁麵上的空間,請使用"display"屬性來創建不占據頁麵空間的不可見元素

可能的值