基础篇:
一、三种样式选择器
属性选择器 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;
八、 设置显示器设备
|