自己总结的css.docx

《自己总结的css.docx》由会员分享，可在线阅读，更多相关《自己总结的css.docx（31页珍藏版）》请在冰豆网上搜索。

自己总结的css

CSS的应用

1、长度单位

类型

单位

含义

示例

相

对

长

度

px

像素，根据显示设备的分辨率而确定的一个长度单位，显然，分辨率都为800*600的17寸显示器和52寸投影中，像素为100*80的绝对长度是不一样的，但同一显示设备中px值是绝对的。

p{font-size:

18px;}

将字号设置为18像素。

em

以目前字符高度为单位。

p{text-indent:

2em}

段落前空两个字符。

%

表示长度为参考标签的百分比，前面可以加“+”或“-”两个符号，如果参考对象没有确定值，则为标准值。

table{width:

80%;}

表示表格占父容器宽度的80%。

绝

对

长

度

in

英寸，1in=2.54cm，非国际单位，平时使用极少。

p{fline-height:

1in;}

行高为1英寸。

cm

厘米，国际标准单位，使用较少。

mm

毫米，国际标准单位，使用较少。

pt

点数，1pt=1/72in，基本的显示单位，较少使用。

p{font-size:

11pt;}

将字号设置为11点。

pc

印刷单位，应用在印刷行业中，1pc=12pt。

2、颜色值

表示方法

含义

示例

颜色名

使用系统预先定义好的颜色名称表示颜色，如red/green/blue分别表示红绿蓝。

a:

link{color:

gray;}

活动超链接颜色为灰色

十六进制

使用十六进制表示颜色，格式为#RRGGBB，RR表示红色分量值，GG表示绿色分量值，BB表示蓝色分量值。

font-color:

#ff0000

字体颜色为红色

background-color:

#800080

背景色为紫色

RGB分量

rgb（RR,GG,BB），RR表示红色分量值，GG表示绿色分量值，BB表示蓝色分量值，可以用数值或百分比形式表示。

color:

rgb（255,0,0）;

红色

color:

rgb（80%,0,0）;

暗红

3、字体属性

表示方法

含义

示例

font-family

所有字体

lucidaconsole”>hongen

font-style

字体是否倾斜

属性Normalitalicoblique

italic”>hongen

oblique；font-weight：

bold；font-size：

24pt”>hongen

oblique；font-weight：

bold；font-size：

24pt；>hongen

font-variant

字体是否用大小写

属性Normalsmall-capsboldbolderlithter等

small-caps”>hongen

font-size

定义字体的大小

属性NormalAbsolute-sizerelative-sizelengthpercentage

italicsmall-capsbold36pt,GlitzyCurl”>Leaf

4、CSS中的文本属性

属性名称

属性值

说明

color

十六进制、英文名称、三原色单位

颜色

letter-spacing

Normal正常显示

长度文本间隔

设置字符间距，

word-spacing

normal正常显示

长度文本间隔

设置文本中单词

white-space

normal文本自动处理换行

pre换行和空白受保护

nowrap强制在同一行显示

text-align

left（左）,right（右）,center（居中）,justify（两端对齐）

设置对象中首行文本的缩进值h1h1{text-align:

center}

text-decoration

underline（下划线）,overline（底线）,line-through（线穿过）,blink（闪烁）

文本修饰属性

h3{text-decoration:

underline}

text-indent

长度首行缩进

百分比同上

设置首行缩进，

p{text-indent:

1.0in}

line-height

像素行高

数字/百分比行高

元素的行高

div{font-size:

10pt；line-height:

2;}

text-transform

none正常显示可以包含大，小字符

capitalize字符串第一个字符大写

uppercase设置大写字符

lowercase设置小写字符

用来设置文本格式转换，capitalize（首字母大写）,uppercase（大写）,lowercase（小写）和none（无）

vertical-align

sub设置文字为下标

super设置文字为上标

top元件往上端靠齐

middle设置文字是在中线位置

bottom元件往下端靠齐

设某对象相对其他文本的位置

平方值：

3

super">2

5、CSS中背景的使用

属性名称

属性值

说明

color

定义前景色

颜色

color：

rgb（204，82，28）

background-attachment

scroll设置背景图像会随视窗滚动

条的移动而移动

fixed设置背景图像不会随视窗滚动条的移动而移动

背景是否随内容滚动

background-color

十六进background-color:

#ff0000

英文名称background-color:

red

三原色background-color:

rgb（255,0,0）

Transparentbackground-color:

transparent;透明

