第3章 CSS基础

1、CSS简介网页与网页与WEBWEB程序设计程序设计3CSS基础第章本课目标CSSCSS概述概述CSS语法CSSCSS样式表应用样式表应用CSSCSS的基本格式的基本格式CSSCSS的容器属性、列表属性、鼠标属性的容器属性、列表属性、鼠标属性CSSCSS概述概述 CSS简介简介CSS概述CSS简介简介CSS就是就是Cascading Style Sheets，中文翻译为，中文翻译为“层叠样式表层叠样式表”，简称样式，简称样式表，表，它是一种制作网页的新技术。它是一种制作网页的新技术。由于传统的排版和界面效果的局限性而产生了由于传统的排版和界面效果的局限性而产生了CSS。HTML本身定义网页有哪些

2、内容，而本身定义网页有哪些内容，而CSS则决定这些网页内容如何显示。则决定这些网页内容如何显示。 CSS简介简介CSS的作用的作用CSS可以使格式和内容分离可以使格式和内容分离页面布局能得到更好的控制（可以使用页面布局能得到更好的控制（可以使用CSS来设定内容的位置）来设定内容的位置）可以制作体积更小下载更快的网页可以制作体积更小下载更快的网页可以将许多网页同时更新可以将许多网页同时更新由于由于CSS可以单独输出成一个外部文件，所以在链接这个文件到其他可以单独输出成一个外部文件，所以在链接这个文件到其他HTML页面后，当更改这个页面后，当更改这个CSS文件中的内容时，其他所有文件中的内容时，其

3、他所有HTML页面中相应的页面中相应的部部分都会自动更改。分都会自动更改。 1张样式表张样式表My First StylesheetH1 color: green; font-size: 57px; font-family: impact P text-indent: 1cm; background: yellow; font-family: courier Stylesheets: The Tool of the Web Design GodsAmaze your friends! Squash your enemies!CSS简介简介CSS样式表可以分为三种样式表可以分为三种内嵌样式表内嵌

4、样式表直接在页面元素上使用直接在页面元素上使用style来定义样式来定义样式内部样式表内部样式表在本页面内部的开头定义在本页面内部的开头定义CSS样式表，然后在本页内使用样式表，然后在本页内使用外部样式表外部样式表将样式表输出成外部将样式表输出成外部CSS文件，将文件链接到本页面内然后使用文件，将文件链接到本页面内然后使用 CSS简介简介在网页中添加CSS使用内嵌式样式使用内嵌式样式这个内嵌样式定义段落里面的文字是这个内嵌样式定义段落里面的文字是20pt字体，字体颜色是红色。字体，字体颜色是红色。通过这样使用内嵌式样式，段落符中的文字的字体大小、颜色，将会改变，成通过这样使用内嵌式样式，段落符

5、中的文字的字体大小、颜色，将会改变，成为为STYLE定义的定义的20pt，红色。内嵌式样式是直接应用在标记上，并且只对它所，红色。内嵌式样式是直接应用在标记上，并且只对它所在的标记产生效果。在的标记产生效果。内嵌式样式一般用于单个的标记，也就是说本文档内、本文档外再无其他标记内嵌式样式一般用于单个的标记，也就是说本文档内、本文档外再无其他标记需要使用到这个样式，并且这个样式不会更改需要使用到这个样式，并且这个样式不会更改 用法一：内联定义用法一：内联定义 这一行的背景颜色被设置红色 CSS简介简介使用内部样式表使用内部样式表P.mylayoutcolor:red这个样式定义段落里面的字体颜色是

6、红色。这个样式定义段落里面的字体颜色是红色。通过这样使用内部样式表，段落标记中的内容颜色将会变成红色。通过这样使用内部样式表，段落标记中的内容颜色将会变成红色。内部样式表一般用于本文档内的多个标记，外部文档不能引用内部样式表一般用于本文档内的多个标记，外部文档不能引用 用法二：在页面内定义内部样式块对象用法二：在页面内定义内部样式块对象body font: 9pt “宋体table font: 9pt “宋体“; border-collapse:collapse; CSS简介简介使用外部样式表使用外部样式表假设假设test.css这个这个css文件内的内容如下：文件内的内容如下：P.mylay

