|
基础篇：
一、三种样式选择器
属性选择器 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; }
按顺序调用不同平台的默认字体
五、如何解决旧浏览器不支持CSS的情况
使用群选择器 例如：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嵌入
一、 外联样式表：
<link rel=”StyleSheet” href=”/css/basic.css” type=”text/css” media=”all”>
<style type=”text/css” media=”all>
@import url(“/Styles/mystylesheet.css”);
</style>
注意：使用@import用来对IE4.0以下浏览器进行屏蔽
二、 嵌入式样式表：
<head>
<style type=”text/css” >
<!- -
Body {color:red;}
- ->
</style>
</head>
注意：为了IE3下访问站点，我们可以使用嵌入式样式表（建议在页面中使用内联成功后，剪切到外联样式表中）
CSS混合布局应用
www.i3forum.com
一、 Margin（框距）padding（边框距）
margin属性设置顺序：上左下右
padding属性设置顺序：上左下右
margin:25px 0 25px 0;
简写：margin:25px 0;
二、Display显示属性设置
（1）、Display属性none (隐藏)
.alt {display:none;}
<span class=”alt”>Content List Part</span>
（2）、Display属性block (块/区域)
Img {display:block;}
<img href=”1.gif”></img>
块级元素：存在自身的“盒”中，后面跟随一个默认的回车
内联元素：是流的一部分，后面不跟随回车
（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; 等于 <td valign=”middle”>设置垂直对齐
（2） background:none 等于 background:url(images/1.gif) repeat;
八、 设置显示器设备
<style type=”text/css” media=”screen”> media属性
使用HTML4.01转换到XHTML1.0过渡式transitional
（早期的基于Gecko核心的浏览器如：netscpae6.0 Mozilla1.0）
一、 在Gecko核心浏览器清除CSS间隙
规则如下：
Img {display:block;} 使用块级元素清楚间隙
.inline {display:inline;} 使用内联元素显示方式
页面如下：
<img class=”inline” alt=”/” />
也可用
Td img {display:block;}
二、在Gecko核心img默认作为内联函数处理
在内联元素下方默认留有空白，这是为了给所包含的块下行字母流出的空间
盒模型、Bug和工作区
CSS四个区域：内容、边框距、边界和边距
在使用CSS设置表格之前：
{width:400px; height:75px;}
错误的理解：表格面积＝400px; height:75px;
实际上CSS设置的表格：
Width:400px height:75px 内容为 Content
那么整个盒的面积为：Content＋padding*2+border*2
盒模式失效及解决办法：（IE4到IE5.5/Windows）
正确理解盒模式的浏览器
（IE6/WIN,IE5/MAC,Netscpae6+,Mozilla,Chimera,Kmeleon,Opera5+）
Float漂浮属性用来使用在两在不同ID选择器中相连
{float:left;}
对于使用padding的表格将使用以下解决方法：
Oprea友好规则（Box盒状模型）
解决办法：
#nav
{
width:151px;/* False value for IE4-5.x/Win */
voice-family:"\"}\"";
没有相关教程
| 
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
