CSS1-3基礎知識

CSS1-3基礎知識

1、css排版

css在html內排版：

<style type=’text/css’>

標記名{}

.類型名{}

#ID名{}

標記名,.類型名,#ID名{}

</style>

css在css文件中排版：

標記名{}

.類型名{}

#ID名{}

標記名,.類型名,#ID名{}

2、優先級：標記定義就是html自帶的屬性設置

行內>ID>class>標記定義

3、調用css文件

鏈接法：<link rel=’stylesheet’ type=’text/css’ href=’URL’>

引入法：<style type=’text/css’>

@import ‘s.css’

</style>

4、文字屬性

font-style : italic(斜體)/normal

font-variant : small-caps(小寫轉大寫)/normal

font-weight : bold(加粗)/normal

font-size : 像素/%/em/rem

font-family : 字體1,字體2 (字體1不存在，則顯示字體2)

簡化寫法：

font:italic bold 200 隸書; //順序不可變

服務器文字

@font-face{

font-family:自定名; //自命名，便於引用

src:url(‘../黑體.ttf’); //引用の地址

}

text-shadow : 水平偏移 垂直偏移 [模糊度] [陰影半徑] [陰影顏色] [陰影位置]

例子：text-shadow : 2px 2px 2px #aaa;

text-overflow : ellipsis(文本被裁時加…)、clip(不加…,默認)

5、文本屬性

color : 十六進制/英文名/rgb()

letter-spacing : normal/數字 //單詞間距

white-space : normal(自動換行)/pre(不壓縮,同<pre>)/nowrap(強制同行)

pre-line(壓縮空白,排滿或換行符換行)/pre-wrap(保留空白,排滿或換行符換行)

word-wrap : break-word; //過長單詞斷開，normal不斷

text-align : left/right/center //文本對齊方式

text-indent : 數值/% //首行縮進

line-height : 像素/% //行高

text-decoration : none/underline/overline(頂線)/line-through(刪除線)

text-transform : none/capitalize(首字母大寫)/uppercase(全大寫)/lowercase(全小寫)

vertical-align : sub(下標)/super(上標)/top/bottom/middle //垂直對齊方式

6、背景使用

background-attachment : scroll(背景隨滾動條滾動)、fixed(背景不隨滾動條滾動)

background-color : 十六進制/英文名/RGB、transparent<透明，默認>

