WDF(16)

 

第四章 CSS

 

教学内容

       

 

PPT6——

 

在上节课，我们讲过了CSS的语法结构，CSS语句是由选择器、属性名和属性值组成的，我们现在就来看一下选择器。

 

CSS中选择器用于指定要定义的CSS样式最终要应用到网页中的哪个或哪些元素的。body元素以及该元素中包含的所有可见HTML元素都可以直接作为CSS的选择器。

 

该示例中的CSS语句将网页中所有的段落中包含的文本字体大小设置为100pt，颜色设置为红色。

 

注意，我们以前学习过的一些元素，它们本身可能具有一定的样式，但是，不管它们具备什么样的样式，我们都可以使用CSS更改它们原有的样式，参见示例OriginalStyle。

 

PPT7——

 

如果网页中的多种元素要使用相同的元素，可以共同调用同一个CSS属性声明，元素名之间使用逗号分割，这样指定的选择器叫做群选择器。

 

该示例将样式指定给网页中的所有段落以及所有表格单元格。

 

 

PPT8——

 

派生选择器用于为元素内部的子元素指定特定的样式。

 

该示例将网页中所有段落中的em元素包含的文本指定为黑色9点字体。

 

 

PPT9——

 

使用类选择器可以在网页中定义多种元素都可以使用的样式，而不必局限于某种特定元素，该选择器以“.”开始。为使用该样式的元素添加class属性，并将属性值设置为类选择器的名称即可为元素应用样式。

 

PPT10——

 

ID选择器用于在网页中为具有特定id属性值的某个元素定义样式，该选择器以“#”开始，后面跟上的是该元素的id属性值。

 

 

PPT11——

 

什么叫做伪类？这个问题比较深，我们只需要记住CSS中常用的伪类就可以了。

 

CSS伪类主要分两种，一种是为超级链接指定样式。我们在学习HTML时一直无法去掉超级链接下面的下划线，现在可以使用CSS伪类来修改它们。

 

涉及到超级链接的CSS伪类有四个：a:link、a:visited、a:hover和a:active，分别用于指定超级链接本身、访问后、鼠标悬停以及鼠标按下（未放开鼠标左键）时使用的样式，注意使用CSS伪类定义超级链接属性时，注意这四个伪类的顺序，可以简记为LoVeHAte。

 

 

PPT12——

 

CSS还为段落中的文本设置了首字和首行的伪类，分别为段落中的文本中首个字符以及首行文本指定样式。注意首行中文本的样式只会应用于首行，具有指定样式的文本的个数会随着段落宽度的减小而减少。

 

 

PPT13——

 

接下来，我们来看一下CSS语法结构中的另外两个部分——属性名和属性值。CSS属性名和属性值合起来可以称为属性。根据CSS样式应用对象及作用的不同进行分类，可以大致分为：字体属性、文本块属性、背景属性、边框属性、方框属性、列表属性、表格属性、定位属性和布局属性。

我们会在下面的时间里详细地介绍常用的CSS属性。

 

PPT14——

 

先来看一下字体属性，该类CSS属性用于设置文本的颜色、大小、字体等。

 

我们在前面学习HTML的时候主要是用font元素的face、size和color属性设置文本的显示样式，这些在CSS中对应的分别是三个CSS属性：font-family、font-size和color。

 

 

PPT15——

 

对于CSS属性font-size属性，可能的属性值非常多：

 

相对长度单位：em：相对于父对象的文字大小；ex：相对于特定字体中的字母x的高度；px：像素数，相对于特定分辨率，是最常用的单位，是计算机显示使用的最小单位，此单位是指具有唯一颜色属性且有别于周围区域的最小区域。

 

绝对长度单位：in：英寸；cm：厘米；mm：毫米；pt：点；pc：12点活字。

绝对长度单位的换算关系是：1英寸=2.54厘米，1pt=1/72英寸，1pc=12pt。

 

在特定分辨率下，相对长度单位和绝对长度单位之间是可以进行换算的。

 

表示相对大小的关键字：只有两个可能的取值，larger和smaller，分别用于表示和父对象设置的字体大和小，不是很常用，了解一下即可。

 

百分比值是相对于父对象的百分比值。

 

表示“绝对大小”的几个关键字所对应的实际文字大小由特定的浏览器或设备决定，W3C建议每两个关键字之间的比例因子为1.5。

 

 

PPT16——

 

font-style设定字体风格。注意：Italic和Oblique都是斜体字体。而它们不同的是，Italic是斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该用Oblique。

 

font-weight属性用于设定字体的浓淡（粗细），我们只需要知道两个可能的取值normal和bold即可，bold用于表示粗体。

 

涉及到字体的属性不止上面介绍的几个，但是其它的属性基本上是针对英文字体的，所以我们不加以介绍，只要求掌握这几个就可以了。

 

另外，以上介绍的CSS属性可以简写为一个属性font，在font属性中可以一次性为字体设置以上介绍的属性，即font是一个复合属性，它是一种快捷的综合写法，需要注意的是，其属性值应该按照一定的顺序进行设置：font-style | font-weight | font-size | font-family，其中可以省略一个或多个属性。

 

 

PPT17——

 

文本块属性和字体属性稍有不同，一般用于设置整个段落或其它区块元素的文本显示样式（并不是绝对的）。

 

justify：两端对齐的意思，默认情况下和left一致。

 

Overline并不是所有浏览器都支持，另外还有一个blink也是如此。

 

可以使用text-indent替代以前的使用空格 的方法实现文本缩进。一般情况下，可以将其属性值设置为字体大小的2倍以获得首行缩进两个字符的效果。

 

 

PPT18——

 

行高、字符间距等在WORD中也有对应的体现，这些都比较容易理解。

 

color既可以看作是一个字体属性，又可以看作是一个文本块属性。

 

 

PPT19-22——

 

我们以前设置背景图片的时候，背景图片要么是截取、要么是平铺显示，现在我们可以定义图片是否重复、是否附着等属性，得到更多的显示效果。

 

而且如果我们绝对以上对于文本的修饰过少时，我们已可以结合背景的使用为文本设置更多的装饰样式。见@textbackground。

 
        对应PPT下载