7、outcolor:red那么在我们的页面中，这样使用这个样式：那么在我们的页面中，这样使用这个样式：在在标记中，将标记中，将test.css文件链接进我们的页面文件链接进我们的页面然后再使用这个样式然后再使用这个样式这个样式定义段落里面的字体颜色是红色。这个样式定义段落里面的字体颜色是红色。通过这样使用外部样式表，段落标记中的内容颜色将会变成红色。通过这样使用外部样式表，段落标记中的内容颜色将会变成红色。外部样式表一般用于多个文档内的多个标记，所有文档都可以引用外部样式表一般用于多个文档内的多个标记，所有文档都可以引用 CSS语法初步语法初步CSS的基本格式CSS的基本格式的组成的基本格式的组

8、成一个样式表的语法由三部分构成，选择器（一个样式表的语法由三部分构成，选择器（Selector），属性（），属性（Property），），属性值（属性值（Value）标准语法的构成为标准语法的构成为:selectorproperty:value例如：例如：Pcolor:blue中，中，P就是选择器，就是选择器，color就是属性，就是属性，blue就是属性值就是属性值如果属性值有多个，则用分号格开如果属性值有多个，则用分号格开例如：例如： Pcolor:blue;text-align:centerCSS语法初步语法初步字体属性所谓字体属性，也即一组用来控制字体显示效果的属性，常见的属性有字体的

9、颜色所谓字体属性，也即一组用来控制字体显示效果的属性，常见的属性有字体的颜色大小，字体的风格（通常称作字体）等，下面我们来了解以下几个属性：大小，字体的风格（通常称作字体）等，下面我们来了解以下几个属性：字体大小属性（字体大小属性（font-size）设置字体的大小，字体大小主要有两种单位设置字体的大小，字体大小主要有两种单位pt和和px，例如，例如font-size:12px字体风格属性（字体风格属性（font-style）有三个值可选，有三个值可选，normal，italic，oblique，其中，其中italic，oblique是斜体是斜体字体浓淡属性（字体浓淡属性（font-weigh

10、t）也即字体的粗细，也即字体的粗细，normal为正常，为正常，bold为粗体显示为粗体显示字体属性（字体属性（font-family）字体，描述内容用什么字体来显示，字体一般有：字体，描述内容用什么字体来显示，字体一般有：宋体宋体，楷体楷体等等都是字体等等都是字体CSS语法初步语法初步字体-文本属性除了字体属性，一段文字还有文本属性，文本属性主要针对文本的格式，例如除了字体属性，一段文字还有文本属性，文本属性主要针对文本的格式，例如一段文本的文本间距、行高、首行缩进等，下面介绍一些常用的文本属性：一段文本的文本间距、行高、首行缩进等，下面介绍一些常用的文本属性：单词间距（单词间距（Word-

11、spacing）设置单词的间距，例如句子设置单词的间距，例如句子 it is an apple 中各个单词之间的距离中各个单词之间的距离字母间距（字母间距（Letter-spacing）设置每个字母间的间距，也即一个单词内，每个字母之间的距离设置每个字母间的间距，也即一个单词内，每个字母之间的距离文本转换（文本转换（Text-transform）文本转换可以将一些文本转换成其他的输出方式，比如输出成上标或者下标文本转换可以将一些文本转换成其他的输出方式，比如输出成上标或者下标等等CSS语法初步语法初步对齐方式（对齐方式（Text-align）设置文字的对齐方式，有设置文字的对齐方式，有left

12、，right，center，justify（分散对齐）（分散对齐）首行缩进（首行缩进（Text-indent）设置首行缩进量，直接填写缩进量即可设置首行缩进量，直接填写缩进量即可文本行高（文本行高（Line-height）定义了文本行与行之间的距离定义了文本行与行之间的距离文本装饰（文本装饰（Text-decoration ）文本装饰可以给文本添加一些例如划线类的装饰，比如说下划线，或者删除线文本装饰可以给文本添加一些例如划线类的装饰，比如说下划线，或者删除线或者无任何线装饰（主要用于超链接）或者无任何线装饰（主要用于超链接）CSS语法初步语法初步容器属性容器属性是容器属性是CSS中非常重要的

