DIV教程之CSS教程(1)：进修CSS背景相干常识
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等破洛洛文章简介：CSS同意使用纯色作为背景，也同意利用背景图象创立相称庞大的效果。CSS在这方面的才能远远在HTML之上。
CSS同意使用纯色作为背景，也同意利用背景图象创立相称庞大的效果。
CSS在这方面的才能远远在HTML之上。
背景致
可使用background-color属性为元素设置背景致。这个属性承受任何正当的色彩值。
这条划定规矩把元素的背景设置为灰色：
p{background-color:gray;}假如您但愿背景致从元素中的文本向外少有延长，只需增添一些内边距：
p{background-color:gray;padding:20px;}能够为一切元素设置背景致，这包含body一向到em和a等行内元素。
background-color不克不及承继，其默许值是transparent。transparent有“通明”之意。也就是说，假如一个元素没有指定背景致，那末背景就是通明的，如许其先人元素的背景才干可见。
背景图象
要把图象放进背景，必要利用background-image属性。background-image属性的默许值是none，暗示背景上没有安排任何图象。
假如必要设置一个背景图象，必需为这个属性设置一个URL值：
body{background-image:url(/i/eg_bg_04.gif);}年夜多半背景都使用到body元素，不外其实不仅限于此。
上面例子为一个段落使用了一个背景，而不会对文档的其他部分使用背景：
p.flower{background-image:url(/i/eg_bg_03.gif);}您乃至能够为行内元素设置背景图象，上面的例子为一个链接设置了背景图象：
a.radio{background-image:url(/i/eg_bg_07.gif);}如需检察上述例子的效果，能够亲身试一试！
实际上讲，乃至能够向textareas和select等交换元素的背景使用图象，不外并非一切用户代办署理都能很好地处置这类情形。假如在其他网站看到本信息，申明本教程来历是网页教授教养poluoluoCom网站，次要是为了防收罗。
别的还要增补一点，background-image也不克不及承继。现实上，一切背景属性都不克不及承继。
背景反复
假如必要在页面上对背景图象举行平展，可使用background-repeat属性。
属性值repeat招致图象在程度垂直偏向上都平展，就像以往背景图象的一般做法一样。repeat-x和repeat-y分离招致图象只在程度或垂直偏向上反复，no-repeat则不同意图象在任何偏向上平展。
默许地，背景图象将从一个元素的左上角入手下手。请看上面的例子：
body{background-image:url(/i/eg_bg_03.gif);background-repeat:repeat-y;}背景定位
能够使用background-position属性改动图象在背景中的地位。
上面的例子在body元素中将一个背景图象居中安排：
body{background-image:url(/i/eg_bg_03.gif);background-repeat:no-repeat;background-position:center;}为background-position属性供应值有良多办法。起首，可使用一些关头字：top、bottom、left、right和center。一般，这些关头字会成对呈现，不外也不老是如许。还可使用长度值，如100px或5cm，最初也能够利用百分数值。分歧范例的值关于背景图象的安排稍有差别。
关头字
图象安排关头字最简单了解，其感化如其称号所标明的。比方，topright使图象安排在元素内边距区的右上角。
依据标准，地位关头字能够按任何按次呈现，只需包管不凌驾两个关头字-一个对应程度偏向，另外一个工具垂直偏向。
假如只呈现一个关头字，则以为另外一个关头字是center。
以是，假如但愿每一个段落的中部上方呈现一个图象，只需声明以下：
p{background-image:url(bgimg.gif);background-repeat:no-repeat;background-position:top;}上面是等价的地位关头字：
单一关头字等价的关头字centercentercentertoptopcenter或centertopbottombottomcenter或centerbottomrightrightcenter或centerrightleftleftcenter或centerleft百分数值
百分数值的体现体例更加庞大。假定你但愿用百分数值将图象在其元素中居中，这很简单：
body{background-image:url(/i/eg_bg_03.gif);background-repeat:no-repeat;background-position:50%50%;}这会招致图象得当安排，个中心与其元素的中央对齐。换句话说，百分数值同时使用于元素和图象。也就是说，图象中形貌为50%50%的点（中央点）与元素中形貌为50%50%的点（中央点）对齐。加此信息破洛洛（poluoluo.com）公布目标是为了避免你变懒！poluoluo.com不主意收罗！
假如图象位于0%0%，其左上角将放在元素内边距区的左上角。假如图象地位是100%100%，会使图象的右下角放在右侧距的右下角。
因而，假如你想把一个图象放在程度偏向2/3、垂直偏向1/3处，能够如许声明：
body{background-image:url(/i/eg_bg_03.gif);background-repeat:no-repeat;background-position:66%33%;}假如只供应一个百分数值，所供应的这个值将用作程度值，垂直值将假定为50%。这一点与关头字相似。
background-position的默许值是0%0%，在功效上相称于topleft。这就注释了背景图象为何老是从元素内边距区的左上角入手下手平展，除非您设置了分歧的地位值。
长度值
长度值注释的是元素内边距区左上角的偏移。偏移点是图象的左上角。
好比，假如设置值为50px100px，图象的左上角将在元素内边距区左上角向右50像素、向下100像素的地位上：
p{background-color:gray;padding:20px;}0注重，这一点与百分数值分歧，由于偏移只是从一个左上角到另外一个左上角。也就是说，图象的左上角与background-position声明中的指定的点对齐。
背景联系关系
假如文档对照长，那末当文档向下转动时，背景图象也会随之转动。当文档转动到凌驾图象的地位时，图象就会消散。
您能够经由过程background-attachment属性避免这类转动。经由过程这个属性，能够声明图象相对可视区是流动的（fixed），因而不会遭到转动的影响：
p{background-color:gray;padding:20px;}1background-attachment属性的默许值是scroll，也就是说，在默许的情形下，背景会随文档转动。
现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 学Dreamweaver技术的过程其实是一个增加信心的过程。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
页:
[1]