背景颜色

background-image

URLbackground-image:

url（"bg.jpg"）

背景图片

none不设置背景图片

背景图像

background-position

topleft设置背景图案出现在上左方。

topcenter设置背景图案出现在上方中间。

topright设置背景图案出现在上右方。

centerleft设置背景图案出现在中间左方。

centercenter设置背景图案出现在IE中间。

centerright设置背景图案出现中间右方。

bottomleft设置背景图案出现在下左方。

bottom设置背景图案出现在正下方。

bottomright设置背景图案出现在下右方

背景图片的位置

background-repeat

repeat将背景图案填满整个背景

repeat-x将背景图案在水平方向添满

repeat-y将背景图案在垂直方向添满

no-repeat图案只出现一次

背景图片是否以如何平铺

6、CSS中列表的使用

属性名称

属性值

说明

list-style-type

none无符号

disc实体的小圆点。

circle空心的小圆点。

square实心的小方块。

decimal1,2,3...

lower-romani,ii,iii...

upper-romanI,II,III...

lower-alphaa,b,c,d,e...

upper-alphaA,B,C,D,E...

列表项所使用标记符号的样式

list-style-position

inside清单项目较往右移

outside清单项目正常显示

列表项标记的放置位置

list-style-image

URLlist-style-image:

url（lmk.gif）

none不会显示任何图象

列表项标记的图像

7、CSS中边框的使用

属性名称

属性值

说明

border-color

十六进制可依序设置上，右，下，左线

英文名称border-color:

red（四边均为红色）

三原色border-color:

redgreen

（上下为红色，左右为绿色）

border-color:

redgreenblue

（上为红色、左右为绿色、下为蓝色）

border-color:

redgreenblueyellow

（上右下左分别为红绿蓝黄）

border-style

none不显示边线

dotted点线

dashed虚线

solid实线

double双线

border-width

长度border-width:

0.2cm0.3cm0.4cm0.5cmnoneborder-width:

1234

8、CSS中边界的使用

属性名称

属性值

说明

padding-bottom

长度/百分比

元件下端边线的空隙

padding-left

长度/百分比

元件左端边线的空隙

padding-right

长度/百分比

元件右端边线的空隙

padding-top

长度/百分比

元件上端边线的空隙

简易写法：

padding:

10pxpadding:

2px4pxpadding:

2px6px10pxpadding:

1px2px3px4px

margin-bottom

auto自动调整空隙

长度/百分比设置下端空隙

简化方案：

margin:

2px4px

margin:

2px6px10px

margin:

1px2px3px4px

常用网页顶格设置：

margin:

0;

margin-left

auto自动调整空隙

长度/百分比设置左端空隙

margin-right

auto自动调整空隙

长度/百分比设置右端空隙

margin-top

auto自动调整空隙

长度/百分比设置上端空隙

9、CSS中区块的使用

属性名称

属性值

说明

width

像素/百分比区块的宽度

auto

height

像素/百分比区块的高度

auto

min-height

像素像素/百分比区块最小高度

auto

max-height

像素像素/百分比区块最大高度

auto

min-width

像素像素/百分比区块最小宽度

auto

max-width

像素像素/百分比区块最大宽度

auto

10、CSS中浮动的使用

属性名称

属性值

说明

float

none正常显示

left左浮动

right右浮动

clear

none允许两边浮动

left不允许左边浮动

right不允许右边浮动

both不允许两边浮动

11、CSS中定位的使用

属性名称

属性值

说明

position

relative设置区块基准点为左上角

absolute设置网页的为基准点左上角

static无设置

left

auto以基准点定位在左边

像素/百分比定位在左边

top

auto以基准点定位在上边

像素/百分比定位在上边

right

auto以基准点定位在右边

像素/百分比定位在右边

bottom

auto以基准点定位在下边

像素/百分比定位在下边

z-index

auto自动调整高度

数字数字越大越往上层

12、CSS中溢出的使用

属性名称

属性值

说明

overflow

visible不剪切内容也不添加滚动

auto在必需时对象内容才会被

hidden不显示超过对象尺寸的内容

scroll总是显示滚动条

overflow-x

（同上）

overflow-y

（同上）

13、CSS中滚动条的使用

属性名称

属性值

说明

scrollbar-3dlight-color

颜色/十六进制滚动条亮边框

scrollbar-highlight-color

颜色/十六进制滚动条3D界面亮边

scrollbar-face-color

颜色/十六进制滚动条3D表面

