2012/7/24CSS学习笔记
鼠标属性:
我们知道就是当鼠标移到不同的地方时,当鼠标执行不同的功能时,当系统处于不同的状态时,都会使鼠标的形状发生改变。
用CSS来改变鼠标的属性,就是当鼠标移动到不同的的元素对象上面时,让鼠标以不同的形状、图案来显示。
在CSS当中,这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值,我们来看一下它的详细列表:
属性值 | 解释 |
Auto | 自动,按照默认状态自行改变 |
Crosshair | 精确定位“十“字 |
Ddfault | 默认指针 |
Hand | 手形 |
Move | 移动 |
e-resize | 箭头朝右方 |
Ne-resize | 箭头朝右上方 |
Nw-resize | 箭头朝左上方 |
n-resize | 箭头朝上方 |
Se-resize | 箭头朝右下方 |
Sw-resize | 箭头朝左下方 |
s-resize | 箭头朝下方 |
w-resize | 箭头朝左方 |
Text | 文本”I“行 |
Wait | 等待 |
Help | 帮助 |
通过在CSS中设置属性,我们可以准确的定义一个页面的样式。如颜色、字体、边框等。现在我们要讲的CSS定位主要是在页面的布局和控制上进行定位。另外,在讲解之前,我们首先介绍两个定义:相对定位和绝对定位。相对定位就是允许在文档的原始位置上进行偏移。而绝对定位则允许任意定位。
实现CSS的定位最终还是要靠属性。我们来看一下属性的详细列表:
属性 | 属性定义 | 属性值 |
Position | 定义位置 | Absolute|relative|static |
Left、top | 指定横向、纵向坐标位置 | Length|percentage|auto |
Width、height | 指定占用空间的大小 | 同上 |
clip | 剪切 | Shape|auto |
Overflow | 内容超出时的处理方法 | Visible|hidden|scroll|auto |
z-index | 产生立体效果 | Auto|integer |
Visibility | 产生可见性 | Inherit|visible|hidden |
CSS的语句是内嵌在HTML文档内的。所以,编写CSS的方法和编写HTML文档的方法是一样的。你可以用任何一种文本编辑工具来编写。那么独立编辑好的CSS文档怎样加入到HTML文档中呢?一种是把CSS文档放到<head>文档中:
<style type="text/css">....</style>
其中<style>中的"type=text/css"的意思是<style>中的代码是定义样式表单的。
另一种方法是把CSS样式写在HTML的行内,比如下面的代码:
<p style="font-size:14;color:blue">蓝色14号文字</p>
这是采用<style="">的格式把样式写在html中的任意行内,这样比较方便灵活。还有一种方法是把您编辑好的CSS文档保存成".CSS"文件,然后在<head>中定义。定义的的格式是这样的<head><link rel=stylesheet href="style.css">...</head> //////我个人非常喜欢这种方法
我们看到这里应用了一个<Link>,"rel=stylesheet"指连接一个样式表文档。一般这里是不需要改动的。而后面的”href=style.css“指的是需要连接的文件地址。你只需要把编辑好的".CSS"文件的详细路径写进去就可以了。这种方法非常适合同时定义多个文档。它能使多个文档使用相同的样式,从而减少了大量的冗余代码。