1. 程式人生 > >CSS屬性操作

CSS屬性操作

基線 對齊方式 per lai 對齊 functions css 間距 rep

一、css文本顏色的表示方式

  1、十六進制值 - 如: FF0000

  2、一個RGB值 - 如: RGB(255,0,0,0) (紅,綠,藍,透明度)

  3、顏色的名稱 - 如: red (建議使用)

  4、之前的屬性操作方式:

    colour:調整字體顏色;background-colour:調整字體背景顏色;font-size:調整字體大小;border:調整字體邊框厚度,樣式,顏色;

    width:調整框架寬度;height:調整框架高度

二、文本水平對齊方式(text-align屬性

  1、left 把文本排列到左邊。默認值:由瀏覽器決定。

  2、right 把文本排列到右邊。

  3、center 把文本排列到中間。

  4、justify 實現兩端對齊文本效果。

三、文本其他屬性

  1、font-size: 10px;設置文本中文字大小

  2、 font-family: ‘Lucida Bright‘ 設置字體類型

  3、font-weight: lighter/bold/border/ 設置字體粗細(細中粗),也可用數字調節

  4、font-style: oblique 設置字體為斜體

  5、 line-height: 200px; 文本垂直居中,但是必須和文本框高度一致。

  6、 vertical-align:-4px 設置元素內容的垂直對齊方式 ,只對行內元素有效,對塊級元素無效

  7、 text-decoration:none text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除鏈接的下劃線

  8、text-indent: 150px; 首行縮進150px

  9、letter-spacing: 10px; 字母直接的間距

  10、word-spacing: 20px; 單詞直接的間距

  11、text-transform: capitalize/uppercase/lowercase ; 文本轉換,用於所有字句變成大寫或小寫字母,或每個單詞的首字母大寫

  12、默認圖片是按照基線對齊,可以通過vertical-align:的方法改變圖片的對齊方式。

    技術分享

四、css背景屬性

  1、background-color 設置背景顏色

  2、background-image 以圖片設置背景顏色,橫縱都填,不夠圖片補全

  3、background-repeat:repea-x橫向填充圖片

  4、background-repeat:repea-x縱向填充圖片

  5、background-repeat:no-repea不會填充圖片,只有一張圖片

  6、background-position:100px 100px 上左,可center center 居中

  7、簡寫:

    技術分享

五、邊框屬性

  1、border-width 邊框的寬度

  2、border-style (required) 邊框的類型,即以什麽線把邊框包起來,實線,虛線等

  3、border-color 邊框的顏色

  4、簡寫:

    border:寬度 顏色 類型 (不區分順序,瀏覽器默認會識別)

  5、border-right:寬度 顏色 類型 這只是給邊框的最右邊的一條線設置屬性。

  6、border-radius: 80% 邊框圓潤度

六、列表屬性

  1、list-style-type 設置列表項標誌的類型。

  2、list-style-image 將圖象設置為列表項標誌。   3、list-style-position 設置列表中列表項標誌的位置。   4、list-style 簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中   5、list-style:none 設置列表項標誌類型為空 七、外邊距和內邊距屬性   1、盒子模型     技術分享

    1.1、margin: 用於控制元素與元素之間的距離;

    1.2、padding: 用於控制內容與邊框之間的距離;

    1.3、Border(邊框): 圍繞在內邊距和內容外的邊框。

    1.4、Content(內容): 盒子的內容,顯示文本和圖像。

  2、eg:

    技術分享

CSS屬性操作