background-image : url(../*.jpg)、none(不設背景圖)

background-position : [top/bottom/center] [left/right/center]或者用%

background-repeat : repeat(默認，填滿)、repeat-x(水平填滿)、repeat-y(垂直填滿)、no-repeat(只顯示一次)

簡化方案：

background : 顏色 圖片 repeat attachment position

background-size : auto、cover(等比縮放,圖寬高小者,取其小)、contain(等比縮放,圖寬高大者,取其大)

background-origin : border-box(含padding)、padding-box(默認,不含padding)、content-box(文字有背景)

background-clip : border-box(盒內裁剪)、padding-box(切掉與padding重合的)、content-box(文字外裁剪)

簡寫方案：

background：color image repeat attachment position size origin clip

7、列表使用

list-style-type : none/disc(●)/circle(○)/square(□)/decimal(1,2,3…)/

lower-roman(i,ii,iii…)/upper-roman(I,II,III…)/lower-alpha(a,b,c…)/upper-alpha(A,B,C…)

list-style-position : inside(項目右移)、outside(默認，正常顯示)

list-style-image : url(‘xx.gif’)、none

簡化方案：

list-style : circle inside url(‘a.gif’)

8、邊框使用

border-color : 十六進制/RGB/英文

border-width : 邊框寬度

border-style : none、dettod(點線)、dashed(虛線)、insert(凹邊)、outset(凸邊)、groove(凹槽)、ridge(凸槽)、slid(實現)、double(雙實線)

簡化方案：(順序可換)

border : 2px dettod black

width/color設置：一色四周，二色上下+左右，三色上+左右+下，四色上右下左

border-radius : 2px 3px 4px 5px;

border-top-left-radius、 border-top-right-radius

border-bottom-left-radius、 border-bottom-right-radius

outline : 顏色 樣式 寬度; //再加一層外框，樣式同border

9、邊界使用

內邊界 : padding

外邊界 : border

10、區塊居中

margin : 0 auto;

11、浮動使用

float : none/left/right //允許浮動

clear : none/left/right/both //不允許浮動

12、定位使用

position : relative(相對)、absolute(絕對)、fixed(固定，相對於窗體)、static(默認，無設置)

left/right/top/bottom : 設置距離相對點距離

z-index : auto、數字 //設置顯示層級，層級越大越靠前

13、溢出使用

overflow : visible(默認，不切不滾動)、auto(需要時滾動或剪切)、hidden(超過的切掉)、scroll(總有滾動條)

overflow-x、overflow-y：同上

14、滾動條使用

scrollbar-3dlight-color : 亮邊框顏色

scrollbar-highlight-color : 3D界面亮邊

scrollbar-face-color : 3D表面顏色

scrollbar-arrow-color : 箭頭顏色

scrollbar-shadow-color : 3D暗邊

scrollbar-darkshadow-color : 暗邊框

scrollbar-base-color : 基準色

scrollbar-track -color : 拖動區域的顏色

15、超鏈接の屬性

a:link(未被選擇)、a:visited(已被選)、a:avtive(已選未被放開)、a:hover(停留在鏈接上)

16、光標屬性

cursor : auto(自動)、crosshair(十字)、hand(手)、wait(漏斗)、pointer(手)、url(‘xx.ani’)<自定義光標>

17、其他

DHTMLの引用：behavior : url(‘**.htc‘)

縮放：zoom:normal、%/浮點數 //Firefox不支持外都支持

垂直對齊(默認)：vertical-align : middle; //baseline基於基準線,top頂對齊,bottom底對齊,sub下標,sup上標

捆綁組件：<label for=’’></label>

透明度：opacity : 0.3;

自動提醒：autocomplete = ‘off‘

圖片默認為inline-block類型

18、濾鏡の使用（IE專屬）

①filter : alpha(opacity=10,style=2); //亮度10（1-100），模式2（1/2/3）

②filter : blur([ture/false] [0-360] 數值) //是否印象派，角度，模糊度(px)

③filter : fliph() flipv() //水平翻轉 再垂直翻轉

④filter : dropshadow(color,offx,offy,position) //投影

⑤filter : glow(color,strength) //亮度

⑥filter : gray invert xray fliph flipv //黑白、髮色、X射線、翻轉——fliph與flipv可以加括號，亦可不加

⑦filter : shadow(color,direction) //direction角度

19、優先級：c3>b2>a1

<div class=’a1 b2 c3’></div>

通用*{}

20、子代：#nav>li

相鄰：h1+p

後代：ul li

後兄弟：ul ~p{}

21、display : inline-block(內聯塊)、block(區塊)、none(不顯示)

22、表格設置

border-collapse : collapse(無內框)、separate(默認，有框)

visibility:hidden;   //隱藏,占空間，visible(可見,默認)，collapse(表格隱藏,不佔空間)

caption-side : bottom; //標題在下方，top在上方為默認

empty-cells : hide; //不顯示邊框，show顯示為默認

table-layout : fixed; //內容不拉伸,長換行 auto拉伸

23、CSS中設置UTF-8：@charset ‘utf-8’

強制最高優先級：color:red!important;

強制繼承父屬性：border:inherit;

24、[href]{} //含href屬性的所有元素

[type=’p’]{} //含type=p屬性的所有元素

[href^=’http’]{} //href開頭為httpの所有元素

[href$=’.com’]{} //href結尾為.comの所有元素

[href*=’baidu’]{} //href中包好baiduの所有元素

[class~=’d’]{} //class中包含dの所有元素

[lang|’en’]{} //屬性lang中有一個分割符時

例如：<i lang=’en-us’></li>

25、偽元素：

區塊首行 ::first-line{}

區塊首字母 ::first-letter{}

前加文本 a::before{content:’黑’;}

後加文本 a::after{content:’冰’;}

26、元素選擇

:root{} //根目錄

li:first-child{} //首元素

li:last-child{} //尾元素

li:only-child{} //僅有一個元素の元素

p:only-of-type //類型唯一の元素

li:nth-child(2){} //第2個子元素

li:nth-last-child(2){} //倒數第2個元素

li:nth-of-type(2){} //所有子元素中的第2個

li:nth-last-of-type(2){} //所有子元素中li元素的倒數第2個

27、偽類選擇器

:enabled{} //可用

:disabled{} //不可用

:checked{} //被選定

:default{} //默認

:valid{} //合法

:invalid{} //不合法

:required{} //必填屬性

:optional{} //不是必填

28、動態偽類

a:not([href*=’baidu’]) //非選百度

:empty{} //沒有任何元素の內容

:lang(en){} //語言為英語の

::selection{} //選定文字時發生

:target{} //所有活動的錨

29、區塊新增屬性

min-height、min-width、max-height、max-width

30、box-shadow : 水平偏移 垂直偏移 模糊度 [陰影半徑] 陰影顏色 [陰影位置]

例子：box-shadow : 2px 2px 3px 2px gray insert/outsert

31、廠商前綴

Opera : -o- FireFox : -moz-

Chrome/Safari : -webkit- IE : -ms-

例子：-o-border-radius:50px;

32、網頁默認字體大小是16px

em是相對於父節點大小の比例大小

rem是與根目錄(html)の大小相對比例

33、實驗屬性

-webkit-text-stroke : 1px red; //描邊，只有webkit支持

-webkit-text-stroke-color: orange; //

-webkit-text-stroke-width: 2px; //

-webkit-text-fill-color: red; //文本填充顏色，transparent只有webkit支持

-webkit-linear-gradient(top,#eee,#aaa 50%,#333 51%,#000); //

-webkit-background-clip:text; //

34、線性漸變（IE10以上支持，其他支持）

background-image: linear-gradient(方位,起始色,末尾色); //漸變

background-image: repeating-linear-gradient(方位,起始色,末尾色); //重複漸變

方位：45deg、to top、to top left、to top right、to bottom、to bottom left、to bottom right

顏色：green、green 40%、rgba(0,0,0,0.6)、rgb(1,3,55)

35、徑向漸變

background-image: radial-gradient(方位, 起始色, 末尾色) //方位=形狀+位置+半徑

形狀：circle(橢圓)、ellipse(橢圓形)

位置：at top从顶部发散,at  left从左侧发散,at right从右侧发散,at bottom从底部发散,

at center从中间发散

半徑：數字；closest-side：半径从圆心到离圆心最近的边，closest-corner：半径从圆心到离圆心最近的角，farthest-side：半径从圆心到离圆心最远的边，farthest-corner：半径从圆心到离圆心最远的角。

background-image: radial-gradient(circle, orange, green); //

background-image: repeating-radial-gradient(方位, 起始色, 末尾色) //方位=形狀+位置+半徑

36、border-image-source : url(‘c.png’) //引入背景圖片地址

border-image-slice : 27 10 fill //切割引入背景圖片，上下27,左右為10,中間填充。27*27可簡寫27

border-image-width : 20px //邊框圖片的寬度

border-image-repeat: stretch //排列方式：stretch拉伸，repeat平鋪,邊界截斷；round平鋪,依尺寸調整大小；space平鋪,調整間隙來鋪滿

border-image-outset : 20px //向外擴張

簡寫方式：

border-image：source [slice] [width] [outset] [repeat]

37、變形效果（IE10+支持，其他皆支持）

transform : none; //無變換(默認)

translate(20px,20px) //XY軸上平移

translateX(20px) //X軸上平移

translateY(30px) //Y軸上平移

scale(1.5) //放大1.5倍

scale(0.3,1.2) //XY軸分別縮放

scaleX(0.5) //X軸縮放

scaleY(0.9) //Y軸縮放

rotate(-45deg) //旋轉-45°

skew(45deg,29deg) //水平傾斜45°，垂直傾斜29°

skewX(45deg) //水平傾斜45°

skewY(23deg) //垂直傾斜23°

matrix(1,3,4,1,30,29) //自定義

translate3d(x,y,z) //3D方式平移

translateZ(z) //Z軸上平移

scale3d(x,y,z) //3D縮放，xyz為0-1之間的 數字

scaleZ(z) //Z軸縮放

rotate3d(x,y,z,a) //3D旋轉.a:1(旋轉)、0(不旋轉)

rotateX(a) //X軸旋轉の角度,如45deg

rotateY(a) //Y軸旋轉の角度

rotateZ(a) //Z軸旋轉の角度

perspective(value) //值越大，顯示越大

matrix3d() //自定義3D圖

使用空格連綴

38、transform-origin : X軸位置 Y軸位置 //變換の基準點

X軸：left、center、right、像素、百分比

Y軸：top、center、bottom、像素、百分比

transform-style:flat //2D平面；preserve-3d：3D平面

perspective : value //值越大，顯示越大

39、過度動畫（IE10+支持，其他皆支持）

transition-property : color,font //設置過度樣式 none不過度，all全過度

transition-duration : .5s //設置過度時間

transition-timing-function : ease //過渡效果(由快漸慢)，linear(恆速)，ease-in(漸快)，ease-out(漸慢)，ease-in-out(先加速再減速)，steps(10,end)<跳躍十次到結尾>，cubic-bezier(0.2,0.7,0.5,0.9)<自定義緩動>

transition-delay : 1s,2s,0s //設置三個緩動各自的延時（在緩動中寫三個）

transition:color 1s ease 0s,font 2s ease 3s; //分別寫效果

或transition : all 1s ease 0s; //0s是延時

transition-property : background-color / background-image / background-position / border-bottom-color / border-bottom-width / border-color / border-left-color / border-left-width / border-right-color / border-right-width / border-spacing / border-top-color / border-top-width / border-width / bottom / color / font-size / font-weight/ height /  left / letter-spacing / line-height / margin-bottom / margin-left / margin-right / margin-top / max-height / max-width /  min-height / min-width / opacity / outline-color / outline-offset / outline-width / padding-bottom / padding-left / padding-right / padding-top / right / text-indent / text-shadow / vertical-align / visibility / width / word-spacing / z-index / grid-* / crop  / zoom

40、自定義動畫 （IE10+支持，其他皆支持）

@keyframes myani {

0%, 100% {效果}

50% {效果}

}

或者

@keyframes myani {

from{效果}

to {效果}

}

引用

div{

animation-name: myani; //引用動畫の名字

animation-duration: 1s; //播放時間

animation-timing-function: ease; //函數（速度の效果）

animation-delay: 1s; //延遲時間

animation-iteration-count: infinite; //播放次數(無限循環) value固定次數

animation-direction: alternate; //前後交替，normal向前,默認

animation-play-state: paused; //播放狀態，

animation-fill-mode: forwards; //結束后不返回.backforwards結束後返回，none默認，both依情況

}

簡寫：

animation : 名稱 時間  速度效果 次數 方向 狀態 結束後狀態

animation: myani 1s ease 2 alternate 1s both;

兼容寫法：

-webkit-animation: myani 1s ease 2 alternate 0s both;

-moz-animation: myani 1s ease 2 alternate 0s both;

-ms-animation: myani 1s ease 2 alternate 0s both;

transition: all 1s ease 0s;

41、box-sizing : border-box; //border和padding不用于總長寬。content-box，b和p用於總長寬

42、column：IE10/Opera 支持。Firefox : -moz-column 属性。Safari 和 Chrome : -webkit-column 属性。

columns 集成 column-width 和 column-count 两个属性

column-width : 10px; //每列列寬

column-count : 20; //列數

column-gap : 10px; //列間距

column-rule : 2ps dashed gray; //列邊線

column-span : 3 //元素横跨3列，firefox 不支持

column-fill //控制每列的列高效果，主流浏览器不支持

43、彈性窗體

display : flex;

同混合型（IE10專用）のdisplay : -ms-flexbox;

flex-direction : column; //上到下排列。row左到右row-reverse 右到左column-reverse 下到上

同混合型（IE10專用）の-ms-flex-direction

flex-wrap : wrap; //不可容時自動換行。nowrap 在一行(不換行)，wrap-reverse : 不可容時換行，但方向相反 同混合型（IE10專用）の-ms-flex-wrap

flex-flow : column wrap; //上二者合用

同混合型（IE10專用）の-ms-flex-flow

flex : 1; //佔比，1/(1+其他の佔比)

同混合型（IE10專用）の-ms-flex

order : 1; //順序、位置，須每個都設置，否則會亂

同混合型（IE10專用）の-ms-flex-order

justify-content : space-around; //平均分佈，但兩端留一半空間。flex-start以頭為基準，清理下部額外空間，flex-end尾基清上，center中基清上下，space-between平均分佈

align-items : flex-start; //以頭為基準，清理下部額外空間，flex-end尾基清上，center中基清上下，baseline

基線基準，清理額外，stretch默認,填充。 //同混合型（IE10專用）の-ms-flex-align

align-self : center; //值同上，設置單一項的伸縮

45、<meta name=’viewport’ //視口

content=’width=device-width , //備註：頁面與屏幕等寬

initial-scale=1.0, //備註：縮放比例

mininum-scale=1.0, //備註：允許縮放的最小比例

maxinum-scale=1.0, //備註：允許縮放的最大比例

user-scalable=no’> //備註：是否允許縮放

46、在768-991屏幕分辨率範圍內執行效果

@media(min-width : 768px) and (max-width : 991px){

//屬性&效果；

}