css學習筆記

2021-04-19 02:49:15 字數 4200 閱讀 4215

一、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 元素內部 擁有最...