阿里巴巴入职培训css篇

飞龙在天 之 CSS入门-根底CSSB2B中文站-UED前端组：由由周鹏CSS是什么？飞龙在天飞龙在天 CSS入门入门 根底根底 CSS:CascadingStyleSheets.层叠级联样式表.是控制网页布局样式的根底，真正做到网页表现与内容别离的一种样式设计语言。精确到像素级控制。孩童时代画画的例子1.浏览器支持完善有兼容性问题2.表现与结构别离HTML也有局部默认样式3.样式控制功能强大样式也混乱4.继承性能优越继承重叠混乱CSS在当前WEB应用上面确实强大，可应用在HTML、XML，甚至FLEX、SilverLight中。事物的两面性导致需要人去更好的操纵它。CSS是什么理想的状态下看下我们的HTML+CSS孩童时代画画的例子孩童时代画画的例子HTMLHTMLCSSCSS历史飞龙在天飞龙在天 CSS入门入门 根底根底 转自维库转自维库历史历史 从从1990年代初年代初HTML被创造开始样式表就以各种形式出现了，不同的浏览器结合了它们被创造开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着但随着HTML的成长，为了满足设计师的要求，的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。的增加外来定义样式的语言越来越没有意义了。1994年哈坤年哈坤利提出了利提出了CSS的最初建议。伯特的最初建议。伯特波斯波斯Bert Bos当时正在设计一个当时正在设计一个叫做叫做Argo的浏览器，他们决定一起合作设计的浏览器，他们决定一起合作设计CSS。当时已经有过一些样式表语言的建议了，但当时已经有过一些样式表语言的建议了，但CSS是第一个含有是第一个含有“层叠的主意的。在层叠的主意的。在CSS中，中，一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方那么继承，或样式，在其他地方那么继承，或“层叠作者的样式。这种层叠的方式使作者和读者都可以层叠作者的样式。这种层叠的方式使作者和读者都可以灵活地参加自己的设计，混合各人的爱好。灵活地参加自己的设计，混合各人的爱好。哈坤于哈坤于1994年在芝加哥的一次会议上第一次展示了年在芝加哥的一次会议上第一次展示了CSS的建议，的建议，1995年他与波斯一起年他与波斯一起再次展示这个建议。当时再次展示这个建议。当时W3C刚刚建立，刚刚建立，W3C对对CSS的开展很感兴趣，它为此组织了一次的开展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人比方微软的托马斯讨论会。哈坤、波斯和其他一些人比方微软的托马斯雷尔登是这个工程的主要技术负雷尔登是这个工程的主要技术负责人。责人。1996年底，年底，CSS已经完成。已经完成。1996年年12月月CSS要求的第一版本被出版。要求的第一版本被出版。1997年初，年初，W3C内组织了专门管内组织了专门管CSS的工作组，其负责人是克里斯的工作组，其负责人是克里斯里雷。这个工作组开里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是始讨论第一版中没有涉及到的问题，其结果是1998年年5月出版的第二版要求。到月出版的第二版要求。到2004年为止，年为止，第三版还未出版。第三版还未出版。看下CSS到底有多强大HTML+CSS地图韩国网站再看下没有CSS的时候是什么样子的。号称裸奔，2021年4月9日裸奔节具体功能有：控制布局几列几列控制全局字体、颜色、链接、边框、背景控制个体br、hr、H1、H2、div、table自定义样式class、id、style、linkcss控制布局早期表格布局 TD TD TD TD TD TD TD css控制布局头和身体的问题div搭建的根本框架CSS在哪里？链接css标签内写入css页内css#guidefont-size:12px;border:1pxsolid#ff7300指定css效果类看下CSS是怎么样的bodymargin:0px;border:0px;font-size:12px;font-family:宋体;background-color:#fff;tdmargin:0px;font-family:宋体.img_bborder:1pxsolid#bbb;.bdborder:1pxsolid#f00.guidebackground:#f00总体可以看出：选择符属性：值css最根本语法结构剖析css选择符(id/class，类型，群组，包含，标签指定，组合伪类，通配，伪类)#id.classbodydivtabletd优先级的问题css优先级*font:8pxbodyfont:10pxdivfont: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:黑体通配选择器(不建议使用，非必要就不用)*font-size:12px第一阶段总结：理下思路css是怎么和html页面相亲(链接)的html页面元素如何娶(取)到对应css定义的效果或者html页面元素如何决定娶(取)哪个效果css根本的语法是什么html结合css强大功能有哪些链接方法/页内css/直接写style通过选择符结合优先级选择符属性：值布局/全局/局部/自定义样式快速实现CSS编辑器DW里的CSS编辑器。了解CSS的根底前提设置好页面布局不用DW属性编辑区域用链接外部CSS的方式应用时，自行命名选择符，不要过多的继承使用cssTidy工具清理代码想要进步，慢慢脱离它第二阶段：CSS的根本属性设计字体/段落color:red/blue/yellow.#ff7300font-family:字体;font-size:字号(px,em,ex)font-weight:boldtext-decoration:underline/nonetext-align:center/left/rightline-height:26px/200%看效果尝试一下设计边框等效果border-width:1pxborder-color:#ff7300border-style:solid/dashed/dotted缩写border:1pxsolid#ff7300试下：适时适地使用table背景设计的妙用background-color:#ff7300background-image:url(“);background-repeat:no-repeat/repeat-x/repeat-y缩写：background定位：background-position:看首页试一下内外边距的问题margin-top/right/bottom/left:8pxpadding-top/right/bottom/left:8px盒模型慎用padding,挤电梯的道理试试看每个元素都被看作一个矩形框盒子，由内容、padding填充、边框border和空白边margin组成浮动的功能float:left/right浮动游戏兼容性问题的引出clear:both属性布局初探321布局初探VIFRAME添加布局？display：显示方式属性display:none/block/in-line内联元素/块元素摘录自：要会使用搜索引擎！说下要找到这个答案的关键字是什么？center-举中对齐块div-常用块级容易，也是csslayout的主要标签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-图片input-输入框label-表格标签select-工程选择span-常用内联容器，定义文本内区块strong-粗体强调textarea-多行文本输入框标签初始化的一些问题bodyformuldl方法margin:0px;padding:0pxlist-style:none看例子，想方法定位的慎用和好用position:absolute/relative使用top/left/right和margin的区别相对/绝对的差异做个例子列表的使用看下ul/lidl/dt.ddol/lilist-stylelist-style-imagelist-style-positionlist-style-type表单控制form/input/selectborder-colorborder-styleborder-width技能介绍如何学习CSS强迫自己用CSS，不断使用不断修正。使用中，持续的、系统的学习CSS。寻找最优的表达方法书写CSS。如何使用CSS架构好你的HTML页面，遵守一定的使用规那么理解你所写的CSS不要用特殊方法使用CSS推荐工具/书籍Firefox+firebugCSS手册推荐书籍国外?精通CSS?人民邮电出版社图灵程序设计丛书国内?CSS网站布局实录?科学出版社?狂人日记?系列CSS2.0样式表中文手册.chm苏昱查阅课程到此结束欢送来提问谢谢各位的捧场、支持和鼓励期待下次再见！