css学习笔记.docx
- 文档编号:29250712
- 上传时间:2023-07-21
- 格式:DOCX
- 页数:32
- 大小:479.06KB
css学习笔记.docx
《css学习笔记.docx》由会员分享,可在线阅读,更多相关《css学习笔记.docx(32页珍藏版)》请在冰豆网上搜索。
css学习笔记
CSS样式表,所以称之为层叠样式表
1.CSSwidth
Width:
100%(以百分比计算宽度)
width:
200px;(宽度为200像素(px))
Width:
20em(宽度为20相对长度单位)
设置标签对象宽度,并且注意“等号”后跟具体数字宽度值(或百分比),具体宽度值不用跟长度单位,默认以像素(px)为单位:
解决图片撑破DIV层方法总结:
1)对图片img标签中只加入宽度即可解决。
这样可以等比例缩小图片,不会影响图片画面质量。
2)最大宽度(max-width)+overflow:
hidden。
我们这样设置可以让IE6版本以上浏览器支持最大宽度样式,也让IE6下隐藏图片超出宽度而撑开DIV得到解决,此方法比较方便和实用。
3)只使用overflow:
hidden属性
4)图片使用上传时候软件处理下,以适应DIV布局宽度
2.CSSmin-width最小宽度与CSS max-width最大宽度教程篇
最小宽度(min-width)与最大宽度(max-width)用于设置图片最小最大宽度限制比较多。
比如一个图片为主列表,对象里图片大小不定时候,为了不想让他太小不统一这个时候我们可以使用css最小宽度样式。
再如,一个盒子里有文章有图片混排的时候,有时图片宽度不能确定,这个时候如果htmlimg图片宽度超出了div盒子宽度,可能图片就会撑破div盒子造成图片混乱。
3.CSSheight
Height:
auto设置高度自动
(通常默认高度是auto自动,自适用内容而增高,通常如果想高度自适应不用设置)
Height:
20px设置高度为固定数值
通常默认情况下不用再设置高度值为auto,对象高度即是自适应高度
min-heightmax-height
我们设置2个盒子一个限制最小高度,一个设置限制最大高度,最小高度限制的对象如果内容不多不会超出限制最小高度,此时对象会显示最小高度限制值,如果内容比较多超过了最小高度限制能装下单,此时对象会自动增高
4.DIVCSSline-height行高上下居中属性
1.line-height可以被定义为:
body{line-height:
normal;}
2.line-height可以被定义为:
body{line-height:
inherit;}
3.line-height可以使用一个百分比的值body{line-height:
120%;}
4.line-height可以被定义为一个长度值(px,em等)body{line-height:
25px;}
5.line-height也可以被定义为纯数字,body{line-height:
1.2}
那5种line-height写法,可以在font属性中缩写。
line-height的值紧跟着font-size值使用斜杠分开,如:
实例:
body{font:
100%/normal arial;},body{font:
100%/120% arial;},body{font:
100%/1.2 arial;} ,body{font:
100%/25px arial;}
CSS属性是可继承的(inherited),从层叠的元素里传递下来
行高line-height的值可以为百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值。
其百分比取值是基于字体的高度尺寸。
Line-height行高属性,运用到对文字排版,实现上下排文字间隔距离,以及单排文字在一定高度情况上下垂直居中布局。
应用:
初始设font-size:
12px; line-height:
1.5;相当于12*1.5=18px;
line-height行高上下居中属性样式,使用于多排文字如文章内容实现文字上下排间隔居中属性,以及单排高度固定的上下垂直居中。
常常遇见内容与图片混排,我们希望图片和文字内容上下居中在一排,但是文字会居图片下部,通常解决方法是使用两个盒子分别设置行高与高度。
在一排的文字或内容布局中,如果要让内容上下垂直居中,我们只需要设置line-height与height高度相同高度长度与html单位即可实现垂直居中;如果是多列的或文章内容通常我们会设置每行文字一定平均上下间隔,这个时候我们只需要设置line-height行高即可。
5.CSS边框即CSSborder-border边框样式颜色、边框样式、边框宽度
border-left 设置左边框,一般单独设置左边框样式使用
border-right 设置右边框,一般单独设置右边框样式使用
border-top 设置上边框,一般单独设置上边框样式使用
border-bottom 设置下边框,一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。
四边相同边框border简写
#divcss5{border:
1pxsolid#00F}
1px黑色虚线上边框
border-top:
1pxdashed#000
三边有边而一边没有设置技巧:
CSS代码:
border:
1pxsolid#000;border-top:
none;
注意border:
1pxsolid#000;和border-top:
none;前后顺序不能调换。
因为CSS读取有从上到下、从左到右读取原理,而先设置了整个边框样式,后再加上声明顶部上边边框为“none”没有意思,即实现该实例要的样式。
从而无需分别设置下、左、右,从而节约一定代码。
6.背景-CSSbackground
背景语法:
background:
background-color||background-image||background-repeat||background-attachment|| background-position
background-color设置颜色作为对象背景颜色
background-image设置图片作为背景图片
background-repeat设置背景平铺重复方向
background-attachment设置或检索背景图像是随对象内容滚动还是固定的。
background-position设置或检索对象的背景图像位置。
Background背景样式的值是复合属性值组合,也就是背景单词的值可以跟多个属性值,值与值之间使用一个空格间隔链接上即可。
如:
background:
#000url(图片地址)no-repeatlefttop
如果是给table设置背景颜色可以使用bgcolor="颜色值"即可设置对象背景颜色。
如果是CSS背景颜色,可使用background-color:
颜色值;或background:
颜色值设置对象背景颜色。
横向居中:
background:
url(图片地址)no-repeatcentertop
纵向居中:
background:
url(图片地址)no-repeatleft50%
这里50%是随意设置考上为50%距离,细节具体上下垂直居中需要再通过百分比均衡设置。
解决PNG图片在IE6中背景不透明的CSS与JS代码:
functioncorrectPNG()//correctlyhandlePNGtransparencyinWinIE5.5&6.
{
vararVersion=navigator.appVersion.split("MSIE")
varversion=parseFloat(arVersion[1])
if((version>=5.5)&&(document.body.filters))
{
for(varj=0;j { varimg=document.images[j] varimgName=img.src.toUpperCase() if(imgName.substring(imgName.length-3,imgName.length)=="PNG") { varimgID=(img.id)? "id='"+img.id+"'": "" varimgClass=(img.className)? "class='"+img.className+"'": "" varimgTitle=(img.title)? "title='"+img.title+"'": "title='"+img.alt+"'" varimgStyle="display: inline-block;"+img.style.cssText if(img.align=="left")imgStyle="float: left;"+imgStyle if(img.align=="right")imgStyle="float: right;"+imgStyle if(img.parentElement.href)imgStyle="cursor: hand;"+imgStyle varstrNewHTML=" +"style=\""+"width: "+img.width+"px;height: "+img.height+"px;"+imgStyle+";" +"filter: progid: DXImageTransform.Microsoft.AlphaImageLoader" +"(src=\'"+img.src+"\',sizingMethod='scale');\"> img.outerHTML=strNewHTML j=j-1 } } } } window.attachEvent("onload",correctPNG); css: #id{background: url(图片路径);_filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src="图片路径");_background: none;} DIVCSS无法显示背景颜色问题分析解决: 1、由使用float浮动造成浮动产生无法显示css背景颜色 2、高度不够而产生背景无法显示 1)clearboth清除产生浮动 clear语法: clear: none|left|right|both clear参数值说明: none: 允许两边都可以有浮动对象 both: 不允许有浮动对象 left: 不允许左边有浮动对象 right: 不允许右边有浮动对象 使用clear可以清除float产生的浮动,注意clear样式对象加入位置,如上案例对“.divcss5”清除浮动,我们就只需要在此对象div标签结束前加入即可清除内部小盒子产生浮动。 CSS隐藏图片背景上方的文字内容 此类问题我们常见于LOGO处使用,我们想让图片作为背景,而图片上方放A链接文字内容,但html锚文本功能仍然正常也能鼠标点击使用。 图片做背景,隐藏图片上文字,又不影响A超链接锚文本: text-indent: -9999px CSS可控制超链接样式-css链接样式如下 a: link是超级链接的初始状态 a: hover是把鼠标放上去时悬停的状况 a: active 是鼠标点击时 a: visited是访问过后的情况 1、通常对全站超链接样式化方法 a{color: #333;text-decoration: none;}//对全站有链接的文字颜色样式为color: #333;并立即无下划线text-decoration: none; a: hover{color: #CC3300;text-decoration: underline;}//对鼠标放到超链接上文字颜色样式变为color: #CC3300;并文字链接加下划线text-decoration: underline; 2、通过链接内设置类控制超链接样式css方法 案例超链接代码 对应CSS代码 a.yangshi{color: #333;text-decoration: none;} a.yangshi: hover{color: #CC3300;text-decoration: underline;} 通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式 3、通过对应超链接外的父级的css类的css样式来控制超链接的样式 案例超链接代码 对应CSS代码 .yangshia{color: #333;text-decoration: none;} .yangshia: hover{color: #CC3300;text-decoration: underline;} cursor鼠标指针鼠标光标样式: cursor : auto|crosshair|default|hand|move|help|wait|text|w-resize|s-resize|n-resize|e-resize|ne-resize|sw-resize|se-resize|nw-resize|pointer|url(url) 7.float浮动 float语法: float: none|left|right 参数值: none: 对象不浮动 left: 对象浮在左边 right: 对象浮在右边 区别与文字内容靠左( text-align: left)靠右( text-align: right)样式,浮动只针对html标签设置靠左靠右浮动样式。 float浮动样式没有靠中(浮动居中)的样式 8.cssmargin Margin呈现是位于对象边框外侧,紧贴于边框,marign与padding位置却相反csspadding却是紧贴边框位于边框内侧 margin的值有三种情况,可以为正整数和负整数并加单位如PX像素(margin-left: 20px);可以为auto自动属性(margin-left: auto自动);可以为百分比(%)值(margin-left: 3%)。 marign: 0auto; 即可实现对象居中,但需要一个条件,那就是该对象上级一定要设置text-align: center内容居中属性样式。 有的浏览器body标签不设置text-align: center内容居中样式,其下级包含对象设置了margin: 0auto也会让其布局居中,但为了兼容各大浏览器建议对body设置一个text-align: center属性样式,这里divcss5提供一个css初始化模板为DIVCSS布局时候无需重复设置csstext-align: center等初始化样式属性。 Margin样式是设置对象与对象之间间距,单独设置一边的间距我们可以使用margin-left、margin-right、margin-top、margin-bottom样式属性,margin是设置盒子对象之间间距,一般设置时候注意margin简写优化。 多实践并观察案例理解了margin作用即可很快上手使用margin。 margin缺点: 在使用CSSmargin的时候容易造成CSSHACK。 IE6解释此属性的时候容易造成双倍距离。 csshack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的兼容bug误差(比如我们常说错位)的处理。 由于各浏览器的内核不同,所以会造成一些误差就像JS一样,一个JS网页特效,在微软IE6、IE7、IE8浏览器有效果,但可能在火狐(MozillaFirefox)谷歌浏览器无效,这样就叫做JShack 8.CSSpadding内补白(内边距)leftrighttopbottom语法应用 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。 如果只提供一个,将用于全部的四条边。 如果提供两个,第一个用于上-下,第二个用于左-右。 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。 Padding的值不能为负值 三边相同,一边值不同 padding: 10px;padding-bottom: 20px HTML网页优化压缩经验篇 将table改为div布局 缩减精简div、span、ulli等系列标签 删除多余空格 表格类型布局时候适当使用table替代div布局 html网页GZIP压缩 9.font-size 这个方法也是直接使用font标签加size设置对象字体大小。 这里5代表设置对象字体大小为5号字。 10.加粗(cssfont-weight) font-weight 对象值: 从100到900,最常用font-weight的值为bold normal: 正常的字体。 相当于number为400。 声明此值将取消之前任何设置 bold: 粗体。 相当于number为700。 也相当于b对象的作用 bolder: IE5+ 特粗体 lighter: IE5+ 细体 number: IE5+ 100|200|300|400|500|600|700|800|900 Html常规加粗标签 或两者效果相同 11.DIVCSSdisplay(blocknoneinline)属性的用法 常用display div{display: block}有换行作用。 div{display: None}隐藏对象及对象内容。 div{display: Inline}在一排显示。 代表案例,对li列表默认一排显示li{display: Inline} Display: inline,我们常常在li中使用它。 功能是让li排成一排(称: 删除行) 12.cssoverflow(visibleautohiddenscroll) overflow : visible|auto|hidden|scroll 当然overflow可以单独设置X(overflow-x )和Y(overflow-y)方向的滚动条样式其值与应用与overflow语法用法结构相同 Overflow: visible此样式可以让滚动条隐藏,但可以鼠标上拉下拉滑动。 Overflow: hidden隐藏对象超出设置宽度高度的内容 Overflow: scroll此样式,会让内容无论是否超出高度宽度也会显示滚动条。 解决子级用cssfloat浮动而父级div没高度不能自适应高度: 解决子级对象使用cssfloat浮动而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法 解决办法: 方法一: 对父级设置固定高度 此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度。 此方法针对能确定父div内的内容高度情况下使用 方法二: 使用cssclear清除浮动 此方法需要注意是clear: both加的位置,不是对父级直接加clear样式,而是在父级
方法三:
对父级样式加overflow样式
此方法非常简单,也可以作为推荐解决父级不能被撑开自适应高度的方法,可以不增加div盒子对象,只需要对父级加一个overflow:
hidden样式即可
此方法为非常简单解决子用float,父div不能自适应高度,不能随父内容多少而自适应高度没有高度。
13.position绝对定位absoluterelative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:
absolute和position:
relative实现
position语法:
position:
staticabsoluterelative
static:
无特殊定位,对象遵循HTML定位规则
absolute :
将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。
而其层叠通过cssz-index属性定义。
此时对象不具有边距,但仍有补白和边框
relative :
对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
绝对定位与float浮动不能同时使用,比如一个大盒子里有的是绝对定位,有的是使用cssfloat浮动定位
绝对定位使用条件:
绝对定位使用通常是父级定义position:
relative定位,子级定义position:
absolute绝对定位属性,并且子级使用left或right和top或bottom进行绝对定位。
通常我们使用position:
absolute;position:
relative进行绝对定位布局,通过CSS进行定义定位,DIV布局HTML,注意什么地方使用position:
relative,什么地方使用position:
absolute进行定位,同时不要忘记使用left、right、top、bottom的配合定位具体位置。
绝对定位如果父级不使用position:
relative,而直接使用position:
absolute绝对定位,这个时候将会以body标签为父级,使用position:
absolute定义对象无论位于DIV多少层结构,都将会被拖出以
为父级(参考级)进行绝对定位。绝对定位非常好用,但切记不要滥用,什么地方都用,这样有时会懒得计算距离上、下、左、右间距,同时可能会造成CSS代码臃肿,更加经验适当使用,用于该使用地方
DIV重叠CSS让DIV层叠两个DIV或多个DIV顺序重叠加:
即CSS绝对定位进行实现
未排序、为排顺序DIV层叠重叠:
在原始情况下重叠是按DIV代码本身顺序排列,越后输入的DIV盒子其越靠前(浮在上面)。
通过CSS控制DIV重叠顺序:
加入z-index样式即可实现任意顺序排列。
z-index的值为正整数值,数字越大对应对象层越浮上层
div覆盖divDIV相互重叠如何解决:
问题:
上下结构DIV盒子覆盖
1)cssclear清除浮动2)cssoverflow清除浮动
问题:
相邻两个DIV重叠覆盖一般是由于相邻两个DIV一个使用浮动一个没有使用浮动,这样照成两个DIV覆盖重叠现象。
解决方法
要么都不使
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css 学习 笔记