CSS复习笔记.doc

Day01一.CSS2.0(Cascading Style Sheet)层叠样式表 1.作用：CSS用来修饰网页的(网页表现) w3c规定尽量用css样式替代XHTML的属性2.css的使用 a.内部样式(写在网页的头部) . b. 内联样式(写在网页标记中) . c.外部样式 (1)type :链接页面的文档类型 (2)rel:当前文档和目标文档的关系 (3)href:css样式目标页面 (4)media:根据媒体类型使用不同的css样式 all所有|screen计算机屏幕|tv电视|print打印机 说明： 内联样式优先级最高 ,如果内部样式和外部 样式冲突，后面的覆盖前面的样式 3.css的语法结构 选择器属性:值;属性:值;. selectorattrbute:value 4.选择器（selector） (1)通配选择器 = *(自动应用所有标记) (2)标记（类型）选择器 = 标记名称(自动应用指定标记) (3)class类选择器= .class名称 (手动应用任意标记中,一个标记中多个class名称用空格隔开) 应用:在标记中 属性 class=class名称 (4)id选择器 = #id名称 (手动应用唯一标记中) 应用:在标记中 属性id=id名称 (5)群组选择器 = 选择器名称,选择器名称. (多个选择器有相同属性的缩写) (6)后代选择器 = 选择器名称 选择器名称 (两个选择器至少是父子关系) (7)子代选择器= 选择器名称选择器名称 (两个选择器必须是父子关系) 5.颜色值 a.单词字符： red红,green绿. b.十六进制: #ff0000 =#f00 红色 c.rgb()：rgb:分别是red,green,blue 0-255或百分比 例如: 红色: #f00 rgb(255,0,0) rgb(100%,0%,0%) 绿色： #0f0 rgb(0,255,0) 蓝色： #00f rgb(0,0,255) 黄色: #ff0 rgb(255,255,0) 白色: #fff rgb(255,255,255) 黑色: #000 rgb(0,0,0) 浅灰: #eee rgb(230,230,230) 深灰： #333 rgb(3,3,3) 6.文本样式1 (1)文本颜色 color:颜色值 (2)文本大小 font-size:value (单位： 像素px, em:网页默认字体大小的比例 例如：1.5em默认字体的1.5倍) (3)文本加粗 font-weight:normal|bold|值(100-900) (normal=400 bold=700) (4)文本倾斜 font-style:normal|italic (5)文本字体 font-family:宋体,微软雅黑,Times New Roman (6) text-decoration:none|underline下划线| overline上划线|line-through删除线 7.选择器优先级 标记选择器 权值 0001 class类选择器 权值 0010 id 选择器 权值 0100 内联样式 权值 1000 说明：选择器权值越大优先级有高， 样式显示选择器优先级高的 继承的样式优先级最低, 如果权值相同后面的覆盖前面的样式 !important 的优先级最大Day02一.伪类选择器：a.行为伪类 :link：链接未访问状态 :visited：链接已访问状态 :hover:设置鼠标悬停状态 :active:设置鼠标激活状态 说明: LVHA 顺序设置 工作： a color:#333; text-decoration:none; a:hover color:#f00; text-decoration:underline; :focus 设置获得光标效果 去掉文本框默认边框 :focus outline:none; b.UI元素伪类 :checked：设置元素选择状态 :disabled:设置元素禁止状态 :enabled:设置元素启用状态 二.伪元素选择器 :before :after 例如： :before content:内容|url(图像URL); 三.布局样式中盒子属性： 1.width:宽度 2.height：高度 div标记：块元素，宽度是父级百分之百 span标记：行元素,宽度是元素的宽度 说明：行元素不能设置宽高，只能给块元素 设置宽高，及有宽高属性的元素设置 img,input等3.padding:内边距（边框和内容的距离） padding-top:value 上内边距 padding-right:value 右内边距 padding-bottom:value 下内边距 padding-left:value 左内边距 缩写： padding:value 上下左右一个值 padding:value value 上下 左右 padding:value value value 上 左右 下 padding:value value value value 上 右 下 左 说明： padding 会撑大盒子，并且只有正值没负值 4. margin:外边距（元素边框的外围） margin-top:上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:左外边距 缩写： margin:value 上下左右一个值 margin:value value 上下 左右 margin:value value value 上 左右 下 margin:value value value value 上 右 下 左 说明: a.有 正值，负值 ，auto b.margin:0 auto; 实现盒子块元素的水平居中 c.将盒子中的空隙清除 margin:0, padding:0 d.两个元素上下margin冲突取大值 左右冲突值相加 e.嵌套元素，子元素会将上下margin值 传递给父元素，如果父元素和子元素margin 冲突取大值5. border (边框) border-top-width:上边框宽度 border-top-sytle:上边框样式 (实线 solid, 虚线 dashed, 点线 dotted,双线 double) border-top-color:上边框颜色 border-right-width:右边框宽度 border-right-sytle:右边框样式 border-right-color:右边框颜色 border-bottom-width:下边框宽度 border-bottom-sytle:下边框样式 border-bottom-color:下边框颜色 border-left-width:左边框宽度 border-left-sytle:左边框样式 border-left-color:左边框颜色 缩写1 border-width:value 四个方向的宽度 border-width:value value 上下 左右 border-width:value value value 上 左右 下 border-width:value value value value 上 右 下 左 border-style:value 四个方向的样式 border-color:value 四个方向的颜色 缩写2 border:width style color 例如： border:2px solid #f00;6.盒子的总宽度计算 总宽度= 左外边距+左边框+左内边界+盒子width +右内边界+右边框+右外边距四.文本样式2 font:font-style 倾斜 |font-variant 小号的大写字母 |font-weight 加粗 |font-size 字大小 |line-height 行高 |font-family 字体 font-style:normal|italic font-variant:normal|small-caps小号的大写字母 font-weight:normal|bold|值(100-900) normal=400 bold=700 font-size:value (单位: px, em) font-family:宋体,Arial,Times New Roman; line-height:value 行高 说明:元素的行高等于盒子的 高度，实现元素的垂直居中 text-align:left|center|right 元素的水平对齐 text-decoration:none|underline |overline|line-through text-transform:none |capitalize首字母大写 |uppercase 大写字母 |lowercase 小写字母 text-indent: value (单位 px em)首行缩进 说明：只能对块元素使用 text-indent五.浮动（Float） float:left左浮动 |right右浮动 |none不浮动 说明: 1.元素浮动脱离文档流(不占位),无论是 左浮动还是右浮动靠在含边框的边界或浮动盒子 上才停止编辑 2.设置块元素浮动，宽度会缩到和内容一样宽度 3.设置行元素浮动，可以设置宽高 4.设置元素浮动对后面元素的影响是实现文字环绕六.清除浮动 clear:both 清除两边浮动 |left 清除左浮动 |right 清除右浮动 说明： 高度塌陷：父元素中的子元素都浮动， 并且没有设置父元素的高度， 父元素高度为0 解决方法： a. clear:both （父级中的子级盒子） b.万能清除（给父级加样式） .clear clear:both; zoom:1; .clear:after content:.; display:block; clear:both; height:0; visibility:hidden; 七.布局显示 (1) display:none| block 块 inline 行 inline-block 内联块 说明：inline-block 属于块元素， 能设置宽高，但是还具有行 元素不自动换行的功能 display:none 不显示， 脱离文档流（不占位） (2) visibility：visble 默认值 | hidden 隐藏 说明：visibility:hidden 占文档流 (占位) Day03一.背景(background) background-color:value 背影颜色 background-repeat: repeat(重复默认值) |repeat-x 水平重复 |repeat-y 垂直重复 |no-repeat 不重复 background-image:url(图片路径) 背影图片 background-attachment:scroll(滚动) |fixed(固定) background-position: value(水平位置) value(垂直位置) 说明: a.水平位置值:left center right 垂直位置值：top center bottom b.当background-position有一个值 代表水平方向 ，垂直方向默认垂直居中 例如: background-position:right;/center 水平居右垂直居中 c. background-position: 数值 数值 如果是正值背景图片往右，负值往左 缩写： background:color image repeat attachment position; 二. 图片精灵(图片整合) css sprites 1.原理：将多张小背景图片整合到 一张大图中 2.作用：减少服务器请求，客户端显示每张图片 都要向服务器请求，为了减少服务器请求 将图片整合三.无序，有序列表 list-style-type:disc : circle : CSS1 空心圆 |square : CSS1 实心方块 |decimal : CSS1 阿拉伯数字 |lower-roman : CSS1 小写罗马数字 |upper-roman : CSS1 大写罗马数字 |lower-alpha : CSS1 小写英文字母 |upper-alpha : CSS1 大写英文字母 |none : CSS1 不使用项目符号 list-style-image:none|url(图片路径) list-style-position:outside|inside 缩写 list-style:type image position 例如： list-style:none;(重要) list-style:url(1.jpg) inside;工作中： background:url(images/dot.gif) no-repeat 0px -96px; padding-left:12px;Day04布局： 文档流布局 浮动布局 定位布局一.定位(Position) (1)属性值 a. static(默认值):标准文档流 b. fixed(固定定位):脱离文档流(不占位)， 通过 top,left,right ,bottom属性定位置 c. absolute(绝对定位)：脱离文档流(不占位)， 通过 top,left,right ,bottom属性定位置 说明：默认情况坐标在浏览器的左上角， 通过左上角移动位置 d. relative(相对定位)：通过自身文档流定位（位置保留）， 通过 top,left,right ,bottom属性定位置 说明:默认情况坐标在自身盒子的左上角 工作中： 给父元素或祖先加 相对定位(relative), 实现坐标定位到自身盒子的左上角, 然后给子元素加绝对定位(absolute), 最后对子元素通过 top,left,right ,bottom实现移动效果 (2) z-index (实现层排序) 说明：z-index属性只能有 fixed,absolute relative 属性值时使用 可以是正值，负值；默认值是0 值越大定位层越在上面二.透明度属性 (1) opacity:01; (支持的浏览器：chrome谷歌，firefox火狐， safari苹果浏览器,opera欧朋) 说明：透明度属性值 0 代表完全透明 1 代表不透明 (2) filter:alpha(opacity=1100) (支持的浏览器:IE) Day05一.定位(Position) （1）属性值 static：默认值（标准文档流） fixed(固定定位):脱离文档流(不占位),通过top,left ,right,bottom属性移动 absolute(绝对定位):脱离文档流(不占位),通过top,left ,right,bottom属性移动 说明:默认坐标在浏览器的左上角，通过左上角坐标来移动 fixed 有滚动条时与 absolute有区别 relative(相对定位):根据自身文档流定位(保留位置)