CSS汇总

CSS的文件格式
1.每种不同款式，定义一个css。按钮A一个css，按钮B虽然长得跟A一样，但是在右边，那就copy下A的css代码，然后改成在右边。
.a{/* 很多样式定义 */}
.b{/* 很多样式定义 */ text-align:center;}
.c{/* 很多样式定义 */ text-align:right;}
<div class="a">按钮A</div>
<div class="b">按钮B</div>
<div class="c">按钮C</div>

2.针对不同地方，利用css层级覆盖来实现。比如按钮A设定css，然后对于特别的页面，设定特别的css来覆盖
.a{/* 很多样式定义 */}
#s1 .a{text-align:center;}
#s2 .a{text-align:right;}
<div class="a">按钮A</div>
<div id="s1"><div class="a">按钮B</div></div>
<div id="s2"><div class="a">按钮C</div></div>

3.利用css组合来实现。如上面的代码片段，设定css基础类，然后进行组合。对于按钮A，它的class为x，在右边的按钮B，它的class为x tar，对于B来说，它的样式就是x与tar组合起来的。
.a{/* 很多样式定义 */}
.tac{text-align:center;}
.tar{text-align:right;}
<div class="a">按钮A</div>
<div class="a tac">按钮B</div>
<div class="a tar">按钮C</div>

4.接内嵌style来解决。
.a{/* 很多样式定义 */}
<div class="a">按钮A</div>
<div class="a" style="text-align:center">按钮B</div>
<div class="a" style="text-align:right">按钮C</div>

 

 

CSS属性

1、 字体属性

　　这是最基本的属性，您经常都会用到。它主要包括以下这些属性：
font-family   使用什么字体  所有的字体类型
font-style    字体是否倾斜    Normal、italic、oblique
font-variant   字体是否用小体大写   Normal、small-caps
font-weight    定义字体的粗细   Normal、bold、bolder、lithter等
font-size     定义字体的大小   Absolute-size、relative-size、length、percentage等

例：
　　<p style=“font-family：lucida console”>hongen</p>
　　<p style=“font-style：italic”>hongen</p>
　　<p style=“font-style：oblique；font-weight：bold；font-size：24pt”>hongen</p>
　　<p style=“font-style：oblique；font-weight：bold；font-size：24pt；font-variant：small-caps”>hongen</p>

　　<p style=“font：italic small-caps bold 36pt,GlitzyCurl”>Leaf</p>
    <p style=“font-style：italic；font-variant：small-caps；font-weight：bold；font-size：36pt；font-family：GiltzyCurl”>Leaf</p>

2、颜色和背景属性
color  定义前景色   颜色
background-color   定义背景色   颜色
background-image   定义背景图案   图片路径
background-repeat   背景图案重复方式   repeat-x, repeat-y,norepeat
background-attachment   设置滚动   scroll,fixed
background-position   背景图案的初始位置   percentage,length,top,left,right,bottom等

例：
    color：rgb（204，82，28）；
　　background-img：url(ss01038.jpg)；
　　background-repeat：no-repeat；margin-right：15em

属性：background 属性值：<background-color>||<background-image>|| <background-repeat>||<background-attacement>||<background-position>

3、文本属性
word-spacing  定义了各个单词之间的间距   normal<length>(必须以长度为单位)
letter-spacing   定义了每个字母之间的间距   同上
text-decoration    定义文字的装饰样式   none,underline,overline,line-through,blink
vertical-align   定义了元素在垂直方向上的位置   baseline,sub,super,top,text-top,middle,bottom,text-bottom,<percentage>
text-transform  使文本转换为其他形式  capitalize,uppercase,lowercase,none
text-align   定义了文字的对齐方式  left,right,center,justify
text-indent   定义了文字的首行的缩进方式   <length>,<percentage>
line-height  定义了文本的行高  normal,<number>,<length>,<percentage>

例：
<p style=“letter-spacing：1em；text-align：justify；text-indent：
　　4em；line-height：17pt”>……</p>

4. "容器"属性
4.1  边距属性
margin-top   设置顶端边距   length,percentage,auto
margin-right   设置右侧边距   同上
margin-bottom   设置底端边距  同上
margin-left   设置左侧边距   同上

例：
body{margin：1em 2em 3em 4em}
　　//*定义文本的上、右、下、左的边距分别为1、2、3、4em*//

4.2  填充距属性
padding-top    设置顶端填充距   length,percentage
padding-right   设置右侧填充距   同上
padding-bottom   设置底端填充距  同上
padding-left   设置左侧填充距 同上

例：
padding：1em 2em 3em 4em

4.3  边框属性
border-top     设置顶端边框宽度    thin,medium,thick,length
border-right-width   设置右侧边框宽度    同上
border-bottom-width   设置底端边框宽度    同上
border-left-width    设置左侧边框宽度   同上
border-width   一次定义边框宽度   同上
border-color   设置边框颜色   color
border-style   设置边框样式   none,dotted,dash,solid,double,groove,ridge,inset,outset
border-top    一次定义顶端的各种属性  border-top-width,border-style,color
border-right   一次定义右侧的各种属性  同上
border-bottom   一次定义底端的各种属性   同上
border-left    一次定义左侧的各种属性  同上

