WEB安全 DIV CSS基礎(chǔ)

. DIV和CSS樣式

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。 [1]

CSS 能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。

DIV是html的一個(gè)標(biāo)簽 css是一個(gè)樣式表

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. 內(nèi)聯(lián)樣式

3. 注釋

/* */ 注釋內(nèi)容

4. 樣式選擇器

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

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

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

子選擇器元數(shù) 空格元素{屬性:值}

后代選擇器元數(shù) > 元數(shù){屬性:值}

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

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

群組選擇器

5. 背景

background-color 規(guī)定要使用的背景顏色。

background-position 規(guī)定背景圖像的位置。

background-size 規(guī)定背景圖片的尺寸。

background-repeat 規(guī)定如何重復(fù)背景圖像。

background-origin 規(guī)定背景圖片的定位區(qū)域。

background-clip 規(guī)定背景的繪制區(qū)域。

repeat 默認(rèn)。背景圖像將在垂直方向和水平方向重復(fù)。

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

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

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

inherit 規(guī)定應(yīng)該從父元素繼承 background-repeat 屬性的設(shè)置。

background-attachment 規(guī)定背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。

background-image 規(guī)定要使用的背景圖像。

inherit 規(guī)定應(yīng)該從父元素繼承 background 屬性的設(shè)置。

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

簡(jiǎn)寫

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

背景圖片的滾動(dòng)

背景圖片是否隨著內(nèi)容的滾動(dòng)而滾動(dòng)由background-attachment設(shè)置

background-attachment:fixed; 固定，不隨內(nèi)容的滾動(dòng)而滾動(dòng)

background-attachment:scroll; 滾動(dòng)，隨內(nèi)容的滾動(dòng)而滾動(dòng)

6. 邊框

邊框顏色 border-color:#000

邊框?qū)挾?border-width:1px;

border-left 設(shè)置左邊框，一般單獨(dú)設(shè)置左邊框樣式使用

border-right 設(shè)置右邊框，一般單獨(dú)設(shè)置右邊框樣式使用

border-top 設(shè)置上邊框，一般單獨(dú)設(shè)置上邊框樣式使用

border-bottom 設(shè)置下邊框，一般單獨(dú)設(shè)置下邊框樣式使用,有時(shí)可將下邊框樣式作為css下劃線效果應(yīng)用。

邊框樣式值如下：

none : 　無(wú)邊框。與任何指定的border-width值無(wú)關(guān)

hidden : 　隱藏邊框。IE不支持

dotted : 　在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為點(diǎn)線。否則為實(shí)線（常用）

dashed : 　在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為虛線。否則為實(shí)線（常用）

solid : 　實(shí)線邊框（常用）

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

上右下左

groove : 　根據(jù)border-color的值畫3D凹槽

ridge : 　根據(jù)border-color的值畫菱形邊框

inset : 　根據(jù)border-color的值畫3D凹邊

outset : 　根據(jù)border-color的值畫3D凸邊

上右下左

簡(jiǎn)寫

border:5px solid red;

7. 文字屬性

color:red; 文字顏色 #ffeeees

font-size:12px; 文字大小

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

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

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

8. 文本屬性

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

line-height:10px; 行間距(可通過(guò)它實(shí)現(xiàn)文本的垂直居中)

text-indent:20px; 首行縮進(jìn)

text-decoration:none;

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

letter-spacing: 字間距

9. 列表

list-style-type 設(shè)置列表項(xiàng)標(biāo)記的類型。參閱：list-style-type 中可能的值。

list-style-position 設(shè)置在何處放置列表項(xiàng)標(biāo)記。參閱：list-style-position 中可能的值。

list-style-image 使用圖像來(lái)替換列表項(xiàng)的標(biāo)記。參閱：list-style-image 中可能的值。

inherit 規(guī)定應(yīng)該從父元素繼承 list-style 屬性的值

| upper-alpha | none | inherit

disc: 點(diǎn)

circle: 圓圈

square: 正方形

decimal: 數(shù)字

decimal-leading-zero: 十進(jìn)制數(shù)，不足兩位的補(bǔ)齊前導(dǎo)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: 亞美尼亞數(shù)字

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

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

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

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

inherit:繼承

list-style-position

inside

