css学习文档总结.docx

第一课基础知识：1 文档类型这句话说明本文档是过渡类型，另外还有框架和严格类型。2 语言编码它标示文档的语言编码。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。3 Html标签成对的标签 如： .单一的标签 4 Css 样式外部样式 内部样式 h2 color:#f00;行内样式内部样式链接样式import url(/css/global.css);5 Css优先级1. Id优先级高于Class2. 后面的样式覆盖前面的样式3. 指定的高于继承的4. 行内样式高于内部或外部样式总结：单一的ID高于共用的class，有指定的用指定的，无指定的继承它最近的样式。6 CSS盒模型组成内容（content）边框（border）边界（margin）填充（padding）第二课一列布局1 一列固定宽度2 一列固定宽度居中3 一列自适应宽度4 一列自适应宽度居中5 一列二至多块布局ID和CLASS选择器ID只能在页面中对应一个元素，就像我们的身份证号一样，每一个都不一样；CLASS为类，可以对应多个元素，如如说一个年级的学生，它所对应的可能是10个20个学生。ID的优先级高于CLASS，如如说今天三班的学生上课，小明留下来打扫卫生。那么三班学生上体育课这是一个类，而小明打扫卫生这是个ID，虽然小明也是三班的学生。但ID高于CLASS，所以小明打扫卫生。第三课二列和三列布局1 二列自适应宽度2 二列固定宽度3 二列固定宽度居中4 XHTML的块级元素（DIV）和内联元素（SPAN）5 FLOAT属性6 三列自适应宽度7 三列固定宽度8 三列固定宽度居中9 IE6的3像素BUG第四课纵向导航菜单及二级弹出菜单1 纵向列表2 标签的默认样式3 CSS派生选择器4 CSS选择器的分组5 纵向二级列表6 相对定位和绝对定位纵向列表标签的默认样式Body,ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dt,ddmargin:0px;padding:0px;font-size:12px;font-weight:normal;Imgborder:none;Ullisty-style:none;第五课超链接伪类A:link/*未访问的链接*/A:visited/*已访问的链接*/A:hover/*鼠标移动到链接上*/A:active/*选定的链接*/链接在默认状态下是内联元素，转换为块级元素后可以获得更大点区域，可以设置宽度和高度，将链接转换为块状，只需增加一个displya:bloc属性即可。首字下沉P( 标签元素)：first-letterfont-family:”microsoft yahei”; font-size:40px; float:left; paddin-right:10px; line-height:1;第六课HTML列表Ul无序ol有序列表 Ul默认为黑点，可以通过CSS样式改变成方块和圆圈，也可以改变成有序列表。OL默认为数字，也可以通过CSS样式改变其样式。可以通过list-style:none;改变项目符号样式或用图片定义项目符号通过样式给其前面定义图片样式项目符号如：ul libackground:url(img.png) no-repent 0px 4px; padding-left:20px;横向图文列表三亚三亚浮动后父容器高度自适应当一个容器内元素动浮动后，它将高度将不会随着内部元素高度的增加。所以造成，内容元素的显示超出了容器。解决此问题，使用以下样式：Overflow:auto; zoom:1;Overflow:auto;是让高度自适应，zoom:1;是为了兼容IE6而写的。IE6的双边距BUG如：当浮动后设置左侧外边距时后，最左侧将显示为双倍边距，比如设置20，而在IE6下动显示40PX，解决这个问题只需应用一个样式。Display:inline;第七课横向导航横向列表菜单用图片美化横向导航/div_css/895.shtmlbackground:url(.) 0(表示居左侧多少) 0(表示居上侧多少) no-repeat;CSS SPRITES技术在国内很多人叫CSS精灵或CSS雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用CSS的背景图片定位到显示的位置。这样做可以减少文件体积，减少对服务器请求次数，提高效率。第八课下拉及多级弹出菜单带下拉菜单的导航菜单绝对定位和浮动的区别和运用当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就当绝对定位的元素不存在时一样。而浮动元素的定位还是基于文档流，然后从文档中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。/div_css/899.shtmlCSS自适应宽度滑动门菜单第九课CSS