第7章 CSS规则.pptxVIP

第7章 CSS规则对于设计者来说，总是希望能够在页面中自由发挥创意，实现自己的想法。然而，HTML语言中的很多标签都存在很大的局限性，如h1标签定义的标题，始终是定义为较大的字体的文本，不会改变，所以在没有CSS以前，设计者不得不借助其他标签来补充标签的属性。而CSS是什么？CSS就是一个无所不能的巨大的“属性集”。7.1 如何学习CSSCSS常被翻译为“级联样式表”，如果现在还不理解“级联”是什么概念，那么可以从Cascading一词的本意来理解。其有“小瀑布，瀑布状的”意思，不妨就把CSS形象地理解为“瀑布一样的样式表”，一个CSS看上去是这样的：body {font-family: 黑体; //字体样式font-size: 80%; //字体大小color: black; //字体颜色background-color:blue; //背景颜色margin: 1em; //在页面中的定位padding: 0; //设置间距为0}7.2 CSS基本的规则写法CSS已经发展很多年了，但是直到前两年，CSS才得到所有网页浏览器的支持。至今，CSS已经形成了自己的一套语法，这套语法由一些标志构成。简单地说，就是一个基本的样式表由选择器、属性和属性值构成。7.2.1 基本的样式表的写法CSS样式表也有属于自己的写法规则，在特定的规则下编写，才可以使之生效，一个标准的CSS写法是这样的，如下所示：h1 { font-family:黑体;}7.2.2 使用类class和标志id链接样式表一个定义好的样式表，需要通过类class或标志id来定位它所作用的页面内容。id标志在同页面中可以实现链接，作用相当于在页面中定位一个锚点。id在链接CSS属性表时，所起到的作用也是一样的，而类似这样作用的还有类class。类class和标志id之间是有区别的。7.2.3 创建选择器选择器是用来告诉浏览器这段代码将应用到页面中的哪个对象。通过调用，HTML可以根据内容的不同，而选择不同的样式来修饰内容。所以要将CSS样式应用到HTML中，首先要选择合适的选择器，来对HTML的元素进行样式的控制。CSS中主要有3种基本选择器：HTML选择器（HTML selector）、id选择器（id selector）和class选择器（class selector）。1．HTML选择器所谓HTML选择器，其实就是重新定义HTML表现性标签的样式，也就是使用标签名来作为选择器。正如文中最初所提的，h1标签内的文本应是黑色大体字，而当通过重新定义之后，h1标签内可以是任何样式。2．派生选择器通过依据元素在其位置的上下文关系来定义样式，称之为派生选择器。也就是前一个对象包含后一个对象，对象之间使用英文的空格键来隔开。这种方式很好地体现了CSS的“级联”特性。如下面这个例子，使用了2个标记来定义CSS样式表。h1 h2 {color:red;font-size:1em;font-family: 黑体;}2．派生选择器注意：“h1 h2”和“h1,h2”含义是不同的，将在后面的分组选择器中介绍后者的定义。在写法上，在上级对象h1和目标对象h2之间使用空格来指定样式，如将这个样式表添加入实例7-3的style标签中，样式表将作用于h1标签内的h2标签中的对象，这里添加以下几行代码来说明，如在实例7-3的body部分中放入以下代码：h1 HTML选择器的使用/h1h2 HTML选择器的使用/h2h1h2 HTML选择器的使用/h2/h13．id选择器在一个网页中，每一个标签都可以用一个id属性进行名称的指定。id选择器就是指在HTML中用id属性对样式进行调用的选择器。那么这个样式表应该这样写：在选择器的开头处加上“#”符号。比如这样一个样式表：#text { font-size:1em ;}而将这个样式表绑定到HTML对象上时，那么，就要这样写：h1 id=text文本内容/h1而id选择器一样可以作为派生选择器，如下代码所示。#text p {color：blue }4．class选择器类选择器，就是对网页样式归类的选择器。如果希望通过class选择器来设置HTML页面对象的样式，那么样式表的写法应该是在选择器的开头处加上“.”符号，例如：.play { font-size:1em ;}将这个样式表绑定到HTML对象上时，要使用class选择器，例如：h1 class=play文本内容/h1和id选择器一样，class也可以作为派生选择器，例如：.fancy td {color: #f60; //修改文本颜色background: #666; //修改页面背景颜色 }5．分组选择器如果出现多个选择器定义的内容都是一样的时候，例如：h1 {color:blue;}#