常见的css简写2.docx

常见的css简写font简写：font:italic small-caps bold 12px/1.5em arial,verdana;等效于：font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana;顺序：font-style | font-variant | font-weight | font-size | line-height | font-family（注：简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。）background简写：background:#fff url(bg.gif) no-repeat fixed（是否随鼠标滚动） left top;等效于：background-color:#fff;background-image:url(bg.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:left top;顺序：background-color |background-image | background-repeat | background-attachment | background-positionmargin & padding简写：margin:1px 0 2em -20px;等效于：margin-top:1px;margin-right:0;margin-bottom:2em;margin-left:-20px;顺序：margin-top | margin-right | margin-bottom | margin-leftpadding的简写和margin完全一样。border简写：border:1px solid #000;等效于：border-width:1px;border-style:solid;border-color:#000;顺序：border-width | border-style | border-color这三句也是简写，等于是把四边的样式合而为一了。（关于四边的问题，下文有详细说明）border-top / border-right / border-bottom / border-left简写：border-top:1px solid #000;等效于：border-top-width:1px;border-top-style:solid;border-top-color:#000;（和border一样）list-style简写：list-style:square outside url(bullet.gif);等效于：list-style-type:square;list-style-position:outside;list-style-image:url(bullet.gif);顺序：list-style-type | list-style-position | list-style-image关于四边有很多样式都涉及到了四边的问题，这里统一说明。四边的简写一般如下：padding:1px 2px 3px 4px;等效于：padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;顺序：top | right | bottom | left不论是边框宽度，还是边框颜色、边距等，只要css样式涉及四边，顺序通通都是“上右下左”（顺时针方向）。如果四边的值省略一个，只写三个：padding:1px 2px 3px;则等效于：padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:2px;（省略的“左”值等于“右”）如果四边的值省略两个：padding:1px 2px;则等效于：padding-top:1px;padding-right:2px;padding-bottom:1px;padding-left:2px;（省略的“下”值等于“上”）如果只有一个值：padding:1px;则等效于：padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;颜色的简写：简写：color:#FFFFFF等效于：color:#FFF 或 color:white简写：color:#06c等效于：color:#0066ccCSS中单位em和px的区别这是在网络里看到的一个文，平时也都用px定义CSS的，看完了这文，感觉应该适当做些调整。用px来定义字体，所以无法用浏览器字体放大的功能，而国外大多数网站都可以在IE下使用。因为1、IE无法调整那些使用px作为单位的字体大小；2、国外的大部分网站能够调整的原因在于其使用了em作为字体单位；3、Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：1、em的值并不是固定的；2、em会继承父级元素的字体大小。所以我们在写CSS的时候，需要注意两点：1、body选择器中声明Font-size=62.5%；2、将你的原来的px数值除以10，然后换上em作为单位；3、重新计算那些被放大的字体的em数值。避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设，需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则，应用的时候容易让人迷惑，今天就专门和大家聊聊这方面的应用。正文CSS是层叠样式表（Cascading Style Sheets）的简称，它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说，很少没有听说过CSS了吧，因为在制作网页过程中我们经常需要用到。CSS允许我们为文档设置更为丰富且便于修改的外观，可以减轻网页设计者的工作负担。这里我们主要想和朋友们一起对CSS的继承性和特殊性进行一点深入的探讨。 一、继承CSS的一个主要特征就是继承，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。下面举例说明：样式定义：bodycolor:red;应用举例代码：CSS的层叠和继承深入探讨应用举例效果： 这段代码的应用结果是：“CSS的层叠和继承深入探讨”这段话是红颜色的，“层叠和继承”由于应用了strong元素，所以是粗体。这很符合制作者的意图，也是为什么继承是CSS的一部分的原因。二、CSS继承的局限性 在CSS中，继承是一种非常自然的行为，我们甚至不需要考虑是否能够这样去做，但是继承也有其局限性。首先，有些属性是不能继承的。这没有任何原因，只是因为它就是这么设置的。举个例子来说：border属性，大家都知道，border属性是用来设置元素的边框的，它就没有继承性。如下图所示，如果继承了边框属性，那么文档看起来就会很奇怪，除非采取另外的措施关掉边框的继承属性。三、继承中容易引起的错误 有时候继承也会带来些错误，比如说下面这条CSS定义：Bodycolor:blue在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说，这是不正确的，但是它确实存在。所以我们经常需要借助于某些技巧，比如将CSS定义成这样：Body,table,th,tdcolor:blue这样表格内的文字也会变成蓝色。四、多种样式混合应用既然有了继承性，那么在样式表中的应用上可能会有些读者搞不清，多个样式表同时应用到一个对象上会发生什么情形呢？先举个简单的例子：样式定义：.applecolor:red;H1color:yellow;应用举例代码：这儿的苹果好红啊应用举例效果：因为选择符H1和.apple都匹配上面的H1元素，那么到底浏览器会应用哪一个呢？通过在浏览器中观察，我们发现这段文字应用了.apple这个样式，所以它显示的是红色。这是因为两条规则的特殊性不一样，CSS规则必须这样进行处理。 样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：统计选择符中的ID属性个数。 统计选择符中的CLASS属性个数。 统计选择符中的HTML标记名格式。 最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。以下是一个按特性分类的选择符的列表：H1 color:blue;? 特性值为：1P EM color:purple;? 特性值为：2.apple red;? 特性值为：10?P.bright color:yellow;? 特性值为：11P.bright EM.dark color:brown;? 特性值为：22#id316 color:yellow? 特性值为：100从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。五、CSS继承的优先级问题 上面我们讨论了CSS的继承性和特殊性，在特殊性的框架下，被继承的特性值为0，这就意味着任何显示声明的规则将会覆盖其继承样式。因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已，举例说明。样式定义：BODY background:black;LI color:gray;UL.white color:white应用举例代码： 举例列表一 举例列表二 举例列表三 举例列表四应用举例效果： 有些读者可能认为除包含.white类的列表项显示为白色外，其余所有的列表项都应该是灰色的。然而情况并非如此。为什么会出现这样的情况呢？因为带选择符LI的显式声明的权值比从UL.white规则那里继承过来的权值要大，所以每个列表项都是灰色的。可能有些地方不是很好理解，大家多思考一下就会明白，平时在应用样式表的时候多留意思考一下。下面我们再来看一个例子，若给定如下所示的标记，则EM强调文字将会是灰色的，而非黑色，因为EM规则的权值要大于从H1元素继承来的权值：样式定义： H1#id316 color:black;? 特性值为：101EM color:gray;? 特性值为：1应用举例代码：深入探讨CSS的继承性应用举例效果： 这是因为第二条EM规则的特性值（1）要比被继承的特性值（0）要大，事实上规定H1#id316的原始特性值（101）对其继承值没有影响，仍旧为0。小技巧：如果想让H1始终为黑色，而EM文字在其他情况下红色，那么下面的样式表设置就是一个很好的方法：H1，H1 EM color:black;? ?特性值为：1，2EM color:red;? 特性值为：1给定这个规则后，除在H1元素内的任何EM文字就都是红色，而H1内的EM文字仍旧为黑色，由于其选择符分组，在第一条规则中就有两条有效的规则（一条是对H1的，另一条是对H1 EM的）也就有两个特性值每条规则一个。上面我们讨论了多个样式规则同时应用于同一对象时，哪个规则会被最终应用的一些情况，可能有些细心的读者会说，那STYLE元素呢？对啊，HTML代码中可以直接应用内联样式STYLE的嘛。那么它的特性值如何呢？回答是这样的：带有STYLE的元素在CSS1下其特性值为100，尽管类似于#ID316这样的ID选择符的特性值也为100，但在实际应用中，STYLE这一权值会更高一些，因为STYLE元素的值看起来要比多数普通规则的权值大。所以我们可以看出内联样式具有高的特性值，具体的例子我们就不举了，大家可以自己试试。六、人为定义CSS继承优先级在制作网页的过程中，我们可能想要设置某个规则比其他的规则更重要，CSS中允许这样设置，它们被称为重要规则（important rule）。这是根据其声明的方式和它们的自然属性来命名的。通过在一条规则的分号前插入！important这样一个短语来标记一条重要规则，比如说： P.apple color:#red !important; background:white;颜色值#red被标记为!important，而背景色white未被标记，如果需要二条规则都是重要的话，那么每条规则都需要标上!important。正确地放置!important的位置是很重要的，否则整条规则将为无效。!important总是放在规则声明的最后，在分号之前。标记为!important的规则具有最高的权值，也就是说他没有具体的特性值，但是比其他的权值都要大。需要注意的是，虽然制作者定义的样式比用户定义的样式具有更高权值时，但!important规则恰恰相反：重要的用户定义规则要比制作者定义的样式具有更高权值，即使是标记为!important的重要规则也是如此。看了这么多文字介绍后，我们来举个例子看一下：样式定义：H1 color:gray !important;应用举例代码：看这儿！应用举例效果:!important规则会覆盖内联STYLE属性的内容，所以结果文字是灰色的而不是黑色的。 还有最后一种需要考虑的情况：继承值总是具有特性值0的特点，即使是从带有!important的规则继承的值也是如此，在匹配重要规则的元素之外，重要性也会随之消失，这点是需要我们特别注意的！ 如上图所示，多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。# positionCSS之Position详解 CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构，以及定位。正如positioniseverything，本文将主要讲述关于position的理解，力求让您看完本文后对position有着最全面的认识。position的四个属性值：1. relative 2. absolute 3. fixed 4. static 下面分别讲述这四个属性。? sub1? sub21. relativerelative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中，sub1和sub2是同级关系，如果设定sub1一个relative属性，比如设置如下CSS代码：#sub1? position: relative;? padding: 5px;? top: 5px;? left: 5px;我们可以这样理解，如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。对于此，您只需要记住，sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。随后的问题是，sub2的位置又在哪里呢？答案是它原来在哪里，现在就在哪里，它的位置不会因为sub1增加了position的属性而发生改变。如果此时把sub2的position也设置为relative，会发生什么现象？此时依然和sub1一样，按照它原来应有的位置进行偏移。注意relative的偏移是基于对象的margin的左上侧的。2. absolute这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：（1）当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。接下来的问题是，sub2的位置到哪里去了呢？由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。（2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。3. fixedfixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。4. staticposition的默认值，一般不设置position属性时，会按照正常的文档流进行排列。CSS定位属性Position详解2009-09-16 09:36 小 大 来源: 帕兰映像 评论: 0 转发至： 站长交易（）友情链接交换 企业建站找313建站大师，招分销商核心提示：CSS中最常用的布局类属性，一个是Float(CSS浮动属性Float详解)，另一个就是CSS定位属性Position。CSS中最常用的布局类属性，一个是Float（CSS浮动属性Float详解），另一个就是CSS定位属性Position。1. position:static所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。#div-1 position:static;2. position:relative如果设定 position:relative，就可以使用 top，bottom，left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】#div-1 position:relative;top:20px;left:-40px;3. position:absolute当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top，bottom，left 和 right 来定位了。#div-1a position:absolute;top:0;right:0;width:200px;?4. position:relative + positio