A 文字
1 font-family:字體名稱
注意: 當指定多種字體時,用“,”分隔每種字體的名稱
當字體名稱包含兩個以上分開的單詞是,用“”把該字體名稱括起來。
當樣式規則外已經有“”時,用‘’代替“”。
2 font-size:字號參數。
3 font-style:斜體字的名稱。
normal正常狀態、italic斜體字、oblique 斜體和正常狀態之間。
4 font-weight:字體粗細。
取值是:number(100~900) 或者參數 lighter(細體) 和bold(粗體)bolder(特粗體) 參數 顯示更細或更粗。
5 text-transform:參數
參數的范圍: uppercase 所有文字大寫顯示
lowercase:所有文字小寫顯示
capitalize 每個單詞的頭字母大寫
none 不繼承母體的文字變形參數。
6 text-decoration:參數
參數的范圍: underline 為文字加下划線
overline 為文字加上划線
line-through 為文字加刪除線
blink 使文字閃爍
none 不顯示上敘任何效果。
7 color:#rrggbb或者 #rgb原則(還可以參考資料有多種方式,但是只要掌握基本的一種方式)。
8 可以用font 屬性全部定位
示例:p{font:italic bold 12pt;}
B 背景
1 background-color 背景顏色
2 background-image 背景圖片
示例:{background-image:url('http://baidu.com/zhouliang.gif')}
3 background-repeat:參數
參數的范圍:
repeat 表示圖像從水平和垂直角度平鋪
no-repeat 不重復平鋪背景圖片
repeat-x 使圖片只在水平方向上平鋪
repeat-y 使圖片只在垂直方向上平鋪。
4 background-attachment 參數
fixed 網頁滾動時,背景圖片相對瀏覽器而言固定不動。
scroll 網頁滾動時,背景圖片相對瀏覽器而言一起滾動。
5 background-postion 參數 (背景定位)
參數:top 相對前景對象頂對齊
bottom 相對前景對象底對齊
left 相對前景對象左對齊
right 相對前景對象右對齊
center 相對前景對象中心對齊
說明:一般用坐標的方式來確定圖片的位置。
6 可以直接用 background 復合屬性來確定式樣
示例:table{background:#001122 url(zhouliang.jpg) no-repeat bottom right}
C 文本
1 英文單詞間距 word-spacing:
取值可以是:normal或者是單位像素;
2 英文字母間距 letter-spacing:間隔距離
取值可以是:normal或者是單位像素;
3 行距 line-height:值
可以是精確的值,也可以是百分比。
4 文本水平排列text-aglin:參數
left: 左對齊 right:右對齊 center: 居中 justify:相對左右對齊。
注意到:text-aglin 是塊級屬性,只能用於<p><blockquqte><ul><h1>-<h6>等表示符里
5 文本垂直排列 vertical-align:參數
top 頂對齊 bottom 底部對齊 text-top 相對文本頂對齊
text-bottom相對文本底對齊 baseline:基准線對齊 middle 中心線對齊
sub 以下標的形式對齊 sup 以上標的形式對齊,相對於元素行高屬性的百分比。
6 文本縮進 text-indent 縮進距離
說明:縮進距離必須是值或者%比
7 white-space
設置值:normal:合並連續的多個空格
pre:保留原樣式
nowrap:不換行,直到遇到<br>標簽
8 text-decoraition
值:none :表示不對文本進行修飾,也是默認值,
underline:表示對文字添加下划線
overline:表示添加上划線
line-through:表示對文本添加刪除線
blink:表示文字具有閃爍效果
9:text-transform文本轉換
取值范圍:none:表示原有值
capitalize:使每個字的第一個字母大寫
uppercase:大寫
lowercase:小寫
D 定位
是指指定元素的位置,他是CSS-P(cascading style sheets positioning)中的內容,CSS-P是CSS的一個擴展,
它可以用來控制任何網頁元素在瀏覽器文檔窗口中的位置。
1:postion
設置值: 含義
absolute 采用絕對定位(分別用四個邊框來定位)
relative 采用相對定位(也得用四個邊框來設定位置)
static 默認值
2:left/top/width/height
說明:設置值可以是
3:z-index(也就是元素的堆疊,大的在上,小的在下。默認是按照先后順序)
說明:取值auto默認值,表示它遵循其父對象的定位屬性;如果設置為數字,必須是無單位的正整數,可以取負值,
但是一般為正數,一般數字為1時間是最底層。
E 布局
1 visibility 可視性
設置值:inherit:表示對象繼承父本的繼承性。
visible:表示對象可見
hidden:表示對象隱藏
2 display 設置或檢索對象是否及如何顯示
設置值:block、inline、list-item、none
3 clip 可視區域
設置值:auto表示對象不裁剪
rect(數值表示)(一般有四個設置值:方向定位於上右下左的順序,一般以左上角(0,0)坐標計算4個偏移數值。其中 任何一個值都可以用auto代替)
4 overflow 超出范圍:
設置值:isible 擴大瀏覽器
hidden 裁剪掉多余的文本
scroll 滾動條
auto 當有多余的時候才顯示滾動條
5 float 浮動屬性
設置值:left表示文字浮在元素左側
right 表示文字浮在元素右側
none 默認值,表示不浮動。<該屬性特別重要,一定要掌握>
6 clear 表示指定一個元素周圍是都允許有其他元素漂浮在它的周圍。
設置值:left ,right,none,both;指要清除本元素四周的浮動對象。
7 page-break-before 設置值:always 是否強制分頁
8 page-break-after 設置值:always 打印后設置是否強制分頁
9 width和height 表示層的寬度與高度。設置值為 auto|數值
F 邊距與填充屬性
1 復合屬性margin:與邊距的距離
(margin-top margin-left margin-bottom margin-left)
取值可以是:auto默認
%比或者具體的值:
說明:取值可以是一個或者兩個或者三個或者四個(每個都具有不同的含義)。
2 復合屬性填充(指用白值填充):padding
說明:和margin的用法一樣。
3 border-width
邊框寬度:
border-top-width:上邊框寬度
border-right-width:右邊框寬度
border-bottom-width:底邊框寬度
border-left-width:左邊框寬度
取值為:medium 默認寬度;thin 細邊框 thick 粗邊框
4 border-style
border-top-style:上邊框樣式
border-right-style:右邊框樣式
border-bottom-style:底邊框樣式
border-left-style:左邊框樣式
取值: 含義
none 不現實邊框,為默認值
dotted 點線(電線)
dashed 虛線,也稱短線
solid 實線
double 雙實線
groove 邊框帶有立體感的溝槽
ridge 邊框成脊形
inset 使整個表框凹陷,即在邊框內嵌入一個立體邊框
outset 使整個邊框凸起,即在邊框外嵌入一個立體邊框
5 border-color
設置邊框的顏色:用法同上margin
6: border
復合屬性:border:邊框寬度|樣式|顏色
那么還有:border-top|border—right|border—bottom|border-left
G 列表
1:list-style-type 指顯示於列表項前的標識符號
取值: 含義
none 表示不顯示列表符號
..... ..........
2:列表縮進 list-style-postion 列表位置描述列表在何處顯示
參數:inside 列表內容和列表標識符號處在不同垂直位置,在符號內測。
outside 列表內容和列表標識符號處在同一垂直位置
3: list-style-image
說明:用圖片符號作為鏈接標題
取值 含義
none 表示不指定圖像
url(網頁地址) 指定圖片位置
4:復合屬性:list-style
實現以上三種屬性
H 光標屬性
1 cursor 當點擊某個內容時,鼠標顯示其他的圖形
style="cursor:hand" 手形
style="cursor:crosshair" 十字形
..............
G 濾鏡屬性
1 filter