CSS3回顧系列0

**查詢包括一種**型別(以及通過使用寬高,顏色等**特徵來限制樣式表作用域的表示式).作為新增在css3中的特性,可以使得內容個性定製化呈現在不同特定輸出裝置上面,而不必改變內容本身.

一行**勝千言:


rel="stylesheet"
media="(max-width: 800px)"
href="example.css" />
@media (max-width: 600px) 
}style>

邏輯操作符

包含and,not,only.

@media tv and (min-width: 700px) and (orientation: landscape) //now theabove media query will only ifthe media type istv, the viewport is 700px orwider, and thedisplay isin landscape.

//comma-separated
lists,其實逗號前後就是或的關係
@media (min-width: 700px), handheld and (orientation: landscape)

@media not all and (monochrome) 
//monochrome黑白,and
this
expression
equivalents
to@media not (all and (monochrome))

@media not screen and (color), print and (color) 
//evaluated
like
this
@media (not (screen and (color))), print and (color)


rel="stylesheet"
media="only screen and (color)"
href="example.css" />

我突然發現平常接觸的**特徵特別有限:寬高,orientation,device-width,device-height,monochrome…其實還有許許多多**特徵比如color,color-index,aspect-ratio,device-aspect-ratio,display-mode…帶-moz- -webkit-字首的也有許多.

計數器的值可以通過使用counter-set來操控.counter-increment可以通過content屬性counter(),counters()方法的使用來顯示在頁面上.

一行**勝千言:

body h3::before


class="linear-gradient">
div>
.linear=gradient

語法上與linear-gradient相似,但是radial-gradient可以指定形狀和大小,預設是和容器寬高成比例的橢圓.

color stops

background: radial-gradient(red 5%, yellow 25%, lime 50%);

size

background: radial-gradient(ellipse closest-side, red, yellow 10
%, blue 50
%, white);
background: radial-gradient(ellipse farest-corner, black, green 20
%, orange 70
%, arial);

repeat-linear-gradient和repeat-radial-gradient可以彌補linear-gradient和radial-gradient條紋狀重複特性的缺失.

background: repeating
-linear
-gradient(-
45deg, red, red 5px, white 5px, white 10px);

通過變化座標系空間, css transforms 在不中斷正常文件流的情況下改變了受影響內容的形狀和位置. css transforms 通過使用一套css屬性集來對html元素並行地應用線性變換.這些變換包括平面和立體上的rotation, skewing, scaling, translation.

transform-origin

預設是元素的中心.rotation, scaling, skewing變換需要該引數.

transform

具體變換列表,乙個接著乙個進行變換.

示例rotate

%202016-02-16%20at
%2015.53.54.png">

skewing and translating

style="transform: skewx(10deg) translatex(150px); transform-origin: botoom left;"> src="" width="600" height="500"> iframe> div>css animate使得動畫可以從乙個樣式配置過渡到另乙個樣式配置.動畫有兩部分組成:描述css動畫的樣式,可以描述從0%到100%中間任何時刻樣式的關鍵幀. 好處有: 1. 方便使用簡單動畫,不依賴js. 2. 瀏覽器支援地好,效能好於未經優化的js動畫.渲染引擎使用跳幀技術使得動畫變得很和緩. 3. 動畫序列控制權交給瀏覽器使得瀏覽器有許多方式來優化效能和效率,比如說減少tabs當前執行但不可見動畫的重新整理頻率包括animation-delay,animation-direction,animation-duration,animation-iteration-count,animation-name,animation-play-state,animation-timing-function,animation-fill-mode.

示例:p

@keyframs slidein

75%

//100%

to}還可以給動畫新增事件監聽

animationevent 物件可以用來檢測動畫開始,結束,迴圈.

add event listeners

//與之前的動畫為例
var e = document.getelementbyid("watchme");
e.addeventlistener("animationstart", listener, false);
e.addeventlistener("animationend", listener, false);
e.addeventlistener("animationiteration", listener, false);
//start the animation
e.classname = "slidein";

receive the events

function listener(e) 
}

CSS3回顧系列0

python3 回顧筆記1

python3 回顧筆記1

CSS回顧系列0之雜談

CSS3回顧系列0

python3 回顧筆記1

python3 回顧筆記1

CSS回顧系列0之雜談

相關推薦