JSP程序设计基础

CSS复习（思考）CSS复习（思考）CSS思想(思想1）CSS定义自定义样式标签重定义高级样式文字图像超链接CSS引用外部文件内部引用DIV+CSS（思想2）一、CSS思想（思想1）ulh1h2pulpp作品名称宣传语简介链接联络方式图1仅使用HTML定“结构”的页面效果图2使用CSS设定样式之后的效果“Web标准”概述下面介绍关于网页的标准——“Web标准”。网页主要由3个部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。(X)HTMLCSSJavascript事件控制结构控制样式结构表现行为图3“结构”、“表现”和“行为”的关系“结构”、“表现”和“行为”分别对应于3种非常常用的技术，即(X)HTML、CSS和JavaScript。也就是说，(X)HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为。二、CSS定义及相关特性构造CSS规则1基本CSS选择器2在HTML中使用CSS的方法3复合选择器4CSS的继承特性5通过上一章的学习，了解了在网页设计中引入CSS的意义。引入CSS的核心目的就是实现网页结构内容和表现形式的分离，将原来由HTML语言所承担的一些与结构无关的功能剥离出来，改由CSS来完成。构造CSS规则在具体介绍CSS之前，先思考一个生活中的问题。张飞{身高:185cm;体重:105kg;性别:男;性格:暴躁;民族:汉族;}这个表实际上是由3个要素组成的，即姓名、属性和属性值。构造CSS规则CSS的作用就是设置网页的各个组成部分的表现形式。因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下：2级标题{字体:宋体;大小:15像素;颜色:红色;装饰:下划线}h2{font-family:宋体;font-size:15px;color:red;text-decoration:underline;}构造CSS规则CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由3个基本部分——“对象”、“属性”和“值”组成的。2基本CSS选择器在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）。标记选择器类别选择器(自定义）ID选择器2.1标记选择器styleh1{color:red;font-size:25px;}/styleh1color:red;font-size:25px;选择器属性值属性值声明声明{}2.2类别选择器(自定义）.classcolor:green;font-size:20px;类别选择器属性值属性值声明声明类别名称{}图5类别选择器写一个自定义样式：分别定义段落1、2字体的颜色和大小htmlheadtitleclass选择器/titlestyletype=text/css.red{color:red;/*红色*/font-size:18px;/*文字大小*/}.green{color:green;/*绿色*/font-size:20px;/*文字大小*/}/style/headbodypclass=redclass选择器1/ppclass=greenclass选择器2/ph3class=greenh3同样适用/h3/body2.3ID选择器#idcolor:yellow;font-size:30px;ID选择器属性值属性值声明声明{}图6ID选择器htmlheadtitleID选择器/titlestyletype=text/css#bold{font-weight:bold;/*粗体*/}#green{font-size:30px;/*字体大小*/color:#009900;/*颜色*/}/style/headbodypid=blodID选择器1/ppid=greenID选择器2/ppid=greenID选择器3/ppid=boldgreenID选择器4/p/body/html2.4复合选择器2.4.1交集选择器h3.classcolor:red;font-size:23px;选择器属性值属性值声明声明标记类别名称{}图7标记类别选择器h3.special.specialh3图8交集选择器示意图styletype=text/cssp{/*标记选择器*/color:blue;}p.special{/*标记.类别选择器*/color:red;/*红色*/}.special{/*类别选择器*/color:green;}/style/headbodyp普通段落文本（蓝色）/ph3普通标题文本（黑色）/h3pclass=special指定了.special类别的段落文本（红色）/ph3class=special指定了.special类别的标题文本（绿色）/h3/body/html2.4.2并集选择器h3.specialh3,.special图9并集选择器示意图styletype=text/cssh1,h2,h3,h4,h5,p{/*并集选择器*/color:purple;/*文字颜色*/font-size:15px;/*字体大小*/}h2.special,.special,#one{/*集体声明*/text-decoration:underline;/*下画线*/}/stylebodyh1示例文字h1/h1h2class=special示例文字h2/h2h3示例文字h3/h3h4示例文字h4/h4h5示例文字h5/h5p示例文字p1/ppclass=special示例文字p2/ppid=one示例文字p3/p/body2.4.3后代选择器htmlheadtitle后代选择器/titlestyletype=text/csspspan{/*嵌套声明*/color:red;/*颜色*/}span{color:blue;/*颜色*/}/style/headbodyp嵌套使span用CSS（红色）/span标记的方法/p嵌套之外的span标记（蓝色）/span不生效/body/html后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。下面是一些典型的代码：.speciali{color:red;}/*使用了属性special的标记里面包含的i*/#oneli{padding-left:5px;}/*ID为one的标记里面包含的li*/td.out.insidestrong{font-size:16px;}/*多层嵌套，同样实用*/上面的第3行使用了3层嵌套，实际上更多层的嵌套在语法上都是允许的。三、文字、图像、背景CSS定义（对比、书写）常用文字CSS控制名称属性值font-family黑体,Arial,“TimesNewRoman”;/*文字类型*/font-sizePx/*文字大小*/font-styleItalic/*意大利体*/Oblique/*倾斜*/font-weightBold/*加粗*/text-transformCapitalize/*单词首字母大写*/Uppercase/*全部大写*/Lowercase/*全部小写*/text-decorationNone/*正常显示*/Underline/*为文字加下划线*/Text-indent2em/*设置段落首行缩进*/letter-spacingPx/*控制字母间距*/word-spacingPx/*控制单词间距*/常用文字CSS控制名称属性值line-height长度(数值，可以使用前面所介绍的尺度单位)\倍数(font-size的设置值的倍数)\百分比(相对于font-size的百分比)/*调整行与行之间的距离*/text-alignLeft\right\center\justify/*控制文本的水平位置*/Color、backgroundblue;#0000ff;rgb(0,0,255);rgb(0%,0%,100%);/*颜色*/常用图像的CSS控制名称属性值border-styledashed;dotted;虚线、实线等border-widthpxborder-color颜色表达上下左右border-left、border-right、border-top和border-bottomwidth%图片缩放floatLeft;center;right文字环绕图片vertical-aligntext-bottommiddletopbaseline用CSS设置背景样式名称属性值background-color颜色background-imagebackground-image:url(bg.gif);background-repeatno-repeat\repeat-x\repeat-yCSS引用3在HTML中使用CSS的方法3.1行内式bodypstyle=color:#FF0000;font-size:20px;text-decoration:underline;正文内容1/ppstyle=color:#000000;font-style:italic;正文内容2/ppstyle=color:#FF00FF;font-size:25px;font-weight:bold;正文内容3/p/body3.2内嵌式styletype=text/cssp{color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;}/style/headbodyp这是第1行正文内容……/p/body3.3链接式headtitle页面标题/titlelinkhref=02-08.csstype=text/cssrel=stylesheet/headbodyh2CSS标题/h2p这是正文内容……/ph2CSS标题/h2p这是正文内容……/p/body02-08.css文件h2{color:#0000FF;}p{color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;}四、DIV+CSS盒子模型(思想2)“盒子”与“模型”的概念探究4.1长度单位4.2边框4.3设置内边距4.4设置外边距4.5盒子之间的关系4.6盒子在标准流中的定位原则4.74.1“盒子”与“模型”图4.1画框示意图盒子思想所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构；二是理解多个盒子之间的相互关系。研究什么独立的盒子相关的性质在普通情况下盒子的排列关系多个盒子之间的关系-------浮动和定位图4.2盒子模型4.2长度单位相对类型px:根据显示器分辨率多少而表示不同的长度em:以font-size属性为参考的长度。如没有，按默认字体大小。绝对类型in(英寸)、cm(厘米)、mm(毫米