第2章 CSS基础(精品).ppt

第第2 2章章 CSSCSS基础基础 CSS CSS简介简介2.1 CSS CSS的基本语法的基本语法2.22.1 CSS2.1 CSS简介简介 没有应用CSS 应用了CSS 图2-1 页内容相同而排版布局不同的两个网页 CSS是是Cascading Style Sheets的缩写的缩写，中文，中文为为“层叠样式表层叠样式表”。CSS具有下述特点。具有下述特点。CSS通过通过“样式样式”来表示网页的颜色、字体、背来表示网页的颜色、字体、背景色、边框线及网页内容的位置及大小尺寸等属景色、边框线及网页内容的位置及大小尺寸等属性。性。一系列的样式组成了一系列的样式组成了“样式表样式表”。定义定义“样式表样式表”有有3种方式：外部样式表文件、种方式：外部样式表文件、内部样式表及元素中的样式表。内部样式表及元素中的样式表。在网页的标记中应用在网页的标记中应用“样式样式”时采用的是时采用的是“层叠层叠式式”原则。原则。2.2 CSS2.2 CSS的基本语法的基本语法 2.2.1 样式和样式表样式和样式表1样式样式 样式是由成对的属性名和属性值以冒样式是由成对的属性名和属性值以冒号号“：”相间组成。相间组成。2样式表样式表 一系列的一系列的“样式样式”以分号以分号“；”相间相间组成为组成为“样式表样式表”。1颜色颜色 CSS中的颜色是由红、蓝、绿中的颜色是由红、蓝、绿3种颜色种颜色组合而成的，每一种颜色用数字组合而成的，每一种颜色用数字0至至255表表示示 2.2.2 CSS中的颜色和长度定义中的颜色和长度定义2长度定义长度定义 CSS的长度单位可以是下述几种：的长度单位可以是下述几种：in（英寸）、（英寸）、cm（厘米）、（厘米）、mm（毫米）、（毫米）、em（字高）、（字高）、pt（点（点=1/72英寸）、英寸）、pc（pica点点=12点）和点）和px（像素点）。（像素点）。2.2.3 常用的样式属性常用的样式属性1文字文字2背景背景3边框线边框线4高度和宽度高度和宽度5间距和边距间距和边距6列表列表7位置和布局位置和布局2.2.4 定义样式表定义样式表 指定指定“对象对象”来定义样式表的语法规来定义样式表的语法规则如下：则如下：对象对象1,对象对象2 样式表样式表 2.2.5 内部样式表和外部样式表内部样式表和外部样式表1内部样式表内部样式表 内部样式表是将定义样式表的内容放内部样式表是将定义样式表的内容放在在style元素中，并且设置元素中，并且设置type属性为属性为text/css。然后将。然后将style元素放在元素放在HTML文档文档的的head元素中。元素中。2外部样式表外部样式表 外部样式表是将定义样式表的内容放外部样式表是将定义样式表的内容放在一个文本文件中，一般都是以在一个文本文件中，一般都是以.css作为作为扩展名，然后在扩展名，然后在HTML文档的文档的head元素中元素中插入插入link元素，通过下属格式将外部样式表元素，通过下属格式将外部样式表文件连接到文件连接到HTML文档中：文档中：2.2.6 层叠式应用规则层叠式应用规则