首页 > Web开发 > 详细

CSS基础知识

时间:2014-07-03 18:06:40      阅读:425      评论:0      收藏:0      [点我收藏+]

     

  花费了一段时间,终于对Html有了一定的了解,随后又开始进行CSS的战斗。如果大家想学习Html的话,可以参考我以前的博客。

       Html基本语法

       网页中的信息排序显示

       Html中的表格

       Html网页结构化标记的应用

               Html中的表单

              Html中的超链接

            网页中的框架

  本人认为Html与CSS都容易上手,Html是基础,CSS只不过是在Html的基础上衍生出对网页美观的部分。那么到底什么是CSS呢?且随小编来学习一下。


  1.什么是Web标准

     Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的HTML、XTHML、Javascript以及CSS等。


  2.Web标准的目的。

     在于创建一个统一的用于WEB表现出的技术标准,以便于通过不同的浏览器或终端设备向最终用户展示信息内容。


  3.Web标准的好处


   1.提高页面浏览速度。使用CSS方法,比传统的WEB设计方法至少节约了50%以上的文件尺寸。

   2.缩短改版时间,将表现(样式/外观)与内容(信息/数据)相分离。只要简单的修改几个CSS文件就可以重新设计一个有成千上万页面的站点。

   3.降低网站流量费用。

   4.更容易被搜索引擎搜索到,提高网站的排名。

   5.内容能够被更广泛的设备所访问。

 

   小结:原来Web标准就是为了建议一个统一的标准,那么让我们来访问的时候出现相同的信息。现在国外都可以使用打印机上网了,甚至比尔盖茨家都是智能。那么Web标准就是来统一显示用户的信息,无论我们用上东东上网都可以得到相同的答复。


 Web的基本构成


   结构、表现、行为。

 结构:使内容更加具有逻辑性和易用性(如文章标记、列表、标题等)----------Html

 表现:用于修饰内容的外观的样式的东西称为表现-----------------------------------CSS

 行为:对内容的交换及操作效果-------------------------------------------------Javascript

  小结:说了这么多,到底什么是CSS呢?小编在这里打个比方。Html就好比一个人的身材,有的人喜欢长腿欧巴,有的人习惯小巧玲珑的欧巴,那么这就是Html的前身,整体的结构。有了一个好的身材,还得需要着装打扮啊。这就是CSS,通过CSS的修饰表现的更加动人。那么如果再会点Javascript这么性感的舞姿的话,哇塞……………………

 

  CSS概

 层叠样式表,用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

 正如上面的例子所说,CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。

 可能有人说,这个HTML也可以做的到啊。大家看一个小例子。

 

  Html代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面标题</title>

</head>

<body>
<h2><font color="#0000ff" face="黑体">CSS标记1</font></h2>
<p>CSS标记的正文内容1</p>
<h2><font color="#0000ff" face="黑体">CSS标记2</font></h2>
<p>CSS标记的正文内容2</p>
<h2><font color="#0000ff" face="黑体">CSS标记3</font></h2>
<p>CSS标记的正文内容3</p>
<h2><font color="#0000ff" face="黑体">CSS标记4</font></h2>
<p>CSS标记的正文内容4</p>
</body>
</html>

  CSS代码

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面标题</title>
<stlye>
h2{
 font-family:黑体
 color:blue;
}
</style>
</head>

<body>
<h2>CSS标记1</h2>
<p>CSS标记的正文内容1</p>
<h2>CSS标记2</h2>
<p>CSS标记的正文内容2</p>
<h2>CSS标记3</h2>
<p>CSS标记的正文内容3</p>
<h2>CSS标记4</h2>
<p>CSS标记的正文内容4</p>
</body>
</html>

 Html与CSS相比的缺陷

1.维护困难。为了修改某个特殊标记的格式,需要花费很多的时间,尤其对于整个网站而言,后期修改和维护的成本很高。

2.标记不足。HTML本身的标记十分的少,很多标记都是为网页内容服务的,而关于美工的标记很难找到。

3.网页过“胖”。由于没有统一对各种风格样式进行控制,HTML的页面往往体积过大,占用很多宝贵的宽带。

4.定位困难。

 

总结:人类的智慧总是无处不在,从HTML到后来的CSS,这又一次分工合作的出现,因为把设计与美工相分离了。这再次体现了分工的专业化。有一点与《设计模式》中的单一原则类似,设计就是设计,美工就是美工,不要把过多的功能耦合在一块。不得不佩服人类的智慧。

 

CSS基础知识,布布扣,bubuko.com

CSS基础知识

原文:http://blog.csdn.net/luckyzhoustar/article/details/36458121

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!