13、一种属性，常用的容器属性，运用得当可以创造出十中非常重要的一种属性，常用的容器属性，运用得当可以创造出十分漂亮的页面布局，本节开始我们将分类学习，并通过给大家演示来加深印象分漂亮的页面布局，本节开始我们将分类学习，并通过给大家演示来加深印象下面我们来逐一学习：下面我们来逐一学习：边距属性：边距属性：margin边距属性描述的是本元素的边界到相邻元素边界之间的距离，也即边距属性描述的是本元素的边界到相邻元素边界之间的距离，也即边界与边界边界与边界之间的距离，举例来说，比如单元格（蓝色）和行（黄色）之间的距离之间的距离，举例来说，比如单元格（蓝色）和行（黄色）之间的距离上边距：上边距：Margin

14、-top右边距：右边距：Margin-right下边距：下边距：Margin-bottom左边距：左边距：Margin-leftCSS语法初步语法初步填充距属性：填充距属性：padding间隙属性描述的是元素内部内容到元素边界的距离，也即间隙属性描述的是元素内部内容到元素边界的距离，也即内容到边界内容到边界之间之间的距离，举例来说，比如单元格（蓝色）和内容（黑色）之间的距离的距离，举例来说，比如单元格（蓝色）和内容（黑色）之间的距离单元格单元格1单元格单元格2上边距：上边距：Padding-top右边距：右边距：Padding-right下边距：下边距：Padding-bottom左边距：左边

15、距：Padding-leftCSS语法初步语法初步边框属性：边框属性：border边框属性比较好理解，它用来定义一个元素例如单元格、表格的边框样式，比如边框属性比较好理解，它用来定义一个元素例如单元格、表格的边框样式，比如我们想设置一个单元格它的边框的粗细、颜色、边框线的样式，都可以实现。特我们想设置一个单元格它的边框的粗细、颜色、边框线的样式，都可以实现。特别的，我们还可以针对每一条边框线设置，也即对别的，我们还可以针对每一条边框线设置，也即对4条边框分别设置，如果使用条边框分别设置，如果使用得当，将会得到非常漂亮的网页。得当，将会得到非常漂亮的网页。单元格单元格上边框宽度：上边框宽度：Bo

16、rder-top-width上边框颜色：上边框颜色：Border-top-color上边框样式：上边框样式：Border-top-style左边框宽度：左边框宽度：Border-left-width左边框颜色：左边框颜色：Border-left-color左边框样式：左边框样式：Border-left-style上边框上边框左边框左边框下边框下边框右边框右边框CSS语法初步语法初步列表属性列表属性用来设定列表项的标记类型列表属性用来设定列表项的标记类型列表属性包括了列表属性包括了“list-style”（列表样式）、（列表样式）、”list-item”（列表项）等多种属性（列表项）等多种属性下

17、面我们来演示如何给一个有序列表添加不同的标记：下面我们来演示如何给一个有序列表添加不同的标记：首先在首先在中加入内部样式表中加入内部样式表ol.decimallist-style-type:decimalol.lower-alphalist-style-type:lower-alphaCSS语法初步语法初步然后在有序列表中使用它然后在有序列表中使用它项目一项目一项目二项目二项目三项目三项目一项目一项目二项目二项目三项目三项目一项目一项目二项目二项目三项目三项目一项目一项目二项目二项目三项目三CSS语法初步语法初步鼠标属性鼠标属性非常简单，但是也非常实用，它主要控制当鼠标移动到某个元素上时，鼠标

18、属性非常简单，但是也非常实用，它主要控制当鼠标移动到某个元素上时，鼠标的形态。例如如果我们给一个单元格使用鼠标样式：手，那么当鼠标移动鼠标的形态。例如如果我们给一个单元格使用鼠标样式：手，那么当鼠标移动到这个单元格上时，鼠标将由光标样变成手的光标。到这个单元格上时，鼠标将由光标样变成手的光标。我们来实例演示几个光标：我们来实例演示几个光标：手的形状手的形状手的光标手的光标移动移动移动光标移动光标等待等待等待光标等待光标求助求助求助光标求助光标CSS语法初步语法初步第一节第二节第三节第四节第五节第六节星期一星期二星期三星期四星期五星期六课堂实践：利用课堂实践：利用CSS和表格制作课程表和表格制作课程表CSS语法初步语法初步步骤一：创建一个步骤一：创建一个7行行7列的表格列的表格CSS语法初步语法