手机站

当前位置: > 论文发表 > 职业教育论文发表 >

浅析CSS的基本语法规则和工作原理

作者:未知 时间:2015-10-12 阅读:( )

  安徽省滁州市机电工程学校—茆荣海

  关键词:CSS;HTML;层叠样式表;CSS样式;选择器。

  一、 引言:

  层叠样式表(Cascading Style Sheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一,在HTML文档中加入CSS样式表可分为嵌入式样式表、外部样式表和内联样式表三种,在同一文档内可以同时使用三种方法。

  二、 CSS的基础语法规则:

  2.1 选择器:

  选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型,包括标签选择器、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类等。

  2.1.1 标签选择器:

  一个XHTML文档中有许多标签,例如p标签,h1标签等。若要使文档中的所有p标签都使用同一个CSS样式,就应使用标签选择器。下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。h1 {color:red; font-size:14px;},说明:标签选择器可以直接改变该标签的所有样式。

  2.1.2 类选择器:

  使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中,XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。以下是使用类选择器定义CSS样式的步骤:(1)、编写合适的类选择器名,然后定义CSS样式声明,例如定义类选择器名为news的CSS样式代码。 .news{ font-size:20px;color:green }(2)、把以news为名的CSS样式应用到XHTML某个指定的标签中。将news样式指定给标签的方法如下:

新闻

其中,在

中写入class=”news”的语句。Class和等号都是固定的写法,在双引号中写入类选择器的名称。

  2.1.3 ID选择器:

  ID选择器和类选择器相似,不同的是,ID选择器不能复用。在一个XHTML文档中,一个ID选择器只能把其CSS样式指定给一个标签。以下是使用ID选择器定义CSS样式的步骤:(1)、编写合适的类选择器名,然后定义CSS样式声明,以下是定义类选择器名为special的CSS样式代码。#special{ font-size:20px;color:green }

  (2)、把以special为名的CSS样式应用到XHTML某个指定的标签中。将news样式指定给标签的方法如下:

特别报道

其中,在

中写入id=” special”的语句。ID和等号都是固定的写法,在双引号中写入ID选择器的名称。

  2.1.4 全局选择器:

  全局选择器是一个星号。它能作用于XHTML文档中的所有元素。图为全局选择器的结构。对于全局选择器还有一个不得不提的用法,就是为了保证作出的页面能够兼容多种浏览器,所以要对HTML内的所有的标签进行重置,会将下面的代码加到CSS文件的最顶端如:

  *{marging: 0 ; padding:0 }

  因为HTML4.01中有89个标签,所以相当于在页面加载CSS的时候,先对这89个标签都加上了{margin:0; padding:0;},在这里我不建议大家这么做,因为89个标签中需要重置的标签是很少数,没有必要将所有的标签都重置,需要哪些标签重置就让哪些标签重置就可以了,如下:body,div,p,a,ul,li{marging: 0 ; padding:0 }用到那些就写那些,这点也可以看做衡量页面重构师制作页面水平的高低,以及是否专业的一个方面。

  2.1.5 组合选择器:

  标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合,标签选择器和ID选择器组合。由于这两种组合方式的原理和效果一样,所以只介绍标签选择器和类选择器的组合。组合选择器只是一种组合形式,并不算是一种真正的选择器,但在实际中经常使用。

  2.1.6 伪类选择器:

  伪类选择器可以以不同方式格式化超级链接元素的四种不同状态:以下顺序依次写;(记忆方法:a Love or Hate)a:link 是用在未访问的链接的选择器;a:visited 是用在已访问过的链接的选择器;a:hover 是用在鼠标光标放在其上的链接的选择器;a:active 是用在获得焦点(比如,被点击)的链接的选择器。如果需要,我们可以组合这几个状态,按顺序写:a:link,a:visited { color :blue;}; a:hover ,a:active { color :blue;}

  2.1.6 继承选择器 :

  学习使用继承选择器就必须先了解文档树和CSS的继承。每个XHTML都可以被看作一个文档树,文档树的根部就是html标签,而head和body标签就是其子元素。在head和body里的其他标签就是html标签的孙子元素。整个XHTML就呈现一种祖先和子孙的树状关系。CSS的继承是指子孙元素继承祖先元素的某些属性。

  三、 使CSS在XHTML文档中生效,即CSS的调用:

  在创建一个标准的XHTML页面后,就要使用CSS样式控制XHTML文档的表现。使CSS样式表在一个XHTML文档中生效的方法有许多种。以下将讲述各种嵌入CSS样式表的方法。有三种方法可以在站点网页上使用样式表:1、外联式Linking(也叫外部样式):将网页链接到外部样式表。2、嵌入式Embedding(也叫内页样式):在网页上创建嵌入的样式表。3、内联式Inline(也叫行内样式):应用内嵌样式到各个网页元素。其中,优先级:内联式 > 嵌入式 > 外联式。本人推荐使用第一种调用方法(外部调用法)

  四、CSS总结

  CSS就是一种叫做样式表(stylesheet)的技术。它的作用可以达到: (1)在几乎所有的浏览器上都可以使用。 (2)以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。 (3)使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。(4)你可以轻松地控制页面的布局 。 (5)你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。

  【参考文献】

  [1]曾顺.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2007. 8

  [2]王俭敏等.CSS+DIV网页样式与布局案例指导[M].北京:电子工业出版社,2009.4.

  [3]曾静娜等.新手学CSS+DIV[M]北京:北京希望电子出版社,2010.3

  

上一篇:游戏教学在中职体育教学中的应用

下一篇:在中职数学教学中如何进行德育渗透

奇速英语直播体验课
相关文章
精品推荐