📄 css0101.htm
字号:
<html>
<head>
<title>洪恩在线 - CSS教程</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="/pc/pc.css">
<link rel="stylesheet" href="/pub/css/home.css">
<meta name="keywords" content="电脑乐园,电脑,乐园,交互教程,交互,教程,教育">
</head>
<body bgcolor="white" text="black" topmargin="10" leftmargin="0" marginwidth="0" marginheight="10">
<!--顶部开始-->
<script language="Javascript" src="/pub/js/head.js"></script>
<!--顶部结束-->
<table width="760" height="20" border=0 cellspacing="0" cellpadding="0" align="center">
<tr>
<td height=20 class="p1" bgcolor="#E8E8E8" align="left"><img src="/pc/img/blank.gif" width="12" height="8"><font color="#000000"><font color="#FF9966">当前位置</font>：<a href="/default.htm" class="under">洪恩在线</a>
-> <a href="/pc/index.htm" class="under">电脑乐园</a> -> CSS教程</font></td>
</tr>
</table>
<table width="760" border=0 cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="15"></td>
</tr>
</table>
<table width="760" cellspacing="0" border=0 cellpadding="0" align="center">
<tr>
<td width="145" valign="top" bgcolor="#E8E8E8" align="left" style="color:blue" class="p1" height="123">
<br>
<table width="145" border="0" cellspacing="0" cellpadding="0" bordercolor="#F8AC0E" height="20">
<tr bgcolor="000099" valign="middle">
<td width="115" align="center" class="p2"><b><font color="#FFFFFF">CSS教程</font></b></td>
<td height="20" bgcolor="#E8E8E8" width="13"><img src="/pc/img/title_00.gif" width="13" height="20"></td>
<td height="20" bgcolor="#E8E8E8" width="17"> </td>
</tr>
</table>
<p class="p1" style="line-height:17pt" align="left"> <font color="#CC3399">→</font>
CSS快速入门<br>
<font color="#CC3399">→</font> <a href="css0201.htm">怎样编写CSS</a><br>
<font color="#CC3399">→</font> <a href="css0301.htm">CSS属性</a><br>
<font color="#CC3399">→</font> <a href="css0401.htm">CSS定位</a><br>
<font color="#CC3399">→</font> <a href="css0501.htm">CSS滤镜</a> <br>
<br>
</p><br>
<p align="center" class=p1> <a href=/pc/bin/msg.pl?file_id=k_css target="_blank"><img src="/pc/img/message.gif" width="64" height="54" alt="请您留言" border="0"><br> 谈谈您的看法</a>
<br>
<script language="javascript">
speak_num="za"
</script>
<script language="javascript" src=/pc/var/pc_k_css.js>
</script>
<script language="javascript">
var num=0
if (!isNaN(speak_num)){
num=speak_num;
}
else{
num=0
}
document.writeln ("已有")
document.writeln (num)
document.writeln ("条发言")
</script>
</p>
<br>
<p class="p1" style="line-height:17pt" align="left"> </p>
</td>
<td width=1 bgcolor=#0586D7 height="123"><img src="/pc/img/blank.gif" width="1" height="1">
</td><td width=15 background="/pc/img/line.gif"><p> </p></td>
<td valign="top" background="/pc/img/line.gif" width="584" height="123" class="p2">
<p align="center"><b><span class="p3"><br>
<font color="#3366CC">CSS快速入门</font></span></b></p>
<p align="right" class="p1"> </p>
<hr color=blue size=1>
<p class="p2" style="line-height:17pt"> CSS是Cascading Style Sheets（层叠样式表单）的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在您丰富的想象力下千变万化。</p>
<p> <img src="img/css0511.gif" width="150" height="137" align="texttop" border="0" alt="图1">
<img src="img/css02.gif" width="154" height="52" align="absmiddle" border="0" alt="图2"> <br>
<font color="#CC3399">图1</font> <font color="#CC3399">图2</font></p>
<p class="p2" style="line-height:17pt"> 看到上面的两幅图片，您可能会认为这是用photoshop或者是其他图形处理软件制作的吧。可是上面的例子却完全是用CSS编写的。我们来看一下它的源代码（不要以为讲代码您会搞不懂，很简单的^_^）：</p>
<p class="p2" style="line-height:17pt"> <font color="006666"><html><br>
<head><br>
<title>css word</title></font> <br>
<font color="006666"><style></font><font color="CC33CC">//*CSS样式定义开始*//</font>
<br>
<font color="006666"><!-- <br>
div<br>
{width：200; filter blur(add=true,direction=135,strengh=20);
<br>
}</font> <font color="CC33CC">//*定义DIV范围内的样式，包括宽度(width)、模糊滤镜属性(blur)*//</font>
<font color="006666">--> <br>
</style></font><font color="CC33CC">//*样式定义结束*//</font> <br>
<font color="006666"></head><br>
<body> <br>
<div></font><font color="CC33CC">//*以下的区域内采用<head>中<style>里面定义的格式*//</font>
<br>
<font color="006666"><p style="font-size：48;font-style：bold;<br>
color:red;">hongen </p></font><br>
<font color="CC33CC">//*定义字体样式(font-style)，包括字体大小(size)、粗细(bold)、颜色 (color)*//</font><br>
<font color="006666"> </div> <br>
</body> <br>
</html> </font></p>
<p class="p2" style="line-height:17pt"> 上面的代码中以红色显示的是注释部分，用于帮助您更好的理解代码的含义。上面的这一段代码产生的是如图2的效果。而其中字体的模糊效果就是运用了CSS的滤镜功能。滤镜功能是CSS非常有趣也非常吸引人的一个功能，我们将在后面的章节中介绍。</p>
<p class="p2" style="line-height:17pt"> 实际上CSS的代码都是由一些最基本的语句构成的。它的基本语句的结构是这样的： <br>
<font color="006666">选择符{属性：属性值}</font> <br>
看，是不是很简单，只有三部分。 </p>
<p class="p2" style="line-height:17pt"> 我们结合上面的代码来讲解，比如上面代码的<head>…</head>中，使用<style>来指定样式。
<br>
一般说来，<style>下面的CSS语句是以注释语句的形式书写的，也就是上面代码中的<!-- … -->符号包含的部分。所以，上面的例子中定义页面样式的语句是：<br>
<font color="006666">div{width：200;filter：blur(add=true,direction=35,strengh=20);}</font>
<br>
在上面的语句中，DIV是选择符，选择符可以是HTML中任何的标识符，比如P、DIV、IMG甚至BODY都可以作为选择符。 <br>
这里用DIV做选择符，就是说在HTML中，编辑在<DIV>中的页面格式将以上面语句中大括号内定义的格式显示。 <br>
括号内的WIDTH和FILTER就是属性。<br>
WIDTH定义了DIV区域内的页面的宽度，200是属性值。 <br>
FILTER定义了滤镜属性，BLUR是它的属性值，该属性值产生的是一种模糊效果，其小括号内定义的是BLUR属性值的一些参数。 <br>
<font color="#FF0033">ADD</font>参数有两个值：True和False。分别指定图片是否被设置成模糊效果。<br>
<font color="#FF0033">Direction</font>参数是用来设置模糊的方向。0度代表垂直向上，然后每45度一个单位，例子中的135代表底部向右135度，每一个度数单位都代表一个模糊方向，如果您感兴趣的话，可以参照后面的讲解中详细的参数设定。
<br>
<font color="#FF0033">Strengh</font>代表有多少像素的宽度将受到模糊影响，参数值是用整数来设置的。 </p>
<p class="p2" style="line-height:17pt"> 我们看到除了在<HEAD>中有CSS 的定义，在<BODY>中也有一段CSS定义：
<br>
<font color="006666"><p style=“font-size：48;font-style：bold;color：red;”>hongen</p></font>
<br>
这里Style是内嵌到<P>中来定义该段落内的格式的。我们发现在<BODY>中的CSS语句与定义在<HEAD>中还有些不同，它是用<
STYLE = >直接定义的。这种定义方法非常适用于编写的代码比较多的情况。<br>
而上面的代码的CSS定义格式则非常适用于代码较少、结构较简单的情况。 <br>
按照CSS语句的基本格式，我们可以看出上面定义P段落内的CSS代码中font-size、font-style和color是属性，分别定义<P>中“hongen”字体的大小(size)、样式(style)和颜色(color)；<br>
而48、bold、red是属性值。意思是“hongen”将以48pt、粗体、红色的样式显示。由于整个段落是定义在<DIV>中的，所以hongen又将显示出<head>中定义的滤镜属性来。最终的结果就如同图2一样。
<br>
图1中的效果也是用很简单的CSS语句实现的，只是运用了CSS中的滤镜属性而已。 </p>
<p class="p2" style="line-height:17pt"> 通过上面的讲解，我们可以看到用很简单的CSS语句就可以实现许多需要专业软件才可以达到的效果。利用属性可以设置字体、颜色、背景等页面格式；利用定位可以使页面布局更加规范、好看；利用滤镜可以使页面产生多媒体效果。
怎么样，CSS的功能是不是很强大，在下面的教程中我们将对它进行详细的讲解。 </p>
<hr color=blue size=1>
<p class="p1" align="right"> <a href="css0201.htm">下一节</a> </p>
<p> </p><br>
<p align="center" class=p2><a href=/pc/bin/msg.pl?file_id=k_css target="_blank"><img src="/pc/img/message.gif" width="64" height="54" alt="请您留言" border="0"><br> 谈谈您的看法</a>
<br>
<script language="javascript">
speak_num="za"
</script>
<script language="javascript" src=/pc/var/pc_k_css.js>
</script>
<script language="javascript">
var num=0
if (!isNaN(speak_num)){
num=speak_num;
}
else{
num=0
}
document.writeln ("已有")
document.writeln (num)
document.writeln ("条发言")
</script></p>
<br>
<p> </p></td><td width=15 background="/pc/img/line.gif"><p> </p></td>
</tr>
</table>
<!--底部开始-->
<script language="Javascript" src="/pub/js/foot.js"></script>
<!--底部结束-->
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -