当前位置:首页>CSS>CSS教程>CSS教程

CSS教程

作者:微学网发布时间:2019-08-10 15:39:11

CSS产生背景

现如今,我们可以在互联网上看到很酷的动画,出色的交互效果,以及从PC到移动的响应式交互。

可能觉得已经习惯了,但你不知道的是,20多年前,网页只提供了基本的显示文档的功能,没有装饰,它就像黑白报纸一样简单。

你会问:一个网页如何使它看起来如此美丽?

答案是:CSS

最初的网页样式

1990年,TimBerners-Lee和Robert Cailliau共同发明了web,1994年,web真正走出了测试室。

自从HTML被发现以来,样式以各种形式存在。不同的浏览器结合各自的风格语言,为用户提供对页面结果显示的控制,最初的HTML只包含一些简单的显示属性。

随着HTML的发展,为了满足页面设计者的需求,HTML增加了许多显示功能,然而,随着这些功能的增加,HTML变得越来越混乱,HTML页面变得越来越庞大臃肿,所以CSS应运诞生了。

CSS的诞生

20 世纪 90 年代蒂姆·伯纳斯·李(Tim Berners-Lee)发明万维网,创造 HTML 超文本标记语言。此后网页样式便以各种形式存在,不同的浏览器有自己的样式语言来控制页面的效果,因为最原始的 Web 版本中根本没有提供一种网页装饰的方法。

20世纪90年代,随着HTML的迅速发展,浏览器根据自身的HTML语法结构支持不同风格的样式语言。在最初的HTML版本中,用户可以决定如何显示页面本身,因为只有几个显示属性。

但是随着HTML的发展,HTML增加了很多功能,代码变得越来越大,HTML变得越来越混乱。网页也会丢失掉语义,这使得维护代码变得困难,因为它很混乱,如下的例子可见

<MULTICOL COLS="3"GUTTER="25">
  <P><FONT SIZE="4"COLOR="RED">你好,欢迎来到css的世界!</FONT></P>
</MULTICOL>

于是装饰网页样式的 CSS(层叠样式表,Cascading Style Sheets)诞生了。
经过多年的努力 ,到1996年底,最终CSS语法变成了现在这个样子:

htmL{
    margin-left:2cm; 
    font-family:"Times",serif; 
}
h1{
    font-size:20px;
}

CSS是什么

层叠样式表(英文全称:Cascading Style Sheets)是一种用来体现HTML(标准通用标志语言的一个应用)或XML(标准通用标志语言的一个子集)等文件样式的计算机语言。

CSS 是一种能为网页增添样式的电脑语言。换句话说,它就是能为你的网站修改字体样式、颜色、网页背景、甚至是华丽的动画与 3D 效果、让你增添设计感的工具。

CSS不只可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行样式的格式化。

为什么学习CSS

  • CSS将从基础开始建设直到全面替代传统web设计方法。W3C组织创建的CSS技术将替代HTML的表格、font标签、frames以及其它用于表现的HTML元素。

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

  • 缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

  • 强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了,有了CSS,我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题,改变字体颜色,字体样式等等。

  • CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。

  • 提高易用性。使用CSS可以结构化HTML,例如:标签只用来控制段落,heading标签只用来控制标题,table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

  • 可以一次设计,随处发布。你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。

  • 更好的控制页面布局。不用多说。

  • 表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。

  • 更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。

学习CSS教程的前置储备知识

  • 只需要掌握html知识即可

CSS教程面向的学习人群

  • 后台开发程序员: 很多程序员对于CSS布局不是那么精通,却需要常常与CSS打交道;

  • 网页美工设计师: 学习CSS技术可以更好设计符合网页的美工图,由于网页美工图与平面设计有一定区别,所以可以学习CSS了解网页美工设计技巧;

  • 淘宝/天猫相关工作: 现在淘宝/天猫招聘客服、编辑、美工工作岗位越来越多,而宝贝编辑、淘宝店铺优化、淘宝店铺装修排版离不开CSS网页布局知识,学会CSS非常有利于找工作;

  • SEO优化师:对网页进行SEO优化布局,难免需要对HTML代码进行编辑,CSS可以让您得心应手实施SEO优化;

  • CSS自学爱好者:如果您爱好网页,希望从网络获利,依然可以学习CSS技术。

CSS教程的学习的目标

  • 熟练使用css写出优美的网页

  • 能够兼容各种浏览器