网页样式设计--CSS-网络教学综合平台.DOC

网页样式设计--CS1，在行内定义CSS style !-- h3{font-family:Arial;font-style:italic;color:green} -- /style 上述定义也可以在行内实现，如下： h3 style=font-family:Arial;font-style:italic;color:green这里写入文字/h3? 2. 用CLASS和ID作为选择符 style !-- .periwinkle {color:#6699ff} #bright {font-weight:bolder;color:#00ff00} -- /style 在body中如下方法调用： strong class=periwinkle pThis is bold,periwinkle text./strong p id=brightThis text is hard to read3，选择符编组 style !-- h1,strong,em,td {font-family:Arial;color:blue;} -- /style 在body中如下方法调用： 现在，所有的标识(h1,strong,em标识和td)都将用同一个格式(蓝色、Arial字体)。当然，它们将保留在原始HTML中未被CSS重新定义的样式选项，例如，h1保留它的字体大小，strong保留它的粗体。并且其他没有被这些标记包围的文本都将保留原有样式。如果想要给其中一个选择符附加格式，仅仅重新定义即可: style !-- h1,strong,em,td {font-family:Arial;color:blue;} -- /style h1 {font-style:italic} 4，用CSS文件进行外部调用 怎么样调用*.css文件，相信大家都十分关心，其实这个也非常简单，只需要把style中的全部内容另存为*.css，然后用如下方式在head区域中调用: link rel=stylesheet href=*.css 其它的HTML代码不变，这就像调用javascript的*.js文件一样，对页面效果不会有丝毫影响，但是可以使页面代码变短，更容易读懂，页面也更简洁。 5. 在页面中实现精确定位置 ?? 怎么样在页面中实现精确定位呢？这可能是CSS一个很大的作用。如下代码可实现这个功能： div style=position:absolute;top:30px;width:150px;height:100px;background-color:green 写入相应内容/div 上面的代码解释为： position:absolute 表示位置是absolute(绝对)，还有一个是relative（相对） top:30px 表示内容显示在离顶部30px的地方， left:400px 表示内容显示在离左边400px的地方， width:150px;height:100px; 表示内容能显示的区域大小， background-color:green 表示整个区域是绿色的这些字是在离顶部30px,离左边400px的地方,大小为150*100，背景色为绿色6. 3D层技术 在下面的例子中，两行文本基本上被安排在页面的同一个位置上(第二个文本被褥安排在比第一个低10象素的地方)。一般来说，第二个元素将覆盖一点第一个元素，但是设计者可以使用z-index属性来改变这种情况htmlhead style type=text/css !-- .over {position:absolute;top:200px;left:60px;z-index:1;background-color:green} .under {position:absolute;top:210px;left:60;z-index:2;background-color:blue} -- /style /head body span class=over这些文字在离顶部165px，离左边20px的地方/span span class=under这些文字虽然在上面文字的下面一点，但是它显示起来却会在上面文字的表面/span/body/html 7，加入特殊效果????(效果演示) CSS定位的剪切(clip)、溢出(voerflow)和可见性(visibility)的属性使WEB设计者很容易地为页面加入特殊效果。 在下面的例子中，建立了一个span元素调用隐藏类。在浏览器里是看不到这个文本的，但是可以注意到下面的一行字为它在屏幕上留了一个空间。下一个元素调用了溢出类。容器比文本要小，所以这里多余文本被切除了。最后的两个元素演示了裁剪属性。最后的对象直接被褥放置在它前一个之上，但是被裁剪成一个小一点的尺寸；因此，