WEB安全 DIV CSS基礎

. DIV和CSS樣式

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。 [1]

CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

DIV是html的一個標簽 css是一個樣式表

2. 樣式表類型

2.1. 嵌入樣式表

<!DOCTYPE html>

<html>

<head>

<style>

.demo1{

color: red;

width: 100px;

height: 100px;

background: blue;

}

</style>

</head>

<body>

demo1

</div>

</body>

</html>

2.2. 外部樣式

@import url

@import url("g.css");

.demo1{

color: red;

width: 100px;

height: 100px;

background: blue;

}

2.3. 內聯樣式

3. 注釋

/* */ 注釋內容

4. 樣式選擇器

元素選擇器 div{屬性:值}

ID選擇器 #id{屬性:值}

class選擇器 .類名{屬性:值}

子選擇器元數空格元素{屬性:值}

后代選擇器元數 > 元數{屬性:值}

屬性選擇器元素[屬性]{}

通配符選擇器 *{屬性:值}

群組選擇器

5. 背景

background-color 規定要使用的背景顏色。

background-position 規定背景圖像的位置。

background-size 規定背景圖片的尺寸。

background-repeat 規定如何重復背景圖像。

background-origin 規定背景圖片的定位區域。

background-clip 規定背景的繪制區域。

repeat 默認。背景圖像將在垂直方向和水平方向重復。

repeat-x 背景圖像將在水平方向重復。

repeat-y 背景圖像將在垂直方向重復。

no-repeat 背景圖像將僅顯示一次。

inherit 規定應該從父元素繼承 background-repeat 屬性的設置。

background-attachment 規定背景圖像是否固定或者隨著頁面的其余部分滾動。

background-image 規定要使用的背景圖像。

inherit 規定應該從父元素繼承 background 屬性的設置。

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

簡寫

background: url(images/bg.gif) no-repeat top right

背景圖片的滾動

背景圖片是否隨著內容的滾動而滾動由background-attachment設置

background-attachment:fixed; 固定，不隨內容的滾動而滾動

background-attachment:scroll; 滾動，隨內容的滾動而滾動

6. 邊框

邊框顏色 border-color:#000

邊框寬度 border-width:1px;

border-left 設置左邊框，一般單獨設置左邊框樣式使用

border-right 設置右邊框，一般單獨設置右邊框樣式使用

border-top 設置上邊框，一般單獨設置上邊框樣式使用

border-bottom 設置下邊框，一般單獨設置下邊框樣式使用,有時可將下邊框樣式作為css下劃線效果應用。

邊框樣式值如下：

none : 　無邊框。與任何指定的border-width值無關

hidden : 　隱藏邊框。IE不支持

dotted : 　在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線（常用）

dashed : 　在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線（常用）

solid : 　實線邊框（常用）

double : 　雙線邊框。兩條單線與其間隔的和等于指定的border-width值

上右下左

groove : 　根據border-color的值畫3D凹槽

ridge : 　根據border-color的值畫菱形邊框

inset : 　根據border-color的值畫3D凹邊

outset : 　根據border-color的值畫3D凸邊

上右下左

簡寫

border:5px solid red;

7. 文字屬性

color:red; 文字顏色 #ffeeees

font-size:12px; 文字大小

font-weight:bolds 文字粗細(bold/normal)

font-family:”宋體”文字字體

font-variant:small-caps小寫字母以大寫字母顯示

8. 文本屬性

text-align:center; 文本對齊(right/left/center)

line-height:10px; 行間距(可通過它實現文本的垂直居中)

text-indent:20px; 首行縮進

text-decoration:none;

文本線(none/underline/overline/line-through) underline/overline/line-through; 定義文本上的下劃線/上劃線/中劃線

letter-spacing: 字間距

9. 列表

list-style-type 設置列表項標記的類型。參閱：list-style-type 中可能的值。

list-style-position 設置在何處放置列表項標記。參閱：list-style-position 中可能的值。

list-style-image 使用圖像來替換列表項的標記。參閱：list-style-image 中可能的值。

inherit 規定應該從父元素繼承 list-style 屬性的值

| upper-alpha | none | inherit

disc: 點

circle: 圓圈

square: 正方形

decimal: 數字

