CSS屬性總結篇

來源:互聯網
上載者:User
捲軸
1.overflow內容溢出時的設定(設定被設定對象是否顯示捲軸)
overflow-x水平方向內容溢出時的設定
overflow-y垂直方向內容溢出時的設定
以上三個屬性設定的值為visible(預設值)、scroll、hidden、auto。

2.scrollbar-3d-light-color立體捲軸亮邊的顏色(設定捲軸的顏色)
scrollbar-arrow-color上下按鈕上三角箭頭的顏色
scrollbar-base-color捲軸的基本顏色
scrollbar-dark-shadow-color立體捲軸強陰影的顏色
scrollbar-face-color立體捲軸凸出部分的顏色
scrollbar-highlight-color捲軸空白部分的顏色
scrollbar-shadow-color立體捲軸陰影的顏色

我們通過幾個執行個體來講解上述的樣式屬性:
1.讓瀏覽器視窗永遠都不出現捲軸
沒有水平捲軸
<body style="overflow-x:hidden">
沒有垂直捲軸

注意:括弧內為各種可選屬性.
類型:type
 字型:font-family
 大小:font-size
 樣式:font-style:(italic,normal,oblique(偏斜體))
 粗細:font-weight:(bold粗體,normal正常,bolder特粗,lighter特細 ,100-900)
 變數:font-variant:(normal正常,small-caps小型大寫字母)
 行高:line-height:(20px,...)
 大小寫:text-transform:(capitalize首字母大寫,uppercase大寫,lowercase小寫,none無)
 修飾:text-decoration:(underline底線,overline上劃線,line-through刪除線,blink閃爍,none無)
 顏色:color:(#0000cc,red,...)

背景:backdrop
 背景顏色:background-color:(#fff)
 背景映像:background-image:(url(mypicture.jpg))<!--這裡用的是相對於文檔,在都用這個的哦-->
 重複:background-repeat:(no-repeat不重複,repeat重複,repeat-x 橫向重複,repeat-y縱向重複)
 附件:background-attachment:(fixed固定,scroll滾動)
 水平位置與垂直位置:background-position:(center水平置中,center垂直置中或20px水平20px,20px垂直20px)

區塊:block
單詞間距:word-spacing:( 20px;normal)
字母間距:letter-spacing: (1px;normal)
垂直對齊:vertical-align:(baseline將元素的基準線和母體元素的基準線對齊,sub將元素以下標的形式顯示,super將元素以上標的形式顯示,top將元素頂部同最高的母體元素對齊,text-top將元素的頂部同母體元素文字的頂部對齊,middle將元素的底部同最低的母體元素對齊,text-bottom將元素底部同母體元素文字的底部對齊.)
文本對齊:text-align:(left,center,right,justify)
文字縮排:text-indent:(20pt,20%,20px,2em....)
空格:white-space:(pre保留,normal,nowrap不換行)

方框:casing
寬:width:(auto,20px)
高:height:(auto,1em)
浮動:float:(left,right,none)
清除:clear:(both,left,right,none)
填充:padding-top:(2px),padding-right:(2px),padding-bottom:(2px),padding-left:(2px)

邊框:frame
border-top,border-right,border-bottom,border-left
樣式:(none無,dotted點劃線,dashed虛線,solid實線,double雙線,groove槽狀,ridge脊狀,inset凹陷,outset凸出)
寬度:(thin細,medium中,thick粗,10px像素)
顏色:(#999999)

列表:list
類型:list-style-type:(disc圓點,circle圓圈,square方塊,decimal數字,lower-roman小寫羅馬數字,upper-roman大寫羅馬數字,lower-alpha小寫字母,upper-alpha大寫字母,none無)
項目符號映像:list-style-image:(url(mypic.gif))
位置:list-style-position:(outside外部,inside內部)

定位:place
類型:position:(relative相對,static表態,absolute絕對)
顯示:visibility:(visible可見,inherit繼承,hidden隱藏)
寬:width:200px
高:height:100px
Z軸:z-index:2(重疊層次)
溢出:overflow:(hidden,visible,scroll,auto)
定位:top:(20px)
         right
         left
        bottom
剪輯:clip:(rect(auto上自動,20px右,20px下,10px左)

擴充:exhibit
分頁之前:page-break-before:(always總是,left,right,auto)
分頁之後:page-break-after:(同上)
視覺效果:(游標:wait)
過濾器:alpha透明的漸層效果
              BlendTrans混合漸層過濾器
              Blur風吹模糊效果
   Chroma特定顏色的透明效果
   DropShadow陰影製作效果
   FlipH水平翻轉效果
   FlipV垂直翻轉效果
   Glow邊緣光暈效果
   Gray黑白效果
   Inzert圖片產生底片效果
   Light加入光源投射效果
   Mask遮蔽效果
   RezealTrans顯示漸層過濾器
   Shadow漸長陰影製作效果
   Waze加入波形效果
   Xray加入輪郭效果

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.