一.文本設置
font-size: 字號參數
font-style: 字體格式
font-weight: 字體粗細
顏色屬性
color: 參數
注意使用網頁安全色
二、超鏈接設置
text-decoration: 參數
主要用途是改變瀏覽器顯示文字鏈接時的下划線。
參數取值范圍:
underline:為文字加下划線
overline:為文字加上划線
line-through:為文字加刪除線
blink:使文字閃爍
none:不顯示上述任何效果
三、背景
背景顏色
background-color: 參數
背景圖片
background-image: url(URL)
URL就是背景圖片的存放路徑,none表示無。
背景圖片重復
background-repeat: 參數
參數取值范圍 :
no-repeat:不重復平鋪背景圖片
repeat-x:使圖片只在水平方向上平鋪
repeat-y:使圖片只在垂直方向上平鋪
如果不指定背景圖片重復屬性,瀏覽器默認的是背景圖片向水平、垂直兩個方向上平鋪。
背景圖片固定
背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設置背景圖片固定屬性,瀏覽器默認背景圖片隨網頁的滾動而滾動。為了避免過於花哨的背景圖片在滾動時轉移瀏覽者的注意力,一般都設為固定
background-attachment: 參數
參數取值范圍:
fixed:網頁滾動時,背景圖片相對於瀏覽器的窗口而言,固定不動
scroll:網頁滾動時,背景圖片相對於瀏覽器的窗口而言,一起滾動
四、區塊
單詞間距
word-spacing: 間隔距離
字母間距
letter-spacing: 字母間距
文本對齊
text-align: 參數
參數的取值:
left:左對齊
right:右對齊
center:居中對齊
justify:相對左右對齊
垂直對齊
vertical-align: 參數
top:頂對齊
bottom:底對齊
text-top:相對文本頂對齊
text-bottom:相對文本底對齊
baseline:基准線對齊
middle:中心對齊
sub:以下標的形式顯示
super:以上標的形式顯示
文本縮進
text-indent: 縮進距離
12px相當於一個文字距離
空格
white-space: 參數
normal 正常
pre 保留
nowrap 不換行
顯示樣式
display: 參數
參數取值范圍:
block:塊級元素,在對象前后都換行
inline:在對象前后都不換行
list-item:在對象前后都換行,增加了項目符號
none:無顯示
五、方框
height 高度
width 寬度
padding 內邊距
margin 外邊距
float(浮動):可以讓塊級元素在一行中排列,例如橫向菜單。
clear 清除浮動
六、邊框
樣式
border style 參數
邊框樣式的參數:
none:無邊框
dotted:邊框為點線
dashed:邊框為長短線
solid:邊框為實線
double:邊框為雙線
寬度
border width 參數
顏色
border color 參數
七、列表
list-style-type 列表樣式
不同瀏覽器的列表符可能不相同,可能會影響到網頁,所以網頁中的列表大多都是由背景圖片顯示。
控制用戶界面的樣式
八、鼠標
cursor:鼠標形狀參數
CSS鼠標形狀參數表:
鼠標形狀:CSS代碼
style="cursor:hand" 手形
style="cursor:crosshair" 十字形
style="cursor:text" 文本形
style="cursor:wait" 沙漏形
style="cursor:move" 十字箭頭形:
style="cursor:help" 問號形
style="cursor:e-resize" 右箭頭形
style="cursor:n-resize" 上箭頭形
style="cursor:nw-resize" 左上箭頭形
style="cursor:w-resize" 左箭頭形
style="cursor:s-resize" 下箭頭形
style="cursor:se-resize" 右下箭頭形
style="cursor:sw-resize" 左下箭頭形