西安交通大学《JAVA WEB》-ch4-Web

1、杨琦杨琦yangqiyangqi lCSSCSS样式表的概念与作用样式表的概念与作用lCSSCSS的基本语法和使用方法的基本语法和使用方法lCSSCSS的层次及其作用优先级的层次及其作用优先级lCSSCSS的属性单位的属性单位lCSSCSS的常用属性的常用属性lCSSCSS布局布局CSS样式表的概念与作用CSS的基本语法和使用方法CSS的层次及其作用优先级CSS的属性单位CSS的常用属性CSS布局lCascading Style Sheets(Cascading Style Sheets(层叠样式表层叠样式表) )l样式表的定义及引用样式表的定义及引用 链入外部样式表链入外部样式表 定义内部样

2、式块对象定义内部样式块对象 内联定义内联定义 引入外部样式表引入外部样式表lCSSCSS对网页的控制是通过对网页的控制是通过CSSCSS属性实现的，这些属性可以分为以下几类：属性实现的，这些属性可以分为以下几类：l(1) (1) 字体属性：用来控制文本的字体、字号等属性。字体属性：用来控制文本的字体、字号等属性。l(2) (2) 颜色和背景属性：用来控制页面或元素的颜色、背景颜色、背景图等属颜色和背景属性：用来控制页面或元素的颜色、背景颜色、背景图等属性。性。l(3) (3) 文本属性：用来控制文本的间距、段落的间距、行高、缩进等属性。文本属性：用来控制文本的间距、段落的间距、行高、缩进等属性

3、。l(4) (4) 容器属性：容器是指其内部可以包含内部元素、对象或数据的元素，如容器属性：容器是指其内部可以包含内部元素、对象或数据的元素，如表格、单元格等，页面也是容器对象。表格、单元格等，页面也是容器对象。CSSCSS中对这样的对象都统一用容器属中对这样的对象都统一用容器属性来控制。它包括以下子类：性来控制。它包括以下子类：l(a) (a) 边距属性；边距属性；(b) (b) 填充属性；填充属性；(c) (c) 边框属性；边框属性；(d) (d) 图文混排属性。图文混排属性。l(5) (5) 列表属性：用来对列表进行控制。列表属性：用来对列表进行控制。l(6) (6) 鼠标状态属性：用来

4、控制和理性鼠标的形状。鼠标状态属性：用来控制和理性鼠标的形状。l(7) (7) 定位属性：用来精确控制页面上的对象的位置。定位属性：用来精确控制页面上的对象的位置。l(8) (8) 滤镜属性：用来对设置和控制对象或元素特殊显示效果。在后面的实验滤镜属性：用来对设置和控制对象或元素特殊显示效果。在后面的实验中再讨论。中再讨论。 l什么时候需要什么时候需要 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。 使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。l步骤：步骤： 建立外部样式表文件（.css） 使用HTML的link对象l示例如下示例如下： title of art

5、icle link urlurl(css.css); (css.css); import import urlurl(csss.css) ;/(csss.css) ;/单引号也可以单引号也可以 import css.css;/import css.css;/单引号也可以单引号也可以 二者不同点：二者不同点： 引入式是：将样式文件的全部内容复制到import关键字所在的位置 链入式：只有HTML文件体需要引用CSS文件中的某个样式时，才连接样式文件 一、什么时候需要一、什么时候需要当单个文件需要特别样式时，就可以使用内部样式表。二、语法二、语法 head 部分通过 标签定义内部样式表三、示例如下

6、三、示例如下 允许不支持这类型的浏览器忽略样式表单。 一、什么时候用一、什么时候用当特殊的样式需要应用到个别元素时，使用内联样式。一、内联定义一、内联定义 在对象的标记内使用对象的style属性定义适用其的样式表属性。 样式仅限于此标记内 二、语法二、语法Selectorproperty: value 参数说明：参数说明： Selector - 选择符 property : value - 样式表定义 属性和属性值之间用冒号(:)隔开。定义之间用分号(;)隔开 This is a paragraphlCSS CSS 语法由三部分构成：选择器、属性和值：语法由三部分构成：选择器、属性和值： se

7、lector property: valueselector property: value body color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; l选择器的分组选择器的分组 h1,h2,h3,h4,h5,h6 color: green; l继承继承 Body font-family: Verdana, sans-serif; Body内所有的标签都继承这个样式 一、作用一、作用 用于定义一个元素独有的样式。HTML文档中只能引用一次 id 选择器以 #

8、 来定义 二、语法二、语法#id 名规则1，规则2例如：#mystyle 提示：内联样式可以是这样的效果（一次），但id选择器更好，可以将定义和引用分开。 一、作用一、作用 一般情况同种标记遵循同一种样式，若希望同种标记不遵循同一种样式，或则不同标记遵循同种样式二、语法二、语法.center text-align: center td.fancy color: #f60; background: #666; 在样式表中定义具有样式值的类：类名类名规则规则1，规则，规则2在标记中定义类选择符：标记名标记名.类名类名规则规则1，规则，规则2注意： *. my 表示任何标记中都可以用my p.my

