CSS样式之position、opacity、cursor

1.position 位置
1)relative 相对于本身原来的位置 设置TRBL(top right bottom left
优点:不会影响周围元素的位置
2)absolute 若父亲或父亲以上的对象设置position为absolute或relative时,
此时的位置是相对于父元素的padding开始的地方
3)fixed fixed是特殊的absolute 始终按浏览器定位,不受父元素的影响。
4)static 默认值
可参考 http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html

2.opacity 透明度 取值范围是0~1之间,不可为负值
.transparent_class {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width:300px;
height:300px;
line-height:300px;
text-align:center;
background:#000;
color:#fff;
/* older safari/Chrome browsers */
-webkit-opacity: 0.5;
/* Netscape and Older than Firefox 0.9 */
-moz-opacity: 0.5;
/* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
-khtml-opacity: 0.5;
/* IE9 + etc...modern browsers */
opacity: .5;
/* IE 4-9 */
filter:alpha(opacity=50);
/*This works in IE 8 & 9 too*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*IE4-IE9*/
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

3.cursor 光标图案
取值:
auto : 默认值。浏览器根据当前情况自动确定鼠标光标类型。
all-scroll : IE6.0 有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
col-resize : IE6.0 有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
crosshair : 简单的十字线光标。
default : 客户端平台的默认光标。通常是一个箭头。
hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
move : 十字箭头光标。用于标示对象可被移动。
help : 带有问号标记的箭头。用于标示有帮助信息存在。
no-drop : IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
not-allowed : IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
pointer : IE6.0 和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
progress : IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
row-resize : IE6.0 有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
vertical-text : IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
*-resize : 用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
url ( url ) : IE6.0
用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。

时间: 2024-11-06 11:43:08

CSS样式之position、opacity、cursor的相关文章

css样式中position和_position的区别

position:fixed; 相对于浏览器窗口绝对定位._position:absolute; 只有IE6能识别, IE6不支持fixed, 所以针对IE6使用absolute绝对定位, 一般还要配套一个expression脚本来实现 属性expression_r:针对ie6写的 CSS的出现使网页制作者在对网页元素的控制方便许多,当然,有利必有弊,CSS只能对颜色.大小.距离等静态样式有效,对于要实现某些html元素的动态样式就显得有些力不从心. 有了CSS的自定义属性expression_

css样式中position:absolute和position:relative水平居中

首先我们要了解样式中的这两种定位: absolute(绝对定位):将被赋予的对象从文档流中拖出,使用left,right,top,bottom等属性相对于最接近的一个最有定位设置的父级对象进行绝对定位,如果父级没有进行定位属性设置,则按照默认规则来设定(根据body左上角作为参考进行定位),同时绝对定位的对象可层叠. relative(相对定位):对象不可重叠,使用left,right,top,bottom等属性在正常的文档流中进行定位,其对象不可以层叠. 居中: 1,对于使用了absolute

css 样式表 - position

在布局的时候,有时会使用position这个属性.但为了使我们的视图更加易于维护,来了解一下它有哪些用途 Position可能的取值: 1. absolute: 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位. 元素的位置通过 left, top, right, 以及bottom属性进行设置. 2. fixed: 生成绝对定位的元素,相对与浏览器窗口进行定位.元素的位置通过left, top, right 以及bottom属性进行设置. 3. relative: 生成相对定

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

我的博客园CSS样式分享

过完年又开始上班了,已经从2月25连续加班到现在,晚上11点多才回去,也没时间写文章了. 先分享一下我的博客园的CSS吧. 我的博客皮肤最开始的时候是参考共享一下我的自定义CSS博客皮肤(2012.3) 修改的. 使用的是LessIsMore皮肤 下面是自定义的CSS样式 @charset "utf-8"; body { font-size: 15px; padding: 0; margin: 0; font-family: "微软雅黑", "宋体&quo

CSS样式第四篇

?针对现在网站的图片过大问题,可以用相应的工具进行压缩,并且可对图片进行切割处理. 1.如果一个页面的图片过大,可以对其切割,代码<img src="1.jpg"><img src="2.jpg"><img src="3.jpg">,如这样排列的图片不是块元素,中间会有空隙,要把图片写成块元素.Img {display:block;} 1.对网站中的图片处理,要保证做一个静态网页,对图片的处理要做到尽量不变形.

CSS样式表--基础知识

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

HTML——CSS样式表&amp;布局页面

CSS样式表: 一.作用:美化网页,页面布局. 二.分类: 内联,写在body里标签style=""里面的样式,优点是控制精确,可重用性差. 内嵌,嵌在网页的head里面,可重用性高 外部,样式写在另一个文件里面,如果要用直接附加过来. 优先级:内联>内嵌>外部 三.选择器: * 代表所有的元素 一般的网页都需要在写这个样式,去掉有些标签自带的边界,auto代表居中,如:*{  margin: 0px auto;  padding:0px; } 标签选择器:用标签的名字来选

CSS样式之语法

选择符 选择符 {属性1:属性值1;属性2:属性值2} 选择符(selector):指定样式适用的标签,除指定标签外,样式不起作用 属性:样式的关键字 属性值:描述样式的值: 格式:属性与属性之间使用分号分隔,属性与属性值之间使用冒号分隔 选择符 任何HTML元素都可以是一个CSS选择符 选择符仅仅是指向特别样式的元素 如:P {font-size:12pt}当中的选择符是P 分类 类选择符 id选择符 关联选择符 类选择符 类选择符—css_choose.html 单一个选择符能有不同的CLA