1、第8章 CSS网页元素设计,字体样式的设置 段落样式的设置 颜色与背景的设置 图片样式的控制,8.1设置字体,font family设置字体 font-size文字大小 line-height行高 color文字颜色 background-color-背景颜色,文字大小的绝对尺寸,绝对尺寸不会随着显示器分辨率的变化而变化，也不会随着显示设备的不同而变化，font-size:绝对单位,浏览器默认以px为单位。,文字大小的相对尺寸,font-size: xx-small/x-small/small/medium/large/x-large/xx-large font-size:15px; font
2、-size:200%;(父元素的基础上乘以200%）,em vs. px,em指字体高，任意浏览器的默认字体高都是16px。 所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。 为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。,em vs. px,em有如下特点： 1. em的值并不是固定的； 2. em会继承父级元素的
3、字体大小。 阅读： http:/ color:blue; color:#00f; color:#0000ff; color:rgb(0,0,255); color:rgb(0%,0%,100%);,文字的装饰效果,font-weight文字的粗细 normal/bold font-style 字体倾斜 normal/oblique/italic text-transform大小写转换 capitalize/uppercase/lowercase text-decoration文字的装饰效果 underline/overline/line-through/blink(ie无效firefox有效）
4、,段落文字,text-align段落水平对齐方式 left/right/center/justify(两端） vertical-align段落的垂直对齐方式 top/bottom/middle/数值 正数：向上移动;负数：向下移动 text-indent段落缩进，设置一个数值 长度|百分比（对上一级元素的宽度而定的） line-height两行文字之间基线的距离 Normal|数字|长度|百分比（字体大小的百分比） letter-spacing调整字间距 Normal|长度 程序8-7.htm,段落内容裁剪（P188）,word-break word-wrap white-space over
5、-flow 实例： 程序8-8.htm,使文本产生省略号： white-space:nowrap; overflow:hidden; text-overflow:ellipsis;,8.2 CSS图像样式,使用图像美化网页,图像边框-border,border-style:边框风格 border-color：边框颜色 border-width：边框宽度 border-left/border-right/border-top/border-bottom,图片缩放与对齐,width/height 绝对宽度/高度：width:110px 相对宽度/高度：width:70%; 水平对齐：设置父元素的t
6、ext-align,8.3设置背景,CSS中使用background-color属性来设置背景，相对于HTML中的背景色设置，CSS背景色有更为灵活的设置方法，不仅可以设置网页的背景颜色，还可以设置文字的背景颜色。background-color: 关键字|RGB值|transparent,设置背景颜色,设置背景图像,background-image:url() background-repeat:控制图像平铺方向 repeat:沿水平和垂直两个方向平铺 no-repeat:不平铺，只显示一次 repeat-x:只沿水平方向平铺 repeat-y:只沿垂直方向平铺 实例：程序8-12.html
7、,设置背景图像,background-position：背景图像的位置 left right bottom top center/数值/百分比 background-attachment：fixed背景图像固定,背景样式属性的简写,background: :#3399ff url(bg-grad.gif) repeat-x;,background-image:url(bg-grad.gif); background-repeat:repeat-x; background-color:#3399ff;,背景样式属性的简写,background: blue url(bg-grad.gif) no-
8、repeat fixed 5px 10px;,background-image:url(bg-grad.gif); background-repeat:no-repeat; background-color:blue; background-attachment:fixed; background-position:5px 10px;/*水平 垂直*/,链接与导航,使用css制作实用的菜单,动态超链接, 在默认的浏览器浏览方式下，超链接统一为蓝色并且有下划线，被点击过的超链接则为紫色有下划线。 通过伪类别制作动态效果 精通/第7章/7-2.html,可制作动态效果的CSS伪类别属性,项目列表,
9、列表的符号,与列表相关的css属性,List-style-type List-style-image,List-style-type属性值,鼠标特效cursor,cursor auto/crosshair/default/e-resize/help/move/ne-resize/n-resize/all-scrool/no-drop/progress/vertical-text/nw-resize/se-resize/s-resize/sw-resize/text/wait/w-resize/hand/col-resize/not-allowed/row-resize,页面滚动条,scrool
10、bar-3dlight-color scroolbar-highlight-color scroolbar-face-color scroolbar-arrow-color scroolbar-shadow-color scroolbar-darkshadow-color,实例：7-5.html,spry,Spry,Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。 With Spry, you can use HTML code, CSS code, and a minimal amount of JavaScript
11、 to incorporate XML data into your HTML documents, create widgets such as accordions and menu bars, and add different kinds of effects to various page elements. 参考tab.html，SpryTabbedPanels.css中各选择器的说明：,SpryTab面板,.TabbedPanels 对选项卡整体进行设计 .TabbedPanelsTabGroup 选项卡组，对一组选项卡的整体设置 .TabbedPanelsTab 用于设置每一个
12、tab的样式 .TabbedPanelsTabHover 鼠标经过时tab的样式 .TabbedPanelsTabSelected 被选定的选项卡的样式 .TabbedPanelsContentGroup选项卡中的内容组 .TabbedPanelsContent 内容设置,鼠标滑过切换选项,最新行情,仿新浪TAB,Tab面板,效果:http:/ F:webCSS彻底研究1202Tab.htm 鼠标经过时切换选项 onmouseover=“TabbedPanels1.showPanel(0)“,折叠面板,http:/ F:webCSS彻底研究1203collapsible.htm Spry工具栏
13、spry可折叠面板,伸缩面板,F:webCSS彻底研究1204accordion-hover.htm onmouseover=“Accordion1.openPanel(this.parentNode)“ Spry工具栏spry折叠式,CSS+DIV布局网页,CSS排版观念,将页面用div分块，搭建html页面 设计各块的位置 用css定位,将页面用div分块,设计各块的位置,固定宽度且居中的版式,body, htmlmargin:0px; padding:0px;text-align:center; #containerposition: relative;margin: 0 auto;wi
14、dth:700px;text-align: left; ,方法1：,固定宽度且居中的版式,body, htmlmargin:0px; #containerposition: relative;left:50%;width:700px;margin-left:-350px;,方法2：,固定宽度且居中1-2-1版式,#logo,#banner,#left,#right,footer,#nav,#left-1,#left-2,#right-1,#right-2,#right-3,#logo,#banner,#left,#right,footer,#nav,logo,banner,nav,footer
15、,c3,c2,c5,c4,c1,实现步骤,按照布局结构构建html页面 使用CSS定义网页外观 在html页面中链接CSS文件 保存文件浏览网页 细节调整与修改,小结,字体的设置 字体的颜色 字体的修饰 段落的设置 图片的设置 背景的设置 背景颜色、背景图片 背景图像位置、固定 spry面板,实例,图文实例：精通/第4章/4-10.htm 彻底研究/第5章/图像/header-image-2.htm 精通/第5章/5-12.htm *提高篇： P125为图像增加投影图像 彻底研究/第5章/阴影/shadow1.htm,实例,彻底研究/第5章/文字/float-layout.htm-/图像/re
16、peat.html-图像header-image-2.htm 背景： #3399FF 精通/第3章/3-19.html百度搜索实例 精通/第4章/4-10.html background-color:#d8c7b4,综合实例,精通/第12章/12-1.html 精通/第18章/18.html 精通/第19章/19.html 精通/第20章/20.html,第2次实例课,Css1.html- 彻底研究/第5章/图像/repeat.html-图像header-image-2.htm Background-color:#3399FF; 精通css+div 6-8.html 6-11.html,导航菜
17、单实例,7-4.html Background-color:#efe5e2 8-5.html background-color:#ffdee0; Border-bottom:#ED9F9F Border-leftright:#711515 A-background-color:#c11136 Hover:#990020,使用“滑动门”技术设置玻璃效果菜单,基本思路：,窄文字内容,F:webCSS彻底研究0803glass-navi.htm 双层滑动门应用：F:webCSS彻底研究08043-state-navi.htm,宽文字内容,下拉菜单,F:webCSS彻底研究09final-7.htm Dl:#cb6 Dt:#ed8 Dd:#47a Dd：hover #147 color: #9cf #fa5 ,ee5,#5e5 ,#5cf,
