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連帶關系很多,不是每一次都可以直接找對位置,在并不熟練的情況下,大家還是用最笨的方法,就是一個一個的試,經過一段時間的積累和經驗,你自然會很快的找到你要修改的地方了!

  說了這么多,重要的是給大家提供一個方法,這里阿諾也不可能把所有問題都討論到,有了方法,剩下的就靠大家的努力加細心還有耐心了!相信大家在這個過程中會體體會到一種成就感!

    相關文章:

發表評論:

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

手机捕鱼怎么下载
必赢体育 必发篮球投注量 欢乐斗地主如何组队玩 手机投注彩票合法吗 云南快乐时时今天 北京pk一期免费计划 德国彩票赛车pk10 双色球电子投注单怎么用 网络棋牌通比牛牛 安徽快三大小单双技巧 重庆时时彩龙虎3期计划 新亚洲娱乐 三分pk10玩法 福彩3d投注金额计算表 十一选五计划app 安徽时时快3走势图