阿里巴巴入职培训cs篇

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获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义

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

4、。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的主要技术负责人。1996年底，css已经完成。1996年12月css要求的第一版本被出版。 1997年初，w3c内组织了专门管css的工作组，其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。到2004年为止，第三版还未出版。 看下css到底有多强大html+css 地图韩国网站再看下没有css的时候是什么样子的。（号称裸奔，2008年4月9日 裸奔节）具体功能有：控制布局（几列几列）控制全局（字体、颜色、链接、边框、背景）控制个体（br、hr、h1、h2、div、table）

5、自定义样式（class、id、style、link）css控制布局 早期表格布局 td td td td td td td css控制布局（头和身体的问题） div搭建的基本框架css在哪里？链接css标签内写入css页内css #guidefont-size:12px;border:1px solid #ff7300 指定css效果类看下css是怎么样的 body margin:0px;border:0px;font-size:12px;font-family:宋体;background-color:#fff; tdmargin:0px;font-family:宋体 .img_bborder

6、:1px solid #bbb; .bdborder:1px solid #f00 .guidebackground:#f00总体可以看出：选择符属性：值css最基本语法结构剖析css 选择符(id/class，类型，群组，包含，标签指定，组合伪类，通配，伪类) #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:

7、12px h1font-size:16px;font-weight:bold 群组选择器 h1,h2,h3,h4color:#ff7300 .title .copyright .listfont-family:”黑体” 通配选择器(不建议使用，非必要就不用)*font-size:12px第一阶段总结：理下思路 css是怎么和html页面相亲(链接)的 html页面元素如何娶(取)到对应css定义的效果 或者 html页面元素如何决定 娶(取)哪个效果 css基本的语法是什么 html结合css强大功能有哪些链接方法 / 页内css / 直接写style 通过选择符 结合 优先级选择符属性：值布

8、局 / 全局 / 局部 / 自定义样式快速实现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: ce

9、nter / 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 缩写：backgr

10、ound 定位：background-position:看首页 试一下内外边距的问题 margin-top/right/bottom/left: 8px padding-top/right/bottom/left : 8px 盒模型（慎用padding,挤电梯的道理） 试试看每个元素都被看作一个矩形框（盒子），由内容、padding（填充）、边框（border）和空白边（margin）组成浮动的功能 float: left / right （浮动游戏） 兼容性问题的引出 clear:both属性 布局初探321布局初探 viframe 添加布局？display：显示方式属性 display:

11、none / block / in-line 内联元素/块元素摘录自：http:/ center - 举中对齐块 div - 常用块级容易，也是css layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 ol - 排序表单 p - 段落 table - 表格 ul - 非排序列表 a - 锚点 b - 粗体(不推荐) br - 换行 em - 强调 font - 字体设定(不推荐) i - 斜体 img

12、- 图片 input - 输入框 label - 表格标签 select - 项目选择 span - 常用内联容器，定义文本内区块 strong - 粗体强调 textarea - 多行文本输入框标签初始化的一些问题 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-position list-style-type表单控制form / input / select border-color border-style border-width技能介绍 如何学习css 强迫自己用css，不断使用不断修正。 使用中，持续的、系统的学习css。 寻找最优的表达方法书写css。 如何使用