2-CSS样式学习笔记【适用于入门级别和进阶级别】.doc

CSS样式剖析 CSS简介：CSS-- Cascading Style Sheets，层叠式样式表。该技术始于1996年，1998年5月，level2(水平) 成为了W3C 的新标准。CSS扩展了HTML的功能，CSS与HTML、脚本相结合，可以更加有效的实现对网页元素的布局、排版和显示效果的控制。 CSS特点： 标识语言，纯文本，可以使用各种文本编辑器编写； (Dreamweaver是首选) CSS可以灵活的方式与HTML和脚本相结合；易用性、高效率、一致性、可靠性、可维护性、可移植性；CSS文件扩展名：css； CSS文件亦需在Web浏览器上解释执行；（运行环境） 具有跨平台性。 CSS语法规则： （selector） 选择器tag {property:value;...} //标签，属性：值 tag.Classname {property:value;...}　　//Class-selector，关联选择符 .Classmate {property:value;...}　　//Class-selector，独立选择符 tag#IDname {property:value;...}　　//ID-selector，关联选择符 #IDname {property:value;...}　　//ID-selector，独立选择符 归类规则： h1,p{font-family:黑体}继承规则：bb标签设定的样式ii标签内的元素将予以继承/i/b 情景选择规则： 格式：情景标签 标识符{属性：值；...} 例： html  head  title带情景选择的样式表实例/title /head  style type=text/css  p i{font-size:30pt;color:red}  /style  body bgcolor=lightblue  center  h1这是一个i样式表/i实例/h1 p这是一个i样式表/i实例/p /center  /body  /html CSS与HTML结合方式：内联：tag style=property:value;...[/tag] 嵌入： 　　 STYLE type=text/css 　　 !-- 　　 selector {property:value;...} 　　 ... 　　 -- 　　 /STYLE 链接外部样式表文件： 　　 link href=../mycss.css rel=stylesheet type=text/css 导入外部样式表文件： 　　 STYLE type=text/css 　　 !-- 　　 @import url(../mycss.css); 　　 -- 　　 /STYLE 外部样式表文件： 　　 扩展名：.css 　　 不能包含任何HTML标签 　　 遵循CSS语法规则 CSS应用： tag[/tag] (2)tag style=property:value;...[/tag] (3)tag class=Classname[/tag] (4)tag id=IDname[/tag] (5)优先顺序： 内联样式最高； 其它，按层次处理。 font 字体属性：font-family html style type=text/css !-- p{font-family:幼圆,隶书,宋体} .en{font-family: Times New Roman, Times, serif;} -- /style head titlefont-family属性/title /headbody bgcolor=lightyellowcenterfont size=5 color=redfont-family属性的应用效果/font/centerp将按照幼圆、隶书、宋体的顺序对字体进行设置 /p/body/html 字体风格：font-style 字体风格指字型，有 正常，斜体，和偏斜体，分别对应值为normal,italic,obliquehtmlstyle type=text/css !-- .p1{font-style:normal} .p2{font-style:italic} .p3{font-style:oblique} -- /style head titlefont-style属性/title /head body bgcolor=lightyellow center font size=5 color=redfont-style属性的应用效果/font fon