css 樣式屬性分類

來源:互聯網
上載者:User

當在XHTML中使用CSS,CSS裡定義的元素名稱是區分大小寫。為了避免這種錯誤,建議所有的定義名稱都採用小寫。class和id的值在HTML和XHTML中也是區分大小寫。

1.樣式屬性主要分為以下幾類:字型,背景,文本,位置,布局,邊緣,列表,其它。

 

2.字型

  族類(generic family):一個族類是一組具有統一外觀的字型族。sans-serif代表一組沒有“腳”的字型,筆畫兩端有襯線;serif族:筆畫兩端有襯線;monospace族:所有字元的寬度一樣。

   font-family:字型名稱,多個字型名稱之間使逗號分隔,優先使用前面的字型。建議在列表的最後給出一個族類(generic family),這樣,當沒有一個指定字型可用時,頁面至少可以採用一個相同族類的字型來顯示。如:h1 {font-family: arial, verdana, sans-serif;}

   font-size:字型大小。注意奇數字尺寸的字在橫向時可能有變形。

                     絕對大小值有:xx-small,x-small,small,medium,large,x-large,xx-large。大部分瀏覽器的預設文字大小為16px。small為13px

                     相對大小值 :larger,smaller。

                     絕對單位:mm,cm,in,pt,pc。

                     相對單位:em 相對於字型的大小,ex 相對於小寫字母x的大小,% 相對於父元素的字型值,px 相對於裝置的像素點。一般認為1em=2ex。

  font-style:字型樣式,normal(正常)、italic(斜體)或oblique(傾斜)。

  text-decoration:在文本中添加上劃線,中劃線,底線。underline overline line-through。可以同時設定多個值 ,用空格隔開。

                             超連結的預設的text-decoration的值就是underline。不設定時使用none。

  font-weight:濃淡程度。其值可以是normal(正常)、bold(加粗)、bolder、lighter。有些瀏覽器甚至支援採用100到900之間的數字(以百為單位)來衡量字型的濃淡。

  font-variant:normal(正常)或small-caps(小體大寫字母)。small-caps字型是一種以小尺寸顯示的大寫字母來代替小寫字母的字型

 

  最後可以使用一個font屬性包括所有的字型設定值 :例如 P{font:italic bold 12pt },但不知在解析時怎麼排列順序的。

  縮寫字型至少要定義font-family和font-size,字型顏色值不可能縮寫到font中。

 

4.文本

  word-spacing:單詞間距,可繼承

  letter-spacing:文本的水平漢字或字母間距,可繼承

  vertical-align:垂直對齊,相對於父元素,只適用於行內元素,無繼承性。

                          baseline,sub,super,top,middle,bottom,text-top,text-bottom,inherit,或相對於元素行高的百分比。 預設為baseline。

                          float可能會影響vertical-align的表現

                          當元素內容只有圖片時,如果出現圖片所在行高失效的問題,檢查此時要修改文件類型為嚴格的strict,非過渡的transitional.dtd

                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">

                          表格是比較特殊的元素,瀏覽器會對它的垂直對齊進行特殊處理。

  text-align:內部水平對齊,只適用於區塊層級元素,可繼承。CSS屬性text-align與HTML 屬性align的功能相同。

                    該屬性的值可以是:left(靠左對齊)、right(靠右對齊)或者center(置中),

                    justify(左右對齊),報刊雜誌經常採用justify。

                    兩邊文字對齊 style="text-align:justify; text-justify:inter-ideograph";

  text-indent:首行縮排值,段落前面空兩個字的距離不要使用空格,應該使用首行縮排text-indent。

                      text-indent可以使得容器內首行縮排一定單位。比如中文段落一般每段前空兩個漢字。

                      em是相對長度單位。相對於當前對象內文本的字型尺寸。p {text-indent: 2em;},p {text-indent: 30px;}

                        有兩種情況會用到負值縮排,首行凸排和隱藏文字。

                        首行凸排如:p{padding-left:3.5em; text-indent:-3.5em;}

                        隱藏文字:在網頁內一些特殊字型效果往往用圖片來實現,比如h3使用了特殊字型,如果在其中放入img則違反了“表現與結構分離”原則,因為原本這裡是

                        加入文字內容的,由於表現才改用了圖片,所以這個圖片是“表現”,解決方案是保h3中使用文字,同時h3{background:(url); text-indent:-9999em;},

                        使文字擠出螢幕。

  white-space:對文本中空白的處理。

                         normal:將多個空格替換為一個空格,自動回行。

                         pre:不壓縮空格

                         nowrap:不壓縮空格,不換行,直到br。效果還會受到overflow屬性值的影響。 如:加上width:11em; overflow:hidden; 可以實現隱藏超出的文字效果;

                        pre-wrap:空格,定位字元,換行不會被壓縮,但會自動回行。

                        pre-line:空格,定位字元被壓縮,保留換行,會自動回行。

  line-height:文字行高,文本行的基準間的距離,並不是元素的高度,可繼承。指定數字或px值或百分比。

                      預設值為normal,一般為1到1.2。例如:140%指行高是字型高度的140%,1指的是字型高度乘以1。

                      當內容中有圖片時,如果圖片高度大於行高,圖片會撐高行框,但不會影響行高值。

                      一些單行文字垂直置中:一般只需要設定行高值與高度值相等。

                      行內框:inline box,行內元素會產生一個行內框,預設行內框等於內容地區,行高會影響行內框的高度。

                      行框:line box,高度等於本行內所有元素行高最大的值。

  word-wrap;

  word-break;

  text-decoration:為文本增添不同的裝飾效果,無繼承性。none 預設值,也有的元素不是,如a,underline 底線、line-through 貫穿線、overline 上劃線、blink 閃爍。

                             常用於對連結文字設定裝飾效果。

  text-transform:控制文本的大小寫。每個單詞的首字母大寫(capitalize)全部大寫(uppercase)或者全部小寫(lowercase),none不作轉換,預設為none。

  text-shadow: 文本陰影由下列順序的參數構成: x-offset, y-offset, blur,  color. 將 x-offset 設定為負數即將陰影移動到左側. 將 y-offset 設定為負數即將陰影移動到上方.

                       不要忘記你可以使用 RGBA 來控制陰影的顏色.同時還可以為 text-shadow 指定一個陰影列表 (以逗號分隔).

                       下列例子使用了兩個 text-shadow 定義來控制頁面輸出效果 (1px 上陰影和 1px 的下陰影).   text-shadow:01px0
