CSS布局结构.ppt

复习 以下表示什么含义？ .greentea { color: green; } link type=text/css rel=stylesheet href=lounge.css / 怎样设置字体大小？ 复习：类的选择符 . greentea { color: green; } p class=greentea……/p 复习：link标签元素 link type=text/css rel=stylesheet href=lounge.css / 复习：设置字体大小的推荐方法 选择一种关键字（推荐用small或medium）定义字体的大小，也就是网页默认字体大小。 用em或百分比把别的元素字体大小设置为相对。 这样的好处：IE用户可以自己调整大小。 web颜色 body { background-color: silver; } 一共支持17种颜色名字！ 用16进制的RGB表示颜色 分解 16进制表示 转换为十进制值 用红、绿、蓝定义颜色 body { background-color: rgb(80%, 40%, 0%); } 或 body { background-color: rgb(204, 102, 0); } 选择颜色的方法：在线颜色表 /2010/0113/445.html 要点 网页字体系列 常用：serif（打印，有衬线），sans-serif（屏幕） monospace（代码），cursive，fantasy 比较好的做法是在font-family中设置多个字体 以防用户浏览器上没有安装首选字体。 用#RRGGBB格式可以指定颜色。 也可以直接用名字指定。 休闲室的伙计们增添了材料 首页增添了： 不少对饮料的描述 每天都有特色推荐 他们期望的是这样： 但是现在还没有 只是简单堆砌了材料 先做一些简单的改进 body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; } h1, h2 { color : #007e7e; } h1 { font-size : 150%; } h2 { font-size : 130%; } 段落处理 增加行间距： line-height : 1.6em ; 准备大翻新：盒模式 分辨出各个部分 可以灵活修饰盒子 边界和边框也可以修饰 目标分析 设置边框和背景色 .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; } 还记得guarantee类怎样加入吗？ 看看效果 设置补白 .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; } 添加边界 .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; } 插入文字修饰和背景图 .guarantee { line-height: 1.9em; font-style: italic; font-family: Georgia, Times New Roman, Times, serif; color: #444444; border-color: white; border-width: 1px; border-style: dashed; background-color: #a7cece; padding: 25px; margin: 30px;