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

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

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

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

<div>      
网站内容       
</div>

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

<div id="box" class="boxstyle">      
网站内容       
</div>

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

<div id="box" class="boxstyle">      
<div id="box1" class="boxstyle1">      
 网站内容       
</div>      
</div>

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

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

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

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

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

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

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

<DIV CLASS="CLEAR CONTENT MENU">      
   <UL>      
     <li class="menufirst"><a href="#" id="home">心诺设计首页</a></li>      
     <li><a href="#" id='cata7'>网络动态</a></li>      
     <li><a href="#" id='cata6'>优化技巧</a></li>      
     <li><a href="#" id='cata2'>游来游去</a></li>      
     <li><a href="#" id='cata1'>这里那里</a></li>      
     <li><a href="#" id='cata4'>看来看去</a></li>      
     <li><a href="#" id='cata5'>云里雾里</a></li>      
     <li><a href="#" id='cata3'>我爱设计</a></li>      
   </UL>      
</DIV>

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

.CLEAR {       
clear:both;       
}       
                
.CONTENT {       
width:950px;       
margin:0 auto;       
}       
                
.MENU LI A {       
text-decoration:none;       
text-align:center;       
color:#000000;       
padding:10px;       
}

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

.MENU LI A {           
text-decoration:none;           
text-align:center;           
color:#000;           
padding:10px;           
font-size:14px;           
}

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

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

评论列表

泉州吊车出租

泉州吊车出租 回复

CSS的原素太多了,搞不定啊(2018-11-18 17:31:24)
seanloo

seanloo 回复

这是个熟能生巧的事情,看的多了,用的多了,理解就深刻了(2018-11-18 18:55:33)
seanloo

seanloo 回复

呵呵,其实我最初就是这么开始的,一个一个的尝试,一个个的改,慢慢就熟练了(2011-07-14 09:19:00)
seanloo

seanloo 回复

慢慢来,其实也没你想象中那么复杂的(2011-07-14 09:19:35)
张劲

张劲 回复

特别喜欢你的主题 不知道你的新主题有没有共享啊 很喜欢啊(2012-11-26 22:09:44)
虎哥

虎哥 回复

这个可以学习一下哦(2012-11-07 12:19:31)
篷房租赁

篷房租赁 回复

学习怎么恶搞呢,楼主太有才了(2012-09-28 23:34:02)
阿芙香薰

阿芙香薰 回复

这个慢慢学,主要还是思路(2012-07-14 01:05:49)
阿芙香薰

阿芙香薰 回复

我也是从这里学起来的。(2012-07-14 01:04:05)
pp

pp 回复

好复杂啊,顶一下,以后要多多学习(2012-07-02 16:25:59)
搭配网

搭配网 回复

学些了,谢谢博主(2012-07-01 10:06:36)
amovo

amovo 回复

CSS+DIV是建站的最佳选择(2012-06-11 17:01:23)
aliang

aliang 回复

太好了,简单易懂!(2012-04-09 11:47:58)
情乐园商城

情乐园商城 回复

学习到了,对于我这个新手来说很有用,谢谢(2012-04-08 22:57:59)
艾芳汀

艾芳汀 回复

基本操作学习了哈(2012-03-23 18:35:44)
中蜂论坛

中蜂论坛 回复

已经好久没玩zblog了,现在改行做中蜂论坛.(2012-02-23 08:28:52)
无限极

无限极 回复

学习了,写的很好呢 (2012-02-20 13:41:39)
弱电工程网

弱电工程网 回复

需要恶补(2012-02-07 16:04:10)
照片墙

照片墙 回复

这个还是比较经典的教程呀,(2012-02-07 10:40:44)
鸿星尔克

鸿星尔克 回复

说什么呢?太激动了,那就真诚的说一句,谢谢楼主好了!(2011-10-01 22:59:42)
茵曼女装

茵曼女装 回复

我最近正好在学这些东西,受教了!(2011-10-01 22:58:26)
gxg1978

gxg1978 回复

不容易啊,从表格时代转来学CSS的人,都是伤不起的天使!(2011-10-01 22:57:13)
小青年

小青年 回复

收获颇多哦~~
自己小写了一段代码,达到了想要的效果~~
小小的成就感~~
谢谢心诺老师~~(2011-09-20 17:31:53)
孕妇防辐射服

孕妇防辐射服 回复

博主这篇文章很有用,对于新手来说有非常大的帮助,谢谢!(2011-09-17 20:53:05)
爱的快圣诞节

爱的快圣诞节 回复

爱施德 支持(2011-08-20 18:43:36)
23986.com

23986.com 回复

学习了。。谢谢分享(2011-08-20 16:48:02)
Mr.Zhou

Mr.Zhou 回复

学习网站模板设计的就需要.(2011-07-25 11:24:36)
维维博客

维维博客 回复

早就想你发表点这样的文章哈,让新手也学习学习。(2011-07-14 14:44:43)
维维博客

维维博客 回复

很好很好,必须支持啊。(2011-07-14 14:44:10)
王攀

王攀 回复

我网站百度蜘蛛杂老爬首页 其他页面都不去 想哭了(2011-07-14 13:25:06)
佘星星

佘星星 回复

清晰明了,简单易懂!学习!(2011-07-14 09:04:20)
seanloo

seanloo 回复

呵呵,其实我最初就是这么开始的,一个一个的尝试,一个个的改,慢慢就熟练了(2011-07-14 09:19:00)
仰肖

仰肖 回复

css学起来挺复杂的。。(2011-07-13 23:14:11)
seanloo

seanloo 回复

慢慢来,其实也没你想象中那么复杂的(2011-07-14 09:19:35)

发表评论

(必填)

(必填)

(选填)

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

最新发布

热门讨论