阿里巴巴入职培训css篇

飞龙在天之CSS入门-基础CSSB2B中文站-UED前端组：由由周鹏CSS是什么？飞龙在天CSS入门–基础

CSS:CascadingStyleSheets.层叠（级联）样式表.

是控制网页布局样式的基础，真正做到网页表现与内容分离的一种样式设计语言。精确到像素级控制。（孩童时代画画的例子）

1.浏览器支持完善（有兼容性问题）

2.表现与结构分离（HTML也有部分默认样式）

3.样式控制功能强大（样式也混乱）

4.继承性能优越（继承重叠混乱）CSS在当前WEB应用上面确实强大，可应用在HTML、XML，甚至FLEX、SilverLight中。事物的两面性导致需要人去更好的操纵它。 CSS是什么（理想的状态下）看下我们的HTML+CSS孩童时代画画的例子HTMLHTMLCSSCSS历史飞龙在天CSS入门–基础

看下CSS到底有多强大HTML+CSS地图韩国网站再看下没有CSS的时候是什么样子的。。。（号称裸奔，2008年4月9日裸奔节）具体功能有：控制布局（几列几列）控制全局（字体、颜色、链接、边框、背景）控制个体（br、hr、H1、H2、div、table）自定义样式（class、id、style、link）…css控制布局早期表格布局<tablewidth="100%"><tr><thheight="50"colspan="3"scope="col">TD</th></tr><tr><tdwidth="100"height="200"rowspan="2"><strong>TD</strong></td><tdwidth="200"height="100"><strong>TD</strong></td><td><strong>TD</strong></td></tr><tr><tdcolspan="2"><tablewidth="100%"><tr><tdheight="100"><strong>TD</strong></td></tr><tr><tdheight="100"><strong>TD</strong></td></tr><tr><tdheight="100"><strong>TD</strong></td></tr></table></td></tr></table>css控制布局（头和身体的问题）div搭建的基本框架<divclass="guide"></div><divclass="main"> <divclass="list"></div> <divclass="content"> <divclass="news"> <divclass="hot"></div> <divclass="dayNews"></div> </div> <ulclass="type"> <li></li> <li></li> <li></li> </ul> </div></div>CSS在哪里？链接css<linkhref="style.css"type="text/css"rev="stylesheet"/>标签内写入css<divstyle=“font-size:12px;border:1pxsolid#ff7300”></div>页内css<style>#guide{font-size:12px;border:1pxsolid#ff7300}</style>指定css效果类<divclass=“guide”></div>看下CSS是怎么样的body{margin:0px;border:0px;font-size:12px;font-family:宋体;background-color:#fff;}td{margin:0px;font-family:宋体}.img_b{border:1pxsolid#bbb;}.bd{border:1pxsolid#f00}.guide{background:#f00}总体可以看出：选择符{属性：值}css最基本语法结构剖析css选择符(id/class，类型，群组，包含，标签指定，组合伪类，通配，伪类)#id.classbodydivtabletd…优先级的问题css优先级*{font:8px}body{font:10px}

div{font:12px}.the_div{font:14px}

#the_div{font:16px}<divclass=“the_div”id=“the_div”style=“font:18px”>我是？像素</div>常用选择符类型选择符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强大功能有哪些链接方法<link>/页内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

-

常用块级容易，也是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

-

图片

◎

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/lidl/dt.ddol/lilist-stylelist-style-imagelist-style-positionlist-style-type表单控制form/input/select…border-colorborder-styleborder-width技能介绍如何学习CSS强迫自己用CSS，不断使用不断修正。使用中，持续的、系统的学习CSS。