一、font 字型
1、font-family
示例:2、font-size 字型大小大小
示例: p
p p
3、font-style 字型樣式
引數: normal : 正常的字型
italic : 斜體。對於沒有斜體變數的特殊字型,將應用oblique
oblique : 傾斜的字型
示例: p
p p
4、font-weight 文字字型的粗細
引數: normal : 正常的字型。相當於number為400。宣告此值將取消之前任何設定
bold : 粗體。相當於number為700。也相當於b物件的作用
bolder : ie5+ 特粗體
lighter : ie5+ 細體
示例: span
5、text-decoration 文字的裝飾
引數: none : 無裝飾
blink : 閃爍
underline : 下劃線
line-through : 貫穿線
overline : 上劃線
示例: div
div
6、font-variant 英文的大小寫轉換
引數: normal : 正常的字型
**all-caps : 小型的大寫字母字型
示例: span
7、text-transform 英文大小寫
引數: none : 無轉換發生
capitalize : 將每個單詞的第乙個字母轉換成大寫,其餘無轉換發生
uppercase : 轉換成大寫
lowercase : 轉換成小寫
示例: div
8、line-height 文字行高
引數: normal : 預設行高
length : 百分比數字 | 由浮點數字和單位識別符號組成的長度值,允許為負值
示例: div
div
9、letter-spacing 文字之間的間隔
引數: normal : 預設間隔
length : 由浮點數字和單位識別符號組成的長度值,允許為負值。
示例: div
div
10、word-spacing 英文單詞間距
引數: normal : 預設間距
length : 由浮點數字和單位識別符號組成的長度值,允許為負值
示例:div div
二、文字 text
1、text-indent 文字縮排
引數:length : 百分比數字|由浮點數字和單位識別符號組成的長度值,允許為負值。
示例:div
div
三、背景 background
1、background-color 背景色
引數: transparent : 背景色透明
color : 指定顏色
示例: p
div
body
pre
2、background-image 背景圖
引數: none : 無背景圖
url : 使用絕對或相對位址指定背景影象
示例: code
blockquote
br
body
3、background-position 背景影象位置
引數: length : 百分數 | 由浮點數字和單位識別符號組成的長度值。
position : top | center | bottom | left | center | right
示例: div
menu
a body
4、background-repeat 背景影象平鋪
引數: repeat : 背景影象在縱向和橫向上平鋪
no-repeat : 背景影象不平鋪
repeat-x : 背景影象在橫向上平鋪
repeat-y : 背景影象在縱向平鋪
示例: menu
p 四、定位 positioning
1、position
引數: static : 無特殊定位,物件遵循html定位規則
absolute : 將物件從文件流中拖出,使用left,right,top,bottom等屬性進行絕對定位
relative : 物件不可層疊,但將依據left,right,top,bottom等屬性在正常文件流中偏移位置
fixed : ie5.5及ns6尚不支援此屬性
width: 層的高度
height: 層的寬度
示例: div
div
2、z-index
引數: auto : 遵從其父物件的定位
number : 無單位的整數值。可為負數
示例: div
五、布局 layout
1、overflow
引數: visible : 不論層的大小,內容都顯示出來
auto : 只在內容超出層的範圍的時候才顯示滾動條
hidden : 不顯示超過物件尺寸的內容
scroll : 總是顯示滾動條
示例: body
div
2、visibility
引數: inherit : 繼承上乙個父物件的可見性
visible : 物件可視
hidden : 物件隱藏
collapse : 主要用來隱藏**的行或列。
示例: img
六、邊框 border
1、border-width 邊框寬度
引數: medium : 預設寬度
thin : 小於預設寬度
thick : 大於預設寬度
length : 由浮點數字和單位識別符號組成的長度值。
示例: span
span
2、border-top-width 上寬 (當把width換成color就是邊框顏色)
border-bottom-width 下寬(當把whdth換成style就是邊框樣式)
border-left-width 左寬
border-right-width 右寬
3、border-style 邊框樣式
引數: none : 無邊框
hidden : 隱藏邊框。ie不支援
dotted : 點線
dashed : 虛線
solid : 實線邊框
double : 雙線邊框
----一一下只對**有效-----
groove : 根據border-color的值畫3d凹槽
ridge : 根據border-color的值畫菱形邊框
inset : 根據border-color的值畫3d凹邊
outset : 根據border-color的值畫3d凸邊
示例: body
body
body
body
body
八、內補丁 padding
檢索或設定物件四邊的補丁邊距。
如果提供全部四個引數值,將按上-右-下-左的順序作用於四邊。
和外補丁相似
九、超連結
a:link /* 未訪問的鏈結 */
a:visited /* 已訪問的鏈結 */
a:hover /* 當有滑鼠懸停在鏈結上 */
a:active /* 被選擇的鏈結 */
十:滑鼠游標
1、cursor:游標形狀
引數: crosshair 交叉十字 help 代問號的滑鼠
default 預設滑鼠形狀 text 文字形狀
hand 手型
move 移動的形狀
wait 沙漏形狀
w-resize 向西的箭頭 s-resize 向南的箭頭
n-resize 向北的箭頭 e-resize 向東的箭頭
ne-resize 向東北 sw--resize 向西南
se-resize 向東南 nw-resize 向西北
xscan,lc4/5,流光……
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS 學習筆記
當同乙個html元素被不止乙個樣式定義時,會使用哪個樣式呢?一般而言,所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中,其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此,內聯樣式 在html 元素內部 擁有最...