標籤:htmlcss

CSS即層疊樣式表(Cascading Stylesheet)。 在網頁製作時採用CSS技術,可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。 只要對相應的代碼做一些簡單的修改,就可以改變同一頁面的不同部分,或者頁數不同的網頁的外觀和格式。CSS3是CSS技術的升級版本,CSS3語言開發是朝著模塊化發展的。以前的規範作為一個模塊實在是太龐大而且比較複雜,所以,把它分解為一些小的模塊,更多新的模塊也被加入進來。這些模塊包括: 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。

1布局

-
CSS3-Gird布局格式

  CSS3-Gird布局格式

Grid布局圖中藍色的線不會出現在實際的網頁中。
Grid布局應用很廣泛,最簡單的例子就是內容的分欄顯示。
對於左邊這個布局複雜的三欄網頁來說,如果使用CSS3Grid布局的話,我們只需這樣寫:
body{columns:3;column-gap:0.5in;}
img{float:pagetopright;width:3gr;}
其中,body部分聲明頁面為3欄,欄間距為0.5英寸;img中float屬性指明圖片浮動位置為頁面的右上角,而寬度為3個欄寬。只需這樣兩行CSS,就可以實現這個複雜布局。
CSS3顏色模塊

  CSS3顏色模塊

2Flexbox

Flexbox(伸縮布局盒) 是 CSS3 中一個新的布局模式,為了現代網路中更為複雜的網頁需求而設計。
Flexbox 由 伸縮容器伸縮項目 組成。通過設置元素的 display 屬性為 flex 或 inline-flex 可以得到一個伸縮容器。設置為 flex 的容器被渲染為一個塊級元素,而設置為 inline-flex 的容器則渲染為一個行內元素。
Flexbox通常能讓我們更好的操作他的子元素布局,例如:
  1. 如果元素容器沒有足夠的空間,我們無需計算每個元素的寬度,就可以設置他們在同一行;
  2. 可以快速讓他們布局在一列;
  3. 可以方便讓他們對齊容器的左、右、中間等;
  4. 無需修改結構就可以改變他們的顯示順序;
  5. 如果元素容器設置百分比和視窗大小改變,不用擔心未指定元素的確切寬度而破壞布局,因為容器中的每個子元素都可以自動分配容器的寬度或高度的比例。
flexbox

  flexbox

3生成工具

CSS3 Maker
這款工具非常強大,可在線演示漸變、陰影、旋轉、動畫等非常多的效果,並生成對應效果的代碼,
CSS3 Generator
非常不錯的各種 CSS3 代碼生成器,支持圓角、漸變、旋轉和陰影等眾多特性,帶預覽效果。
CSS3 Please
帥且酷的一款 CSS3 工具,可即時在線修改代碼並預覽效果,還有詳細的瀏覽器兼容情況。

4特性

1、
CSS3圓角表格

  CSS3圓角表格

圓角表格,對應屬性:border-radius。
2、以往對網頁上的文字加特效只能用filter這個屬性,這次CSS3中專門制訂了一個加文字特效的屬性,而且不止加陰影這種效果。對應屬性:font-effect。
3、豐富了對鏈接下劃線的樣式,以往的下劃線都是直線,這次可不一樣了,有波浪線、點線、虛線等等,更可對下劃線的顏色和位置進行任意改變。(還有對應頂線和中橫線的樣式,效果與下劃線類似)對應屬性:text-underline-style,text-underline-color,text-underline-mode,text-underline-position。
4、在文字下點幾個點或打個圈以示重點,CSS3也開始加入了這項功能,這應該在某些特定網頁上很有用。對應屬性:font-emphasize-style和font-emphasize-position。
CSS3(圖4)

  CSS3(圖4)

背景
background-origin:決定了背景在盒模型中的初始位置,提供了3個值,border, padding和content
border:控制背景起始於左上角的邊框
padding:控制背景起始於左上角的留白
content:控制背景起始於左上角的內容
CSS3背景

  CSS3背景

