前端基础培训.ppt

选择器 伪类选择器 与用户行为相关 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 属性&属性值 背景属性 CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果 CSS 在这方面的能力远远在 HTML 之上 background-image：url background-repeat：no-repeat||repeat-x||repeat-y background-position: 通常成对出现，可以有多种值包括： top||bottom||left||right||长度值||百分比 background-color：单词||RGB 缩写：background 属性&属性值 字体属性 规定字体、大小、形式等 font-size：12px font-family：Serif||Sans-serif||Monospace ||Cursive ||Fantasy font-style：normal?||italic? font-weight：normal||bold||bolder||lighter||100~900 … 缩写形式：font 盒/框模型 margin：外边距 border：边框 padding：内边距 height/width：高度/宽度 margin border padding width height margin border padding width height 盒/框模型 width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素所占区域的总尺寸 背景应用于由内容和内边距组成的区域 内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边 外边距可以是负值，而且在很多情况下都要使用负值的外边距，而内边距不可以为负值 CSS定位 块级元素：div、p、h1~h6 可包含块级元素和行内元素 高度，行高以及顶和底边距都可控制 换行显示 行内元素：a、img、span 只能包含行内元素 高，行高及顶和底边距不可改变 行内显示 块级元素和行内元素可通过display属性进行强制转换 display : block || inline || none CSS定位 position属性 static position的默认值，一般不设置position属性时，会按照正常的文档流进行排列 relative 元素框相对于原本的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留 absolute 当元素的父对象(或曾祖父，只要是父级对象)parent的position属性不是默认值的情况，此时按照这个parent来进行定位，如果没有这个对象，相对body元素定位 fixed 总是以body为定位对象的，按照浏览器的窗口进行定位 position=static div1 div2 div3 position=relative div1 div2 div3 position=absolute/fixed div1 div3 div2 CSS浮动 float属性 定义元素向左或向右浮动 网页布局的重要方式 clear属性 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。 div1 div2 div2 div1 float:right div2 div1 float:left div2 div1 float:left float:left div1 div2 div2 div1 float:left float:left div2 div1 clear float / 相关资源 前端框架 设计目标 整理已有页面样式文件 整理所用到的jquery插件 简化页面编辑模式 提供常用页面布局的模板 更多的使用了jquery技术自动生成样式 目录结构 css js images template images jquery plugin 应用举例 <table class=“datatable” cellspacing=“0” cellpa