网络程序设计PPT课件-第五章CSS.ppt

网络程序设计 xxx,第五章：css,目标,掌握样式表的语法规则 样式表的分类： 行内样式表 内嵌样式表 外部样式表 掌握常用的样式 了解层和标签,css简述,什么是css? css的全名是cascading style sheets，即“层叠样式表”，简称样式表，是用来定义网页的显示样式的。,为什么要使用css?,在html中网页内容和网页样式是混为一体的，如果想修改某个网页的样式，就需要对该网页逐句进行修改，非常麻烦 单纯使用html的标记和属性，有时候达不到需要的效果。,我想变成红色的字体怎么办呢？ 超链接的下划线消失？ 部分超链接颜色改变？,css:层叠样式表,级联样式表, 简称样式表 优点:,更能有效地控制网页外观，提高了文档样式的一致性，实现格式与内容结构的分离,使用样式表，您可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力,更小的网页,易维护与更新：当更新了 css样式后，所有使用该css样式的文档格式都自动更新为新样式,让浏览器或输出设备成为更友好界面,w3c 1996年开发css1 1998 css2 ie7和fx2实现了css1的绝大部分特性，ie7支持css2远远不足。,修改 正文文本都显示相同大小字体 超链接的下划线消失 部分超链接颜色改变,插入css,使用css进行设置，操作步骤如下。 打开text.html文档，选择窗口-css样式，打开css面板。 在css面板中单击+，打开新建css规则对话框。 选择选择器类型为标签，选择器名称为a，规则定义为仅限该文档，如图5-1示。点击确定，打开规则定义对话框。 在规则定义对话框中选择类型选项卡，在text-decoration中选择none，如图5-2所示。点击确定。,再次打开规则定义对话框，选择选择器类型为类，选择器名称为t，规则定义为仅限该文档，如图5-3示。点击确定，打开规则定义对话框。 在规则定义对话框中选择类型选项卡，在font-size中选择12。点击确定。,再次打开规则定义对话框，选择选择器类型为id，选择器名称为d，规则定义为仅限该文档，如图5-1示。点击确定，打开规则定义对话框。 在规则定义对话框中选择类型选项卡，在color中选择#c06。点击确定。 选择需要设置字体的段落，加入class=”t”。 选择最后的超链接，加入id=”d”。 预览显示设置效果。,加入css样式后text.html代码如下： mba班招生简章 学校坐落在以闻名海内外的山东省省会济南市。校园内绿草如茵，花团锦簇，文明整洁，优雅怡人。2010年山东经济学院继续面向全国招收mba研究生。 一、报名条件 2006年7月31日前国民教育序列大学本科或本科以上毕业并取得学历学位证书的在职人员。 二、报名方式、时间、地点 1、考试报名采取网上报名与现场报名相结合的方式。网上报名的时间为7月1日-17日,18日-20日现场确认。,2、报考者在规定的网报时间内，通过互联网登录/网站，按照要求填写、提交报名信息，然后在规定的现场报名时间内，持网上报名编号到各省级学位与研究生教育主管部门指定现场报名点，缴纳报名费、照相并确认报名信息。 3、考生携带有效身份证件，在规定的现场报名时间内，到指定现场报名点照相、缴费，领取并认真阅读非全日制攻读硕士学位全国统一考试考生应试守则及违规处理规则，确认报名信息。 三、招生人数：40人 四、招生咨询 咨询网址： 电子邮件： wrf_215163.com 联系地址：山东省济南市历下区二环东路7366号 邮编：250014 与原始text.html相比，增加了加粗字体部分。其中style元素部分就是定义的css样式。 在text.html中的正文文本块中增加的class=”t”，使这些文本块都设置为12#字体。文档中的所有超链接都消除了下划线。正文文本块中增加的id=”d”,使对应的a元素内容显示为指定颜色。示例显示效果如图5-7所示。,css 的基本语法,看如下示例:, 使用了样式的网页 我是一个使用了样式的网页 ,选择器,属性:指定显示样式,值:样式规则, 示例中的选择器分别是标记选择器、类选择器和id选择器。,选择器： 通配选择器 标记选择器 class 类选择器 id 选择器,文档样式-2,选择器的属性和值包含在大括号内 属性和属性的值以:分开 用分号 (；) 分隔多重属性 格式中加注释标记“”是为了防止不支持css样式表的浏览器， 将标记中的内容作为正文显示出来。,优 先 级,应用body样式,文档样式-标记选择器,class类选择器,应用类选择器： class”类名“,类选择器的定义格式为： .类名 样式规则; ,文档样式-class选择器,id选择器,应用id选择器： id”id名”,id选择器的定义格式为： #id名 样式规则; ,文档样式-id选择器,id与class,class和id看起来除了一个.和#的区别之外，无论在定义上还是在应用上似乎都是一模一样。然而事实上并不如此， 同一id在一个页面内只能应用一次，而class则是用于描述多次出现的元素。这从它们的名称上很容易理解。id就类似元素的身份证号码，它必须是唯一的，而class则是一类具有共同属性的元素的合称，是一类。 如果在一个页面内多次使用同一个id，页面通常是可以正常显示的。但是这会给后期的维护带来不便，还可能造成其它的问题。所以我们一定要区分开id和class，并且合理的应用它们。,.t font-size: 12px; text-decoration: none a.top:link font-size: 12px; color: #000000; text-decoration: none; letter-spacing: 0.2em a.top:visited font-size: 12px; color: #ff0000; text-decoration: none; letter-spacing: 0.2em a.top:hover font-size: 12px; color: #0000ff; text-decoration: underline; l etter-spacing: 0.2em a.top:active font-size: 12px; color: #00ff00; text-decoration: none; l etter-spacing: 0.2em #d color: #c06; 无标题文档 超链接效果 ,文档样式-特殊的选择器,特殊的伪类：a代表超链接，hover代表鼠标悬停,hyperlink.html,注意：伪类的优先级是从后到前，注意几个样式的顺序不能颠倒，否则可能造成部分样式无法正常显示。,选择符编组,p.paragraphcolor:blue;font-family:黑体; 引用时,选择符限定定义,li atext-decoration:none; .special li text-decoration:none;,群定义,p,h1.in,#aacolor:blue;font-family:黑体;,文档样式-特殊的选择器,通配选择器,* color:blue;font-family:黑体;应用于所有元素。很少使用。,文档样式优先级： 通配选择器 标记选择器 class 类选择器 id 选择器,文档样式,优 先 级,css 样式表的层次,样式表分为三个层次： 行内样式表 文档样式表 外部样式表,行内样式,如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 style 属性定义。, 希望大家能很好的掌握css,它对于我们学习网页制作有着非常重要的作用。 大家在学习的过程中有什么困难,可以给我发送email。 ,行内样式与提供一致的样式相背离，与内容混杂。 因此xhtml1.1不建议使用。,文档样式-1, 头内定义样式 pcolor:blue;font-family:隶书;font-size:24px;text-align:center; atext-decoration:none;color:red; 希望大家能很好的掌握css,它对于我们学习网页制作有着非常重要的作用。 大家在学习的过程中有什么困难,可以给我发送email。 ,所有的段落都采用 p 样式，保证样式统一,行内样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用文档样式。,用分号隔开,外部样式,作为一个站点我们需要对整个站点形成同一的风格和样式，定义一个样式应用于多个文档，这正是外部样式表的功能。外部样式表是一个独立的css文件，在使用外部样式表的文档中指定使用的外部样式表。 根据样式文件与网页的关联方式又分为： 链接（link ）外部样式表 导入（import）外部样式表,33,样式文件 p ,网页2,网页3,网页1,外部样式表可通过 /css-validator/validator-upload.html验证,链接外部样式表,使用link（链接）标签 ，语法： ,第一步：创建样式表文件whut_css.css,第二步：把样式文件和网页关联,样式文件： whut_css p ,one.htm,another.htm,第三步：浏览查看各网页,必须位于文档头部,.t font-size: 12px; text-decoration: none a.top:link font-size: 12px; color: #000000; text-decoration: none; letter-spacing: 0.2em a.top:visited font-size: 12px; color: #ff0000; text-decoration: none; letter-spacing: 0.2em a.top:hover font-size: 12px; color: #0000ff; text-decoration: underline; l etter-spacing: 0.2em #d color: #c06;,上述操作在text.html文档中插入下面的语句: 最后在指定标签内使用类和id选择器定义的样式，则整个效果和使用文档样式表完全相同。上述指定样式表的方式是链接样式表，链接外部样式表的语句必须位于文档头部。,导入外部样式表,使用import导入 ，语法： import url(css/whut_css.css); ,操作步骤同链接样式表,两种外部样式表的区别在于： import只能用在样式元素内容的开头，在文档样式表上面。 导入的文件可以包含标记、样式规则和其它import指令。 在css文件中可以导入其它样式表,。,外部样式表的设计,外表样式表的设计最常用的方法是使用已有的模板或案例，在此基础上添加和修改。在dreamweaver中可以使用新建文档示例中的css样式表,修改外部样式表的步骤如下： 打开样式表文件，在css面板中选择需要修改的项。 在选项的属性窗口中编辑属性值即可，如图5-10所示。或者点击选项属性窗口的编辑按钮，打开css规则定义对话框进行设置，如图5-10所示。 在选项的属性窗口中单击添加属性，在下拉式列表中选择属性，在属性值中编辑属性值，或点击选项属性窗口的编辑按钮，打开css规则定义对话框,选择新的属性和属性值即可。,窗口css面板,外部样式表中增加样式的步骤如下： 打开样式表文件，在css面板中选择样式表。 在css面板中单击+, 打开新建css规则对话框，选择选择器类型和名称，规则定义中选择仅限该文档，点击确定。 在规则定义对话框中选择属性和属性值即可。,外部样式表与内部样式表,外部样式表和文档样式表对同一文档可以实现相同的效果，但是其它文档可以同样使用这个外部样式表，实现了站点样式的统一，减少了网页大小,如图5-12所示。更新维护时只需要更新外部样式表文件，所有应用这个样式表的文档都会显示为新样式,样式的混合使用,行内样式表、文档样式表、外部样式表各有优势，实际的开发中常常 需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义文档样式 某张网页内，部分内容”与众不同“，采用行内样式,外部样式文件,对于某个xhtml标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加； 2）如果有冲突，则最先考虑行内样式表显示，如果没有，再考虑文档样式显示，如果还没有，最后采用外面样式表显示，否则就按html的默认样式显示；,文档样式,行内样式,某个xhtml标签,继承,css继承指的是子标签会继承父标签的样式风格，并可以在该样式基础上加以修改，产生新的样式，而子标签的样式风格不会影响父标签。 示例： h1color: blue; text-decoration:underline; emcolor: red; 对于mba班招生简章来说，mba会显示红色斜体，但会继承下划线效果。而h1保持蓝色和下划线效果。 利用继承可以大大缩减代码的编写量，并提高可读性，尤其是页面内容多且关系复杂时更是如此。,层叠,当我们为同一个标签多次设置样式表的时候，这些样式表会最终层叠成一个样式表来作用于标签。 例如，你在外部样式表中为p定义了如下样式： p text-align: left; 而在内部样式表中又定义了如下样式： p text-indent: 24px; 那么最终网页内p标签的样式将为： p text-align: left;text-indent: 24px;,优先级,如果外部样式表与内部样式表同时定义了同一个属性呢？看下面的例子。 外部样式表的内容： p text-align: center; 内部样式表的内容： p text-align: left; 最终页面中的段落将是左对齐。对同一标签的同一属性多次定义，那么内部样式表的定义将要覆盖外部样式表的定义。这是因为内部样式表的优先级高于外部样式表。,页面比较复杂的情况下，计算优先级是一个复杂的过程。总的原则是“越特殊的样式，优先级越高”，下面是一般的优先级规则： 行内样式 id样式 类样式 标记样式 优先级相同的情况下，后定义的样式会覆盖先前定义的样式。,css.html 第一行文本 第二行文本 第三行文本 第四行文本 第五行文本,css属性,css包含属性类别：字体 列表 文本对齐 边距 颜色 背景 边框 布局 长度值： url值： url(值),属性值如果仅有几个，并已预定义，可以使用关键字属性格式，不区分大小写。 如small small,绝对长度值： 英寸in 厘米cm 毫米mm 点pt(1pt=1/72in) 像素px 实际值取决于屏幕分辨率，近似尺寸,相对长度值：em以像素表示的当前字体大小的值 ex字母x的高度,属性值有些可继承，如font-size。有些不可继承，如background-color,字体属性,简写字体属性：font: bold 14pt times new roman arial 注意顺序：字体名称最后，字体大小倒数第二。,字体类别 属性font-family用于指定一系列字体名称。 示例：p font-family: “黑体”, “宋体”，arial; 示例中如果浏览器支持黑体，就使用黑体显示。如果不支持黑体，就使用宋体显示。如果这两种字体都不支持，使用arial字体显示。如果这些字体都不显示，浏览器会选择一种替代字体显示。请注意中文的字体要使用引号，而英文字体则不需要。 如果字体名称超过一个单词，整个字体名称都需要包含在单引号中。 示例：p font-family: “黑体”, “宋体”，times new roman; ,字体大小 属性font-size定义字体大小。 示例：p font-size: 12px; 注意不要忘记写上大小的单位，我们这里使用了像素(px)。通常中文网站的文字都定义为12px大，使用像素定义字体大小有明显的优点：精确，方便；不过使用像素定义字体大小也有一个缺陷：用ie浏览器无法调整“字体大小“选项。 字体大小可以使用相对值，如xx-small, x-small, small, medium, large, x-large, xx-large等，另外可以使用百分比或+-数字值。使用相对字体大小的缺点是缺少精确控制，例如，small, 有些浏览器使用10pt, 有些浏览器使用8pt, 致使同一文档在不同浏览器显示效果不一样。,字体样式 属性font-style定义字体样式, 最常用的用途是指定文本为斜体。 示例: p font-style: italic; 字体粗细 属性font-weigh定义字体粗细。 示例: p font-weight: bold; 除了取值bold,还可以取值nomal(默认值)、bolder、 ligher。另外还可以取100到900间100的倍数最为属性值，其中400与nomal一样大小，700与bold一样大小。,复合属性 复合属性font可以同时设置字体粗细、样式等属性，依次为字体粗细、字体样式、字体大小、字体类别的集合。 示例: p font: bold 14pt times new romanarial 注意给定顺序非常重要：字体名称最后，字体大小倒数第二。在font属性值列表中只有字体大小和类别是必须的。,文本对齐属性,文本对齐属性,给文字段落设置“倍行距，1.5倍字母间距，左对齐” pline-height:200%;letter-spacing:150%;text-align:left,首行缩进 属性text-indent定义首行缩进。 示例： p text-indent: 24px; 加入上面css语句的页面，所有的段落首行都将自动缩进24个像素。 文本对齐 属性text-align定义文本水平方向对齐方式。 示例： p text-align:center; 属性值可以是left、right、center、justify，默认值为left。,文本修饰 属性text-decoration指定文本的特殊修饰。 示例：p text-decoration:none; 示例使用none去掉下划线，为默认值。可能的取值有none|underline|blink|overline| |line-through，分别设置无修饰、下划线、闪烁、上横线、删除线的效果。 注意：textdecoration不可继承。文本修饰位于类型选项中。,颜色和背景属性-1,图片路径,颜色和背景属性-2,背景重复 背景图片是经常使用的属性，默认情况下背景图片将会不断重复，直到平铺整个页面，下面我们来看看如何控制图片的重复。 不重复 body background-image:url(flower.jpg); background-repeat:no-repeat; 只在水平方向重复 body background-image:url(flower.jpg); background-repeat: repeat-x; 只在垂直方向重复 body background-image:url(flower.jpg); background-repeat: repeat-y; ,背景位置 除了设置背景图片的重复属性之外，我们可以使用属性background-position控制背景图片出现的位置。背景图片出现的位置x方向可以是：left、right、center 和数值， y方向可以是top、bottom、center和数值。示例： body background-image:url(flower.jpg); background-position: left 100px; background-repeat:no-repeat; 示例设置背景图片在窗口中心以原始图片大小出现，不重复。,我们还可以使用属性backgroun d-attachment设置背景图片是否随着滚动条滚动而改变位置，background-attachment属性值有：fixed（固定）、scroll（滚动）。 示例： body background-image:url(flower.jpg); background-attachment:fixed; background-repeat:no-repeat; 示例设置背景图片以原始大小出现，背景图片不随滚动条滚动而改变位置，即形成水印效果。,复合属性 复合属性background可以同时设置背景、位置、重复等属性。 示例： body background:#99ff00 url( background.jpg) no-repeat fixed 40px 100px 示例依次为背景色、背景图片、重复、水印、位置的集合。,颜色和背景属性-3, 背景属性 body background:#99ff00 url(images/whiteflower.jpg) no-repeat fixed 40px 100px 这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, background-attachment, background-position。 这个html所用的背景属性表示，网页的背景颜色是翠绿色，背景图片是whiteflower.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。 background.html,盒子模式-1,盒子模式-2,盒子里由外至里依次是： margin 边距:用来设置一个元素所占空间的边缘到相邻元素之间的距离。 border 边框:用来设定一个元素的边线。 padding 间隙 :用来设置元素内容到元素边框的距离。 content (内容，比如文本，图片等)。 css 背景属性指的是 content 和 padding 区域。 css 属性中的 width 和 height 指的是 content 区域的宽和高。,边框属性-1,none (没有边框，无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边框) solid (直线式边框) double (双线式边框) groove (槽线式边框) ridge(脊线式边框) inset (内嵌效果的边框) outset (突起效果的边框),medium (是缺省值)、thin (比medium细) thick (比medium粗) 、用长度单位定值。,设定上边框属性：border-top-width,border-top-style,border-top-color。 设定下边框属性：border-bottom-width,border-bottom-style,border-bottom-color。 设定左边框属性：border-left-width, border-left-style, border-left-color。 设定右边框属性：border-right-width,border-right-style, border-right-color。,border.html,边距属性-1,边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。,边距属性-2, 边距属性margin .d1 border-style:dotted;border-color:blue;border-width:2px; .d2 margin:20px; padding:40px; border:1px solid red margin设为20px。 margin.html,20px,40px,间隙属性-1,边距属性是用来设置元素内容到元素边界的距离。,边距属性-2, 边距属性margin .d1 border-style:dotted;border-color:blue;border-width:2px; .d2 margin:20px; padding:40px; border:1px solid red margin设为20px。 margin.html,20px,40px,列表属性-1,disc:实心圆点;square:实心方块;decimal:阿拉伯数字 ;lower(upper)-roman:小(大)写罗马数字;lower(upper)-alpha:小(大)写英文字母;none:不使用项目号,列表属性-2, 无标题文档 ollist-style-type: upper-roman; ol ol list-style-type: decimal; ullist-style-image: url(jiantou.gif); 列表项1 子列表项1 无序列表项1 无序列表项2 子列表项2 列表项2 list.html,定位元素,相对定位 相对定位relative是指相对它本来应该处的位置所做的移动。 示例：position.html .dingwei position:relative; left:50px; 我是一段正常的文本 我本来应该在它的正下方， 可是relative相对定位让我在正常位置的基础上向右移动了50个像素。,绝对定位 绝对定位absolute指定元素出现在坐标(x,y)位置。 示例： dw position:absolute;