background-clip:決定邊框是否覆蓋住背景(默認是不覆蓋),提供了兩個值,border和padding
border:會覆蓋住背景
padding:不會覆蓋背景
background-size:可以指定背景大小,以象素或百分比顯示。當指定為百分比時,大小會由所在區域的寬度、高度,以及background-origin的位置決定
multiple backgrounds:多重背景圖象,可以把不同背景圖象只放到一個塊元素里。
顏色
HSL colors:除了支持RGB顏色外,還支持HSL(色相、飽和度、亮度)。以前一般都是作圖的時候用HSL色譜,但這樣一來會包括更多的顏色。H用度表示,S和L用百分比表示,比如hsl(0,100%, 50%)
HSLA colors:加了個不透明度(Apacity),用0到1之間的數來表示,比如hsla(0,100%,50%,0.2)
opacity:直接控制不透明度,用0到1之間的數來表示
RGBA colors:和HSLA colors類似,加了個不透明度。一直以來,瀏覽器的透明一直無法實現單純的顏色透明,每次使用alpha后就會把透明的屬性繼承到子節點上。換句話說,很難實現背景顏色透明而文字不透明的效果。直到RGBA顏色的出現這一切將成為現實。
實現這樣的效果非常簡單,設置顏色的時候我們使用標準的rgba()單位即可,例如rgba(255,0,0,0.4)這樣就出現了一個紅色同時擁有alpha透明為0.4的顏色。
經過測試firefox3.0、safari3.2、opera10都支持了rgba單位。
用戶界面
resize:可以由用戶自己調整div的大小,有horizontal(水平)vertical(垂直)或者both(同時),或者同時調整。如果再加上max-width或min-width的話還可以防止破壞布局

選擇器

CSS3增加了更多的CSS選擇器,可以實現更簡單但是更強大的功能,比如:nth-child()等。
Attribute selectors:在屬性中可以加入通配符,包括^,$,*
[att^=val]:表示開始字元是val的att屬性
CSS3選擇器

  CSS3選擇器

[att$=val]:表示結束字元是val的att屬性
[att*=val]:表示包含至少有一個val的att屬性
其它模塊:
(Other modules)
media queries:感覺叫媒體選擇比較合適,可以為網頁中不同的對象設置不同的瀏覽設備。比如可以為某一塊分別設置屏幕瀏覽樣式和手機瀏覽樣式,以前則只能設置整個網頁。
multi-column layout:多列布局,讓文字以多列顯示,包括column-width、column-count、column-gap三個值
column-width:指定每列寬度
column-count:指定列數
column-gap:指定每列之間的間距
column-rule-color:控制列間的顏色
column-rule-style:控制列間的樣式
column-rule-width:控制列間的寬度
column-space-distribution:平均分配列間距

5影響

CSS3將完全向後兼容,所以沒有必要修改的設計來讓它們繼續運作。網路瀏覽器也還將繼續支持CSS2。CSS3主要的影響是將可以使用新的可用的選擇器和屬性,這些會允許實現新的設計效果(譬如動態和漸變),而且可以很簡單的設計出現在的設計效果(比如說使用分欄)。

6選擇符

選擇符類型
表達式
描述
子串匹配的屬性選擇符
E[att^="val"]
匹配具有att屬性、且值以val開頭的E元素
子串匹配的屬性選擇符
E[att$="val"]
匹配具有att屬性、且值以val結尾的E元素
子串匹配的屬性選擇符
E[att*="val"]
匹配具有att屬性、且值中含有val的E元素
結構性偽類
E:root
匹配文檔的根元素。在HTML中,根元素永遠是HTML
結構性偽類
E:nth-child(n)
匹配父元素中的第n個子元素E
結構性偽類
E:nth-last-child(n)
匹配父元素中的倒數第n個結構子元素E
結構性偽類
E:nth-of-type(n)
匹配同類型中的第n個同級兄弟元素E
結構性偽類
E:nth-last-of-type(n)
匹配同類型中的倒數第n個同級兄弟元素E
結構性偽類
E:last-child
匹配父元素中最後一個E元素
結構性偽類
E:first-of-type
匹配同級兄弟元素中的第一個E元素
結構性偽類
E:only-child
匹配屬於父元素中唯一子元素的E
結構性偽類
E:only-of-type
匹配屬於同類型中唯一兄弟元素的E
結構性偽類
E:empty
匹配沒有任何子元素(包括text節點)的元素E
目標偽類
E:target
匹配相關URL指向的E元素
UI元素狀態偽類
E:enabled
匹配所有用戶界面(form表單)中處於可用狀態的E元素
UI元素狀態偽類
E:disabled
匹配所有用戶界面(form表單)中處於不可用狀態的E元素
UI元素狀態偽類
E:checked
匹配所有用戶界面(form表單)中處於選中狀態的元素E
UI元素狀態偽類
E::selection
匹配E元素中被用戶選中或處於高亮狀態的部分
否定偽類
E:not(s)
匹配所有不匹配簡單選擇符s的元素E
通用兄弟元素選擇器
E ~ F
匹配E元素之後的F元素

73和2.1的區別

