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

前端  /  管理员 发布于 7年前   412

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

本教程假设您没有任何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标准技术有HTML、XHTML、XML等。

 

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

 

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


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

 

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

 

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

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

 

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

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

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

 

 

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

 

 

•内嵌样式

•内部样式

•外部样式

 

 

这三类也分别代表了运用CSS的3种不同方法，首先来看第一种方法：

 

 

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 ul li 的使用及浏览器兼容问题

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客