CSS是什么

2017-03-29 12:19:55
admin
1623
最后编辑:admin 于 2017-05-10 16:28:49

制作网页一般应该符合三个标准:结构要用HTML;行为用符合BOM、DOMECMAScript标准的JavaScript:表现是CSS,用于格式化网页、控制字体、布局和颜色等。

1997W3CThe World Wide Web Consortium)颁布HTML 4.0标准的同时,也公布了有关样式表的第一个标准CSS1http://www.w3.org/TR/REC-CSS1),自CSS1的版本之后,又在19985月发布了CSS2(http://www.w3.org/TR/REC-CSS2),样式表得到了更多的充实。

CSS就是Cascading Style Sheets的缩写,中文翻译为“层叠样式表”,简称样式表,根据W3C定义,CSS是一种对Web文档添加样式的简单机制。这些样式包括字体、颜色和间距等。

使用CSS能够把表现和结构分离出来,结构的改变,并不会影响表现,表现的改变也不会影响结构。例如,改变全局样式表中的一个规则,不管网页的布局是如何的,整个网站都将立即改变。

CSS作用:

1.       它可以控制颜色、版式设计,元素、图像尺寸和布局。

2.       用记事本就能实现。

3.       只要改一个CSS文件,就能控制整个网站外观。

4.       可以取代HTML的表格式布局、帧和其他外观。

CSS优点:

1.       减少网页的代码量,最终能节省用户的带宽和加速网页加载时间,一个网页打开时间长短,直接影响用户对这个网站的兴趣。

2.       减少服务器和带宽的费用,节约资金。

3.       加快开发速度,同时减少更新和维护的时间。Web2.0应用,将永远都是测试版,网站的内容不断地更新和修改,以适应用户不断变化的需求。而CSS很容易实现这些。

下面是一个样式表的例子,通过它,可以对样式表作用有一个感性的认识。可以使用记事本或其它网页编辑器输入以下代码:

<html>

<head>

     <title>第一个CSS例子</title>

</head>

<body>

     <H1>CSS样式表</H1>

     <P>领略CSS的强大魅力!</P>

</body>

</html>

 

保存为firstCSS.html后,在浏览器中打开,显示效果如图2-1所示。

然后在<HTML><BODY>标签之间插入以下代码:

<STYLE TYPE="text/css">

<!--

H1 { font-size: 30px; color: red;  font-family:黑体}

P { text-indent:1cm; background: green; font-family: 宋体 }

-->

</STYLE>

加入上述样式代码后保存,用浏览器再次打开firstCSS.html显示的效果如图2-2所示。在浏览器中,“CSS样式表”标题,字体尺寸:30像素,颜色:红色,字体:黑体。而在标记<p>中的内容,样式为文本缩进:1cm,背景:绿色,字体:宋体。

图2-1 一个简单的CSS样式表的例子

图2-2 增加各种样式后的效果图

通过图2-1和图2-2的对比,可以看出CSS功能的强大,并且可以感觉到CSS使用起来是非常地方便。

源代码:

<html>
	<head>
		<title>第一个CSS例子
		</title>
	</head>
	<STYLE TYPE="text/css">
		<!--
		H1 {
			font-size: 30px;
			color: red;
			font-family:黑体}
		P {
			text-indent:1cm;
			background: green;
			font-family: 宋体 }
		-->
	</STYLE>
	<body>
		<H1>CSS样式表
		</H1>
		<P>领略CSS的强大魅力!
		</P>
	</body>
</html>	


尝试一下 »


 

    • QQ讨论群
    • 关注微信
      • 欢迎咨询
      • 欢迎加入QQ群 16506021
    • 公众号:源宝网络