#fff, 0 -1px0#000;

                       
由於多數瀏覽器不支援此屬性,在css2.1刪除了。

  direction:

  unicode-bidi:

 

6.布局:

 

 

 

 

  page-break-before:

  page-break-after:

 

7.邊界和填充

 

 

 


8.列表

  list-style-type:square 清單項目標記類型

  list-style-position:inside,outside。

  list-style-image:url()

  list-style:square insice url()

  table的table-layout屬性

 

9.其它

  cursor:

  filter:

 

10.filter,css 濾鏡

一些有邊界地區的元素才能使用filter。

可實現的效果有,文字翻轉等。

例如:style="filter:alpha(opacity=80) blur(add=5,direction=135) flipv"

filter參數

alpha(opacity=?,finishopacity=?,style=?,startx=?,starty=?,finishx=?,finishy=?) 不透明度,

blendtrans(duration=?) 設定淡入淡出效果

blur(add=?,direction=?,strength=?)模糊效果

chroma(color=?) ,過濾掉某種顏色

DropShadow(color=?,offx=?,offy=?,positive=?) 陰影製作效果

FlipH,FlipV,將元素水平,垂直方向反轉。

Gray,去掉圖片色彩,黑白

Invert,反轉映像顏色

Light 設定光源效果

Xray 顯示圖片的輪廓,x光線效果

glow(color=?,,strength=?) 元素邊緣發光的效果

mask(color=?)在元素表面覆蓋一層遮罩

revealtrans(duration=?,transition=?)建立元素初始顯示的轉換效果

shadow(color=?,direction=?)一種陰影製作效果

wave(add=?,freq=?,lightstrength=?,phase=?,strength=?) 波紋效果

symbian theme

擴充sdk中,ExtendedSkinsAPI.ZIP和PersonalizationandSkinsSettingsAPI.ZIP提供了處理主題的api.

   用程式改變當前主題 需要能力WriteDeviceData.

  

http://wiki.forum.nokia.com/index.php/%E6%89%A9%E5%B1%95%E7%9A%AE%E8%82%A4API

   提供了詳細的範例程式碼.

 

 

12.float

    (1)高度不自適應問題:

    當一個容器內元素都被應用了float之後,那麼整個box的高度對就不以被浮動物件的高度為標準了,高度將不會隨著內部元素高度的增加而增加,所以可能造成內容元素的顯示超出了容器。

    此時需要設定父區塊的高度,或用overflow來解決!方法是在父元素加上 overflow:auto; zoom:1;,其中overflow:auto;是讓高度自適應, zoom:1;是為了相容IE6,也可以用height:1%;的方式來解決。

   當設定了多個元素float:left後,效果是依次向左靠。

   float:left;(左浮動)使得指定元素脫離普通的文檔流而產生的特別的布局特性。並且FLOAT必需應用在區塊層級元素之上,也就是說浮動並不應用於內聯標籤。或者換句話來說當應用了FLOAT那麼這個元素將被指定為區塊層級元素。

     補充:css hack

     針對不同的瀏覽器寫不同的CSS code的過程,就叫CSS hack。這裡的overflow:auto; zoom:1;就是所謂的css hack,這種形式是應用我們常用的代碼來解決不相容問題,也會用到添加一些特殊符號的形式,它本身沒有意義,只是針對不同瀏覽器是否對它識別來實現的。

    ie6的bug:雙倍邊距bug;3px bug;

    下拉式清單(菜單)是大家最頭疼的一個元素,因其對許多樣式不生效,故而在頁面中顯示很醜陋,而且在IE6下下拉式清單總在最上層,造成許多彈出層不能把其遮擋,一些設計師想出了許多辦法來改變這種情況。IE6下對下拉式清單的背景和寬度樣式生效,其它絕大部分不生效,IE8下增加了對邊框和高度的支援,但這樣似乎離我們要求還很遠。基中IE6下被遮擋可以把浮動層用iframe,因下拉式清單不會跑到iframe上邊。有更高美化需求的可以用div類比來代替下拉式清單,但這種方法實現起來麻煩。

 

13.控制換行
{word-break:keep-all;white-space:nowrap;}  /* 禁止換行 */
{word-break:break-all;}/* 強制換行 */

14. 不要使用全域Reset:

*{ margin:0; padding:0; }

       不僅緩慢和低效,而且還會導致一些不必要的元素也重設了外邊距和內邊距。在此建議參考YUI Reset和Eric Meyer的做法。

/** 清除內外邊距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 結構元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文字格式設定元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表單元素 */
th, td, /* table elements 表格元素 */
img/* img elements 圖片元素 */{
border:medium none;
margin: 0;
padding: 0;
}
/** 設定預設字型 **/
body,button, input, select, textarea {
font: 12px/1.5 '宋體',tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重設列表元素 **/
ul, ol { list-style: none; }
/** 重設超連結元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重設圖片元素 **/
img{ border:0px;}
/** 重設表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

15.關鍵字不能放在引號中

相關文章

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.