CSS恶补及样式修改 新人如何快速上手

2012-5-2 10:16:59 | tags | views

  首先,这篇文章是针对新手们如何快速对网站的样式进行修改,即使你没有一点css的基础,看了这篇文章,也会进行简单的修改!因为看到论坛上有太多的人都是针对模版中一些样式的疑问,如:字体大小,导航居中,居左,居右等等,这里将具体针对一些论坛中提到的问题一起讲解一下如何对模版样式进行修改!

  废话少说,直接奔重点!我们知道如今绝大部分网站通过DIV+CSS的结构排版布局,但是你们知道什么是DIV+CSS吗?别问我,我也说不出个所以然来,这是实话!按照我的理解,div相当于一个容器,通过<div>....</div>这种形式将网站的内容都放置在这个容器里面,css就是装饰这个容器的!这个应该很好明白把!而这种布局的好处,就是方便对网站整体的风格进行管理!

  所以用web语言翻译上面的解释,可以表示为:

XML/HTML代码
  1. <div>  
  2.   网站内容   
  3. </div>  

  而一个网站布局里面用到的这种结构小则几十,多则上千,要对每个容器赋予不同的样式,进行不同的装饰,就必须对其进行命名或者编号,表现为:

XML/HTML代码
  1. <div id="box" class="boxstyle">  
  2.   网站内容   
  3. </div>  

  这里的id="box"意思就是这个容器的编号为"box",而class="boxstyle"意思就是这个容器被赋予了名为"boxstyle"的样式,一般来说,只需要class="boxstyle"这个就可以了,id的存在是为了实现一些更复杂的效果!这里不细说!当然也有嵌套结构,即大容器里面在放小容器:

XML/HTML代码
  1. <div id="box" class="boxstyle">  
  2.   <div id="box1" class="boxstyle1">  
  3.    网站内容   
  4.   </div>  
  5. </div>  

  更复杂的还有更深层次的嵌套关系,到时候就需要细心和耐心进行调式了!这里有一点要注意,容器的ID编号一般是唯一的,除非是有着共同的功能和作用,一般情况下是不会重复命名的,这也跟设计师对这方面的处理习惯有关!

  我们在来说说css,前面说了,css的作用就是起到一个装潢修饰的作用,无非也就是控制这个容器的长度(height),宽度(width),颜色(color),背景(background)等等....一些属性!针对这些属性赋予不同的值,便会产生不同的效果!这里列举一些最基本,最常见的css属性,以及这些属性的赋值规律及说明:

CSS代码
  1. width:100px; (宽度为100像素,px为像素单位)        
  2. width:90%; (宽度为外部容器宽度的90%)        
  3. height:110px; (高度为100像素,同宽度类似)        
  4. height:90%; (高度为外部容器宽度的90%)        
  5. color:#FFFFFF; (控制字体颜色,这里是白色,黑色就是#000000,这里的颜色代码很多工具都可以查询得到)        
  6. float:rightright; (浮动属性,这个是容器居右,还有left是居左,center是居中)        
  7. background-color:#FFFFFF; (背景色为白色)        
  8. font-size:12px; (字体大小为12,标准大小)        
  9. font-weight:nomal; (字体粗细为正常,blod为加粗)        
  10. padding:2px 3px 4px 5px; (表示容器内容的内容与容器的距离,按照上,右,下,左的顺序分别为2px,3px,4px,5px)        
  11. padding:2px 5px; (这个其实是padding:2px 5px 2px 5px的缩写,其意义参考上面的理解)        
  12. padding:5px; (这个是padding:5px 5px 5px 5px的缩写,如果为padding:0,说名内边距为0,上右下左都是0)        
  13. padding-top:2px; (容器内部与容器顶部的距离为2px)        
  14. padding-right:2px; (容器内部与容器右边的距离为2px)        
  15. padding-bottom:2px; (容器内部与容器底的距离为2px)        
  16. padding-left:2px; (容器内部与容器左边的距离为2px)        
  17. margin:2px 3px 4px 5px; (这个和padding的用法一样,只不过这个表示的是容器的外边距,一般控制的是容器与容器之间的距离)        
  18. border:0; (容器边缘没有外框线条,和padding用法一样,如果是1px,说明容器边框线条宽度为1个像素宽)        
  19. text-align:center; (文字居中,left居左,rightright居右)     

  暂时想到的基本的就这些,用到最多的也是这些,起码大家在看到这些的时候不会陌生,知道它们是干嘛的!当然还有很多,但是只要大家知道方法,相信其他的属性大家都会知道怎么去运用了!

  好了,基础知识恶补到这里,在来具体说说问题:

  有网友发消息问如何修改导航的字体颜色?问题来了,我们首先要知道我们需要改哪个文件,即使知道要改css文件,你也要知道怎么找到这个css文件,死办法,在网页上,右键-->查看源文件,你会看到网页所有的html代码,你找到有关*.css的文件名,一般在页面的上部,以<link rel="stylesheet" type="text/css" href="****.css" />的格式加载的,有的模版可能不只一个css,在不知道的情况下,只有一个个的找,这是个细活,需要一定的耐心和细心的!

  那么,我们到底怎么个找法呢?前面说了,所有容器都是有编号或者样式名的,以这个字体大小的问题为例,sean_cms模版的导航是放在下面这个位置:

XML/HTML代码
  1. <DIV CLASS="CLEAR CONTENT MENU">  
  2.    <UL>  
  3.      <li class="menufirst"><a href="#" id="home">心诺设计首页</a></li>  
  4.      <li><a href="#" id='cata7'>网络动态</a></li>  
  5.      <li><a href="#" id='cata6'>优化技巧</a></li>  
  6.      <li><a href="#" id='cata2'>游来游去</a></li>  
  7.      <li><a href="#" id='cata1'>这里那里</a></li>  
  8.      <li><a href="#" id='cata4'>看来看去</a></li>  
  9.      <li><a href="#" id='cata5'>云里雾里</a></li>  
  10.      <li><a href="#" id='cata3'>我爱设计</a></li>  
  11.    </UL>  
  12. </DIV>  

  这样我们就知道这个容器被赋予了3个样式,共同作用在这个容器上,分别是clear,content ,menu用空格分开的,现在我们知道了css文件,也知道容器样式,就可以有目的的找这几个样式了:

CSS代码
  1. .CLEAR {   
  2. clear:both;   
  3. }   
  4.   
  5. .CONTENT {   
  6. width:950px;   
  7. margin:0 auto;   
  8. }   
  9.   
  10. .MENU LI A {   
  11. text-decoration:none;   
  12. text-align:center;   
  13. color:#000000;   
  14. padding:10px;   
  15. }   

  这里看到的clear和content都不是我们最终要改的地方,而唯一和menu有关的,带有颜色属性的就是第三个样式,在这里将color:#000000;改成你需要的颜色就可以了!你也可以在这里添加其他属性:

CSS代码
  1. .MENU LI A {       
  2. text-decoration:none;       
  3. text-align:center;       
  4. color:#000;       
  5. padding:10px;       
  6. font-size:14px;       

  这里添加了一个font-size:14px的属性,将字体的大小进行控制,也许你在修改的时候,会碰到没有效果,因为css连带关系很多,不是每一次都可以直接找对位置,在并不熟练的情况下,大家还是用最笨的方法,就是一个一个的试,经过一段时间的积累和经验,你自然会很快的找到你要修改的地方了!

  说了这么多,重要的是给大家提供一个方法,这里阿诺也不可能把所有问题都讨论到,有了方法,剩下的就靠大家的努力加细心还有耐心了!相信大家在这个过程中会体体会到一种成就感!

    相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。