Java-Web应用开发技术与案例教程课件第2章-CSS样式表.ppt

1、Java_Web应用开发技术与案例教程课件第2章-CSS样式表定义CSS样式表 CSS是是Cascading Style Sheets（层叠样式表），也称为（层叠样式表），也称为“样式表样式表”。CSS是一种美是一种美化网页的技术。化网页的技术。简单讲，简单讲，就是定义美化页面的面板，然后利用该面板实现页面的美化。就是定义美化页面的面板，然后利用该面板实现页面的美化。主要内容：主要内容：1 CCS样式表的定义与使用样式表的定义与使用 2 CSS常用属性常用属性 3 案例案例利用利用CCS对注册页面实现修饰对注册页面实现修饰注意：注意：使用样式表，必须先定义样式表，然后才能使用样式表。使用样式表

2、，必须先定义样式表，然后才能使用样式表。定义定义选择器（选择器（selector）CSS的处理思想是首先指定对什么的处理思想是首先指定对什么“对象对象”进行设置，然后指定对该对象的哪方面进行设置，然后指定对该对象的哪方面的的“属性属性”进行设置，最后给出该设置的进行设置，最后给出该设置的“值值”。因此，因此，CSS就是由就是由3个基本部分个基本部分“对象对象”、“属性属性”和和“值值”组成的。组成的。在在CSS的的3个组成部分中，个组成部分中，“对象对象”是最重要的，它指定了对哪些网页元素进行设是最重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称置，因此，它有一个专门的名称选择

3、器（选择器（selector）。定义选择器的基本语法：定义选择器的基本语法：selector属性属性:属性值属性值;属性属性:属性值属性值;说明：说明：（1）CSS选择器分为选择器分为3种类型种类型：标签选择器，通过标签选择器，通过HTML标签定义选择器。标签定义选择器。类别选择器，使用类别选择器，使用class定义选择器。定义选择器。ID选择器，使用选择器，使用id定义选择器。定义选择器。（2）属性）属性(property)是希望要设置的属性，并且每个属性都有一个值。属性和值被冒号分开，属性之间用分号间隔，并是希望要设置的属性，并且每个属性都有一个值。属性和值被冒号分开，属性之间用分号间隔，

4、并由花括号包围。由花括号包围。例如：例如：p background-color:blue;color:red /定义标签定义标签p选择器选择器 .cs1 font-family:华文行楷华文行楷;font-size:15px /定义类别选择器定义类别选择器.csl#cs2 color:yellow /定义定义ID选择器选择器#cs2选择器（选择器（selector）1、CCS样式表的定义与使用 CCS样式表的定义实际就是定义样式表的定义实际就是定义CCS选择器，选择器，由于由于CSS选择器有选择器有3种类型，所以，其定义方式也有种类型，所以，其定义方式也有3种。种。1.1 标记选择器标记选择器

5、通过通过HTML标签定义样式表标签定义样式表基本语法格式：基本语法格式：引用样式的对象标签属性:属性值;标签属性:属性值;标签属性:属性值;定义示例：定义示例：定义标记定义标记h1,h2的选择器的选择器 h1,h2text-align:center;color:blue;h3text-align:center;color:red;使用示例：使用示例：中国 北京天安门 山东泰安 1.2 类别选择器类别选择器使用使用class定义样式表定义样式表格式格式1：标签名.类名标签属性:属性值;标签属性:属性值;标签属性:属性值;注意：这种格式只能用在类名前所指定的标签上。格式格式2：.类名标签属性:属性

6、值;标签属性:属性值;标签属性:属性值;注意：该格式为该类名的标签都遵守该类所定义的样式。定义示例：定义示例：p.centertext-align:center;p.righttext-align:right;.text font-family:宋体;color:red;使用示例：使用示例：这个段落向右对齐 这个段落向右对齐 段落文本 标题文本 1.3 ID选择器使用id定义样式表基本语法：基本语法：#id名称标签属性:属性值标签属性:属性值;标签属性:属性值;注意：注意：使用该类样式表时，需要将该样式的网页内容前加一个id=id名称。定义示例：定义示例：#samplefont-family:

7、宋体;font-size:60pt 使用示例：使用示例：段落文本1.4 样式表的使用样式表的使用 在HTML中使用CSS的方法有4种方式：行内式、内嵌式、链接式、导入式。（1）行内式：利用）行内式：利用style属性直接为元素设置样式。属性直接为元素设置样式。例：正文内容1 正文内容2（2）内嵌式）内嵌式：需要先定义有关的选择器，然后再使用。利用标签对，将样式表（选择器）定义在标签对之间。例如：页面标题 pcolor:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;.infofont-size:12px;col

