Div+CSS基础用法整理(二)
2011-07-11 11:09:08 来源:未知 评论:0 点击:
五、 使用组选择器为不同元素应用相同的样式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
则h1,h2,h3,div元素的样式都为字体16像素,字体粗体
六、 伪类和选择符的配合使用
将伪类和类组合起来用,就可以在同一个页面中做几组不同的链接效果了,例如,我们定义一组链接为红色,访问后为蓝色;另一组为绿色,访问后为黄色:
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
现在应用在不同的链接上:
<a class="red" href="...">这是第一组链接</a>
<a class="blue" href="...">这是第二组链接</a>
七、CSS的最近优先原则
/*如果对一个元素定义了多次样式,则以最近的一级优先,最近一级的样式将覆盖其他 行内样式 >ID > Class >标记 */
以下是引用片段:
CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
<p>此处显示为红色</p>
<p class="blue">此处显示为蓝色</p>
<p class="blue" style="color:green">此处显示为绿色</p>
<p class="blue yellow">此处显示为黄色</p>
注意:
(1)注意样式的几个优先顺序(优先级由上至下递减,下面的样式覆盖上面的样式):
--元素style设定
--head区<style></style>中的设定
--外部引用css文件
(2)优先级不是按访问顺序来设定的,而是又css中的声明顺序来设的。
如上例中<p class="yellow blue">此处显示为黄色</p>也显示为黄色,因为在css定义中.yellow在.blue的后面。
八、 书写正确的链接样式
当用css定义链接的各种状态时,要注意书写的顺序即::link :visited :hover :active利用首字母:L V H A,你可以通过记忆LoVe,Hate,两个单词来记住其顺序。
:link --------链接的颜色
:visited -----鼠标点击后的颜色
:hover -------鼠标放上去未点的颜色(悬停)
:active-------鼠标点击瞬间的颜色
九、 :hover的灵活运用
IE6不支持除a标签以外的:hover属性,我们了解:hover属性是鼠标悬停效果。在IE7和FF中,对几乎任意元素都可以设置:hover属性效果。这对我们做不同的访问效果很好。
如:
p {
width : 360px;
height : 80px;
padding : 20px;
margin : 50px auto 0 auto;
border : 1px solid #ccc;
line-height : 25px;
background : #fff;
}
p:hover {
border : 1px solid #000;
background : #ddd;
}
----------------此效果针对IE7和FF
p a {
color : #00f;
text-decoration : none;
font-size : 13px;
}
p a:hover {
color : #036;
text-decoration : underline;
}
-----------------此效果针对IE6
十、 定义A标签要注意的小问题
当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式。
只定义了一个a:link时,一定要记得把其它三种状态定义出来!
十一、 禁止内容换行与强制内容换行
在表格或层中我们可能希望内容不换行或强制换行,我们可以通过一些css属性来达到这些要求。
禁止换行:white-space:nowrap
强制换行:word-break: break-all; white-space: normal;
相关热词搜索:Div + CSS ÷ ( ) 五 、 使用 组 选择 器
上一篇:Div+CSS基础用法整理(一)
下一篇:Div+CSS基础用法整理(二)