css学习
1。一个类以.开头。例:.bigtext
2。一个ID以#开头。例:#header
3。定义一个层。例:#header {position: absolute; left: 32; top: 20}
在html中,<div id="header"> <img src="abc.gif"> </div>
div必须给出id。
4。overflow。检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。对于 table 来说,假如 table-layout 属性设置为 fixed ,则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ,那么超出 td 尺寸的内容将被剪切。
5。clear。该属性的值指出了不允许有浮动对象的边。对于currentStyle对象而言是只读的。对于其他对象而言是可读写的。语法:clear : none | left | right | both 例:div { clear : left }
6。clip。检索或设置对象的可视区域。可视区域外的部分是透明的。此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ,此属性方可使用。例:P { clip: rect( ......
示例:此DIV为固定定位对象
要使HTML元件定位于浏览器的某个固定位置,而不随滚动条滚动,用以下CSS代码即可,跨各个主流浏览器: POSITION: fixed! important; TOP: 100px; _position: absolute; _top: 40; _left: 100。
示例见右边黄底红字块。 ......
示例:此DIV为固定定位对象
要使HTML元件定位于浏览器的某个固定位置,而不随滚动条滚动,用以下CSS代码即可,跨各个主流浏览器: POSITION: fixed! important; TOP: 100px; _position: absolute; _top: 40; _left: 100。
示例见右边黄底红字块。 ......
body{
background-image:url(about:blank);
background-attachment:fixed;
}
.myDiv{
position:fixed !important;
position:absolute;
top:expression(eval(document.documentElement.scrollTop));
}
body元素中background-image:url(about:blank);background-attachment:fixed;可防止ie6中出现闪动;
因为ie6不支持position:fixed属性,所以要设置它的优先级高于position:absolute;
通过表达式动态调整top属性为到滚动条上方长度 ......
例子:<span style="cursor:*">文本或其它页面元素</span> <a href="#" style="cursor:*">文本或其它页面元素</a> 注意把 * 换成如下15个效果的一种:
下面是对这15种效果的解释。移动鼠标到解释上面,看看你的鼠标起了什么变化吧!
hand是手型
例子:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a>
pointer也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用。
例子:CSS鼠标手型效果 <a href="#" style="cursor:pointer">CSS鼠标手型效果</a>
crosshair是十字型
例子:CSS鼠标十字型 效果 <a href="#" style="cursor:crosshair">CSS鼠标十字型 效果</a>
help是问号
例子:CSS鼠标问号效果 <a href="#" style="cursor:help">CSS鼠标问号效果</a>
下面写法都一样,这里就不一一写完了。
text是移动到文本上的那种效果
wait是等待的那种效果
default是默认效果
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下 ......
可以放置样式的地方:样式表,<style>和style
样式表是一个独立的文件,可以通过<link>元素或者css的@import语句把它附加到某个html文档中,<style>是一个html元素,可以把它内嵌在html文档中,style是一个属性,可以内置在任何html元素中。
要想把样式表连到html文档中,要在html文档中的<head>区域使用<link>元素,并把样式表的url赋给<link>元素的href属性
语法细节:
1. 应当使用unicode utf-8来给css文件编码
2. css代码应当小写:当引用xhtml中的元素名字,类,属性和ID时,选择符是区分大小写的,css的属性和值是不区分大小写的。
3. 元素名,类和ID 只能由字母,数字和下划线,连字符和161个或更多Unicode字符构成,元素,类和ID的第一个字符不能是数字或连字符,类名和ID不能含有标点符号(除了下划线和连字符)
4. 可以通过多个类名用空格分开来为元素赋予多个名字
5. 常量值不用引号
6. &n ......
竞争规则:css允许多次将同一个规则赋予某个元素。层叠排序根据规则中使用的选择符将规则划分6组,高优先级组里的规则会覆盖低优先级组里的规则。普通的选择符会设置文档的总体样式,更具体的选择符会覆盖普通选择符,以为其提供更加特殊的样式
6个选择符群组:
1. 使用!important规则群组拥有最高优先级,他们会覆盖掉所有非!important规则
#i100 {border:6px solid black !important;}
2. 优先级第二高的群组是指那些嵌在style属性里面的规则。因为使用style属性会增加代码的维护难度,不建议使用
3. 优先级第三高的群组是指含有一个或多个ID选择符的规则,如 #i100 {border:6px solid black }会覆盖*.c100{border:4px solid black}
4. 优先级第四高的群组是指含有一个或多个类,属性或僞类选择符的规则,如*.c100{border:4px solid black}会覆盖div{border solid black}
5. 优先级第五高的群组是含有一个或多个元素选择符的规则,如div{border:2px soli ......