8、or:red;这是第这是第1行正文内容行正文内容 这是第这是第2行正文内容行正文内容 （3）链接式：首先，将定义的CSS单独放到一个以.css为扩展名的文件中，然后，使用标签，链接到所需要使用的网页中（在与之间链接）标签链接到网页的格式：标签链接到网页的格式：注意：注意：文件的存放位置，否则不能找到文件。例如：首先定义一个sheet_x.css文档：h2 color:#0000FF;p color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;其次，在HTML中使用：页面标题 CSS标题1 这是正文内容1 （

9、4）导入式：该方式与链接式方法类似，只是通过import导入到页面中。import导入格式为：import url(*.css文件路径);1.5 CSS样式表继承性样式表继承性 CSS是级联样式表，级联是指继承性，即在标签中嵌套的标签继承外层标签的样式。级联的优先级是级联样式表，级联是指继承性，即在标签中嵌套的标签继承外层标签的样式。级联的优先级顺序是：顺序是：（1）嵌入式样式表（优先级最高）嵌入式样式表（优先级最高）（2）内联式样式表）内联式样式表（3）外联式样式表）外联式样式表（4）浏览器默认（优先级最低）。）浏览器默认（优先级最低）。注意：注意：当样式表继承遇到冲突时，总是以最后定义的样

10、式为准。当样式表继承遇到冲突时，总是以最后定义的样式为准。例如：例如：2 CSS常用属性 主要有字体属性、颜色属性、背景属性、文本段落属性等。主要有字体属性、颜色属性、背景属性、文本段落属性等。2.1 字体属性字体属性属性名属性含义属性值font-family字体取值（如“宋体”）font-size:字体大小（字号）取值单位：pt（点数），例“12pt”font-style字体风格normal（普通，默认值），italic斜体，oblique中间状态font-weight字体加粗normal（普通，默认值），bold（一般加粗），bolder（重加粗），lighter（轻加粗），number:

11、100-900之间的加粗font字体复合属性用来简化css代码，可以取值以上所有属性值，之间用空格分开2.2 颜色和背景属性属性名属性含义属性值color颜色（颜色值是英文名称或16进制RGB值）例，red为#ff0000）background-color背景颜色同color属性background-image背景图像none:不用背景；url：图像地址background-position背景图片位置top，left，right，bottom，center等background背景复合属性简化css代码，可取值以上所有属性值，之间用空格分开2.3 文本段落属性文本段落属性属性名属性含义属性值

12、text-decoration文字修饰none,underline:下划线,overline:上划线,line-through:删除线,blink：文字闪烁vertical-align垂直对齐baseline:默认的垂直对齐方式，super文字的上标，sub文字的下标，top垂直靠上，text-top使元素和上级元素的字体向上对齐，middle垂直居中对齐，text-bottom使元素和上级元素的字体向下对齐text-align水平对齐left,right,center,justify:两段对齐text-indent文本缩进缩进值（长度或百分比line-height文本行高行高值（长度，倍数，

13、百分比）white-space处理空白normal将连续的多个空格合并,nowrap强制在同一行内显示所有文本，直到文本结束或者遇到对象2.2.3 案例利用CCS对注册页面实现修饰【例2-9】设计如图所示的注册网页，该页面没有修饰，不够美观，采用CCS修饰页面，重新设计页面。【分析分析】为了便于理解其设计过程，这里采用分两步实现，逐渐完善设计：为了便于理解其设计过程，这里采用分两步实现，逐渐完善设计：【实现实现1】按所给出的原始界面，设计按所给出的原始界面，设计HTML文档：文档：ch02_9_1_register.html；源代码源代码 运行界面运行界面【实现实现2】设计设计CCS文档：文档：ch02_9_Css.css，在该文档中包含所需要的格式控制，从而，在该文档中包含所需要的格式控制，从而形成修饰后的页面。形成修饰后的页面。【实现实现3】：利用利用ch02_9_Css.css中定义的样式，中定义的样式，重新设计重新设计 ch02_9_1_register.html，形成新网页形成新网页ch02_9_2_registerCss.html。实现步骤及其源代码。实现步骤及其源代码。【运行运行】运行界面运行界面