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

所属分类: 网页制作 / CSS 阅读数: 1389
收藏 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入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多