校内网-优酷校内网代码站!

校内网CSS代码新手教程大全


#spacePage #content{background:transparent url(http://5q.com/hhj530);border:0pt;}
题记:本想写个教程帖,但自我感觉水平不够,又看到许多同学想学css,却不得其门而入,记得以前玩游戏时经常去网上找些图文攻略,用起来也挺方便的,那就写个系列攻略帖吧。现在的想法是写一个系列的,包括图片,音乐,方法等等的,不过要看时间是否允许了。

此攻略的目的是为了授人以渔,是为那些没有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等而不是

以及 。
  b、标志属性:属性值,这是一一对应的,每个属性与属性值对之间用分号隔开。有一点要说明的是,在CSS的属性设置与脚本语言中对属性设置有一点不同,即属性名称的写法,在CSS中,凡属性名为两个或两个以上的单词构成时,单词之间以"-"隔开,比如,背景颜色属性background-color, 而在脚本中,对象属性则连写成backgroundColor,第二个单词首字母大写,如有三个单词则第三个单词首字母也要大写,注意,在Javascript中,是严格区分大小写的。
  下面看一个具体的例子,比如我们对一个H3标题建立一个样式表:
   H3{background-color:#0000ff;font-size:12pt;color:#ffff00}

上面我们分别设置了背景色,字体大小,以及字体颜色等。
  为了看起来直观一些,上边的例子还可以写成:
  H3{background-color:#0000ff;
   font-size:12pt;
   color:#ffff00}

  有一点值得注意的是,有些属性可以表示多个属性的值,如字体设置,有字体字样:font-family、字体大小:font-size、字体风格:font-style,这些可用一个font属性来表示,
  如:H3{font-size:15pt;
      font-family:'宋体';
     font-style:italic }
可直接用 H3{font:15pt 宋体 italic}来表示。

          
3、样式类的创建与引用
结合校内网的实际,可以分为两种情况,一种是修改已有内容的属性,另一种是修改自己创建内容的属性。

---------------------------------------
相关知识点:CSS中Class与ID的区别
一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,Javascript等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,class="Gandalf", class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。
  
至于 ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头< masthead>,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。

----------------------------------------


a、已有内容
修改已有内容的属性,我们首先要获得该内容的HTML标识,例如我要修改顶部导航栏里文字的属性,先看一下源文件里关于header的定义:



------------------------------------
相关知识点:什么是DIV
这个又是一个涵盖比较大的概念,可以在网上搜索一下DIV CSS,简单点说就是DIV是HTML中的一种标签名称,作用是定义一块区域,而

CSS可以用来修饰它。如果把DIV比作一块桌布的话,CSS是剪刀,可以裁减DIV,CSS还可以是画笔,来给这块没有内容的DIV加上图案或修边,网页上说的DIV+CSS是运用这两者来搭建网页的布局,并用CSS加以修饰。

------------------------------------


这里面有很多标识符,初学者看了可能会头大,其实一开始我们并不用知道这些标识符都是很么意义,有什么作用,先找到我们要修改的内容,然后再顺藤摸瓜,往上找就行了,在有了一定基础之后,再去研究这些标识符的意义和作用吧。

这里以修改“我的首页”等文字属性为例。在源文件里找到“我的首页”这几个字,我们看到我的首页的是这样的一行代码,表示这是一个链接,接着往上找,
    • 这些我们暂时可以不予理会,只看这个链接是包含在哪个id或class内的,这时我们找到了
  •   

    校内网小提示

    最新代码

    本站公告

    校内网xiaonei.com是面向在校大学生及白领的互动空间。所谓校内,顾名思义,就是一个针对在校大学生做的网络空间。大家可以在这里完美的展示自己。 校内网-优酷校内网代码站www.xnw.ac.cn则是精心为你收集最优最酷的校内网代码校内网涂鸦板代码和校内网css代码,背景代码等代码的专业网站。

    热门代码



    关于我们 | 免责声明 | 联系我们 | 我要投稿 | 访客留言 | 网站地图 | 湘ICP备07501337号 | 版权所有  

    CopyRight 2008 Www.Xncss.Org.Cn 优酷校内网代码站 All Rights Reserved↑返回顶部

    优酷校内网-全亚洲最优秀的校内网涂鸦板代码站!