例：
P{border：5px double purple}//*定义了四条边框为一样的值*//

4.4  图文混排
width   定义宽度属性   length,percentage,auto
height   定义高度属性   length,auto
float   使文字环绕在一个元素的四周   left,right,none
clear    定义某一边是否有环绕文字   left,right,none,both

分级属性
Display   定义是否显示     Block、inline、list-item、none
White-space   怎样处理空白     Normal、pre、nowrap
List-style-type     加项目编号      Disc、circle、square等
List-style-image    加图案    <url>|none
List-style-position     第二行起始位置     Inside、outside
List-style         一次定义列表     <keyword>|<position>|<url>

6. 鼠标属性
auto   自动，按照默认状态自行改变
crosshair   精确定位十字
default   默认指针
hand  手形
move  移动
e-resize   箭头朝右方
ne-resize   箭头朝右上方
nw-resize   箭头朝左上方
n-resize  箭头朝上方
se-resize   箭头朝右下方
sw-resize   箭头朝左下方
s-resize    箭头朝下方
w-resize   箭头朝左方
text   文本I形
wait   等待
helt    帮助

 

CSS定位
1.  动态转换
position    定义位置    absolute, relative, static
left,top   指定横向,纵向坐标位置    length,percentage,auto
width,height   指定占用空间的大小     同上
clip    剪切     shape,auto
overflow     内容超出时的处理方法     visible,hidden, scroll,auto
z-index   产生立体效果    auto,integer
visibility    定义可见性    inherit,visible, hidden

 

 

在网页中插入CSS
1.链入外部样式表
<head>
……
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
……
</head>

2. 内部样式表
<head>
……
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
……
</head>

3. 导入外部样式表
<head>
……
<style type=”text/css”>
<!--
@import “mystyle.css”
其他样式表的声明
-->
</style>
……
</head>

4. 内嵌样式
<p style="color: sienna;margin-left: 20px;">
这是一个段落
</p>
<!--这个段落颜色为土黄，左边距为20象素-->

 

 

 

浏览器安全色表

FFF  FFF

CCC  CCC

999  999

666  666

333  333

000  000

FFC  C00

FF9  900

FF6  600

FF3  300

99C  C00

CC9  900

FFC  C33

FFC  C66

FF9  966

FF6  633

CC3  300

CC0  033

CCF  F00

CCF  F33

333  300

666  600

999  900

CCC  C00

FFF  F00

CC9  933

CC6  633

330  000

660  000

990  000

CC0  000

FF0  000

FF3  366

FF0  033

99F  F00

CCF  F66

99C  C33

666  633

999  933

CCC  C33

FFF  F33

996  600

993  300

663  333

993  333

CC3  333

FF3  333

CC3  366

FF6  699

FF0  066

66F  F00

99F  F66

66C  C33

669  900

999  966

CCC  C66

FFF  F66

996  633

663  300

996  666

CC6  666

FF6  666

990  033

CC3  399

FF6  6CC

FF0  099

33F  F00

66F  F33

339  900

66C  C00

99F  F33

CCC  C99

FFF  F99

CC9  966

CC6  600

CC9  999

FF9  999

FF3  399

CC0  066

990  066

FF3  3CC

FF0  0CC

00C  C00

33C  C00

336  600

669  933

99C  C66

CCF  F99

FFF  FCC

FFC  C99

FF9  933

FFC  CCC

FF9  9CC

CC6  699

993  366

660  033

CC0  099

330  033

33C  C33

66C  C66

00F  F00

33F  F33

66F  F66

99F  F99

CCF  FCC

CC9  9CC

996  699

993  399

990  099

663  366

660  066

006  600

336  633

009  900

339  933

669  966

99C  C99

FFC  CFF

FF9  9FF

FF6  6FF

FF3  3FF

FF0  0FF

CC6  6CC

CC3  3CC

003  300

00C  C33

006  633

339  966

66C  C99

99F  FCC

CCF  FFF

339  9FF

99C  CFF

CCC  CFF

CC9  9FF

996  6CC

663  399

330  066

990  0CC

CC0  0CC

00F  F33

33F  F66

009  933

00C  C66

33F  F99

99F  FFF

99C  CCC

006  6CC

669  9CC

999  9FF

999  9CC

993  3FF

660  0CC

660  099

CC3  3FF

CC0  0FF

00F  F66

66F  F99

33C  C66

009  966

66F  FFF

66C  CCC

669  999

003  366

336  699

666  6FF

666  6CC

666  699

330  099

993  3CC

CC6  6FF

990  0FF

00F  F99

66F  FCC

33C  C99

33F  FFF

33C  CCC

339  999

336  666

006  699

003  399

333  3FF

333  3CC

333  399

333  366

663  3CC

996  6FF

660  0FF

00F  FCC

33F  FCC

00F  FFF

00C  CCC

009  999

006  666

003  333

339  9CC

336  6CC

000  0FF

000  0CC

000  099

000  066

000  033

663  3FF

330  0FF

00C  C99

009  9CC

33C  CFF

66C  CFF

669  9FF

336  6FF

003  3CC

330  0CC

00C  CFF

009  9FF

006  6FF

003  3FF