9、表示只有标记中可以用my style ex 一、作用一、作用用于定义嵌套标记样式。二、语法二、语法 H2 em 规则 HTML文档中的： 讲引用该样式li strong font-style: italic; font-weight: normal; 我是粗体字 我是斜体字 我是正常的字体。 一、作用一、作用用于向某些选择器添加特殊的效果 一、定义格式一、定义格式选择符：伪类属性：值A:visited COLOR: #0000ff; TEXT-DECORATION: noneA:visited COLOR: #0000ff; TEXT-DECORATION: noneA:link FONT-S

10、IZE: 9pt; COLOR: #0000ff; FONT-FAMILY: A:link FONT-SIZE: 9pt; COLOR: #0000ff; FONT-FAMILY: 宋体宋体; ; TEXT-DECORATION: noneTEXT-DECORATION: noneA:hover FONT-SIZE: 12pt; COLOR: #003333; FONT-FAMILY: A:hover FONT-SIZE: 12pt; COLOR: #003333; FONT-FAMILY: 宋体宋体; ; BACKGROUND-COLOR: #ffcc99; TEXT-DECORATION:

11、 noneBACKGROUND-COLOR: #ffcc99; TEXT-DECORATION: nonea:link color: #FF0000 a:link color: #FF0000 / /* * 未访问的链接未访问的链接 * */ / a:visited color: #00FF00 a:visited color: #00FF00 / /* * 已访问的链接已访问的链接 * */ / a:hover color: #FF00FF a:hover color: #FF00FF / /* * 鼠标移动到链接上鼠标移动到链接上 * */ / a:active color: #0000F

12、F a:active color: #0000FF / /* * 选定的链接选定的链接 * */ / 这是一个链接。这是一个链接。l作用：给出样式而不必将样式附加在一个作用：给出样式而不必将样式附加在一个HTMLHTML的原有标的原有标记上记上l行级元素行级元素l标签被用来组合文档中的行内元素标签被用来组合文档中的行内元素 l可以为可以为 span span 应用应用 id id 或或 class class 属性，这样既可以增属性，这样既可以增加适当的语义，又便于对加适当的语义，又便于对 span span 应用样式应用样式。 some text.some other text. p.tip

13、 span font-weight:bold; color:#ff9955; l是块级元素，有是块级元素，有align ,class,id,stylealign ,class,id,style属性属性l它的内容自动地开始一个新行。实际上，换行是它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以通过固有的唯一格式表现。可以通过 的的 class class 或或 id id 应用额外的样式。应用额外的样式。l不必为每一个不必为每一个 都加上类或都加上类或 idid，虽然这样做也有一，虽然这样做也有一定的好处。定的好处。l可以对同一个可以对同一个 元素应用元素应用 class c

14、lass 或或 id id 属性，但是属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，更常见的情况是只应用其中一种。这两者的主要差异是，class class 用于元素组（类似的元素，或者可以理解为某一类用于元素组（类似的元素，或者可以理解为某一类元素），而元素），而 id id 用于标识单独的唯一的元素用于标识单独的唯一的元素。 内联样式中所定义的样式的优先级最高； 其他的样式表按其在HTML文件中出现或被引用的顺序，越在后出现，优先级越高； 选择符作用的优先顺序是上下文选择符、类选择符、id选择符，其优先级依次降低； 未在任何文件中定义的样式，将遵循浏览器的默认样式 字体属性包

15、括字体（font-family）、字号（font-size）、字体风格（font-style）、字体加粗（font-weight）、字体变化（font-variant）及字体综合设置（font）属性 颜色和背景类属性包括（前景）颜色（color）、背景颜色（background-color）、背景图像（background-image）、背景重复（background-repeat）、背景附属方式（background-attachment）、背景图像位置（background-position）及背景属性（background） 文本属性设置文字之间的显示特性，包括字符间隔（letter-s

16、pacing）、文本修饰（text-decoration）、大小写转换（text-transform）、文本横向排列（text-align）、文本纵向排列（vertical-align）、文本缩排（text-indent）、行高（line-height） 方框属性用于设置元素的边界、边框等属性值，使用这些属性的元素大多是块元素，包括，（x=1,2,.,7）等 列表属性用于设置列表标记（和）的显示特性，包括list-style-type，list-style-image，list-style-position和list-style CSS提供用于二维和三维空间定位的属性，它们是top，left和

17、position l行内样式表行内样式表l文档层次样式表文档层次样式表l外部样式表外部样式表1 1、长度单位、长度单位CSSCSS中，长度单位有两种，分别是绝对长度单位和相对中，长度单位有两种，分别是绝对长度单位和相对长度单位。长度单位。绝对长度单位绝对长度单位绝对长度单位分为绝对长度单位分为inin（英寸）、（英寸）、cmcm（厘米）、（厘米）、mmmm（毫（毫米）、米）、ptpt（磅）、（磅）、pcpc（picapica）。其中，）。其中，inin（英寸）、（英寸）、cmcm（厘米）、（厘米）、mmmm（毫米）和实际中常用的单位完全相同。（毫米）和实际中常用的单位完全相同。ptpt（磅）：是标准印刷上常用的单位，（磅）：是标准印刷上常用的单位，72pt72pt的长度为的长度为1 1英寸。英寸。pcpc（picapica）：这也是一个印刷上用的单位，）：这也是一个印刷上用的单位，1pc1pc的长度的长度为为1212磅。磅。 l2 2、百分比单位、百分比单位 乘以包含块的宽度 margi