CSS 基础教程 在网页中使用CSS

所属分类: 网页制作 / CSS 阅读数: 1435
收藏 0 赞 0 分享

本教程系个人抽工作之余所作,按照我个人的想法我是想将一些基本的东西以较为轻松的语言描述出来,做成一个系列教程(这需要时间,我会努力抽空更新的),争取让每一个看这个东东的人都能有所收获,但是因作者本人水平有限,不妥当之处敬请留言批评指正。

本教程假设您没有任何CSS样式表语言的基础,甚至,您可以完全不知道CSS是什么东东,但是,我们同样假设您已经掌握了基本的HTML/XHTML语法。比如,您肯定知道<head></head>是表明页面的头部,<p></p>是表示页面的一个段落。

 

------------------------------------------------------分割线----------------------------------------------------------

 

1、正式开始学习之前的几句啰嗦话:

l        CSS不是什么高深的东东,它的编写环境也很简单,你只需要在WINDOWS自带的记事本中编写,然后在浏览器中查看效果就可以了,不要认为你是在编程,实际上css唯一的作用是用来控制网页中各种对象的表现形式而已,so…你要有充足的信心相信你一定可以学好。

l         虽然CSS学习起来并不困难,但是它也讲究一个动手能力和实际操作经验。我认为所有讲究动手能力和实际操作经验的知识学习起来最好的方法就是动手去实践,所以,我们为什么不实际练习一下呢?记住一点:看100页书,不如动手写10行代码。

2、本小结您将学习的内容:

l         CSS到底是什么东东,它有何作用?

l         在网页中加入CSS的方法。

-------------------------------------------------华丽的分割线------------------------------------------------------

第一个问题:CSS到底是什么东东,有何作用?

        在解决这个问题之前,我们先来看看网站中一个页面的基本组成:通常,一个页面(前台)由一下三个部分组成:结构,表现和行为。

 

注:

结构:通常指结构化的文本,通俗点理解就是经过结构化了的页面内容。用于结构化WEB标准技术有HTMLXHTMLXML等。

 

表现:指将页面中的元素用什么样的外观展示出来,比如文字的字体,字号,颜色,大小,是否有下划线,页面的背景颜色(图片),段落的对齐方式,元素在页面的摆放位置等等。通常用于表现的标准技术就是我们这个教程要讲的CSS(层叠样式表)技术。

 

行为:通俗理解为人(用户)与网页的交互,比如:我在页面的某个元素上单击一下鼠标,页面会给我什么反应——这就是一个简单的人与网页的交互,我们也可以大体理解为人与机器的交互,交流,沟通(这几个词可能不太准确,请原谅偶在汉语辞藻方面的贫乏)。目前主要表现行为的技术是各种所谓的脚本技术,比如:javascript(当前那是相当流行啊)。


  有了上面的知识铺垫,我们知道了CSS是用来控制页面表现的,也就是说是用来控制网页最终展示出来的外观的。CSS的英文全称是Cascading Style Sheets,翻译过来就是层叠样式表。我们为什么要使用CSS呢?先来看看不使用CSS的网页页面代码:

 

  从上面我们可以看出,用于控制内容表现形式的代码(红色部分)是和内容部分混杂在一起的,也就是说,二者互相混杂,不可分割。现在我们再来看看使用css后的代码:

 

注:上面的代码如果看不懂也没关系,后面我们会深入的讲解。

从上我们可以看出,使用CSS后可以将内容(红色部分)和表现(css部分)区分开来,只要你愿意,你甚至可以将CSS部分和HTML部分分别做成2个不同的文件,存放在不同的文件夹下。很显然,使用CSS将结构和表现分离后的代码维护方便,逻辑清晰,有条理,而且,我们甚至还可以把一个CSS文件应用给多个不同的HTML文件,来控制他们的外观,可以有效减小站点的体积。

 

上面我们简单介绍了CSS是什么和它能用来干什么的问题,那么我们如何才能在网页制作中使用CSS技术呢?

---------------------------------------------更加华丽的分割线--------------------------------------------------

第二个问题:在网页制作中运用CSS技术的几种方法:

 

 

CSS按其类型可以分为3类:

 

 

内嵌样式

内部样式

外部样式

 

 

这三类也分别代表了运用CSS3种不同方法,首先来看第一种方法:

 

 

