css应用

CSS语法

一：CSS调用格式

1。CSS文档放到文档中：

//*样式定义结束*// FILTER定义了滤镜属性，BLUR是它的属性值2。CSS代码中内嵌：

??

这种定义方法非常适用于编写的代码比较多的情况。

3。加入.css文件:

……

在中定义,其中

rel=stylesheet”指连接的元素是一个样式表（stylesheet）文档。

二：CSS的风格

1、字体属性

上述如果同时出现.它的排放规则是按照“font-style”、“font-variant”、“font-weight”、“font-size”、“font-family”.

2.颜色和背景属性

例:

........

..........

附：css文件中以” .”开头是自定的类符，以xx:开头是链接定义，以body开头表示整个页面体采用此定义。

3。ID选择符

定义ID选择符要在ID名称前加上一个“#”号, ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。且同类选择符一样，也有那A，B两种声明方式

A:把同元素分若干ID,B: 自定义一个ID任何元素可以调用它

例：#intro

{

font-size:110%; ....

}

4。包含选择符

对table里的tr进行样式定义

table tr

{

font-size: 12px

}

5。样式表的层叠性

例：

div { color: red; font-size:9pt}

这里是文字

在定义了样式的div里若有元素，比如p。则该元素也继承了这种样式。但若此时p也在其后还加了自已的样式，则以最后的样式为准，即以p自定义的样式为准

6．实例分析

.DIV {

FONT-SIZE: 15px; FONT-FAMILY: 宋体

}

A:link {

FONT-SIZE: 13px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #333333;

FONT-FAMILY: 宋体; TEXT-DECORATION: none

}

A:active {

FONT-SIZE: 13px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #ff0000; FONT-FAMILY: 宋体; TEXT-DECORATION: none

}

A:visited {

FONT-SIZE: 13px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #333333; FONT-FAMILY: 宋体; TEXT-DECORATION: none

}

A:hover {

FONT-SIZE: 13px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #ff0000; FONT-FAMILY: 宋体; TEXT-DECORATION: none

}

.bigtitle {

FONT-WEIGHT: bold; FONT-SIZE: 15pt; FILTER: DropShadow(Color=black, OffX=0, OffY=0, Positive=0); WIDTH: 100%; COLOR: #333333; FONT-FAMILY: 宋体

}

.nav {

COLOR: #006600

}

.nav A {

FONT-SIZE: 15px; COLOR: #333333; FONT-FAMILY: Tahoma; TEXT-DECORATION: none

}

.nav A:hover {

COLOR: #009900; TEXT-DECORATION: underline

}

.menu {

COLOR: #0080C0

}

.menu A:link {

COLOR: #10218B; TEXT-DECORATION: none

}

.menu A:hover {

COLOR: blue; TEXT-DECORATION: none

}

.menu A:active {

COLOR: #009900; TEXT-DECORATION: none

}

.menu A:visited {

COLOR: #800000; TEXT-DECORATION: none

}

.storytitle {

FONT-SIZE: 15px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #333333; FONT-FAMILY: 宋体; TEXT-DECORATION: none

}

.storytitle A:link {

FONT-SIZE: 1px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #333333; FONT-FAMILY: 宋体; TEXT-DECORATION: none

}

.storytitle A:active {

FONT-SIZE: 15px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #333333; FONT-FAMILY: 宋体; TEXT-DECORATION: none

}

.storytitle A:visited {

FONT-SIZE: 15px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #333333; FONT-FAMILY: 宋体; TEXT-DECORATION: none

}

.storytitle A:hover {

FONT-SIZE: 15px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #333333; FONT-FAMILY: 宋体; TEXT-DECORATION: none

}

.FORM {

FONT-SIZE: 15px; FONT-FAMILY: 宋体

}

.SELECT {

FONT-SIZE: 15px; FONT-FAMILY: 宋体

}

.TEXTAREA {

FONT-SIZE: 15px; FONT-FAMILY: 宋体

}

INPUT {

FONT-SIZE: 15px; FONT-FAMILY: 宋体; BACKGROUND-COLOR: #f0f0f0

}

.build{

FONT-SIZE: 15px; FONT-FAMILY: 楷体_GB2312; color:#006600

}

七：使用纯 CSS 设计3D按钮

div#button

{

border-style: outset

}

border-style: outset和 border-style: inset outset属性模拟凸起按钮的阴影边缘，

inset 属性通过反转阴影来模拟按钮被按下的情景。

八：用CSS floats创建三栏页布局（上、中（左，右）、下）

Header

Port side text...

Starboard side text...

Middle column text...

Footer text...

下面是CSS代码：

body {

margin: 0px;

padding: 0px;

}

div#header {

clear: both;

height: 50px;

background-color: aqua;

padding: 1px;

}

div#left {

float: left;

width: 150px;

background-color: red;

}

div#right {

float: right;

width: 150px;

background-color: green;

}

div#middle {

padding: 0px 160px 5px 160px; margin: 0px;

background-color: silver;

}

div#footer {

clear: both;

background-color: yellow;

}

九：用CSS缩写给你的网站加速

.sample1

{

margin-top: 15px;

margin-right: 20px;

margin-bottom: 12px;

margin-left: 24px;

padding-top: 5px;

padding-right: 10px;

padding-bottom: 4px;

padding-left: 8px;

border-top-width: thin;

border-top-style: solid;

border-top-color: #000000;

}

缩写后:

.sample1

{

margin: 15px 20px 12px 24px;

padding: 5px 10px 4px 8px;

border-top: thin solid #000000; }

鼠标按钮形状：

CSS代码鼠标形状

style="cursor:hand"手形

style="cursor:crosshair"十字形

style="cursor:text"文本形

style="cursor:wait"沙漏形

style="cursor:move"十字箭头形

style="cursor:help"问号形？

style="cursor:e-resize"改变长度的左右箭头形

style="cursor:n-resize"改变高度的上下箭头形

style="cursor:nw-resize"改变长度与高度的左上右下箭头形

style="cursor:w-resize"改变长度的左右箭头形

style="cursor:s-resize"改变高度的上下箭头形

style="cursor:se-resize"改变长度与高度的左上右下箭头形

style="cursor:sw-resize"变长度与高度的右上左下箭头形