常用的css样式
常用的css样式
*
伪类: a link{}设置a对象在未被访问前的样式表属性。;
a hover{}设置对象在其鼠标悬停时的样式表属性。
a active{}设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。
a visid{}设置a对象在其链接地址已被访问过时的样式表属性。
background: url('../img/character_title2.jpg') repeat-x;
border : solid 1px red ;（solid细线、dashed大点虚线、dotted小点虚线、double双直线、groove3D凹线、ridge3D凸线、inset3D框入线、outset3D隆起线）
margin-top:10%(百分比) 10%是以实用这样式的对象的宽度定的
div垂直居中问题，对象在浏览器中的垂直居中可以用绝对路径：如下面代码
div {
position:absolute; top:50%; left:50%;
margin:-100px 0 0 -200px; width:400px; height:200px; border:1px solid red;
line-height:200px;
font-size:16px; text-align:center;
}
cursor:pointer; 鼠标变手型;
text-decoration:none;去掉超链的下横线；
dl标记,dt标记,dd标记：
- 标记定义了一个定义列表，定义列表中的条目是通过使用
- 标记(“definition title”，定义标题)和
- 标记(“definition description”，定义描述)创建的。
- 给出了术语名，
- 标记给出了术语的定义。
font-weight : 600；字体的粗细；
text-indent : 20px;首行缩进20像素，就是向右移动20px。
Css中text-indent属性的作用是实现文字缩进,这种方法很实用,但这种属性却有很大的缺点,那就是火狐浏览器不支持,为什么呢?
这是因为ie是根据文本排列的方向解释缩进的。而Firefox按照标准根据文本流的方向解释缩进，是将15px的缩进解释到了span元素的前面，而span元素拥有的float属性恰好能够消除父元素的text-indent的值，所以这15px就不见了。
解决这个兼容问题的最佳方法就是将text-indent改为padding-left,这因为父元素padding属性是不会随子元素的float属性而消除。
letter-spacing ：20px；字符间距属性，就是每两个字符间距20px；
line-height : 20px；行间的距离，每2行间距20px。（常用于使字符垂直居中，常常用来控制字符的垂直位子）；
text-align：left、center、right；字符水平对齐，left靠左、right靠右、center居中。vertical-align ：top、middle、bottom；垂直对齐属性。常用于table里面。在div里面好像不起作用；
background-position : 水平位位置，垂直位置;background-position : 0px center;背景图片水平靠左0px，即向右移动0px；垂直居中；
list-style-type : none;使ul标记中的li标记前面的黑点消失；
word-break:break-all; 汉字英语夹白不断行
text-overflow : ellipsis;使每行超过行宽的字符变成...号；
white-space :nowrap;强迫字符段落在一行内显示；
word-wrap : break-word;当当前行超过指定容器的边界时断开转行；上面3个样式用在div中表格table中目前无效；
关于table标记的行高问题:每个table都有它自己的最小默认行高，我大概量了一下是
19px。如果你用height 修改table 的 tr 标记的高度，那么只有当你height大于19px 后，显示上才会有反映，意思就是当你给table的height修改为19px以下（包括19px）显示上都是19px，
所以用height修改table的行高的时候有很大的局限性。我们可以用line-height去修改table的tr行高，它可以修改到任意高度，不过里面的字体都垂直居中了。
position : absolute;意思是绝对定位的意思，就是相对于浏览器的定位。当用position : absolute时；可以使用top 和left，当用相对定位（即position : relative）时，使用margin padding。z-index也是属于决对定位时用的。
ul在div中在默认的情况下有一个margin-left :30px 和 margin : 0px 0px 0px 30px; 这是默认的不管是ff ie6 还是 ie7 ，另外还遇到一个情况就是
在li中的img ie6不会默认overflow ：hidden
ie7有默认overflow : hidden
关于ul里面的li标签float : left横向排列后外层的div不能随ul的高度而改变高度的解决办法是在里层的ul加一个overflow : hidden的样式就能够解决
遇到一个情况（在ie6、7、ff中）如下2个div:
如果在第二个第二个div中加一个ol标签如:
那么两个div之间会出现margin-top 不等于0的情况（出现大条缝隙），但是div样式里没有 ol样式里也没有用toolbar 看见里面有个margin : auto auto auto30pt; 但是实际上并没有，但是当我给ol 真正加上这个样式后，发现ol与底部有30px的距离;实际显示出来了。为了去掉这一缝隙，解决办法：给ol标签加上margin-top :0px;
overflow : hidden;
标记有它的最小的高度，除了为高度为0px以外（ie6 ie7上都有），有它的最小高度，如果想使它的高度低于最小高度（除0px），就可以使用overflow ：hidden；意思都是隐藏一些多余的东西；display:inline;关于ie6与ie7的float：left兼容问题，ie6
常常在使用了float：left后再使用margin-left：距离px;距离常常会不准确，准确的说是距离变宽，比如：margin-left：10px；在ie7上是向右靠10像素，而在ie7上是向右靠的不止10像素，导致ie6与ie7不兼容，因此使用display：inline给用过float：left，后右使用margin-left的单位的样式添加display：inline属性，使ie6的单位不会多向右多靠，达到兼容。
除上之外display:inline；可以用于将ul中的li标记横向排列,但是这样用是错误的。横向排列最好还是用float：lefts；
关于ie6与ie7的float：left问题，在ie6上float：left如果用上2次，即两个div
并排，那么第二个div的float：left；会自动的向右多了3个像素，所以会是ie6与ie7不兼容，可以使用margin-right:-3px;消除这个多余的3像素。但是为了使ie7不使用这个效果可以用，可以使用margin-right : 0 !important ; margin-right : -3px;important 是专门针对ie6与ie7兼容问题的一个属性，它的意思是important的下一句话的样式（只对ie6有效果，对ie7没有效果）所以对ie7浏览器是margin-right:0px;的效果，但是对ie6是margin-right:-3px;的效果达到了兼容效果；
min-height属性、和_height属性、height属性，在ie6和ie7中，_height只对ie6有效果，设置了ie6的最小高度和自动增加高度，即包括了height : 高度和 height : auto;(height : auto即是div随着字符的增多自动增加高度，_height : 高度 ,即当字符高度没有超过div的最小高度的时候，div为最小高度，而超过了最小过度后，div可以自动增加高度。)；；；min_height : 高度;只针对ie7，而对ie6不起效果，它也包括height:auto 和height:高度；效果和_height在ie6中的一样，就不重复了。
*/
绝对定位的居中
绝对定位是没法水平居中的，必须给定位的元素设置一定的值，如果你要水平居中可以用javascript做到
left的值 = （定位元素的父元素宽度 - 定位元素宽度）/2
如果该父元素是body可用screen.width,如果不是，请把该父元素设置成
position:relative
关于有时候IE7能显示背景图片 IE6背景图片却显示不出来， example：
/*可见图层*//*可见图层*/IE6显示不出来总背景。IE7能显示。
刚刚写完，还需要搭大改特改~
兼容ie6 ie7 还是缺乏经验复制了个文章
一、针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack 方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了现在写一个CSS可以这样：
Example Source Code
#abc { color: #333; } /* Moz */
* html #abc { color: #666; } /* IE6 */
*+html #abc { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
二、CSS布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上
“MARGI N-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
绝对路径居中问题
Javascript部分：
window.onload = aa;
window.onresize = aa;
function aa() {
var getE = document.getElementById('helpPannel');
var getBody = document.getElementById('body');
getE.style.left = (getBody.clientWidth - getE.offsetWidth)/2 + "px";
}
CSS部分：
*{margin:0; padding:0;}
.box{width:500px; height:500px; background-color:silver; position:absolute; border:10px solid black; padding:20px;}
Html部分：
三、盒模型
#box{
width:600px;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}
四、浮动ie6产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px;
//这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不
可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
五、IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}
html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 六、页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
放到 标签下，然后为div指定一个类：然后CSS这样设计：
#container{
min-width: 600px;
width:e xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
七、清除浮动
.hackbox{
display:table;
//将对象作为块元素级的表格显示
}
或者
.hackbox{
clear:both;
}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE 不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的
……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
八、DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px 的间距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
九、属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
十、IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。
有时间研究一下
=====================ie8遇到了==========================
.font_Glow_nav_1 {
FONT-WEIGHT: bold; FILTER: Glow(Color=#0568b2, Strength=2, FONT-SIZE: 12pt; COLOR: #ffffff
}
今天样式里面有句这个后面的样式在ie8中就读不出来了但是ie6、7显示正常额呵呵删掉ie8就好了
常用CSS样式属性CSS样式表
常用CSS样式属性|CSS 样式表 【长度单位】 【颜色表示】 CSS可用颜色表示方式 表示方式表示方式说明范例 #rrggbb 可以用Windows色彩选择工具找到color:#feefc7 rgb( #,#,#) 用数字来表示红色蓝色以及绿色的混合色 彩选择工具找...也可以用Windows color:rgb(135,255,1 24) rgb(%,%,%) 用百分比来代表红色蓝色以及绿色的强度来混合颜色color:rgb(70%,35%,4 1%) 颜色名称用颜色的名称来指定颜色color:brown
【属性可用值】 CSS 可用属性值 名称 说明 可能值 范例 visibility 显示或是隐藏 inherit （ 父组件决定） hidden （隐藏） visible （ 显示） visibili ty:hidde n width 宽度 auto （自动决定） 数字 width:13 5 height 高度 auto （自动决定） 数字 height:1 00 z-index Z 轴高度（立体，是否在 另一个组件之上） auto （自动决定） 数字 z-index: 135 position 定位方式 absolute （绝对寻址-依窗口坐标，原点为父窗口左上角 ） relative （相对定位-以一般网页排列［后再根据坐标定位， 原点为定位后的位置） static （静态定位-以一般网页排列） position :absolut e top （对象的position 属 性须为absolute 或 relative ） 对象的Y 坐标（原点根 据postion 属性有所不 同） 数字 left （对象的 position 属性须为absolute 或 relative ） 对象的X 坐标（原点根 据postion 属性有所不 同） 数字
《CSS样式》习题
一、选择题 1．CSS是（）的缩写。 A．C olorful S tyle S heets B．C omputer S tyle S heets C．C ascading S tyle S heets D．C reative S tyle S heets 2．引用外部样式表的格式是（）。 A．