CSS网页元素设计.ppt

第8章CSS网页元素设计 字体样式的设置段落样式的设置颜色与背景的设置图片样式的控制 8 1设置字体 fontfamily 设置字体font size 文字大小line height 行高color 文字颜色background color 背景颜色 文字大小的绝对尺寸 绝对尺寸不会随着显示器分辨率的变化而变化 也不会随着显示设备的不同而变化 font size 绝对单位 浏览器默认以px为单位 文字大小的相对尺寸 font size xx small x small small medium large x large xx largefont size 15px font size 200 父元素的基础上乘以200 emvs 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作为单位就行了 emvs px em有如下特点 1 em的值并不是固定的 2 em会继承父级元素的字体大小 阅读 文字颜色表示 以下几种方式都可表示蓝色 color blue color 00f color 0000ff color rgb 0 0 255 color rgb 0 0 100 文字的装饰效果 font weight 文字的粗细normal boldfont style 字体倾斜normal oblique italictext transform 大小写转换capitalize uppercase lowercasetext decoration 文字的装饰效果underline overline line through blink ie无效firefox有效 段落文字 text align 段落水平对齐方式left right center justify 两端 vertical align 段落的垂直对齐方式top bottom middle 数值正数 向上移动 负数 向下移动text indent 段落缩进 设置一个数值长度 百分比 对上一级元素的宽度而定的 line height 两行文字之间基线的距离Normal 数字 长度 百分比 字体大小的百分比 letter spacing 调整字间距Normal 长度程序8 7 htm 段落内容裁剪 P188 word breakword wrapwhite spaceover flow实例 程序8 8 htm 使文本产生省略号 white space nowrap overflow hidden text overflow ellipsis 8 2CSS图像样式 使用图像美化网页 图像边框 border border style 边框风格border color 边框颜色border width 边框宽度border left border right border top border bottom 图片缩放与对齐 width height绝对宽度 高度 width 110px相对宽度 高度 width 70 水平对齐 设置父元素的text 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 设置背景图像 background position 背景图像的位置leftrightbottomtopcenter 数值 百分比background attachment fixed背景图像固定 背景样式属性的简写 background 3399ffurl bg grad gif repeat x background image url bg grad gif background repeat repeat x background color 3399ff 背景样式属性的简写 background blueurl bg grad gif no repeatfixed5px10px background image url bg grad gif background repeat no repeat background color blue background attachment fixed background position 5px10px 水平垂直 链接与导航 使用css制作实用的菜单 动态超链接 在默认的浏览器浏览方式下 超链接统一为蓝色并且有下划线 被点击过的超链接则为紫色有下划线 通过伪类别制作动态效果精通 第7章 7 2 html 可制作动态效果的CSS伪类别属性 项目列表 列表的符号 与列表相关的css属性 List style typeList style image List style type属性值 鼠标特效cursor cursorauto 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 页面滚动条 scroolbar 3dlight colorscroolbar highlight colorscroolbar face colorscroolbar arrow colorscroolbar shadow colorscroolbar darkshadow color 实例 7 5 html spry Spry Spry框架是一个JavaScript库 Web设计人员使用它可以构建能够向站点访问者提供更丰富体验的Web页 WithSpry youcanuseHTMLcode CSScode andaminimalamountofJavaScripttoincorporateXMLdataintoyourHTMLdocuments createwidgetssuchasaccordionsandmenubars andadddifferentkindsofeffectstovariouspageelements 参考tab html SpryTabbedPanels css中各选择器的说明 Spry Tab面板 TabbedPanels对选项卡整体进行设计 TabbedPanelsTabGroup选项卡组 对一组选项卡的整体设置 TabbedPanelsTab用于设置每一个tab的样式 TabbedPanelsTabHover鼠标经过时tab的样式 TabbedPanelsTabSelected被选定的选项卡的样式 TabbedPanelsContentGroup选项卡中的内容组 TabbedPanelsContent内容设置 鼠标滑过切换选项 最新行情 仿新浪TAB Tab面板 效果 折叠面板 伸缩面板 F web CSS彻底研究 12 04 accordion hover htmonmouseover Accordion1 openPanel this parentNode Spry工具栏 spry折叠式 CSS DIV布局网页 CSS排版观念 将页面用div分块 搭建html页面设计各块的位置用css定位 将页面用div分块 设计各块的位置 固定宽度且居中的版式 body html margin 0px padding 0px text align center container position relative margin 0auto width 700px text align left 方法1 固定宽度且居中的版式 body html margin 0px container position 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 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 图像 repeat html 图像 header image 2 htm背景 3399FF精通 第3章 3 19 html百度搜索实例精通 第4章 4 10 htmlbackground color d8c7b4 综合实例 精通 第12章 12 1 html精通 第18章 18 html精通 第19章 19 html精通 第20章 20 html 第2次实例课 Css1 html 彻底研究 第5章 图像 repeat html 图像 header image 2 htmBackground color 3399FF 精通css div6 8 html6 11 html 导航菜单实例 7 4 htmlBackground color efe5e28 5 htmlbackground color ffdee0 Border bottom ED9F9FBorder left right 711515A background color c11136Hover 990020 使用 滑动门 技术设置玻璃效果菜单 基本思路 窄文字内容 F web CSS彻底研究 08 03 glass navi htm双层滑动门应用 F web CSS彻底研究 08 04 3 state navi htm 宽文字内容 下拉菜单 F web CSS彻底研究 09 final 7 htmDl cb6Dt ed8Dd 47aDd hover 147color 9cf fa5 ee5 5e5 5cf