转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> 网页制作 >> 正文
CSS的各种属性(鼠标 分级 容器)         ★★★★

CSS的各种属性(鼠标 分级 容器)

作者:闵涛 文章来源:闵涛的学习笔记 点击数:617 更新时间:2009/4/23 13:46:56
  CSS鼠标属性

  习惯于使用 Windows 的用户对各种各样的鼠标样式一定不会陌生,当鼠标移动到不同的地方时,当鼠标需要执行不同的功能时,当系统处于不同的状态时,都会使鼠标形状发生改变。
  虽然在网络上有各种各样的鼠标可供下载,图形五花八门,但是就 Windows 的默认系统来说,这些图形是固定不变的。改变鼠标的属性,简单说就是当鼠标移动到不同的元素对象上面时,让鼠标以不同的形状、图案显示。这种样式是通过改变“cursor”属性来完成的。下面的表格把鼠标的完部属性都列出来,可供参考:


关键字的解释和图例

关键字  解释
auto   鼠标按照默认的状态根据页面上的元素自行改变样式. 
crosshair 精确定位“十”字。
default  默认指针
hand   手形
move   移动
e-resize 箭头朝右方
ne-resize 箭头朝右上方
nw-resize 箭头朝左上方
n-resize 箭头朝上方
se-resize 箭头朝右下方
sw-resize 箭头朝左下方
s-resize 箭头朝下方
w-resize 箭头朝左方
text   文本“I”形
wait   等待
help   帮助

  CSS分级属性

  使用过 Word 的用户都知道有一个“项目符号和编号”的功能。在 HTML 文档中,设计者无需使用前面提到的一些字体、颜色、容器属性来格式化对象的字体、颜色、边距和填充距等。因为在 CSS 中,已经提供了进行分级的专用分级属性。需要注意的是,无论如何,这些属性只能够被用于“列项”值是“显示”的元素。

display
属性值:block | inline | list-item | none
初始值:block
适用于:所有元素
继承:否
百分比值:不适用
  这些属性中的前三个属性在 Internet Explorer 4 中并不支持。
如果是“block”,那么在页面上就会打开一个新的“容器”,这个“容器”被定位在相对于邻近的“容器”,并遵循 CSS 格式化模型的地方。当使用“block”作为属性值时,在元素的前后都会出现一个断行。如果是“list-item”它的效果与“block”的效果有一些相似,唯一不同的是其中加入的一个列项标记。如果使用“inline”作为“display”的属性值,元素前后不会被加上断行。如果是“none”那么顾名思义,该元素就不会显示出来。

list-style-type
属性值:disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初始值:disc
适用于:“display”值是“list-item”的元素
继承:是
百分比值:不适用
  在列项的前面通常要为每一项加上项目符号或编号,以区分不同的列项。共有九个关键字可以描述“list-style-type”的符号或者编号,说明和图例如下:
关键字 说明 图例
disc 圆盘 l
circle 圆圈 m
square 方块 n
decimal 十进制数 1、2、3、4、5、..........
lower-roman 小写罗马数字 i、ii、iii、iv、v、..........
upper-roman 大写罗马数字 I、II、III、IV、V、.........
lower-alpha 小写字母 a、b、c、d、e、..........
upper-alpha 大写字母 A、B、C、D、E、...........
none 不显示项目符号和编号 无

list-style-image
属性值:<url> | none
初始值:none
适用于:“display”值是“list-item”的元素
继承:是
百分比值:不适用
  在项目的前面,不但可以使用“list-style-type”加上项目符号和编号,还可以使用“list-style-image”来为项目加上图片符号。当加载图片时,不论是否定义了“list-style-type”属性,浏览器都会使用图片来代替项目符号或编号。

list-style-position
属性值:inside | outside
初始值:outside
适用于:“display”值是“list-item”的元素
继承:是
百分比值:不适用
  “list-style-position”的值有两个:“inside”或者是“outside”,其中“outside”值是默认的值。它们决定了列项中的第二行文字的起始位置。

CSS容器属性

  出于 CSS 精确定义网页样式的本意,在格式化页面对象时, CSS 将所有的元素都放置在一个“容器”里面,这个“容器”叫做 BOX。对于容器的格式化,CSS 提供了强大的支持,现在,首先了解一下与格式化“容器”有关的属性。
“容器”的属性共有以下的几类:
l 边距(margin)类的属性设置了一个元素在四个方向上距离浏览器窗口边界或上级元素的边距。它用来控制一个元素在页面上位置。
l 填充距(padding)类的属性决定了究竟在边框和内容之间应该插入多少空间的距离。
l 边框(border)类的属性定义了一个元素边距的样式。
l 剩下的一类中包括了宽度和高度属性以及浮动和清除属性。

margin-top
属性值:<length> | <percentage> | <auto>
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
  该属性设置了一个元素顶端的边距,这个边距可以是相对于浏览器窗口边框来说,也可以是相对于上级元素来说。比如:BODY{margin-top:0px} 就是将浏览器窗口中的内容紧贴窗口的上边界。
注意:这个属性可以是负值,但是,很遗憾的是 Netscape 4 不支持这个负的边距值。

margin-right
属性值:<length> | <percentage> | auto
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
  该属性设置了一个元素右侧的边距,这个边距可以是相对于浏览器窗口边框来说,也可以是相对于上级元素来说。
注意:这个属性可以是负值。

margin-bottom
属性值:<length> | <percentage> | auto
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
  该元素设置了一个元素底部的边距,这个边距可以是相对于浏览器窗口边框来说,也可以是相对于上级元素来说。
注意:这个属性可以是负值。

margin-left
属性值:<length> | <percentage> | auto
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
  该元素设置了一个元素左侧的边距,这个边距可以是相对于浏览器窗口边框来说,也可以是相对于上级元素来说。具体以上四个属性我们可以通过以下这个例子就会明白的。

<HTML>
<head>
<title>CSS Demo</title>
<style type="text/css">
p{
margin-top:0em;
margin-right:2em;
margin-bottom:3em;
margin-left:6em;
}
</style>
</head>
<body>
<p>This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.This is sample text shows the margin settings.</p>
</body>
</HTML>

padding-top
属性值:<length> | <percentage>
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
  该属性设置了一个元素的顶端填充距。它的属性值可以使用长度值或者百分比值来指定。但它的值不能为负,如果指定了负值,那么浏览器在执行时将把它变成所能支持的最接近的值:0
P{padding-top:15px}

padding-right
属性值:<length> | <percentage>
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
  该属性设置了一个元素的右侧填充距。它的属性值可以使用长度值或者百分比值来指定,但是不能使用负值。

padding-bottom
属性值:<length> | <percentage>
初始值:0
适用于:所有元素
继承:否
百分比值:参考上级元素的宽度
  在动态的页面里恰当地种用这些鼠标有时可以起到意想不到的效果。例如,有一个链接的目标为帮助文件,于是可以使用帮助形式的鼠标。还有在一些需要使用鼠标事件的页面中,如果想告诉用户哪里可以点击鼠标,那么只要在页面上特定的位置让鼠标变成手形,用户就会辨认出页面上的活动区域。
  该属性设置了一个元素的底端填充距。它的属性值可以使用长度值或者百分比值来指定,但是不能使用负值。

padding-left
属性值:<lengt



[办公软件]Excel表格数据分类汇总与分级显示  
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台