CSS屬性操作
一、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屬性操作