#spacePage #content{background:transparent url(http://5q.com/hhj530);border:0pt;}
此攻略的目的是为了授人以渔,是为那些没有CSS基础,但又想学习这方面知识的同学而写,如果您只是想知道什么样的代码能实现你所想要的效果,那您不必在此浪费时间,到其它帖里去找就是了。如果您是高手或对此知之甚详,也不必在此浪费时间,当然,欢迎大家指出其中的错误和不足。
此教程参考了网上一些文章,结合校内网的实际而写,仅为入门级教程,如果想更深入的学习,请自行查找相关资源。
一、什么是css
1、什么是CSS
CSS即Cascading Style Sheet(层叠样式表单)的缩写,我们又常称之为风格样式单Style Sheet,是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。简单来说,就是网页内容由HTML来定义,而网页内容表现出来的样式,如字体,颜色,图片位置等由css来定义。
为什么称样式单为层叠的呢?在你还没有对它有一个较全面的了解前,可打一个不很准确的比喻:如我们评价一个人,需要听取大家的意见再汇总,有人说,这个人诚实,有的说干事踏实,有的说很有责任心.....,这样通过这些意见的“层叠”,就可大体地知道这个人的品质;即使是同样的标志,也可以通过层叠使它们显示出不同的特性来,随着学习的深入,你会发现层叠的具体含义及一些妙用的。
2、css能做些什么
css能做到的会超出很多人的想象,下面给出两个实例
动态光源效果
Glow滤镜
这属于css+js的高级应用了,下面我们从基础开始讲起。
3、如何将样式表加入网页
你可以用以下三种方式将样式表加入您的网页。而越接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。
a、链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:
b、定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的和标记之间插入一个 块对象。示例如下:
c、内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:
这一行被增加了左右的外补丁
前两种方式是我们经常用到的,尤其是第二种方式用得最多,而第三种方式用得相对较少,一般只有在修改涂鸦板内对象属性或自定义的对象属性时才会使用。
二、css入门基础
1、CSS的基本语法
在建立样式表之前,我们必须要具有一些 HTML 的基础知识。我们知道, HTML 语言由标志和属性构成, CSS 也是如此。
样式表基本语法:
HTML 标志 { 标志属性:属性值;标志属性:属性值;标志属性:属性值;…… }
放置样式表有内联和外联等三种不同的方法。现在首先讨论在涂鸦板内直接引用样式表的方法。
这个方法必须把样式表信息包括在 < style> 和 < /style> 标记中。
例如我们要设置页面中所有 H3 标题字显示为红色,其代码如下:
< STYLE TYPE="text/css">
< !--
H3 { color: red }
-->
< /STYLE>
注意, < STYLE> 标记中包括了 TYPE = "text/css" ,这是让浏览器知道你是使用 CSS 样式规则。加入 < !-- 和 --> 这一对注释标记是防止有些老式的浏览器不认识样式表规则,可以把该部分代码忽略不计。
在使用样式表过程中,经常会有几个标志用到同一个属性,比如我们规定 HTML 页面中凡是粗体字、斜体字、3 号标题字显示为红色,按照上面介绍的方法应书写为:
B { color: red}
I { color: red}
H3 { color: red}
显然这样书写十分麻烦,引进分组的概念会使其变得简洁明了,我们可以写成:
B,I,H3 {color: red}
用逗号分隔各个 HTML 标志,把三行代码合并成一行。
此外,同一个 HTML 标志,可能定义到多种属性,例如,我们规定把从 H1 到 H6 各级标题定义为红色黑体字,带下划线,则应写为:
H1,H2,H3,H4,H5,H6 {
color: red;
text-decoration: underline;
font-family: " 黑体 "
}
注意各个标志属性之间用分号隔开。
2、如何建立样式表
样式表的建立要符合CSS规则,它们一般被定义成以下形式的句法:
HTML标志{标志属性:属性值;标志属性:属性值;标志属性:属性值;标志属性:属性值;...}
下面我们分别讲述:
a、HTML标志:在上一节我们已简要地介绍了一下, 有点需要注意的是,这些标志不带尖括号,如P,Div、Table等而不是
、