1. 程式人生 > >CSS基礎4——使用CSS格式化元素內容的文本

CSS基礎4——使用CSS格式化元素內容的文本

字母 strong back 瀏覽器 repeat-x class per border list

CSS的文本屬性用於控制文本的段落格式,如設置首行縮進。段落對齊方式、字間距、行間距等。

1、設置文本首行縮進:text-indent

可選屬性值包含: 長度 / 百分比

2、設置文本對齊方式:text-align

可選屬性包含:left / right / center,分別表示相左對齊。向右對齊,居中對齊

3、設置文本修飾方式:text-decoration

可選屬性包含:none / underline (下劃線) / overline(上劃線) / line-through(刪除線) / blink(閃爍)

4、設置文本陰影效果:text-shadow


可選屬性值包含: none / color
5、設置行高:line-height
屬性值能夠是數字,長度,百分比或者normal
6、設置字間距:letter-spacing
可選屬性值包含: none / auto / 自己定義長度
7、設置詞間距:word-spacing
可選屬性值包含: none / 自己定義長度
8、設置文本大寫和小寫屬性:text-transform
可選屬性包含:capitalize 把每一個單詞的首字母變成大寫
uppercase 把元素中的全部的字母變成大寫
lowercase 把元素中的全部字母變成小寫

9、設置空白顯示形式:white-space
要輸入空格的方式:一個是"&nbsp;"。還有一個是<pre>標記。

而CSS中white-space屬性類似於pre
可選屬性值包含:normal / pre / nowrap
10、設置元素內容的字體顏色與背景
(1)設置元素的前景色:color
取值:能夠是16進制值、rgb()函數或者CSS承認的顏色名(如white)
(2)設置背景色:background-color,取值同前景色
(3)設定背景圖片:background-image


取值是:圖片的URL地址
(4)設置背景圖像的鋪排:background-repeat
取值:repeat / no-repeat / repeat-x / repeat-y
(5)設置背景圖像是歲對象內容滾動還是固定的:background-attachme
取值:sroll / fixed
(6)設置背景圖片顯示的位置:background-position
取值:百分比。自己定義長度(如100px,100px) / top / center / bottom / left / right
11、設置列表格式:list-style-type
屬性取值:disc 默認值。實心黑點
circle 空心圓圈
square 方形黑塊
decimal 十進制數
lower-roman 小寫羅馬數字
upper-roman 大寫羅馬數字
lower-alpha 小寫字母
upper-alpha 大寫字母
none 無
也能夠用list-style-image把列表前面的符號換成圖形,若同一時候指定了list-style-type和list-style-image屬性,則僅僅有當瀏覽器不能顯示圖片作為項目符號時,list-style-type才生效。


12、樣式繼承:被用來節省為文檔書中的每一級別元素指定的CSS樣式規則,如給<body>設定一個字體顏色,則這個顏色會被網頁內全部的元素繼承,除非其它元素有他們自己指定的樣式。
不能被繼承的屬性:margin 、 padding 、 border 、 background

CSS基礎4——使用CSS格式化元素內容的文本