1. 程式人生 > >css小技巧-元素分類、字型的樣式、畫三角形、游標樣式

css小技巧-元素分類、字型的樣式、畫三角形、游標樣式

  1. 行級元素(span,strong,em,a,del)-內聯元素

Feature:內容決定元素所佔位置

        不可以通過css改變寬高

display:inline;

2.塊級元素(div,p,ul,li,ol,form,address)-塊元素

Feature:獨佔一行

        可以通過css改變寬高

display:block;

3.行級塊元素

   Feature:內容決定大下

           可以改變寬高

display:inline-block;

這三者之間可以通過修改display的值互相改變。

 

在css中設定字型的大小隻能設定字型的高!!

 

font-size: px;//字型大小

font-weight: normal,bold,bolder,lighter;//字型粗細

/*            400     700  strong  細體 */

font-style: italic;//斜體

font-family: ;//字型型別

/* arial cuesivegeorgia verdana helvetia simsun  */

color: ;//字型顏色

/* 1.土鱉式(純英文單詞)red,green,transparent(透明色)...

2.顏色程式碼:#f40(淘寶紅)

3.顏色函式 reb(0,255,255)*/

border: 1px solid black;

/*      粗細  展示形式 顏色; */

border-width: 20px;/* 邊框大小 */

border-style: ;/* 邊框樣式 */

/* solid 實心,dotted 點狀虛線,dashed 條狀虛線 */

border-left-color: red;

/* 左邊三角形的顏色     可以設定每一條邊    透明色畫三角形  分開寫的會覆蓋前面的*/

text-align: ;/* 對齊方式 預設left*/

/* content 居中,right 右對齊 */

line-height: ;/* 單行文字所佔的高度 */

/* 單行文字垂直居中:單行文字所佔的高度=容器高度 */

text-indent: 2em;/* 首行縮排 */

text-decoration: line-through;/* 刪除線 */

/* none沒有線,underline下劃線 overline上劃線 */

cursor: ;/* 滑鼠的形式 */

/* pointer小手形式,help問號形式,e-resize左右拖拽,w-resize上下

copy,move */

a:hover{           /* 偽類選擇器 */

background-color: orange;

}

/* 當滑鼠移到a上面之後,會發生什麼變化 */