CSS教程系列三——CSS语法和应用

大虾请略过,本人菜鸟。

这一节我们终于真正的开始接触CSS本身了,会不会等得有点久呢?呵呵,开始吧。

一、基本语法

掌握一件事物最快的方法就是直接去使用,看看下面一段代码,这段代码来自Blogger模板。它是介于<b:skin><![CDATA[ 和 ]]></b:skin>之间的部分。这部分包含了XML的变量定义(Variable definitions)和CSS。类似下面的代码就是CSS。

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
text-align: center;
}

仔细观察上面的代码,我们可以分析出CSS的规则,实际上CSS只包含了三部分,大括号外的,冒号前面的,最后就是冒号后面的。这三部分是什么?起什么作用呢?

我们用一条更简单的规则来说明:

H1 { color: green;}

这里有三个概念,分别是大括号外的“选择符(Selector)”、冒号前的“属性(Property)”以及冒号后面的“属性的值”或者说是“属性的参数”。

上面一条代码具有什么作用呢?它告诉浏览器将所有<H1></H1>包围的文字以绿色显示。

1.选择符(有的地方称作选择器)。上面代码中的H1。顾名思义,它的作用就是起筛选的作用。就像上一条代码,它只对所有<H1></H1>包围的文字起作用。所有的Html标记都可以充当选择符,所以你可以将CSS的任何信息应用到任何元素。如果有不同的选择符,但他们的属性及值是完全一样的,为了方便,我们可以将它们合并起来写,例如:

H1, P, Span
{ font-family: arial;}

上面的代码就会把所有的H1,P,Span包围起来的文字的字体设置为Arial。

2.属性。上面代码中的color。每件东西都有属性。比如人类,性别,肤色,体重等等都是人类的属性。一段文字,一个段落也有自己的属性,比如字体类型,大小,颜色之类。不同的对象属性也有所不同。在CSS中要掌握很多属性,可以搜索“CSS 2 中文手册”,下载一份。在以后的使用中也会介绍一些常用的属性。

3.属性的值。上面代码中的green。这更容易理解了吧,比如性别男,肤色是黄色。字体类型为黑体……

4.最后不要漏了那个小分号,每一句后面都要加上分号。

5./*注释性文字*/ 夹在/*和*/之间的是注释,不执行.

二、CSS的应用

应用CSS一般有三种

1.内嵌样式. 它写在标记里面,只对此标记起作用。格式:

<P style="font-size:20pt; color:red">这个Style定义<p></p>里面的文字是20pt字体,字体颜色是红色。</p>

2.内部样式表。写在所在网页的<head></head>之间,只对所在网页起作用。格式:

<STYLE type="text/css">

......
</STYLE>

3.外部样式表。用Link链接到网页,可重复应用到许多网页。格式:


<link href="css文件地址" rel="stylesheet" type="text/css">

下一节我们将接触类和ID。越来越觉得自己脑子里的东西太凌乱,在短时间内将它们写出来有好多地方前言不搭后语,不条理,请见谅。

4 条评论:

Unknown 说...

加油,支持:)
可以先把想到的记录下来,再慢慢写。
顺便问一下,编辑css或者blogger模板,有没有顺手的工具啊,我一直用Notepad++把它当代码来看。每次想看什么样子,得上传上去才行。

爱国者 说...

通俗易懂,是菜鸟的好帮手,继续努力。

GG 说...

写的真快啊~~~就是要菜鸟类教程,不知不觉就学会了~~:-D

IwfWcf 说...

好像你开始写这个教程后Blogging的频率又恢复到以前的鼎盛阶段了