阿里巴巴入职培训css篇.pptVIP

CSS是什么 （理想的状态下） 看下我们的 HTML + CSS 看下CSS到底有多强大 HTML+CSS 地图 韩国网站 再看下没有CSS的时候是什么样子的。。。 （号称裸奔，2008年4月9日 裸奔节） 具体功能有： 控制布局（几列几列） 控制全局（字体、颜色、链接、边框、背景） 控制个体（br、hr、H1、H2、div、table） 自定义样式（class、id、style、link） … css控制布局 早期表格布局 css控制布局（头和身体的问题） div搭建的基本框架 看下CSS是怎么样的 body {margin:0px;border:0px;font-size:12px;font-family:宋体;background-color:#fff;} td{margin:0px;font-family:宋体} .img_b{border:1px solid #bbb;} .bd{border:1px solid #f00} .guide{background:#f00} 总体可以看出：选择符{属性：值} 剖析css 选择符(id/class，类型，群组，包含，标签指定，组合伪类，通配，伪类) #id .class body div table td… 优先级的问题 css优先级 常用选择符 类型选择符 body{margin:0px;padding:0px;font-size:12px} h1{font-size:16px;font-weight:bold} 群组选择器 h1,h2,h3,h4{color:#ff7300} .title .copyright .list{font-family:”黑体”} 通配选择器(不建议使用，非必要就不用) *{font-size:12px} 第一阶段总结：理下思路 css是怎么和html页面相亲(链接)的 html页面元素如何娶(取)到对应css定义的效果 或者 html页面元素如何决定 娶(取)哪个效果 css基本的语法是什么 html结合css强大功能有哪些 快速实现CSS（编辑器） DW里的CSS编辑器。 了解CSS的基础前提 设置好页面布局 不用DW属性编辑区域 用链接外部CSS的方式 应用时，自行命名选择符，不要过多的继承 使用cssTidy工具清理代码 想要进步，慢慢脱离它 第二阶段：CSS的基本属性 设计字体/段落 color: red/blue/yellow…. #ff7300 font-family: ”字体”;font-size:字号(px,em,ex) font-weight: bold text-decoration: underline/none text-align: center / left / right line-height: 26px / 200% 看效果 尝试一下 设计边框等效果 border-width: 1px border-color: #ff7300 border-style: solid / dashed / dotted 缩写border: 1px solid #ff7300 试下：适时适地使用table 背景设计的妙用 background-color:#ff7300 background-image:url(“”); background-repeat: no-repeat / repeat-x / repeat-y 缩写：background 定位：background-position:看首页 试一下 内外边距的问题 margin-top/right/bottom/left: 8px padding-top/right/bottom/left : 8px 盒模型（慎用padding,挤电梯的道理） 试试看 浮动的功能 float: left / right （浮动游戏） 兼容性问题的引出 clear:both属性 布局初探 布局初探 VIFRAME 添加布局？ display：显示方式属性 display: none / block / in-line 内联元素/块元素 标签初始化的一些问题 body{} form{} ul{} dl{} 办法{margin:0px; padding:0px} {list-style:none} …看例子，想办法 定位的慎用和好用 position: absolute / relative 使用top / left / right 和 margin 的区别 相对/绝对的差别 做个例子 列表的使用 看下ul/li dl/dt.dd ol/li list-style list-style-image list-style-positi