第三章页设计与制作电子样式表入门.ppt

第三章页设计与制作电子样式表入门.ppt

《第三章页设计与制作电子样式表入门.ppt》由会员分享，可在线阅读，更多相关《第三章页设计与制作电子样式表入门.ppt（35页珍藏版）》请在冰豆网上搜索。

让IT教学更简单，让IT学习更有效让IT教学更简单，让IT学习更有效第三章CSS入门CSS核心基础CSS文本相关样式CSS选择器CSS高级特性让IT教学更简单，让IT学习更有效目录3.13.1CSS核心基础3.23.2CSS文本相关样式3.33.3CSS高级特性3.43.4阶段案例制作新闻页面让IT教学更简单，让IT学习更有效3.1CSS核心基础3.1.1CSS样式规则样式规则使用HTML时，需要遵从一定的规范。

CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。

其中，属性和属性值以“键值对”的形式出现，属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

属性和属性值之间用英文“:

”连接，多个“键值对”之间用英文“;”进行区分。

选择器属性1:

属性值1;属性2:

属性值2;属性3:

属性值3;让IT教学更简单，让IT学习更有效3.1CSS核心基础初学者在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构中的几个特点，具体如下：

CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。

多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。

如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。

在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。

让IT教学更简单，让IT学习更有效3.1CSS核心基础在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。

因此，可以使用空格键、Tab键、回车键等对样式代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。

让IT教学更简单，让IT学习更有效3.1CSS核心基础3.1.2引入引入CSS样式表样式表1、行内式、行内式行内式也称为内联样式，是通过标记的style属性来设置元素的样式，其基本语法格式如下：

该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。

其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用。

内容让IT教学更简单，让IT学习更有效3.1CSS核心基础2、内嵌式、内嵌式内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用标记定义，其基本语法格式如下：

该语法中，标记一般位于标记中标记之后，也可以把他放在HTML文档的任何地方。

标记定义，其基本语法格式如下：

选择器属性1:

属性值1;属性2:

属性值2;属性3:

属性值3;让IT教学更简单，让IT学习更有效3.1CSS核心基础3、链入式链入式链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中，其基本语法格式如下：

该语法中，标记需要放在头部标记中，并且必须指定标记的三个属性，具体如下：

让IT教学更简单，让IT学习更有效3.1CSS核心基础href：

定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

type：

定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。

rel：

定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

让IT教学更简单，让IT学习更有效3.1CSS核心基础4、导入式导入式导入式与链入式相同，都是针对外部样式表文件的。

对HTML头部文档应用style标记，并在标记内的开头处使用import语句，即可导入外部样式表文件。

其基本语法格式如下：

该语法中，style标记内还可以存放其他的内嵌样式，import语句需要位于其他内嵌样式的上面。

importurl（css文件路径）;或importcss文件路径;/*在此还可以存放其他CSS样式*/让IT教学更简单，让IT学习更有效3.1CSS核心基础3.1.3CSS基础选择器基础选择器要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。

在CSS中，执行这一任务的样式规则部分被称为选择器，CSS基础选择器有四种：

1、标记选择器、标记选择器标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。

其基本语法格式如下：

标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式。

标记名属性1:

属性值1;属性2:

属性值2;属性3:

属性值3;让IT教学更简单，让IT学习更有效3.1CSS核心基础2、类选择器类选择器类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

3、id选择器选择器id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

.类名属性1:

属性值1;属性2:

属性值2;属性3:

属性值3;#id名属性1:

属性值1;属性2:

属性值2;属性3:

属性值3;让IT教学更简单，让IT学习更有效3.1CSS核心基础4、通配符选择器通配符选择器通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

其基本语法格式如下：

*属性1:

属性值1;属性2:

属性值2;属性3:

属性值3;例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

*margin:

0;/*定义外边距*/padding:

0;/*定义内边距*/让IT教学更简单，让IT学习更有效3.2.1CSS字体样式属性字体样式属性1、font-size:

字号大小字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

具体如下：

3.2CSS文本样式相对长度单位说明em相对于当前对象内文本的字体尺寸px像素，最常用，推荐使用绝对长度单位说明in英寸cm厘米mm毫米pt点让IT教学更简单，让IT学习更有效2、font-family:

字体字体font-family属性用于设置字体。

网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

3.2CSS文本样式pfont-family:

微软雅黑;让IT教学更简单，让IT学习更有效使用使用font-family设置字体时，需要注意以下几点：

设置字体时，需要注意以下几点：

各种字体之间必须使用英文状态下的逗号隔开。

中文字体需要加英文状态下的引号，英文字体一般不需要加引号。

当需要设置英文字体时，英文字体名必须位于中文字体名之前。

如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family:

TimesNewRoman;。

尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

3.2CSS文本样式让IT教学更简单，让IT学习更有效3、font-weight:

字体粗细字体粗细font-weight属性用于定义字体的粗细，其可用属性值：

normal、bold、bolder、lighter、100900（100的整数倍）。

4、font-variant:

变体变体font-variant属性用于设置变体（字体变化），一般用于定义小型大写字母，仅对英文字符有效。

其可用属性值如下：

normal：

默认值，浏览器会显示标准的字体。

small-caps：

浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写。

但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

3.2CSS文本样式让IT教学更简单，让IT学习更有效5、font-style:

字体风格字体风格font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：

默认值，浏览器会显示标准的字体样式。

italic：

浏览器会显示斜体的字体样式。

oblique：

浏览器会显示倾斜的字体样式。

3.2CSS文本样式让IT教学更简单，让IT学习更有效6、font:

综合设置字体样式综合设置字体样式font属性用于对字体样式进行综合设置，其基本语法格式如下：

使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。

其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

3.2CSS文本样式选择器font:

font-stylefont-variantfont-weightfont-size/line-heightfont-family;让IT教学更简单，让IT学习更有效3.2.2CSS文本外观属性文本外观属性1、color:

文本颜色文本颜色color属性用于定义文本的颜色，其取值方式有如下3种：

预定义的颜色值，如red，green，blue等。

十六进制，如#FF0000，#FF6600，#29D794等。

实际工作中，十六进制是最常用的定义颜色的方式。

RGB代码，如红色可以表示为rgb（255,0,0）或rgb（100%,0%,0%）。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

3.2CSS文本样式让IT教学更简单，让IT学习更有效2、letter-spacing:

字间距字间距letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。

其属性值可为不同单位的数值，允许使用负值，默认为normal。

3.2CSS文本样式让IT教学更简单，让IT学习更有效3、word-spacing:

单词间距单词间距word-spacing属性用于定义英文单词之间的间距，对中文字符无效。

和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置。

不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

3.2CSS文本样式让IT教学更简单，让IT学习更有效4、line-height:

行间距行间距line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

3.2CSS文本样式让IT教学更简单，让IT学习更有效5、text-transform:

文本转换文本转换text-transform属性用于控制英文字符的大小写，其可用属性值如下：

none：

不转换（默认值）。

capitalize：

首字母大写。

uppercase：

全部字符转换为大写。

lowercase：

全部字符转换为小写。

3.2CSS文本样式让IT教学更简单，让IT学习更有效6、text-decoration:

文本装饰文本装饰text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：

none：

没有装饰（正常文本默认值）。

underline：

下划线。

overline：

上划线。

line-through：

删除线。

另外，text-decoration后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下划线和删除线效果，就可以将underline和line-through同时赋给text-decoration。

3