div+css 04 认识和使用CSS(定义类,class,id,内外部的引用)

2009-10-15  分类：DIV+CSS 标签:  作者:fanzg


网页上面文字的 色彩 还有大小 等等

都可以说 归功于 css

先来看看一个效果。

这是一个网页， 现在看到的代码都是 上节视频说道的 一些标准化。

我们可以使用 这个作为以后 网页的一个模板页面

现在页面 什么东西都没有，加入一些文字。

下面加入一些 效果， 看到了吧 ， 这是简单的 改变文字颜色，可以说这样
就使用了 CSS ， 呵呵。

问题出来了， 如果我们页面有很多地方需要 这样红色的字体
就要加入 <font color="red"></font> 这个标签。

===================================
真正用到 css 的 ，下面我们开始了。

在 <head></head> 里面加入

<!--
 .title {
  color: red;
 }
 -->
</style>

上面这个意思 是定义了一个 title 类，
然后我们就可以 使用它，

看看是如何使用的

只要在 html 一些标签中 使用 class="title" 就可以了，
例如 <p class="title"></p> 这样 就和 刚才使用 <font color="red">  效果一样

这样的好处 当然比起原来的好， 只要用到这种效果的地方  class="title" 就可以。

例如 h1 标签也可以 使用刚才定义好的 title 类， 还有 div 等等 都可以。

====================
下面再定义多一个 类看看。

 .title2 {
  font-size: 13px;
 }

<h1 class="title">  这是 h1 标签。</h1>
改为 使用 title2 这个类。 看到了吧 ？ 改变了字体大小。

=====================
下面 要注意的 就是内嵌问题

就是标签中 包含另外的标签。

<p class="title">努力学习中。。。<em>(10月15日)</em></p>
看上去就是这样子， 我们想要 (10月15日) 变成其他颜色

那么css 类应该这样写 ：

.title em {
 color: #cccccc;
}

颜色表示 #cccccc; 灰色， 这个以后会说到 呵呵。

==================

你也许会注意到，有些网页使用 ID 表示，

例如 <p id="title3"> </p> 其实和class 基本一样的，

如果用 id 来表示， 那么定义 class 类就要使用 # 符号，而不是 . 符号

下面看看 吧。

 #title3 {
  color: blue;
 }

<p id="title3"> ID 表示方法</p>

================

最后如果 页面定义很多 类， 就会导致网页文件很大

这样 我们就可以 把 定义 css 的东西 写到一个 .css 文件中，
然后 在网页 中引用这个css 文件，就可以使用 css 文件中定义的类了。

下面我们 建立一个 style.css 文件 里面写入

.title4 {
 color: red;
}

不好意思 忘记 保存 style.css 这个文件了

然后在 html 文件这样引用 style.css 文件

<link rel="stylesheet" href="style.css" type="text/css" />

使用方面 和原来的一样

<p class="title4"> 使用 style.css 文件中 的  title4 类 </p>

没有区别， 好， 我们把刚才的 css 类，全部写到 style.css 文件中。

看到了吗 ？？？？完全没有影响， 而且这样 是 网页代码更加清晰了

=====================

好了今次视频到这里， 应该认识css了 还有使用了吧。


“div+css 04 认识和使用CSS(定义类,class,id,内外部的引用)”没有评论

有任何疑问或建议，可以给作者留言：



公告：

  • 2010年5月之前的视频是文字解说演示，没有声音。
  • 2010年5月以后的视频全部带声音。

标签