CSS探秘学习（一）



最高目标：熟悉学习css

初级目标：装饰好自己的博客

css总览

目录

header

home

以下都是博客园下“css定制页面”可用,css文本参照：https://files.cnblogs.com/tongxi/css.rar

Research findings（RF1）

#header { 
background:transparent 
url(http://images.cnblogs.com/cnblogs_com/tongxi/189210/o_header.jpg )no-repeat scroll 0 0; 
height:132px; 
}

发现过程：从图片链接发现这段属性对应的位置

header:博客头标

background

  • 语法：background(背景属性) : background-color(背景颜色) || background-image(背景图片) || background-repeat(背景是否重复) || background-attachment(背景时候随浏览器滚动) || background-position (背景水平位置 背景垂直位置)
  • 说明：设定元素的背景属性。
  • 参数及扩展说明：
  • background-color：#RRGGBB|rgb(R,G,B )|Transparent（默认透明，ps：透明png图片ie6不支持）
  • background-image : none（默认） | url ( url )
  • background-repeat: repeat（默认平铺） | no-repeat（不平铺） | repeat-x（在x轴平铺） | repeat-y（在y轴平铺）
  • background-attachment：scroll（随页面滚动而滚动） | fixed（被固定，随眼睛而动）
  • background-position：length（x轴的值,相对长度单位，Relative Length Units：em-相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 ex-相对于字符“x”的高度。此高度通常为字体尺寸的一半。px-像素 .绝对长度单位 Absolute Length Units：pt-点（Point），1in=2.54cm=25.4mm=72pt=6pc pc-派卡（Pica），相当于我国新四号铅字的尺寸。 in-英寸（Inch), cm-厘米 mm-毫米。值还可为占父元素的百分比） || length（y轴值）或者position（以表述定位，值有top | center | bottom） || position（值：left | center | right）
  • 继承性：不可继承

RF2

#home {
   margin:auto;
   width:90%;
   overflow:hidden;
}

发现过程：从源中的width：936px猜测实验得出

home：博客页面大小

margin
中文中我们翻译成外边距或者外补白（本文中引用外边距）。他是元素盒模型（box model）的基础属性
margin:0,0,0,0
margin：margin-top,margin-right,margin-bottom,margin-left
外边距:上外边距,右外边距,下外边距,做外边距
即从元素的上边开始，按照顺时针的顺序围绕元素。
1.如果没有left值，则使用right代替；
2.如果没有bottom值，则使用top代替；
3.如果没有right值，则使用top值代替。
默认margin为0
auto:取计算机值;值被设置为相对边的值(这里margin:auto大概是让现实页面居中?)
margin的解析逻辑请看http://www.blueidea.com/tech/web/2007/4546_2.asp详细解释(自己也不理解)

width
检索或设置对象的宽度。
可能的值:
auto——计算机算出实际宽度
%——定义基于父元素宽度的百分比宽度。(我再博客里就是用这个啦)
length——使用 px、cm 等单位定义宽度。
对于 img 来说，仅指定此属性，其 height 值将根据图片源尺寸等比例缩放。
按照样式表的规则，对象的实际宽度为其下列属性值之和： margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
在IE6中使用 !DOCTYPE 声明指定 standards-compliant 模式可以实现这一点。
而在IE6中如果没有将 !DOCTYPE 声明指定 standards-compliant mode，以及以前的浏览器版本，对象的实际宽度等于： margin-left + width + margin-right 此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

何谓currentStyle?
假如有一个样式表对ID为dhooo的div指定样式
<style>
#dhooo{
    width:100px;
}
#dhooo{
    width:200px;
}
</style>
那么dhooo.currentStyle.width的值一定是'200px'
这就是所谓的样式表中所有规则按权重叠加计算后的最终效果样式值

overflow
规定如何处理如何处理不符合元素框的内容。
可能的值:
visible——默认值，内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，但是浏览器不会显示供查看内容的滚动条。(这里就是这个)
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 由浏览器决定如何显示。如果需要，则显示滚动条。
说明：所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。
对于 table 来说，假如 table-layout 属性设置为 fixed ，则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ，那么超出 td 尺寸的内容将被剪切。如果设为 visible ，将导致额外的文本溢出到右边或左边（视 direction 属性设置而定）的单元格。

posted on 2009-05-20 19:57  Tongxi  阅读(315)  评论(0)    收藏  举报

导航