编写CSS样式实例介绍.pdfVIP

编写CSS样式实例介绍 我们已经对CSS样式有了⼀个初步的认识，那么究竟CSS是什么样⼦的，如何实现 呢？下 通过例⼦进⾏说明，该例⼦通过CSS样式去控制图⽚、包括图⽚效果。 ⼀、选择CSS开发⼯具 CSS开发⼯具很多，最常见的就是Dreamweaver⼯具了，同时还可以使⽤Office 中的 Frontpage开发⽹页。本教程中采⽤的是Dreamweaver CS6版本。⾸先我们建⽴⼀个页 ，并选择页 的类型。具体操作如下： ⼆、加⼊CSS控制 ⽹页创建完成后，⼿动在index 1.html的body标签中加⼊如下代码： divimg rc=flower .jpg/div rc表⽰img要链接的图⽚，此时图⽚的位置和当前⽹页在同⼀个⽂件夹下。然后保存 该⽹页，最后在键盘上按 【F 12】键在浏览器中浏览，效果如下图所⽰： 三、控制图⽚ 从上图中我们可以看到，没有经过CSS样式控制的图⽚位置是靠左的，图⽚⼤⼩未经 任何控制。接下来我们通过CSS去改变图⽚的效果和位置，代码如下： tyle type=text/c div{margin:auto;float:right;} img{width:200;height:200px;filter:blur(add=ture ,direction= 135, trength=200)} / tyle 上 代码中，定义⼀个div选择器，其属性margin定义外部边距⾃动伸缩，float定义层 浮动在右边显⽰。img选择器中，属性width定义显⽰图⽚宽度，height定义显⽰图⽚⾼ 度，filter ：blur使⽤了⼀个滤镜效果。 按 【F 12】键在浏览器中浏览，效果如下图所⽰： 这时我们发现图⽚的⼤⼩、位置和效果已经完全改变，原先的⼤图已经被缩⼩ （img 选择器实现），位置从左边已经调整到右边 （div选择器实现），原先清晰的图⽚已经 加上了模糊滤镜效果。特别是滤镜效果，这些在过往只有在Photo hop 中实现的东西， 现在在CSS 中也可以实现。 四、CSS的注释 CSS注解 （CSS注释）可以帮助我们对⾃⼰写的代码进⾏说明，如说明某段是在什么 地⽅、功能、样式等，以便我们以后维护时⼀看即懂。另外，在团队开发⽹页时，合 理适当的注解有利于团队看懂这些代码是对应哪⾥的，以便顺利快速地开发⽹页。 CSS注解是以“/*” （斜杠和星号）开始，以“*/” （星号和斜杠）结束，注解说明内容放 到“/*”与“*/” 之间。本⼩节实例带有CSS注解的完整代码如下： W3Cschool （）最 的技术知识分享与学习平台 此篇内容来⾃于⽹站⽤户上传并发布。