当前位置: 首页 > Web开发 > CSS教程 >正文

编写CSS的感悟

来源:互联网时间:2021-01-11 10:53:28编辑:网友分享
在学习css的时候很多用户们对于编写CSS都不是很明白,觉得css很难学习,那么下面爱站小编就根据自己的经验为大家分享编写CSS的感悟。 比如我布

在学习css的时候很多用户们对于编写CSS都不是很明白,觉得css很难学习,那么下面爱站小编就根据自己的经验为大家分享编写CSS的感悟。
比如我布局可以这么写,然后我可以写一些小工具(也可以这么想,反正就是一个HTML模块,然后你可以在里面填写相应的结构化信息,交给程序员编写相应的 代码或者是JS脚本,复用之):
 

复制代码 代码如下:  

 

 

   


Knight's Personal Site

   

  • Home

  • About Us

  • Aticles

  • Photos

  • Contact Us



  •  
  •  
                     


Copyright © 2006 Sitename.com. Designed by
Free CSS Templates


 



小工具的示例:

 

复制代码 代码如下:

 

 

PHOTOS GALLERY

  编写CSS的感悟


然后你可以编写contentItem这个CSS类,利用CSS的一些选择器来设置样式。而你的布局信息,你可以选择用CSS的ID选择器来进行布 局。这样的好处就是结构清晰,易于复用。
另外一个值得一提的就是CSS的文件结构。这一直是个见仁见智的问题。当然,为了灵活性,你可以分割成几个CSS文件。比如我在写的时候就经常分成3个 CSS文件,分别是:reset.css,这个文件时用于设置浏览器的默认样式,你可以去网络上看看,Eric或者YUI的reset源文件,或者你可以 参看一些CSS Framework的代码。一个建议,要量身定制,不要盲目的拷贝;
layout.css,这个文件的用处,从文件名也很容易看出来,就是用来设置整个页面的布局信息的,像是某个DIV的 BACKGROUND,PADDING,MARGIN等,我都是在这里进行设置的;
elements.css,这个文件,我主要用来设置小工具的样式信息。上文编写的小工具为例,我可以这么写:

 

 

复制代码 代码如下:

 

 


.gallery { background-color:#FFF; border-bottom:#CCC solid 2px; border-right:#CCC solid 2px; padding:2px 2px 10px 2px; width:450px; }
.gallery img{ margin:0; width:100%; }


然后你可以到处粘贴了,舒服!

上文就是小编介绍编写CSS的感悟,小编不是专业的设计人员,编写这些CSS的目的其实也只是练习。万丈高楼平地起,首先还是要把基础打好。

上一篇: 介绍WebKit中可用的CSS高级特性

下一篇:如何让FORM 不换行

您可能感兴趣的文章

相关阅读