CSS复习笔记

Day01一.CSS2.0(Cascading Style Sheet)层叠样式表1.作用：CSS用来修饰网页的(网页表现)w3c规定尽量用css样式替代XHTML的属性2.css的使用a.内部样式(写在网页的头部)<style>.......</style>b. 内联样式(写在网页标记中)<标记名称style="css代码"/><标记名称style="css代码">...</标记名称>c.外部样式<link type="text/css" rel="stylesheet" href="css样式URL" media="all|print|screen|tv"/>(1)type :链接页面的文档类型(2)rel:当前文档和目标文档的关系(3)href:css样式目标页面(4)media:根据媒体类型使用不同的css样式all所有|screen计算机屏幕|tv电视|print打印机说明：内联样式优先级最高,如果内部样式和外部样式冲突，后面的覆盖前面的样式3.css的语法结构选择器{属性:值;属性:值;...}selector{attrbute: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,blue0-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.选择器优先级标记选择器权值0001class类选择器权值0010id 选择器权值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.有正值，负值，autob.margin:0 auto;实现盒子块元素的水平居中c.将盒子中的空隙清除margin:0, padding:0d.两个元素上下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:左边框颜色缩写1border-width:value 四个方向的宽度border-width:value value 上下左右border-width:value value value上左右下border-width:value value value value上右下左border-style:value 四个方向的样式border-color:value 四个方向的颜色缩写2border:width style color例如：border:2px solid #f00;6.盒子的总宽度计算总宽度= 左外边距+左边框+左内边界+盒子width+右内边界+右边框+右外边距四.文本样式2font:font-style 倾斜|font-variant 小号的大写字母|font-weight 加粗|font-size 字大小|line-height 行高|font-family 字体font-style:normal|italicfont-variant:normal|small-caps小号的大写字母font-weight:normal|bold|值(100-900)normal==400 bold==700font-size:value (单位: px, em)font-family:宋体,Arial,'Times New Roman';line-height:value 行高说明:元素的行高等于盒子的高度，实现元素的垂直居中text-align:left|center|right元素的水平对齐text-decoration:none|underline|overline|line-throughtext-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 bottomb.当background-position有一个值代表水平方向，垂直方向默认垂直居中例如:background-position:right;//center水平居右垂直居中c. background-position: 数值数值如果是正值背景图片往右，负值往左缩写：background:color image repeat attachment position;二. 图片精灵(图片整合) css sprites1.原理：将多张小背景图片整合到一张大图中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,absoluterelative 属性值时使用可以是正值，负值；默认值是0值越大定位层越在上面二.透明度属性(1) opacity:0~1;(支持的浏览器：chrome谷歌，firefox火狐，safari苹果浏览器,opera欧朋)说明：透明度属性值0 代表完全透明1 代表不透明(2) filter:alpha(opacity=1~100)(支持的浏览器:IE)Day05一.定位(Position)（1）属性值static：默认值（标准文档流）fixed(固定定位):脱离文档流(不占位),通过top,left,right,bottom属性移动absolute(绝对定位):脱离文档流(不占位),通过top,left,right,bottom属性移动说明:默认坐标在浏览器的左上角，通过左上角坐标来移动fixed 有滚动条时与absolute有区别relative(相对定位):根据自身文档流定位(保留位置)说明：默认坐标自身盒子的左上角工作中:首先给父元素或祖先一个相对定位，实现默认坐标在自身盒子的左上角，然后再子元素绝对定位（在自身盒子的基础上移动），子元素通过top,left,right,bottom属性移动二.透明度(1) opacity:0~1说明: chrome(谷歌)，firefox(火狐)safari (苹果浏览器),opera（欧朋）(2)：filter:alpha(opacity=1~100)说明：IE支持三.Hack技术(针对不同浏览器兼容问题解决方法)(1)条件注释表示法<!--[IF IE]>...<![ENDIF]--><!--[IF IE 6]>只有IE6.0支持的内容<![ENDIF]-->(2)属性前缀表示法* 只有IE6.0 和IE7.0 例如: *background_ 只有IE6.0 例如_background(3)选择器前缀表示法*html标记{...} 只有ie6支持*+html标记{...} 只有ie7支持四.overflow属性：overflow:visible 默认值|auto |hidden |scrollauto :在必需时对象内容才会被裁切或显示滚动条hidden:不显示超过对象尺寸的内容scroll :总是显示滚动条总结:1.css样式链接方法（内部链接，外部链接，内联样式）2.选择器(通配符选择器标记选择器class类型选择器id 选择器群组选择器后代选择器子代选择器)3.伪类选择器4.盒子属性（width,height,padding,margin,border,background）5.全局样式6.布局中浮动7.布局定位8.hack 兼容。