css学习笔记.docx

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

对应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样式，而是在父级