2022年CSS复习总给笔记

Day01一.CSS2.0(CascadingStyleSheet)层叠样式表1.作用:CSS用来修饰网页(网页体现)w3c规定尽量用css样式代替XHTML属性2.css使用a.内部样式(写在网页头部)<style>.......</style>b.内联样式(写在网页标记中)<标记名称style="css代码"/><标记名称style="css代码">...</标记名称>c.外部样式<linktype="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或比例例如:红色:#f00rgb(255,0,0)rgb(100%,0%,0%)绿色:#0f0rgb(0,255,0)蓝色:#00frgb(0,0,255)黄色:#ff0rgb(255,255,0)白色:#fffrgb(255,255,255)黑色:#000rgb(0,0,0)浅灰:#eeergb(230,230,230)深灰:#333rgb(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==400bold==700)(4)文本倾斜font-style:normal|italic(5)文本字体font-family:宋体,微软雅黑,'TimesNewRoman'(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:valuevalue上下左右padding:valuevaluevalue上左右下padding:valuevaluevaluevalue上右下左阐明:padding会撑大盒子,并且只有正值没负值4.margin:外边距(元素边框外围)margin-top:上外边距margin-right:右外边距margin-bottom:下外边距margin-left:左外边距缩写:margin:value上下左右一种值margin:valuevalue上下左右margin:valuevaluevalue上左右下margin:valuevaluevaluevalue上右下左阐明:a.有正值,负值,autob.margin:0auto;实现盒子块元素水平居中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:valuevalue上下左右border-width:valuevaluevalue上左右下border-width:valuevaluevaluevalue上右下左border-style:value四个方向样式border-color:value四个方向颜色缩写2border:widthstylecolor例如:border:2pxsolid#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==400bold==700font-size:value(单位:px,em)font-family:宋体,Arial,'TimesNewRoman';line-height:value行高阐明:元素行高等于盒子高度,实现元素垂直居中text-align:left|center|right元素水平对齐text-decoration:none|underline|overline|line-throughtext-transform:none|capitalize首字母大写|uppercase大写字母|lowercase小写字母text-indent:value(单位pxem)首行缩进阐明:只能对块元素使用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.水平位置值:leftcenterright垂直位置值:topcenterbottomb.当background-position有一种值代表水平方向,垂直方向默认垂直居中例如:background-position:right;//center水平居右垂直居中c.background-position:数值数值如果是正值背景图片往右,负值往左缩写:background:colorimagerepeatattachmentposition;二.图片精灵(图片整合)csssprites1.原理:将多张小背景图片整合到一张大图中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:typeimageposition例如:list-style:none;(重要)list-style:url(1.jpg)inside;工作中:background:url(images/dot.gif)no-repeat0px-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;(支持浏览器:chromegoogle,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(google),firefox(火狐)safari(苹果浏览器),opera(欧朋)(2):filter:alpha(opacity=1~100)阐明:IE支持三.Hack技术(针对不同浏览器兼容问题解决办法)(1)条件注释表达法<!--[IFIE]>...<![ENDIF]--><!--[IFIE6]>只有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.全局样式