decimal-leading-zero: 十進制數，不足兩位的補齊前導0，例如: 01, 02, 03, ..., 98, 99

lower-roman: 小寫羅馬文字，例如: i, ii, iii, iv, v, ...

upper-roman: 大寫羅馬文字，例如: I, II, III, IV, V, ...

lower-greek: 小寫希臘字母，例如: α(alpha), β(beta), γ(gamma), ...

lower-latin: 小寫拉丁文，例如: a, b, c, ... z

upper-latin: 大寫拉丁文，例如: A, B, C, ... Z

armenian: 亞美尼亞數字

georgian: 喬治亞數字，例如: an, ban, gan, ..., he, tan, in, in-an, ...

lower-alpha: 小寫拉丁文，例如: a, b, c, ... z

upper-alpha: 大寫拉丁文，例如: A, B, C, ... Z

none: 無(取消所有的list樣式)

inherit:繼承

list-style-position

inside

列表項目標記放置在文本以內，且環繞文本根據標記對齊。

outside

默認值。保持標記位于文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。

簡寫

list-style:square inside url('/i/arrow.gif');

10. 超鏈接

a{text-decoration: none;}

a:link {color:#FF0000;} /* 未訪問的鏈接 */

a:visited {color:#00FF00;} /* 已訪問的鏈接 */

a:hover {color:#FF00FF;} /* 鼠標劃過鏈接 */

a:active {color:#0000FF;} /* 已選中的鏈接 */

11. 盒子模型

盒子模型的組成部分

外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）四個屬性

自身的身高 width height

內邊距 padding

盒子邊框 border

與其他盒子的距離 margin 外邊距

12. Border 邊框

常見的寫法 border:1px solid #foo;

單獨屬性:

border-widh:

border-style:

dotted 點狀虛線

dashed（虛線）

solid（實線）

double（雙實線）

border-color(顏色)

12.1. margin padding

padding:內邊距

值：像素/厘米等長度單位、百分比

padding:10px; 上下左右

padding:10px 10px; 上下左右

padding:10px 10px 10px; 上左右下

padding:10px 10px 10px 10px; 上右下左（設置4個點-->順時針方向）

單獨屬性

padding-top:

padding-right:

padding-bottom:

padding-left:

當設置內邊距的時候會把盒子撐大，為了保持盒子原來的大小，應該高度和寬度進行減小，根據width和height減小

margin 外邊距

值：與padding相同

單獨屬性：與padding相同

外邊距合并：兩個盒子同時設置了外邊距，會進行一個外邊距合并

margin

margin:10px 上下左右都會騰出10px出來

margin:0px auto; 居中

13. float 脫離文檔流浮動

left 元素向左浮動。

right 元素向右浮動

清除浮動

clear: both;

left

right

14. 塊級元素、行內元素

塊級元素：

他會獨占一行，在默認情況下，其寬度自動填滿其父元素的寬度；

塊級元素可以設置width、height屬性；

塊級元素即使設置了寬度也是獨占一行，塊級元素可以設置margin、padding屬性；

行內元素：

行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，直到行排不下，就自動換行，其寬度隨內容而變化；

行內元素的width、height屬性則無效；

行內元素的margin、padding屬性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都會產生邊距效果，但是豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不產生邊距效果。

行內元素轉換

display:none; 不顯示

display:block;變成塊級元素

display:inline; 變成行內元素

display:inline-block;以塊級元素樣式展示，以行級元素樣式排列

塊級元素(block element）

address 地址

center 舉中對齊塊

div- 常用塊級容易

dl 定義列表

form 交互表單（只能用來容納其它塊元素）

h標簽

hr 水平分隔線

ol 無需列表

ul有序列表

p 段落

pre 格式化文本

行內元素：

a - 錨點

b - 粗體(不推薦)

br- 換行

code - 計算機代碼(在引用源碼的時候需要)

em - 強調

i - 斜體

img - 圖片（特殊的內聯元素，同時是內聯替換元素，替換元素可以設置寬高）

當圖片和DIV在一起時，圖片周圍會出現margin現象，即元素不重合貼在一起，為了解決這個問題，設置img的css為{margin：0；display：block；border：0px}

input - 輸入框

label - 表格標簽

select - 項目選擇

strong - 粗體強調

textarea - 多行文本輸入框

u - 下劃線

var - 定義變量

替換元素有如下：（和img一樣的設置方法）

15. 溢出

overflow 屬性規定當內容溢出元素框時發生的事情。

visible 默認值。內容不會被修剪，會呈現在元素框之外。

hidden 內容會被修剪，并且其余內容是不可見的。

scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。

auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。

inherit 規定應該從父元素繼承 overflow 屬性的值。

16. 定位

position

static靜態定位（不對它的位置進行改變，在哪里就在那里）

默認值。沒有定位，元素出現在正常的流中（忽略 top,bottom, left, right 或者z-index 聲明）。

fixed固定定位（參照物--瀏覽器窗口）---做彈窗廣告用到

生成固定定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right"以及 "bottom"屬性進行規定。

relative（相對定位）（參照物以他本身）

生成相對定位的元素，相對于其正常位置進行定位。

absolute（絕對定位）(除了static都可以，找到參照物-->與它最近的已經有定位的父元素進行定位)

生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定

z-index

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

定位的基本思想: 它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。

ay01

absolute ['?bs?lu:t] 絕對的，完全的
active ['?ktiv] 活動的，激活的，<a>標簽點擊
align [?'lain] 對齊
alpha ['?lf?] 透明度，半透明
anchor ['??k?] 錨記<a>標記是這個單詞的縮寫
arrow ['?r?u] 箭頭
auto ['?:t?u] 自動的

day02

background ['b?kgraund] 背景
banner ['b?n?] 廣告, 橫幅
black [bl?k] 黑色
blink： [bli?k] 閃亮,閃爍
block [bl?k] 塊
blue [blu:] 藍色
body ['b?di] 主體，一個HTML標記
bold [b?uld] 加粗
border ['b?:d?] 邊框、框線邊框
both [b?uθ] 兩者(都);兩個(都);是clear屬性的一個屬性值
bottom ['b?t?m] 底;底部，是一個CSS屬性
box [b?ks] 箱;盒;匣
br 換行標記
bug [b?g] 程序設計上的錯誤，漏洞等
building ['bildi?] 建筑
button ['b?tn] 按鈕

day03

cell [sel] 表格中的單元格
center ['sent?] 居中
centimeter ['senti,mi:t?] 厘米
child [t?aild] 孩子
circle ['s?:kl] 圓圈
class [klɑ:s] 類別
clear [kli?] 清除
color ['k?l?] 顏色
connected [k?'nektid] 連結的
contact ['k?nt?kt] 聯系
content [k?n'tent] 內容
css 層疊樣式表
cursor ['k?:s?] 鼠標指針

day04

dashed [d??t] 虛線CSS邊框常用的一種
decimal ['desim?l] 十進制
decoration [,dek?'rei??n] 裝飾
default [di'f?:lt] 默認的
design [di'zain] 設計
display [di'splei ] 顯示，CSS的一個屬性
division [di'vi??n] 分區，div就是這個單詞的縮寫
document ['d?kjum?nt] 文件文檔
dotted ['d?tid] 點線
double ['d?bl] 雙線

day05

element ['elim?nt] 元素
father ['fɑ:e?] 父親,父
filter ['filt?] 過濾層；濾器
first [f?:st] 第一個
fixed [fikst] 固定的，不變的
float [fl?ut] 浮動
font [f?nt] 字體
for 在循環語句中的一個保留字
gif 一種圖像格式
gray [grei] 灰色
green [gri:n] 綠色

day06

hand [h?nd] 手
head [hed] 頭部
height [hait] 高度
help [help] 幫助
here [hi?] 這里
hidden ['hidn] 被隱藏
home [h?um] 首頁
horizontal [,h?ri'z?ntl] 水平的
hover ['h?v?] 鼠標指針經過或稱為懸浮狀態

day07

image ['imid?] 圖像
important [im'p?:t?nt] 重要的
indent [in'dent] 縮進
index ['indeks] 索引
inline 行內
inner 內部的
italic [i't?lik] 意大利體，斜體
jpg 一種圖像格式
justify ['d??stifai] 兩端對齊

day08

language ['l??gwid?] 語言
last [lɑ:st] 最后一個
left [left] 左邊
length [le?θ] 長度
level ['levl] 級別，例如block-level就是塊級
line [lain] 線
link [li?k] 鏈接
list [list] 列表
lowercase ['l?u?,keis] 小寫
margin ['mɑ:d?in] 外邊距
max 最大的
medium ['mi:di?m] 中間
menu ['menju:] 菜單
middle ['midl] 中間
millimeter ['mili,mi:t?] 毫米
min 最小的
model ['m?dl] 模型
move [mu:v] 移動

day09

navigation [,n?vi'gei??n] 導航
new [nju:] 新的
none [n?n] 無，沒有
normal ['n?:m?l] 標準
object ['?bd?ikt] 對象
oblique [?b'li:k] 一種斜體
only ['?unli] 僅僅
open ['?up?n] 打開
optional ['?p??n?l] 可選的
orange ['?:rind?] 橙色
outer ['aut?] 外面的
overflow [,?uv?'fl?u] 溢出
padding ['p?di?] 內邊距
point [p?int] 點
pointer ['p?int?] 指針，指示器
position [p?'zi??n] 定位，位置
progress ['pr?ugres] 進度
public ['p?blik] 公開的
purple ['p?:pl] 紫色

day10

red [red] 紅色
relative ['rel?tiv] 相對的
repeat [ri'pi:t] 重復，平鋪
replacement [ri'pleism?nt] 替換
resize 重新設置大小
right [rait] 右邊
row [r?u] 行
scroll [skr?ul] 滾動
shadow ['??d?u] 陰影
silver ['silv?] 銀色
size [saiz] 尺寸
solid ['s?lid] 固體，實線
solution [s?'lu:??n] 方案
span [sp?n] 一個HTML標記
special ['spe??l] 特殊的
square [skw??] 方塊
static ['st?tik] 靜態的
strong [str??] 強壯，加粗的
style [stail] 樣式

day11

table ['teibl] 表格
td 單元格的HTML標記
text [tekst] 文本
thick [θik] 粗的
thin [θin] 細的
three [θi:] 三個
through [θru:] 穿過
title ['taitl] 標題
top [t?p] 頂部
tr 表格中“行”的HTML標記
transitional [tr?n'zi??n?l] 過渡的
type [taip] 類型

day12

underline [,?nd?'lain] 下劃線
upper ['?p?] 上面的
uppercase ['?p?,keis] 大寫
url 網址
vertical ['v?:tik?l] 豎直的
visited ['vizit] 訪問過的
while [hwail] 白色的
width [widθ] 寬度

體屬性：(font)

大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位：PX、PD

樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)

行高 {line-height: normal;}(正常) 單位：PX、PD、EM

粗細 {font-weight: bold;}(粗體) lighter;(細體) normal;(正常)

變體 {font-variant: small-caps;}(小型大寫字母) normal;(正常)

大小寫 {text-transform: capitalize;}(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無)

修飾 {text-decoration: underline;}(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

常用字體： (font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景屬性： (background)

色彩 {background-color: #FFFFFF;}

圖片 {background-image: url();}

重復 {background-repeat: no-repeat;}

滾動 {background-attachment: fixed;}(固定) scroll;(滾動)

位置 {background-position: left;}(水平) top(垂直);

簡寫方法 {background:#000 url(..) repeat fixed left top;} /*簡寫*/

字間距 {letter-spacing: normal;} 數值 /*設置字和字母的間距*/

對齊 {text-align: justify;}(兩端對齊) left;(左對齊) right;(右對齊) center;(居中)

縮進 {text-indent: 數值px;} /*一般給段落設置2em，縮進兩個字符*/

垂直對齊 {vertical-align: baseline;}(基線) sub;(下標) super;(下標) top; text-top; middle; bottom; text-bottom;

詞間距word-spacing: normal;/*設置文本的詞間距，本質是控制空格間距*/

空格white-space: pre;(保留) nowrap;(不換行)

顯示 {display:block;}(塊) inline;(內嵌) list-item;(列表項) run-in;(追加部分) compact;(緊湊) marker;(標記) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格標題) /*display 屬性的值有很多，可以多研究*/

邊框屬性： (Border)

border-style: dotted;(點線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊狀) inset;(凹陷) outset;

border-width:; 邊框寬度

border-color:#;

簡寫方法border：width style color; /*簡寫*/

列表屬性： (List-style)

類型list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數字) lower-roman;(小羅碼數字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

圖像list-style-image: url(..);

定位屬性： (Position)

Position: absolute; relative; static(元素默認的定位);

visibility: inherit; visible; hidden;（設置元素的可見性，分別是默認可見隱藏）

overflow: visible; hidden; scroll; auto;（設置溢出部分，分別是可見隱藏滾動和自適應）

clip: rect(12px,auto,12px,auto) (裁切屬性)

css屬性代碼大全

一 CSS文字屬性：

color : #999999; /*文字顏色*/

font-family : 宋體,sans-serif; /*文字字體*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜體*/

font-variant:small-caps; /*小字體*/

letter-spacing : 1pt; /*字間距離*/

line-height : 200%; /*設置行高*/

font-weight:bold; /*文字粗體*/

vertical-align:sub; /*下標字*/

vertical-align:super; /*上標字*/

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

text-decoration: overline; /*加頂線*/

text-decoration:underline; /*加下劃線*/

text-decoration:none; /*刪除鏈接下劃線*/

text-transform : capitalize; /*首字大寫*/

text-transform : uppercase; /*英文大寫*/

text-transform : lowercase; /*英文小寫*/

text-align:right; /*文字右對齊*/

text-align:left; /*文字左對齊*/

text-align:center; /*文字居中對齊*/

text-align:justify; /*文字分散對齊*/

vertical-align屬性

vertical-align:top; /*垂直向上對齊*/

vertical-align:bottom; /*垂直向下對齊*/

vertical-align:middle; /*垂直居中對齊*/

vertical-align:text-top; /*文字垂直向上對齊*/

vertical-align:text-bottom; /*文字垂直向下對齊*/

二、CSS邊框空白

padding-top:10px; /*上邊框留空白*/

padding-right:10px; /*右邊框留空白*/

padding-bottom:10px; /*下邊框留空白*/

padding-left:10px; /*左邊框留空白

三、CSS符號屬性：

list-style-type:none; /*不編號*/

list-style-type:decimal; /*阿拉伯數字*/

list-style-type:lower-roman; /*小寫羅馬數字*/

list-style-type:upper-roman; /*大寫羅馬數字*/

list-style-type:lower-alpha; /*小寫英文字母*/

list-style-type:upper-alpha; /*大寫英文字母*/

list-style-type:disc; /*實心圓形符號*/

list-style-type:circle; /*空心圓形符號*/

list-style-type:square; /*實心方形符號*/

list-style-image:url(/dot.gif); /*圖片式符號*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*縮進*/

四、CSS背景樣式：

background-color:#F5E2EC; /*背景顏色*/

background:transparent; /*透視背景*/

background-image : url(/image/bg.gif); /*背景圖片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重復排列-網頁默認*/

background-repeat : no-repeat; /*不重復排列*/

background-repeat : repeat-x; /*在x軸重復排列*/

background-repeat : repeat-y; /*在y軸重復排列*/

指定背景位置

background-position : 90% 90%; /*背景圖片x與y軸的位置*/

background-position : top; /*向上對齊*/

background-position : buttom; /*向下對齊*/

background-position : left; /*向左對齊*/

background-position : right; /*向右對齊*/

background-position : center; /*居中對齊*/

五、CSS連接屬性：

a /*所有超鏈接*/

a:link /*超鏈接文字格式*/

a:visited /*瀏覽過的鏈接文字格式*/

a:active /*按下鏈接的格式*/

a:hover /*鼠標轉到鏈接*/

鼠標光標樣式：

鏈接手指 CURSOR: hand

十字體 cursor:crosshair

箭頭朝下 cursor:s-resize

十字箭頭 cursor:move

箭頭朝右 cursor:move

加一問號 cursor:help

箭頭朝左 cursor:w-resize

箭頭朝上 cursor:n-resize

箭頭朝右上 cursor:ne-resize

箭頭朝左上 cursor:nw-resize

文字I型 cursor:text

箭頭斜右下 cursor:se-resize

箭頭斜左下 cursor:sw-resize

漏斗 cursor:wait

光標圖案(IE6) p {cursor:url("光標文件名.cur"),text;}

六、CSS框線一覽表：

border-top : 1px solid #6699cc; /*上框線*/

border-bottom : 1px solid #6699cc; /*下框線*/

border-left : 1px solid #6699cc; /*左框線*/

border-right : 1px solid #6699cc; /*右框線*/

以上是建議書寫方式,但也可以使用常規的方式如下:

border-top-color : #369 /*設置上框線top顏色*/

border-top-width :1px /*設置上框線top寬度*/

border-top-style : solid/*設置上框線top樣式*/

其他框線樣式

solid /*實線框*/

dotted /*虛線框*/

double /*雙線框*/

groove /*立體內凸框*/

ridge /*立體浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS邊界樣式：

margin-top:10px; /*上邊界*/

margin-right:10px; /*右邊界值*/

margin-bottom:10px; /*下邊界值*/

margin-left:10px; /*左邊界值*/

CSS 屬性：字體樣式(Font Style)

序號中文說明標記語法

1 字體樣式 {font:font-style font-variant font-weight font-size font-family}

2 字體類型 {font-family:"字體1","字體2","字體3",...}

3 字體大小 {font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字體風格 {font-style:inherit|italic|normal|oblique}

5 字體粗細 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字體顏色 {color:數值;}

7 陰影顏色 {text-shadow:16位色值}

8 字體行高 {line-height:數值|inherit|normal;}

9 字間距 {letter-spacing:數值|inherit|normal}

10 單詞間距 {word-spacing:數值|inherit|normal}

11 字體變形 {font-variant:inherit|normal|small-cps }

12 英文轉換 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字體變形 {font-size-adjust:inherit|none}

14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

文本樣式(Text Style)

序號中文說明標記語法

1 行間距 {line-height:數值|inherit|normal;}

2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:數值|inherit}

4 水平對齊 {text-align:left|right|center|justify}

5 垂直對齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 書寫方式 {writing-mode:lr-tb|tb-rl}

背景樣式

序號中文說明標記語法

1 背景顏色 {background-color:數值}

2 背景圖片 {background-image: url(URL)|none}

3 背景重復 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 背景固定 {background-attachment:fixed|scroll}

5 背景定位 {background-position:數值|top|bottom|left|right|center}

6 背影樣式 {background:背景顏色|背景圖象|背景重復|背景附件|背景位置}

框架樣式(Box Style)

序號中文說明標記語法

1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 補　　白 {padding:padding-top padding-right padding-bottom padding-left}

3 邊框寬度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}

寬度值： thin|medium|thick|數值

4 邊框顏色 {border-color:數值數值數值數值}　　數值：分別代表top、right、bottom、left顏色值

5 邊框風格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 邊　　框 {border:border-width border-style color}

上邊框 {border-top:border-top-width border-style color}

右邊框 {border-right:border-right-width border-style color}

下邊框 {border-bottom:border-bottom-width border-style color}

左邊框 {border-left:border-left-width border-style color}

7 寬　　度 {width:長度|百分比| auto}

8 高　　度 {height:數值|auto}

9 漂　　浮 {float:left|right|none}

10 清　　除 {clear:none|left|right|both}

分類列表

序號中文說明標記語法

1 控制顯示 {display:none|block|inline|list-item}

2 控制空白 {white-space:normal|pre|nowarp}

3 符號列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 圖形列表 {list-style-image:URL}

5 位置列表 {list-style-position:inside|outside}

6 目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}

7 鼠標形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

更多交流，請登錄bbs.520it.com

在線咨詢

上一篇：太漂亮了 ! 輸出好看的表格，就用這個 Python
下一篇：520前端程序員節，就用CSS給你的她送顆紅心吧！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

WEB安全 DIV CSS基礎

. DIV和CSS樣式

2. 樣式表類型

2.1. 嵌入樣式表

2.2. 外部樣式

2.3. 內聯樣式

3. 注釋

4. 樣式選擇器

5. 背景

6. 邊框

7. 文字屬性

8. 文本屬性

9. 列表

10. 超鏈接

11. 盒子模型

12. Border 邊框

12.1. margin padding

13. float 脫離文檔流浮動

14. 塊級元素、行內元素

您的項目需求