BlogJava-Focus on java, CSS and beyond-文章分类-csshttp://www.blogjava.net/kelven/category/42915.htmlzh-cnMon, 07 Dec 2009 18:29:08 GMTMon, 07 Dec 2009 18:29:08 GMT60第二 css <背景实例>http://www.blogjava.net/kelven/articles/304284.htmlkelven.leekelven.leeMon, 30 Nov 2009 08:59:00 GMThttp://www.blogjava.net/kelven/articles/304284.htmlhttp://www.blogjava.net/kelven/comments/304284.htmlhttp://www.blogjava.net/kelven/articles/304284.html#Feedback0http://www.blogjava.net/kelven/comments/commentRss/304284.htmlhttp://www.blogjava.net/kelven/services/trackbacks/304284.html备注：默认的图片背景，如果无设置，自动靠左上角对齐，如果设置其位置可以靠background-position定位（值可为像素或者百分比、center），如下

p {background-color: gray; padding: 20px;}    //设置p 的背景颜色，四周的边距各为20px

<style type="text/css">
  body{
       background-image: url('/i/eg_bg_03.gif');
      
       //有no-repeat与repeat之分，默认的为repeat，自动重复xy轴自动铺满，或者：background-repeat: repeat-y;  y轴横向铺满
       background-repeat: no-repeat;

        //fixed：当页面的其余部分滚动时，背景图像不会移动。scroll：默认值。背景图像会随着页面其余部分的滚动而移动。inherit： 规定应该从父元素继承 background-attachment 属性的设置。
       background-attachment:fixed;
       background-position: 30% 20%;//为x,y轴。  或者50px 100px;  或者:top、bottom、left、right 和 center
}
</style>

------------------------------上述属性合并为一列----------------------------------------------
<style type="text/css">
body
{
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;   //center为xy轴居中显示
}
</style>

kelven.lee 2009-11-30 16:59 发表评论
]]>第一 css <层叠次序>http://www.blogjava.net/kelven/articles/304249.htmlkelven.leekelven.leeMon, 30 Nov 2009 05:52:00 GMThttp://www.blogjava.net/kelven/articles/304249.htmlhttp://www.blogjava.net/kelven/comments/304249.htmlhttp://www.blogjava.net/kelven/articles/304249.html#Feedback0http://www.blogjava.net/kelven/comments/commentRss/304249.htmlhttp://www.blogjava.net/kelven/services/trackbacks/304249.html

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

 

 



kelven.lee 2009-11-30 13:52 发表评论
]]>