第12章CSS语法(精品).ppt

第第1212章章 CSSCSS的的语法法CSS样式有自身固定的语法结构，只有按照规范的写法，个样式有自身固定的语法结构，只有按照规范的写法，个语法才能够正确的作用并在相应的页面元素上显示。在语法才能够正确的作用并在相应的页面元素上显示。在CSS语法中，语法中，包含了包含了CSS选择符、属性、属性值、单位等各个部分内容的写法。选择符、属性、属性值、单位等各个部分内容的写法。以及在使用各种结构时，所要注意的各种问题等。通过本章学习，以及在使用各种结构时，所要注意的各种问题等。通过本章学习，应该掌握以下知识要点：应该掌握以下知识要点：熟悉熟悉CSS中的各类选择符的属性及用法。中的各类选择符的属性及用法。了解了解CSS中属性和属性值的特点。中属性和属性值的特点。简单了解块元素和内联元素。简单了解块元素和内联元素。12.1 12.1 选择符符在在CSS中，选择符的种类很多，每种选择符的优先中，选择符的种类很多，每种选择符的优先级也不同。这些选择符包括，级也不同。这些选择符包括，id选择符、类选择符、类选择符、类选择符、类型选择符、伪类等。同时还可以使用子选择符对样式进型选择符、伪类等。同时还可以使用子选择符对样式进行精确定位。或者使用选择符分组的方法，同时定义几行精确定位。或者使用选择符分组的方法，同时定义几个选择符中的样式。具体内容在本章中将一一讲述。个选择符中的样式。具体内容在本章中将一一讲述。12.1.1 12.1.1 idid选择符符id选择符，是所有选择符中，优先级最高的。选择符，是所有选择符中，优先级最高的。12.1.2 12.1.2 类选择符符类选择符，用来定义页面中可以重复使用的类选择符，用来定义页面中可以重复使用的CSS属性，属性，其优先级低于其优先级低于id选择符。选择符。12.1.3 12.1.3 类型型选择符符类型选择符，是按照类型选择符，是按照XHTML中使用的相应元素名称来定义中使用的相应元素名称来定义的的CSS选择符。选择符。12.1.4 12.1.4 伪类伪类，指的是一类特殊的选择符，通过这类选择符，可以定伪类，指的是一类特殊的选择符，通过这类选择符，可以定义了某种鼠标触发时间的显示效果。义了某种鼠标触发时间的显示效果。12.1.5 12.1.5 子子选择符符子选择符，用来精确定位某个元素。子选择符，用来精确定位某个元素。12.1.6 12.1.6 选择符分符分组使用选择符分组的方法，可以一次性定义几个选择符中使用选择符分组的方法，可以一次性定义几个选择符中的样式。的样式。12.1.7 12.1.7 选择符的符的优先先级在在各种选择符中，各种选择符中，id选择符的优先级最高，然后使类选择符，选择符的优先级最高，然后使类选择符，最后使类型选择符。而伪类选择符必须定义在相应的选择符之后，所最后使类型选择符。而伪类选择符必须定义在相应的选择符之后，所以伪类选择符的优先级和伪类前面的选择符一致。以伪类选择符的优先级和伪类前面的选择符一致。12.2 12.2 属性属性在在CSS中，属性是控制各种页面效果的核心。所有页面效果中，属性是控制各种页面效果的核心。所有页面效果的实现，都要通过定义相应的属性来定义。在每个属性中，定义的实现，都要通过定义相应的属性来定义。在每个属性中，定义的值可以各不相同，每个属性值都有固定的写法。全面的掌握各的值可以各不相同，每个属性值都有固定的写法。全面的掌握各种种CSS属性，可以更方便的控制页面的表现形式。属性，可以更方便的控制页面的表现形式。12.3 12.3 值在样式表中，每个属性都有相应的值与之对应，值用来在样式表中，每个属性都有相应的值与之对应，值用来确定属性的最终效果。在属性对应的值中，有一些是通常使确定属性的最终效果。在属性对应的值中，有一些是通常使用的值，比如长度值、颜色值等。还有一些是某个属性所特用的值，比如长度值、颜色值等。还有一些是某个属性所特有的值。关于每个属性的具体取值和表现效果，将在后面的有的值。关于每个属性的具体取值和表现效果，将在后面的章节中作详细讲解。每种取值的具体写法，将在后面的章节章节中作详细讲解。每种取值的具体写法，将在后面的章节中作详细讲解。中作详细讲解。12.3.1 12.3.1 颜色色值在在CSS中，定义颜色的方法有很多种，其中比较常用的中，定义颜色的方法有很多种，其中比较常用的方法有使用颜色名称和使用十六进制颜色值两种。方法有使用颜色名称和使用十六进制颜色值两种。1使用颜色名称使用颜色名称2使用十六进制颜色使用十六进制颜色12.3.2 12.3.2 长度度值在在CSS中，长度单位分为绝对长度单位和相对长度单位。中，长度单位分为绝对长度单位和相对长度单位。绝对长度单位，是指在各种环境中都使用相同的长度值。相对绝对长度单位，是指在各种环境中都使用相同的长度值。相对单位是指，根据各自定义的标准和环境的不同，显示的长度会单位是指，根据各自定义的标准和环境的不同，显示的长度会发生改变。下面进行详细讲解。发生改变。下面进行详细讲解。1绝对长度单位绝对长度单位2相对长度单位相对长度单位12.3.3 12.3.3 百分比百分比值百分比值是指，通过一个指定的标准，定义需要显示的百分比值是指，通过一个指定的标准，定义需要显示的长度。根据指定的标准不同，最终显示的长度会有所区别。百分长度。根据指定的标准不同，最终显示的长度会有所区别。百分比值的写法如下所示。数字比值的写法如下所示。数字%在百分比值种，数字的取值可正可负。在百分比值种，数字的取值可正可负。12.4 12.4 继承承值继承值是指，在继承值是指，在CSS中当在某个元素中定义了某个属性中当在某个元素中定义了某个属性值，其包含的各种元素都会使用这个属性值。不是所有的值，其包含的各种元素都会使用这个属性值。不是所有的CSS属性都具有继承性。合理的使用属性都具有继承性。合理的使用CSS的继承性，可以更的继承性，可以更方便的对各种效果进行控制。方便的对各种效果进行控制。12.5 12.5 默默认值默认值是指，在默认值是指，在CSS中没有定义任何值的时候，元素所使用的中没有定义任何值的时候，元素所使用的值。大多数的默认值都是值。大多数的默认值都是none或者为或者为0，部分属性中有自身特有的，部分属性中有自身特有的默认值，例如默认值，例如left、auto等。但是在不同的浏览器中某些属性的默认等。但是在不同的浏览器中某些属性的默认值会有变化。合理的使用属性的默认值可以减少很多的代码。值会有变化。合理的使用属性的默认值可以减少很多的代码。12.6 12.6 块元素和内元素和内联元素元素在在HTML中，页面元素可以分为两类。一类是块中，页面元素可以分为两类。一类是块元素，另一类是内联元素。本节将分别讲解它们的各自元素，另一类是内联元素。本节将分别讲解它们的各自特点，注意这两个元素的区别和联系。特点，注意这两个元素的区别和联系。12.6.112.6.1块元素元素块元素，是指那些在默认的情况下会换行显示的元素。比如块元素，是指那些在默认的情况下会换行显示的元素。比如元素、元素、元素等。之所以要将元素区分为块元素，是因为元素等。之所以要将元素区分为块元素，是因为在样式表中，有部分属性是只对块元素起作用的。在样式表中，有部分属性是只对块元素起作用的。12.6.2 12.6.2 内内联元素元素内联元素，是指在默认的情况下，显示方式类似于文本内联元素，是指在默认的情况下，显示方式类似于文本的元素。内联元素默认情况下同行显示，直到总体的宽度大的元素。内联元素默认情况下同行显示，直到总体的宽度大于父元素的宽度时，才换行显示。于父元素的宽度时，才换行显示。12.7 12.7 应用用样式的式的优先先级通过前面的学习，可以了解到，在页面中使用通过前面的学习，可以了解到，在页面中使用CSS的方法有的方法有3种。分别为在元素中直接定义、在页面头部调用样式、从外部文种。分别为在元素中直接定义、在页面头部调用样式、从外部文件调用样式。在这三种使用件调用样式。在这三种使用CSS样式的方法中，在元素中直接定义样式的方法中，在元素中直接定义CSS的优先级最高，其次是在头部调用的的优先级最高，其次是在头部调用的CSS，最后是从外部文件最后是从外部文件中调用的中调用的CSS样式。样式。12.8 12.8 本章本章习题一，选择题一，选择题二填空题二填空题 三实战练习三实战练习 12.9 12.9 本章小本章小结本章主要讲解了本章主要讲解了CSS的语法部分，包括各个部分内容的写法，注的语法部分，包括各个部分内容的写法，注意的事项等等。其中在选择符的部分，要学会常用的几种选择符的写意的事项等等。其中在选择符的部分，要学会常用的几种选择符的写法，以及各种方便快捷的组合写法，其中很关键的一点就是选择符之法，以及各种方便快捷的组合写法，其中很关键的一点就是选择符之间的优先级别，初学者经常在这里犯错。在属性部分主要了解属性的间的优先级别，初学者经常在这里犯错。在属性部分主要了解属性的写法，其中具体的属性将会在后面的章节中分别讲解。在属性值的部写法，其中具体的属性将会在后面的章节中分别讲解。在属性值的部分，主要需要了解属性值的分类以及各种属性值的写法。本节还讲解分，主要需要了解属性值的分类以及各种属性值的写法。本节还讲解了块元素和内联元素的区别，便于使用不同的属性。最后本节讲解了了块元素和内联元素的区别，便于使用不同的属性。最后本节讲解了应用样式优先级的问题。本章的重点是各种选择符和属性值的写法，应用样式优先级的问题。本章的重点是各种选择符和属性值的写法，本章的难点是属性值的继承值和默认值。本章的难点是属性值的继承值和默认值。