【css+div】CSS样式基础学习教程系列-CSS定义中的注意事项

林氏智造 于 2013-12-08 发布 2666 人已阅

【CSS的最近优先原则】
如果对一个元素定义了多次样式,则以最近的一级优先,最近一级的样式将覆盖其它行内样式 >ID > Class >标记。例如以下是引用片段
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
 
HTML中

此处显示为红色


此处显示为蓝色


此处显示为绿色


此处显示为黄色


 
注意:
(1)注意样式的几个优先顺序(优先级由上至下递减,下面的样式覆盖上面的样式)。包括:元素style设定、head区中的设定、外部引用css文件。
(2)优先级不是按访问顺序来设定,而是在css中的声明顺序来设的。如上例中:

此处显示为黄色

,也显示为黄色,因为在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 {------此效果针对IE7和FF
    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;
}
----------
p a {------此效果针对IE6
    color : #00f;
    text-decoration : none;
    font-size : 13px;
}
p a:hover {
    color : #036;
    text-decoration : underline;
}
 
【定义A标签要注意的小问题】
当我们定义a{color:red;}时,它代表了a的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式。
只定义了一个a:link时,一定要记得把其它三种状态定义出来!

【禁止内容换行与强制内容换行】
在表格或层中可能希望内容不换行或强制换行,可以通过定义一些css属性来达到要求。如:
禁止换行:white-space:nowrap
强制换行:word-break: break-all; white-space: normal;

【区别relative和absolute】
absolute---CSS中的写法是:position:absolute; 意思是绝对定位,是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
relative---CSS中的写法是:position:relative; 他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

【区别块级元素block和内联元素inline】
块级,可定义宽高,另起独占一行。(如:div ul)
内联,不可定义宽高,如文本元素。 (如a span)

【区别display和visibility】
display:none和visibility:hidden都可以隐藏一个元素,但visibility:hidden只是隐藏了元素的内容,但其使用的位置空间仍然被保留。而display:none则相当把元素从页面中去除,其占用位置也将被删除。

标签

您可能感兴趣的文章

如何优雅的选择字体(font-family)

当前项目对字体要求很高,之前对font-family这个属性没怎么仔细去研究它,现在整理了一个通用方案适合大多数网站使用。

React+webpack 部署概要

React+webpack 组合已经成为开发react的经典搭配,把常用的webpack配置文件和一些react的常用代码规范记录下方便以后开发使用

gulp前端自动化部署方案

gulp 前端自动化代码,根据自己的项目需求编写,包括压缩合并css,压缩合并js,雪碧图,版本号插入等功能

纯CSS制作各种图形

用图片做图标会加大页面的大小,现在能用CSS写图标就用CSS写,维护起来也方便加载速度也快