scrollbar-arrow-color

颜色/十六进制滚动条方向箭头

scrollbar-shadow-color

颜色/十六进制滚动条3D暗边

scrollbar-darkshadow-color

颜色/十六进制动条暗边框

scrollbar-base-color

颜色/十六进制滚动条基准颜色

scrollbar-track-color

颜色/十六进制滚动条的拖动区域

14、SS链接、光标、DHTML、缩放

属性名称

属性值

说明

CSS中链接的使用

a:

link

表示该超链接文字尚未被点选

a:

visited

表示该超链接文字已被点选过

a:

active

表示该超链接文字正被点选,但未被放开

a:

hover

表示当鼠标停留在文字上

CSS中光标的使用

cursor

auto光标是手指

Crosshair光标是十子形

default光标是箭头

hand/pointer光标是手形

move光标是移动的符号text输入文字的符号

wait漏斗

help帮助

CSS中DHTML的使用

behavior

urlDHTML文件

CSS中缩放的使用

zoom

normal使用对象的实际尺寸

百分数/浮点实数放大缩小

15、CSS滤镜

属性名称

属性值

说明

Alpha滤镜的使用

opacity

0-100对象的亮度

style

1,2,3滤镜的样式

Blur滤镜的使用

add

true/false是否印象派

direction

0-360角度

strength

数字模糊度

Fliph、Flipv滤镜

无属性

DropShadow滤镜

color

颜色阴影颜色

offx

数字x坐标偏移

offy

数字y坐标偏移

positive

true/false是否建立透明

Glow滤镜

color

颜色发光颜色

strength

数字发光厚度

Gray,Invert,Xray

无属性

Shadow滤镜

color

颜色阴影颜色

direction

0-360阴影方向

16、CSS定义选择器

属性名称

属性值

说明

应用ID

每个ID在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID只用于页面的唯一元素,如页眉,主导航条,布局区块等

示例:

Thisparagraphhasredtext.

相应的CSS代码:

#hightlight{color:

#FFFFFF;}

将ID与选择器结合

/*适合所有h2标题*/

h2{color:

#333;font-size:

16px;}

/*只适合title的h2标题*/

h2#title{color:

#eee;}

相应的XHTML代码:

TitleOfMyArticle

ID的使用场合

对于每个ID,每个页面只能有一个元素使用该样式,因此ID应该为每个页面唯一存在并仅使用一次的元素不保留

避免使用ID的场合

当一个以上的地方需要使用同一CSS规则时,不应该使用ID

应用类

类可以无限次的使用,因此它是应用CSS的非常灵活的方法

hisparagraphhasredtext.

相关CSS代码:

.hightlight{color:

FFFFFF;}

结合多个类和ID

Beer

Spirtis

Cola

Lemonade

相应的CSS代码:

ul#drinks{color:

FF6600;}

.mix{Color:

#999999;}

.hot{Color:

#333333;}

利用类改写基本样式

p{Color:

#ff6600;}

.bleached{Color:

#ccc;}

相应的XHTML代码:

Thisparagraphhasredtext.

Thisparagraphhasredtext.

直接将类链接到元素上

p.bleached{color:

red;}

相应的XHTML代码:

Thisparagraphhasredtext.

避免,适合

对于class,如果多次重复使用或者使用子类选择器，那么就选择class，如果是定义唯一性的标记，比如布局，那么用id

17、CSS层叠

属性名称

例子

外部链接实现层叠

导入样式实现层叠

@importurl（“one.css”）

@importurl（“two.css”）

@importurl（“three.css”）

分组

h1{Font-family:

隶书,宋体,楷体;Line-height:

140%;Color:

#333;}

h2{Font-family:

隶书,宋体,楷体;Line-height:

140%;Color:

#333;}

h3{Font-family:

隶书,宋体,楷体;Line-height:

140%;Color:

#333;}

/*分组后*/h1,h2.h3{Font-family:

隶书,宋体,楷体;Line-height:

140%;Color:

#333;}

/*分组例外*/h1{Font-style:

italic;}

继承

h1{Color:

#333;}

Thisisthegreatestheadingintheworld

从BODY继承Body{Margin:

10px;Font-family:

隶书;Background:

#000;Color:

#fff;}

上下文选择器

h1{Color:

#ccc;}

i{Color:

#000;}

/*使用上下文选择器*/

h1I{Color:

#000;}

子类选择器

.box{color:

red;}

.box1{font-weight:

bold;}

.box2{font-style:

italic;}

Box