1、内嵌样式(Inline Style)

Inline Style是写在标签里面的,内嵌样式只对所在的标签有效。

看如下例子:

 

<html>
<head><title>内嵌式样式(Inline Style)</title></head>

<body>

<P style="font-size:20pt; color:red">这个内嵌样式(Inline Style)定义段落

里面的文字是20pt字体,字体颜色是红色。</p>

<P>这段文字没有使用内嵌样式。</p>

</body>
</html>

 

本例在浏览器中显示效果如下:

 

  如上图,我们可以看到,这种方式使用CSS是将style作为HTML标签的一个属性加入的,也就是说,它还是没有真正的把结构和表现分开,所以,这种方法用的比较少。下面我们来看第二种方法:

 

2、内部样式(Internal Style Sheet)

内部样式是写在网页的<head></head>标签对中的,内部样式只对当前运用该样式的网页有效,在网页中使用内部样式的基本语法如下:

 

  注:上图绿色部分就是CSS代码,注意它是如何加入到页面中的,至于具体这些CSS代码如何书写,这个是我们后面要学习的内容,现在可以先不管它。下面我们来看第三种方法:

3、外部样式(External Style Sheet)

 

       如果很多网页需要用到同样的样式(回想我们以前在DREAMWEAVER中学习的模板),用什么方法呢?我们可以将样式写在一个以.css为扩展名的文件中,然后在每个需要用到这些样式的网页中引用该文件就可以了,这种方法就是外部样式表方法。那么,我们如何才能在一个页面中引用事先准备好的样式表文件呢?通常我们有2种方法,一种称为“链接”,另一种称为“导入”,这里我们先介绍“链接”的方法,另一种在后面的学习中再去理会。在一个页面中“链接”一个样式表文件的语法格式如下:

 

  注意:上图中的URL是指的被引用的CSS文件的URL,而且LINK语句还有别的属性,这里暂时先不加以说明,后面我们学习到的时候再详细讨论。

  补充说明:被引用的CSS样式文件中应该只有基本的CSS语句,不要其他任何东东。例如我们要实现和第一个例子一样的效果,我们可以新建一个记事本文件,输入如下代码:p{font-size:20pt;color:red}然后将这个文件的扩展名改为"css",这样就做好这个样式文件了。至于这条语句究竟是什么意思,相信聪明的你已经猜到了,对的,没错,它的意思是将所有的P标签(段落)中的文本外观变为字号:20PT,颜色:红色,当然了,如果实在不明白也没关系,后面我们会一一介绍。

---------------------------------------------本小节最后一条分割线--------------------------------------------------

3种样式表使用方法对比:

    使用外部(Extenal)样式表,相对于内嵌(Inline)和内部式(Internal)的,有以下优点 :


a.样式代码可以复用。一个外部CSS文件,可以被很多网页共用。


b.便于修改。如果要修改样式,只需要修改CSS文件,而不需要修改每个网页 。


c.提高网页显示的速度。如果样式写在网页里 ,会降低网页显示的速度,如果网页引用一个CSS文件,这个CSS文件多半已经在缓存区(其它网页早已经引用过它),网页显示的速度就比较快。

---------------------------------------------SORRY,还有一条分割线,哇哈哈哈-------------------------------

课外练习:

将上面介绍的几种方法逐一实现,理解每种方法的原理,脑袋里面多问自己几个问题,想想每种方法各自有什么优缺点。

更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

  利用CSS配合JavaScript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:   通过许多实际项目,
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”,在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程:li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符: ul li{ list-style-type:none; } B).如果你想将列表符换成图像,则: ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位(position)

  使用CSS来定位页面内层的位置,一直是比较难以掌握的事情,很多时候,往往被绝对定位的元素,总是以浏览器的左上角为坐标原点,此时,如果浏览器的大小改变,被定义的层就会偏离设计想要的位置,让人很挠头。   其实,要想控制好层的绝对定位,只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

  如果想熟练掌握DIV和CSS的布局方法,首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin),如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

  在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。   相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

  水平对齐(text-align),用以设定元素内文本的水平对齐方式。   1.语法   text-align具体参数如下: 语法:text-align:left|right|center|justify 说明:设定元素内文本的水平对齐方式。 参数:left:左
收藏 0 赞 0 分享
查看更多