在校学习近一年时间了,我们都学习了很多的知识,像有趣的Flash,用它可以做出动感强,画面炫丽的网页动画;“魔术师”-photoshop用它来点缀网页确实可以增彩不少,它可以将图片进行各式各样的处理,也可以将你脑海中的图像真实的表现出来(当然,你要具备PS高手级的技术);但说到网页,那就尤为重要了。而在现在如果想要做出集功能全面、布局得当、美观等等为一体的网页的话,少了CSS是万万不行的。
CSS(Cascadding style sheet)中文翻译为“层叠样式表”,简称样式表。
CSS的定义是由三个部分构成:
选择符(selector)
属性(properties)
属性的值(value)
基本格式为:选择符{属性:值;}
CSS的应用分为三种即为:行间样式、内部样式和外部样式;
内部样式写在<head>内
<style type=“text/css”>…</style>
内部式样表与行间式样表的相似之处在于,也是将CSS式样编写在页面之中,所不同的是,可以将样式表统一放置在一个固定位置
行间样式写在<body>内
<style=“color:blue”>
行间式样表由标签的style属性支持,css代码直接写在标签内。是css样式定义的基本形式,然而我极力不推荐这种式样表编写方式。
文件外调用(后缀名为.css)
<link rel=“stylesheet”href=“style.css”type=“text/css”>
外部式样表是CSS应用中最好的一种形式.将CSS代码单独写在一个独立文件之中,由网页进行调用.多个网页可以调用同一个文件,因此能有实现代码的最大化重用‘及网站文件的最优化配置
CSS选择器分为三种:类别选择器、标签选择器和公共类选择器;
margin属性怎么用input{属性:值}
伪类
a:link{属性:值}
a:visited{属性:值}
a:active{属性:值}
a:hover{属性:值}
公共类
.zidingyi{属性:值}
注意:
1.选择公共类自定义名称必须是由字母、数字、下划线和连字符组成,并且必须是以字母开头的
2.所有的CSS的尽量采用外部调用<link href="style/style.css"
rel="stylesheet"type="text/css"/>
书写时重定义的最先,伪类其次,自定义最后(其中a:link a:visited a:hover a:actived要按照顺序写)便于自己和他人阅读。
3.多使用样式表
一个字或一类要用样式最好用样式表。这一条我也信服因为有一批文字要写样式,但是文字都分布在不同段落。要写样式很是麻烦,比如有N个字在X个位置上,其样式为字体:黑体,颜:红,字号:12px,字间距:2px,于是乎在X个位置上写下了<font face="黑体"color="red"size="12px">...</font>这样的代码可恶心了,但用了样式表的自定义类
.ziti{
font-family:黑体;
color:red;
font-size:12px;
}
这样写一次性就写好了,只要在X个位置上写下class="ziti"的代码就OK了,既省时又容易修改。
4.注意格式
这一点是从B同学哪里学来的,就是注意各个标记的层次关系,只有一个好处也是最突出最特别的有点,容易检查标记是否闭合,层级关系一目了然。例如:
<div id="div_Container"><!--页面层容器-->
<div id="div_Header"></div><!--页面头部-->
<div id="div_PageBody"><!--页面主体-->
<div id="div_Sidebar"></div><!--侧边栏-->
<div id="div_MainBody"></div><!--主体内容-->
</div>
<div id="div_Footer"></div><!--页面底部-->
</div>
5.闭合问题
在XHTML中,每一个打开的标签都必须关闭。<meta…/>、<img…/>;空标签也要关闭,在标签尾部先敲个空格再使用一个正斜杠"/"来关闭它们。例如:<br />、<hr/>
6.属性名必须小写
在XHTML中,属性必须小写。如class属性,不允许使用CLASS或Class这样的形势
7.不允许使用属性的简写
单选按钮的checked属性和option的selected属性在XHTML中不允许使用简写。必须写完整如checked=“checked”,selected=“selected”
8.给所有属性值加引号
在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。还必须用空格分开属性。例:<hr width="75%"size="7"/>这也是不正确的.
9.使用CSS对页面进行合理的布局与框架的实例;
在制作网页的时候,不可避免的遇到框架结构设计的问题。对于这个问题,现在大多数人都采用表格(Table)来解决这个问题。可是在现在这么一个新旧交替如此迅
速的时代,古老的方法将渐渐被新的方法所取代。毫无疑问,新兴起的DIV技术将取代表格(Table)在市场一统的局面,成为现在更多的使用者所青睐的技术。该技术的新的体现方式以及其新的理念,将使网站编写进入一个新的层面。
我们所熟知的表格(Table)在网页当中,不但所编辑的代码相当繁琐,所占用的空间也是非常大。如果一个网页的代码非常的复杂的话,那么它的容量大小就会“节节攀升”,从而影响到它运行的速度。而DIV最显著的功能就是对整个网站的代码进行了优化,不但使其方便修改,更使得整个网站运行速度快捷而平稳。这就是使得DIV的认知学习运用,将会对我们将有非常大的助益,使我们所编写的网站更加的简洁,方便,整齐,并易于修改。
div是XHTML指定的专门用于布局设计的容器对象;它与其他XHTML对象一样,我们只需应用<div></div>这样的标签形式,将内容放置在其中,便应用div标签
div除了可以直接放入文本,也可以放入其他标签,也可以多个div进行嵌套使用,最终目的就是合理的标识出我们的页面区域
div对象在使用时,同其他XHTML一样,可以加入其它属性,如:
id,class,align,style等,而在CSS布局方面,为了实现内容与表现的分离,不应当将align,style等编写在XHTML页面的div标签之中,因此,div最终代码只能拥有以下两种形式:
<div id=“id名称”>[…]</div>或<div class=“class名称”>[…]</div>
我们首先来看看DIV,通俗来说,它是一个盒子,将一些东西(属性)装在里面。可以把它定义成一个内容块。
body{}
#div_Container{}
#div_Header{}
#div_PageBody{}