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- 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){
//屬性&效果；
}