CSS(Cascading Style Sheets)层叠样式表示一种用来表示HTML或XML等的文件样式的计算机语言,能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
【CSS控制页面方式】
CSS对页面有很多控制方式,包括行内样式,内嵌式,链接式和导入式等。
行内样式:最为直接,直接对HTML使用Style属性:
<p style="color:#FF0000; font-size:20px; text
内嵌式:CSS代码卸载<head></head>之间,用在<style></style>标记进行声明:
<style type="text/css">
<!--
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:25px;
}
-->
</style>
链接式:将HTML页面本身与CSS样式风格分离成两个或者多个文件,使用频率最高:
先写CSS文档:
h2{
color:#0000FF;
}
p{
color:#FF00FF;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
在html中引用:
<link href="1.css" type="text/css" rel="stylesheet">
导入样式:采用import导入样式表,在HTML文件初始化时,会导入到HTML文件内,作为文件一部分,类似内嵌式的效果:
<style type="text/css">
<!--
@import url(1.css);
-->
</style>
【HTML基本元素】
HTML操作最多的对象是文字,段落,图片,背景,针对这些操作元素,对于这些操作元素CSS操作方法大同小异,针对这些对象有不同的操作方法。
【实战设计解析网页构建过程】
在网页设计过程中首先要思考网页有哪些元素,将相同或相似的元素组合在一起,起一个相同的class名称或者id,这样可保证在设置CSS样式过程中避免重复,减少代码,让自己的思路更加清晰。
下面对网站框架的实践:
源代码:
<html>
<head>
<title>廊坊师范学院</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-color:#339966;
}
.topbanner{
background-color:##fbc9ba;
}
.leftbanner{
width:80%;
height:500px;
vertical-align:top;
margin-left:0px;
padding-left:30;
color:#ffffff;
font-size:14px;
line-height:12px;
background-color:#6d1700;
}
.mainpart{
text-align:center;
}
-->
</style>
</head>
<body>
<table class="topbanner" align="center" cellpadding="1" cellspacing="0">
<tr><td><img src="log1.jpg" border="0"></td></tr>
<tr><td>
<table cellpadding="1" cellspacing="0">
<tr>
<td style="width:220px">
<p class="leftbanner">
<br><br>首页<br><br>分类讨论
<br><br>谈天说地<br><br>精华区
<br><br>我的信箱<br><br>休闲娱乐
<br><br>立即注册<br><br>离开本站
</p>
</td>
<td class="mainpart">
正文内容...
</td>
</tr>
</table>
<td>
</tr>
</table>
</body>
</html>
在网页设计最常用的是table,使用table可以减少很多CSS对齐样式,让自己的代码减轻,但是必须要思考清晰自己的布局。
【总结】
CSS让我们不断提高自己的审美观念,更像是在建一座高楼大厦,在建立大厦前不断构思,如何让用户体验度更好,如何让自己的代码尽可能少,都是我们需要不断思考的问题。