阿里巴巴入职培训css篇课件

1、飞龙在天 之 CSS入门-基础CSSB2B中文站-UED 前端组 ： 由由 周 鹏CSS是什么？飞龙在天 CSS入门 基础 CSS : Cascading Style Sheets . 层叠（级联）样式表. 是控制网页布局样式的基础，真正做到网页表现与内容分离的一种样式设计语言。精确到像素级控制。（孩童时代画画的例子） 1.浏览器支持完善（有兼容性问题） 2.表现与结构分离（HTML也有部分默认样式） 3.样式控制功能强大（样式也混乱） 4.继承性能优越 （继承重叠混乱）CSS在当前WEB应用上面确实强大，可应用在HTML、XML，甚至FLEX、SilverLight中。事物的两面性导致需要人

2、去更好的操纵它。CSS是什么（理想的状态下） 看下我们的 HTML + CSS 孩童时代画画的例子HTMLHTML CSSCSS历史飞龙在天 CSS入门 基础 转自维库历史 从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。 但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。 1994年哈坤利提出了CSS的最初建议。伯特波斯（Ber

3、t Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。 当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。 哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的

4、主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。 1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。到2004年为止，第三版还未出版。 css控制布局早期表格布局 TD TD TD TD TD TD TD css控制布局（头和身体的问题）div搭建的基本框架CSS在哪里？链接css标签内写入css页内css #guidefont-size:12px;border:1px solid #ff7300 指定css效果类剖析css选择符(id/class

5、，类型，群组，包含，标签指定，组合伪类，通配，伪类)#id .class body div table td优先级的问题css优先级*font:8px bodyfont:10px divfont:12px .the_divfont:14px #the_divfont:16px 我是？像素常用选择符类型选择符bodymargin:0px;padding:0px;font-size:12pxh1font-size:16px;font-weight:bold群组选择器h1,h2,h3,h4color:#ff7300.title .copyright .listfont-family:”黑体”通配选择

6、器(不建议使用，非必要就不用)*font-size:12px第一阶段总结：理下思路css是怎么和html页面相亲(链接)的html页面元素如何娶(取)到对应css定义的效果或者 html页面元素如何决定 娶(取)哪个效果css基本的语法是什么html结合css强大功能有哪些链接方法 / 页内css / 直接写style 通过选择符 结合 优先级选择符属性：值布局 / 全局 / 局部 / 自定义样式快速实现CSS（编辑器）DW里的CSS编辑器。了解CSS的基础前提设置好页面布局不用DW属性编辑区域用链接外部CSS的方式应用时，自行命名选择符，不要过多的继承使用cssTidy工具清理代码想要进步，

7、慢慢脱离它第二阶段：CSS的基本属性设计边框等效果border-width: 1pxborder-color: #ff7300border-style: solid / dashed / dotted缩写border: 1px solid #ff7300试下：适时适地使用table背景设计的妙用background-color:#ff7300background-image:url(“”);background-repeat: no-repeat / repeat-x / repeat-y缩写：background定位：background-position:看首页 试一下浮动的功能float

8、: left / right （浮动游戏）兼容性问题的引出 clear:both属性布局初探321布局初探VIFRAME 添加布局？display：显示方式属性display: none / block / in-line 内联元素/块元素摘录自：/article.asp?id=227要会使用搜索引擎！说下要找到这个答案的关键字是什么？center-举中对齐块div-常用块级容易，也是csslayout的主要标签dl-定义列表fieldset-form控制组form-交互表单h1-大标题h2-副标题h3-3级标题h4-4级标题h5-5级标题h6-6级标题hr-水平分隔线ol-排序表单p-段落t

9、able-表格ul-非排序列表 a-锚点b-粗体(不推荐)br-换行em-强调font-字体设定(不推荐)i-斜体img-图片input-输入框label-表格标签select-项目选择span-常用内联容器，定义文本内区块strong-粗体强调textarea-多行文本输入框标签初始化的一些问题bodyformuldl办法margin:0px; padding:0pxlist-style:none看例子，想办法定位的慎用和好用position: absolute / relative使用top / left / right 和 margin 的区别相对/绝对的差别做个例子列表的使用看下ul/li dl/dt.dd ol/lilist-stylelist-style-imagelist-style-positionlist-style-type技能介绍如何学习CSS强迫自己用CSS，不断使用不断修正。使用中，持续的、系统的学习CSS。寻找最优的表达方法书写CSS。如何使用CSS