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){

//屬性&效果;

}

上一篇:JAVA_用_JCO连接_SAP,实现调用SAP_的_RFC_函数(整理)(附一篇看起来比较全面的说明)(JCO报错信息)


下一篇:JavaWeb 后端 <九> 之 JDBC加强