Chinaunix首页 | 论坛 | 博客
  • 博客访问: 15182876
  • 博文数量: 7460
  • 博客积分: 10434
  • 博客等级: 上将
  • 技术积分: 78178
  • 用 户 组: 普通用户
  • 注册时间: 2008-03-02 22:54
文章分类

全部博文(7460)

文章存档

2011年(1)

2009年(669)

2008年(6790)

分类:

2008-05-13 17:36:02

基础篇:



一、三种样式选择器

属性选择器 p {color:red;}

类选择器 .p {color:red;}

ID选择器 #p {color:red;}

二、transparent

Background:transparent; 防止定义背景被覆盖

三、Netscape4.X(IE/WINDOWS4.0以前的版本)下错误的透明背景理解

Background:inhrit; 在netscape4.x下透明背景将被理解为黑绿

四、字体默认选择:

Body {font-family:”lucida Grande”,Verdana,Lucida,Arial,Helvetica,sans-serif; }

按顺序调用不同平台的默认字体

五、如何解决旧浏览器不支持的情况

使用群选择器 例如:p,td,ul,ol,li,dl,dt,dd {font-size:small;}

六、使用netscape4友好规则

Body {font-family:Verdana,sans-serif;}

p,td,ul,ol,li,dl,dt,dd {font-size:small;}

七、重载细节规则:

Body {font-family:Verdana,sans-serif;}

p,td,ul,ol,li,dl,dt,dd {font-size:small;}

p {font-family:times,”Times New Roman”,serif;}

八、内容(派生)选择器

Li strong {font-style:italic; font-weight:normal }

例如:strong {color:red;} h2{color:red;} strong h2 {color:blue;}

例如:#sidebar {color:red} #sidebar p {color:blue;}

例如:.fancy {color:red;} .fancy p {color:blue;} / li.fancy {color:black;}





CSS嵌入



一、  外联样式表:





注意:使用@import用来对IE4.0以下浏览器进行屏蔽

二、  嵌入式样式表:







注意:为了IE3下访问站点,我们可以使用嵌入式样式表(建议在页面中使用内联成功后,剪切到外联样式表中)





CSS混合布局应用









一、  Margin(框距)padding(边框距)

margin属性设置顺序:上左下右

padding属性设置顺序:上左下右

margin:25px 0 25px 0;

简写:margin:25px 0;

二、Display显示属性设置

(1)、Display属性none  (隐藏)

.alt {display:none;}

Content List Part

(2)、Display属性block  (块/区域)

Img {display:block;}



块级元素:存在自身的“盒”中,后面跟随一个默认的回车

内联元素:是流的一部分,后面不跟随回车

(3)、Display属性inline

区别block元素,使用inline状态时,显示方式按照内联元素显示

三、  动态链接属性设置:

a:link {                                         

font-weight : bold;

text-decoration : none;

color: #c30;

background: transparent;

}





a:visited {

font-weight : bold;

text-decoration : none;

color: #c30;

background: transparent;

}

a:hover {

font-weight : bold;

text-decoration : underline;

color: #f60;

background: transparent;

}





a:active {

font-weight : bold;

text-decoration : none;

color: #f90;

background: transparent; 

}

(1)             文字修饰属性(text-decoration)

Text-decoration:underline overline none;

Underline:链接时有下划线

Overline:连接时有上划线

None:连接时无下划线

(2)             动态连接属性顺序

(LVHA)- LoVe-HA!

(3)             IE/WINDOWS的伪装欺骗性

应避免使用a:active属性:出现bug 连接会出现冻结现象

四、  如何设置行高(line-height)

Line-height:1.5;

五、  如何设置文章位置(text-align)

可选择属性(left middle right)

IE6/WINDOWS的BUG会错误使文档居中

六、  对于字体的完整CSS应用

Font:13px/1.5 Georigia,”New Centeury Schoolbook”,Times,serif;

七、  设置页面分界限

(1)         vertical-align:middle; 等于 设置垂直对齐

(2)         background:none 等于 background:url(images/1.gif) repeat;

八、  设置显示器设备