列表項(xiàng)目標(biāo)記放置在文本以內(nèi)，且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊。

outside

默認(rèn)值。保持標(biāo)記位于文本的左側(cè)。列表項(xiàng)目標(biāo)記放置在文本以外，且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊。

簡(jiǎn)寫

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

10. 超鏈接

a{text-decoration: none;}

a:link {color:#FF0000;} /* 未訪問(wèn)的鏈接 */

a:visited {color:#00FF00;} /* 已訪問(wèn)的鏈接 */

a:hover {color:#FF00FF;} /* 鼠標(biāo)劃過(guò)鏈接 */

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

11. 盒子模型

盒子模型的組成部分

外邊距（margin）、邊框（border）、內(nèi)邊距（padding）、內(nèi)容（content）四個(gè)屬性

自身的身高 width height

內(nèi)邊距 padding

盒子邊框 border

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

12. Border 邊框

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

單獨(dú)屬性:

border-widh:

border-style:

dotted 點(diǎn)狀虛線

dashed（虛線）

solid（實(shí)線）

double（雙實(shí)線）

border-color(顏色)

12.1. margin padding

padding:內(nèi)邊距

值：像素/厘米等長(zhǎng)度單位、百分比

padding:10px; 上下左右

padding:10px 10px; 上下左右

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

padding:10px 10px 10px 10px; 上右下左（設(shè)置4個(gè)點(diǎn)-->順時(shí)針?lè)较颍?/p>

單獨(dú)屬性

padding-top:

padding-right:

padding-bottom:

padding-left:

當(dāng)設(shè)置內(nèi)邊距的時(shí)候會(huì)把盒子撐大，為了保持盒子原來(lái)的大小，應(yīng)該高度和寬度進(jìn)行減小，根據(jù)width和height減小

margin 外邊距

值：與padding相同

單獨(dú)屬性：與padding相同

外邊距合并：兩個(gè)盒子同時(shí)設(shè)置了外邊距，會(huì)進(jìn)行一個(gè)外邊距合并

margin

margin:10px 上下左右都會(huì)騰出10px出來(lái)

margin:0px auto; 居中

13. float 脫離文檔流浮動(dòng)

left 元素向左浮動(dòng)。

right 元素向右浮動(dòng)

清除浮動(dòng)

clear: both;

left

right

14. 塊級(jí)元素、行內(nèi)元素

塊級(jí)元素：

他會(huì)獨(dú)占一行，在默認(rèn)情況下，其寬度自動(dòng)填滿其父元素的寬度；

塊級(jí)元素可以設(shè)置width、height屬性；

塊級(jí)元素即使設(shè)置了寬度也是獨(dú)占一行，塊級(jí)元素可以設(shè)置margin、padding屬性；

行內(nèi)元素：

行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排列在同一行里，直到行排不下，就自動(dòng)換行，其寬度隨內(nèi)容而變化；

行內(nèi)元素的width、height屬性則無(wú)效；

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

行內(nèi)元素轉(zhuǎn)換

display:none; 不顯示

display:block;變成塊級(jí)元素

display:inline; 變成行內(nèi)元素

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

塊級(jí)元素(block element）

address 地址

center 舉中對(duì)齊塊

div- 常用塊級(jí)容易

dl 定義列表

form 交互表單（只能用來(lái)容納其它塊元素）

h標(biāo)簽

hr 水平分隔線

ol 無(wú)需列表

ul有序列表

p 段落

pre 格式化文本

行內(nèi)元素：

a - 錨點(diǎn)

b - 粗體(不推薦)

br- 換行

code - 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)

em - 強(qiáng)調(diào)

i - 斜體

img - 圖片（特殊的內(nèi)聯(lián)元素，同時(shí)是內(nèi)聯(lián)替換元素，替換元素可以設(shè)置寬高）

當(dāng)圖片和DIV在一起時(shí)，圖片周圍會(huì)出現(xiàn)margin現(xiàn)象，即元素不重合貼在一起，為了解決這個(gè)問(wèn)題，設(shè)置img的css為{margin：0；display：block；border：0px}

input - 輸入框

label - 表格標(biāo)簽

select - 項(xiàng)目選擇

strong - 粗體強(qiáng)調(diào)

textarea - 多行文本輸入框

u - 下劃線

var - 定義變量

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

15. 溢出

overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。

visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。

hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。

scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。

16. 定位

position

static靜態(tài)定位（不對(duì)它的位置進(jìn)行改變，在哪里就在那里）

默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top,bottom, left, right 或者z-index 聲明）。

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

生成固定定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) "left", "top", "right"以及 "bottom"屬性進(jìn)行規(guī)定。

relative（相對(duì)定位）（參照物以他本身）

生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。

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

生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。

元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定

z-index

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

定位的基本思想: 它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。

ay01

absolute ['?bs?lu:t] 絕對(duì)的，完全的
active ['?ktiv] 活動(dòng)的，激活的，<a>標(biāo)簽點(diǎn)擊
align [?'lain] 對(duì)齊
alpha ['?lf?] 透明度，半透明
anchor ['??k?] 錨記<a>標(biāo)記是這個(gè)單詞的縮寫
arrow ['?r?u] 箭頭
auto ['?:t?u] 自動(dòng)的

day02

background ['b?kgraund] 背景
banner ['b?n?] 廣告, 橫幅
black [bl?k] 黑色
blink： [bli?k] 閃亮,閃爍
block [bl?k] 塊
blue [blu:] 藍(lán)色
body ['b?di] 主體，一個(gè)HTML標(biāo)記
bold [b?uld] 加粗
border ['b?:d?] 邊框、框線邊框
both [b?uθ] 兩者(都);兩個(gè)(都);是clear屬性的一個(gè)屬性值
bottom ['b?t?m] 底;底部，是一個(gè)CSS屬性
box [b?ks] 箱;盒;匣
br 換行標(biāo)記
bug [b?g] 程序設(shè)計(jì)上的錯(cuò)誤，漏洞等
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] 連結(jié)的
contact ['k?nt?kt] 聯(lián)系
content [k?n'tent] 內(nèi)容
css 層疊樣式表
cursor ['k?:s?] 鼠標(biāo)指針

day04

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

day05

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

day06

hand [h?nd] 手
head [hed] 頭部
height [hait] 高度
help [help] 幫助
here [hi?] 這里
hidden ['hidn] 被隱藏
home [h?um] 首頁(yè)
horizontal [,h?ri'z?ntl] 水平的
hover ['h?v?] 鼠標(biāo)指針經(jīng)過(guò)或稱為懸浮狀態(tài)

day07

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

day08

language ['l??gwid?] 語(yǔ)言
last [lɑ:st] 最后一個(gè)
left [left] 左邊
length [le?θ] 長(zhǎng)度
level ['levl] 級(jí)別，例如block-level就是塊級(jí)
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] 移動(dòng)

day09

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

day10

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

day11

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

day12

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

體屬性：(font)

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

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

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

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

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

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

修飾 {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();}

重復(fù) {background-repeat: no-repeat;}

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

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

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

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

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

縮進(jìn) {text-indent: 數(shù)值px;} /*一般給段落設(shè)置2em，縮進(jìn)兩個(gè)字符*/

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

詞間距word-spacing: normal;/*設(shè)置文本的詞間距，本質(zhì)是控制空格間距*/

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

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

邊框?qū)傩裕?(Border)

border-style: dotted;(點(diǎn)線) dashed;(虛線) solid; double;(雙線) groove;(槽線) ridge;(脊?fàn)? inset;(凹陷) outset;

border-width:; 邊框?qū)挾?/p>

border-color:#;

簡(jiǎn)寫方法border：width style color; /*簡(jiǎn)寫*/

列表屬性： (List-style)

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

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

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

定位屬性： (Position)

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

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

overflow: visible; hidden; scroll; auto;（設(shè)置溢出部分，分別是可見隱藏滾動(dòng) 和自適應(yīng)）

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%; /*設(shè)置行高*/

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

vertical-align:sub; /*下標(biāo)字*/

vertical-align:super; /*上標(biāo)字*/

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; /*文字右對(duì)齊*/

text-align:left; /*文字左對(duì)齊*/

text-align:center; /*文字居中對(duì)齊*/

text-align:justify; /*文字分散對(duì)齊*/

vertical-align屬性

vertical-align:top; /*垂直向上對(duì)齊*/

vertical-align:bottom; /*垂直向下對(duì)齊*/

vertical-align:middle; /*垂直居中對(duì)齊*/

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

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

二、CSS邊框空白

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

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

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

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

三、CSS符號(hào)屬性：

list-style-type:none; /*不編號(hào)*/

list-style-type:decimal; /*阿拉伯?dāng)?shù)字*/

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

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

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

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

list-style-type:disc; /*實(shí)心圓形符號(hào)*/

list-style-type:circle; /*空心圓形符號(hào)*/

list-style-type:square; /*實(shí)心方形符號(hào)*/

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

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

list-style-position:inside; /*縮進(jìn)*/

四、CSS背景樣式：

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

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

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

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

background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁(yè)默認(rèn)*/

background-repeat : no-repeat; /*不重復(fù)排列*/

background-repeat : repeat-x; /*在x軸重復(fù)排列*/

background-repeat : repeat-y; /*在y軸重復(fù)排列*/

指定背景位置

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

background-position : top; /*向上對(duì)齊*/

background-position : buttom; /*向下對(duì)齊*/

background-position : left; /*向左對(duì)齊*/

background-position : right; /*向右對(duì)齊*/

background-position : center; /*居中對(duì)齊*/

五、CSS連接屬性：

a /*所有超鏈接*/

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

a:visited /*瀏覽過(guò)的鏈接文字格式*/

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

a:hover /*鼠標(biāo)轉(zhuǎn)到鏈接*/

鼠標(biāo)光標(biāo)樣式：

鏈接手指 CURSOR: hand

十字體 cursor:crosshair

箭頭朝下 cursor:s-resize

十字箭頭 cursor:move

箭頭朝右 cursor:move

加一問(wèn)號(hào) 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

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

六、CSS框線一覽表：

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

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

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

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

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

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

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

border-top-style : solid/*設(shè)置上框線top樣式*/

其他框線樣式

solid /*實(shí)線框*/

dotted /*虛線框*/

double /*雙線框*/

groove /*立體內(nèi)凸框*/

ridge /*立體浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS邊界樣式：

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

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

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

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

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

序號(hào) 中文說(shuō)明標(biāo)記語(yǔ)法

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

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

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

4 字體風(fēng)格 {font-style:inherit|italic|normal|oblique}

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

6 字體顏色 {color:數(shù)值;}

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

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

9 字間距 {letter-spacing:數(shù)值|inherit|normal}

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

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

12 英文轉(zhuǎn)換 {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)

序號(hào) 中文說(shuō)明標(biāo)記語(yǔ)法

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

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

3 段首空格 {text-indent:數(shù)值|inherit}

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

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

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

背景樣式

序號(hào) 中文說(shuō)明標(biāo)記語(yǔ)法

1 背景顏色 {background-color:數(shù)值}

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

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

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

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

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

框架樣式(Box Style)

序號(hào) 中文說(shuō)明標(biāo)記語(yǔ)法

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

2 補(bǔ)　　白 {padding:padding-top padding-right padding-bottom padding-left}

3 邊框?qū)挾?{border-width:border-top-width border-right-width border-bottom-width border-left-width}

寬度值： thin|medium|thick|數(shù)值

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

5 邊框風(fēng)格 {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:長(zhǎng)度|百分比| auto}

8 高　　度 {height:數(shù)值|auto}

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

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

分類列表

序號(hào) 中文說(shuō)明標(biāo)記語(yǔ)法

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

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

3 符號(hào)列表 {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 鼠標(biāo)形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

更多交流，請(qǐng)登錄bbs.520it.com

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

WEB安全 DIV CSS基礎(chǔ)

. DIV和CSS樣式

2. 樣式表類型

2.1. 嵌入樣式表

2.2. 外部樣式

2.3. 內(nèi)聯(lián)樣式

3. 注釋

4. 樣式選擇器

5. 背景

6. 邊框

7. 文字屬性

8. 文本屬性

9. 列表

10. 超鏈接

11. 盒子模型

12. Border 邊框

12.1. margin padding

13. float 脫離文檔流浮動(dòng)

14. 塊級(jí)元素、行內(nèi)元素

您的項(xiàng)目需求

14. 塊級(jí)元素、行內(nèi)元素