大家都知道我們習慣性稱作的 CSS3 對於 CSS2.1 有很多的修改和補充。拋開瀏覽器的兼容性問題,這裡把所有的變化整理到一份表格中便於學習和查閱。不能保證沒有遺漏,歡迎大家補充。
新增的  屬性新增的每個屬性新值新增的選擇器其它 新特性
  • animation (and eight associated longhand properties)
  • background-clip
  • background-origin
  • background-size
  • border-radius (and four associated longhand properties)
  • border-image (and six associated longhand properties)
  • box-decoration-break
  • box-shadow
  • box-sizing
  • columns (and thirteen associated multi-column properties)
  • clear-after
  • flex (and eleven associated flexbox properties)
  • font-stretch
  • font-size-adjust
  • font-synthesis
  • font-kerning
  • font-variant-caps
  • hanging-punctuation
  • hyphens
  • icon
  • image-resolution
  • image-orientation
  • line-break
  • object-fit
  • object-position
  • opacity
  • outline-offset
  • overflow-wrap / word-wrap
  • backface-visibility
  • perspective
  • perspective-origin
  • pointer-events (for HTML)
  • resize
  • tab-size
  • text-align-last
  • text-decoration-line
  • text-decoration-skip
  • text-decoration-position
  • text-decoration-style
  • text-emphasis (and three associated properties)
  • text-justify
  • text-orientation
  • text-overflow
  • transform
  • transform-style
  • text-shadow
  • transition (and four associated longhand properties)
  • word-break
  • word-spacing
  • writing-mode
  • Value 「local」 for the background-attachment property
  • Value "rgba()" for any property that accepts a color value
  • Value "hsl()" for any property that accepts a color value
  • Value "hsla()" for any property that accepts a color value
  • Value "currentColor" for any property that accepts a color value
  • Value "inset()" for the clip property
  • Value "linear-gradient()" for any property that accepts an image value
  • Value "radial-gradient()" for any property that accepts an image value
  • Value "repeating-linear-gradient()" for any property that accepts an image value
  • Value "repeating-radial-gradient()" for any property that accepts an image value
  • Value "image()" for any property that accepts an image value
  • Multiple comma-separated images for any property that accepts an image value
  • Multiple comma-separated background-related values to match multiple background image declarations
  • Value "center" for the position property
  • Value "page" for the position property
  • Value "space" for the background-repeat property
  • Value "round" for the background-repeat property
  • 15 new values for the cursor property
  • Values "flex" and "inline-flex" for the display property
  • Values "all-small-caps", "petite-caps", "all-petite-caps", "titling-caps", and "unicase" for the font-variant property
  • Multiple, space-separated values for the letter-spacing property
  • New values for the text-align property, including "<string>", "match-parent", "start", "end", and "start end"
  • text-decoration is now a shorthand property
  • Keywords "hanging" and "each-line" declared along with length or percentage values for the tfext-indent property
  • Value "full-width" for the text-transform property
  • rem units for lengths
  • calc() units for lengths
  • toggle() units
  • Angle units (deg, grad, rad, turn)
  • Time units (s, ms)
  • Substring matching attribute selectors ([att^=val], [att$=val], [att*=val])
  • :target pseudo-class
  • New pseudo-classes: :enabled, :disabled, :checked, and :indeterminate
  • :root pseudo-class
  • New expression-based structural pseudo-classes: :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type()
  • Other new structural pseudo-classes: :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty
  • The negation pseudo-class :not()
  • Four pseudo-elements with double-colon syntax (::first-line, ::first-letter,::before, ::after)
  • The following-sibling combinator (p ~ img)
  • ::selection pseudo-class (removed from the spec, but everyone uses it)
  • @font-face
  • Media Queries
  • Keyframe animations using @keyframes
  • Conditional styles using @supports
  • Namespacing using @namespace
  • Regions
  • Filters
註:仍在變化中的特性

  • Counter Styles Level 3
  • Device Adaptation
  • Display Module Level 3
  • Line Grid
  • Mobile Text Size Adjustment
  • CSS Variables
  • Box Alignment
  • The "all" property
  • Exclusions and Shapes
  • Generated Content for Paged Media
  • Grid Layout
  • Grid Template Layout
  • Line Layout Module
  • New features in Lists and Counters
  • Overflow Module
  • New features in Paged Media
  • New features in CSS Sizing
  • Media Queries Level 4
  • Selectors Level 4
  • ch units
  • Viewport relative lengths
  • New resolution units
  • Compositing and Blending
  • New features in CSS speech
  • The unicode-range descriptor for @font-face
  • New features in CSS Images and Replaced Content
  • CSS Masking

上一篇[CSS1]  

相關評論

同義詞:暫無同義詞