CSS:基礎知識
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){
//屬性&效果;
}