CSS个人归纳范文

CSS个人归纳范文 一CSS基本语法1.1选择器1.1.1标签选择器，如p标签，h1标签pcolor:#000； 标签选择器 标签选择器 .classcolor:#000； 类选择器 类选择器 类选择器 #idcolor:#000； ID选择器 ID选择器 ID选择器 *color:#000； 全局选择器 全局选择器 一般组合方式是标签选择器和类选择器、标签选择器和ID选择器。 p.onecolor:#000；p#onecolor:#000； 组合选择器 组合选择器 组合选择器 两与元素的文字的空格必不可少。 p bcolor:#000； 继承选择器 继承选择器 p.one b.twocolor:#000；组合选择器之间没有空格，继承选择器之间必须要有空格。 组合选择器用于构成继承选择器1.1.7伪类伪类也是作为选择器一种。 但是用伪类定义的CSS样式并不是作用带标签上的。 主流游览器都支持的。 就是超链接的伪类，包括:link:active:hover:visited 伪类 伪类2.1声明2.1.1多重声明:指对同一个选择器设置属性时，可以把所有属性写在同一选择器中，而不需要分开写。 多重声明 h1font-size:24px；color:#FF0；text-decoration:underline；h2font-size:24px；color:#FF0；text-decoration:underline；pfont-size:24px；color:#FF0；text-decoration:underline；或者，每个选择器之间使用逗号隔开h1,h2,p,.noe,#twofont-size:24px；color:#FF0；text-decoration:underline；3.1优先级3.1.1最近原则3.1.2顺序原来，后写先采用3.1.3!important最高级原则二CSS的单位1.1颜色单位CSS标准里，CSS的颜色被归类为单位。 CSS设置颜色可以使用颜色名称、RGB数值、RGB百分比和颜色十六进制。 RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及他们相互之间的叠加来得到各式的颜色。 1.1.1颜色名称使用颜色的名称来表示颜色是最直接的命名方法。 有16种颜色是规范的。 1.1.2百分比颜色rgb(100%,100%,100%)；第一个百分比代表红色，第二个百分比代表绿色，第三个百分比代表蓝色。 把三个值都设置为100%则得到白色，三个都设置为0%则得到黑色，三个值不相同就得到其他颜色2.1长度单位2.1.1绝对单位有英寸、厘米、毫米、磅。 网页设计中极少使用绝对单位。 2.1.2相对单位有像素px和em（1em=12px）三用CSS控制文本样式3.1字体font-family:name；，name值代表字体的名称，它可以设置为一个字体的名称或者是一组字体的合集。 font-family:宋体,黑体,幼圆；3.2文字大小概述网页默认字体大小为16px font-size:textsize；textsize可以是长度单位、百分比和关键字3.2.1使用相对长度单位定义字体大小px和em3.2.2使用相对关键字定义文字大小CSS提供了larger和smaller，子元素根据缩放因子来计算文字大小的。 缩放因子为12磅，例如使用larger关键字就是子元素文字相对父元素文字的大小进行放大，原来为24像数，使用larger之后，24*1.2=28.8px3.2.3定义文字的绝对大小使用物理长度单位定义文字大小3.2.4使用关键字定义文字大小CSS提供了xx-small、x-small、small、medium、large、x-large、xx-large，medium关键字定义的文字大小是游览器默认字体大小，其他根据游览器默认大小乘以或除以缩放因子12磅4.1文字颜色CSS提供color属性用于改变网页上的文字颜色5.1文字粗细CSS提供font-weight属性用于改变网页上文字的粗细。 font-weight:textweight，textweight值代表文字的粗细值，可以使用数字或者关键字设置。 可以使用数字有 100、 200、 300、 400、 500、 600、 700、 800、900。 关键字可以使用bold、bolder、lighter、normal。 在没有使用b标签加粗的情况下，数字100500显示粗细是一致的。 600900所设置的字体会明显加粗。 使用lighter和normal设置的字体粗细是不变的，bold和bolder设置的字体会明显加粗，而使用b标签后，使用lighter和normal设置，则标签b内的文字变为正常字体不加粗。 常使用normal和bold进行加粗变细6.1斜体CSS提供font-style属性用于设置斜体，font-style:textstyle；textstyle可以使用normal、italic、oblique三个关键字进行设置，normal为不斜体显示，italic和oblique同为斜体显示，显示效果一样black黑色white白色red红色aqua水绿yellow黄色blue蓝色lime浅绿fuchsia紫红gray灰色green绿色teal深青navy深蓝purple紫色6.2下划线、顶划线、删除线CSS提供text-decoration属性设置。 text-decoration:textline；textline值有none、underline、overline、line-through、blink(代表闪烁)关键字进行设置6.3英文字母大小写CSS提供text-transform:texttpye；texttpye可以使用none、capitalize、uppercase、lowercase。 none维持原状、capitalize将每个单词的第一个字母转换为大写、uppercase使所有字母转换大写、lowercase使所有字母转换成小写6.4属性的缩写法是将多个属性的值并列写在一个属性下。 只要是符合属性都能应用属性速写法定义CSS样式。 例如，font属性是一个复合属性。 多个文字属性的值可以并列缩写在font属性下font:1em italicbold；不需要写属性名，只要要写属性的值即可，每个值用空格隔开6.5用段落属性改变文字的段落样式6.5.1段落的水平对齐方式CSS提供了text-align:direction；direction可以使用left、right、center、justify(两端对齐)6.5.2段落的垂直对齐方式CSS提供了writing-mode属性和layout-flow属性用于控制文本的排列方式使用writing-mode:lr-tb/tbrl；其中，lr-tb代表文字按照左右-上下的方向排列，tb-rl代表文字按照上下-右左的方向排列。 默认的情况下文字是按照左右-上下排列。 使用layout-flow:horizontal/vertical-ideographic；horizontal代表文本水平排列vertical-ideographic代表文本垂直排列.6.5.3首行缩进CSS提供text-indent:distant；distant代表段落首行缩进的数值，可以设置为像数值或百分比6.5.4行间距与字间距行间距CSS提供了line-height:height；height代表行与行之间的距离，可以使用各种长度单位进行设置，line-height的数值是两行文字基线的距离，基线即是文字的下划线。 字间距CSS提供了letter-spacing:space；space代表字与字之间的距离，可以使用各种长度单位进行设置。 使用letter-spacing属性设置英文，则每个字母会分隔。 要设置每个英文词之间的距离，可使用word-spacing属性四用CSS设置图片样式1.1在网页中插入图片使用img标签1.2控制图片的大小CSS的width和height属性适用于控制图片的宽度和高度1.2.1使用像素控制图片宽高imgwidth:300px；height:400px；使用百分比控制图片宽度使用百分比缩放图片，图片的宽高比例不变，但是使用百分比缩放图片，图片缩放不是根据原图片的尺寸进行缩放，而是根据父元素的尺寸进行缩放。 所以使用百分比缩放，最好把img标签放在一个固定的父元素中imgwidth:300px；height:400px；单独设置图片的宽度或高度单独设置图片的宽度后，图片就按照宽度缩放，而高度是按照宽度的缩放比例自动变化，整张图片在缩放后比例不变。 1.3给图片添加边框的技巧CSS的border属性适用于许多元素，同一适用于图片。 设置时要设置两个值，第一个值代表背景图与其所在的页面元素的横向相对位置，第二个值为所在的页面元素的纵向相对位置。 background-position:30px40px；，若只是设置了横向位置的数值，纵向默认为居中对齐1.3.2使用百分比设置背景图的位置使用百分比设置背景图的位置通常只设置0%、50%、100%分别代表左上角对齐，背景图和页面元素中心对齐，与页面元素右下角对齐1.3.3使用关键字设置背景图的位置设置background-position的关键字有六个，横向有left、right、center，纵向有top、centern、bottom，background-position:right bottom；，若只是设置了一个关键字，那么那个关键字就代表横向的对齐方式，纵向默认为居中对齐。 1.4滚动和固定背景图CSS提供了background-attachment:scroll/fixed；scroll代表滚动，fixed代表不滚动。 说明在IE6游览器中，只有设置body标签的background-attachment属性为fixed才能生效。 其他标签不生效。 1.5背景属性缩写CSS提供了background:n；bodybackground:url(images/framels1.jpg)no-repeat scroll；六用CSS控制超链接样式1.1改变超链接的基本样式CSS提供了四个伪类设置超链接分别link、active、visited、hover。 顺序要按前面排列a:linkcolor:#000；a:activecolor:#33F；a:visitedcolor:#900；a:hovercolor:#CC3；默认情况下超链接使用后有下划线，要用text-decoration:none；去掉1.2丰富超链接的表现形式综合应用文字和图片能使超链接的样式产生多种变化。 1.2.1制作虚线下划线制作一个像素3*1的图片，只在第一个像素的地方填充灰色，然后作为a标签的背景图，然后设置为底部，X方向重复，如下background-image:url(images/%E6%9C%AA%E6%A0%87%E9%A2%98-1.gif)；background-repeat:repeat-x；background-position:bottom；1.2.2制作排行榜a标签是内联元素是水平排列的，要设置属性display:block；超链接成了块级元素是垂直排列1.2.3使用背景颜色实现的翻转效果除了给a标签设置背景，还可以给伪类设置背景图。 当给hover设置不同颜色的为背景图就实现了颜色翻转1.2.4使用背景图片实现翻转效果七用CSS控制列表样式1.1列表类型列表类型有三种，无序列表、有序列表、定义列表，常使用无序列表来实现导航和新闻列表的位置，使用有序列表实现条文款项的表示，使用定义列表来制作图文混排的排版模式。 1.2改变列表符的样式1.2.1使用自带的列表符CSS提供了list-style-type，list-style-image和list-style-position属性来改变列表符的样式，由于定义列表在默认情况下没有列表符，所以上述三个属性定义列表来说是无效的1.2.2使用自带的列表符有序还是有序都CSS提供了list-style-type:type；type为CSS自带的列表符，属性值有disc实心圆、circle空心圆、quare实心方块、decimal阿拉伯数字、lower-roman小写罗马数字、upper-roman大写罗马数字lower-alpha、小写英文字母upper-alpha、大写英文字母、armenian传统的亚美尼亚数字、cjk-ideographic浅白的表意数字、georgian传统的乔治数字、lower-greek基本的希腊小写字母、hebrew传统的希伯莱数字、hiragana日文平假名字符、hiragana-iroha日文平假名序号、katakana日文片假名字符、katakana-iroha日文片假名序号、lower-latin小写拉丁字母、upper-latin大写拉丁字母、none不使用项目符号。 注释任何的版本的Inter Explorer（包括IE8）都不支持属性值lower-greek、lower-latin、upper-latin、armenian、georgian、hebrew、katakana、hiragana、hiragana-iroha。 1.2.3用背景图改变列表符CSS提供了list-style-image:url(list_marker.gif)；，说明使用list-style-image插入的列表图片是不能使用CSS样式更改其大小的，若想更改图片大小，就需要在插入图片前更改。 当list-style-image:url(list_marker.gif)；生效，list-style-type:type；就不生效1.2.4改变列表符的位置CSS提供list-style-position属性用于改变列表符和列表的相对位置。 该属性包括两个属性值inside和outside。 inside类别项目标记放置在文本以内，环绕本文根据标记对齐。 outside列表项目标记放置在文本以外，环绕文本不根据标记对齐。 默认情况下list-style-position的属性值为outside1.2.5复合属性list-style八用CSS美化表格1.1表格的基本页面元素table、tr、th、td、caption、thead、tbady、tfoot。 在table标签中使用summary属性嵌入关于该表格的说明，summary中的语句不会出现在页面的任何地方，但是跟caption同样对于搜索引擎来说是友好的。 th标签用于表示行和列的名称。 1.2使用CSS控制表格元素1.2.1设置表格元素宽度CSS提供width属性，通常使用百分比和像素来作为单位。 使用百分比是会根据父元素的宽度来设置，对于表格其他元素都可以使用百分比和像素来设置宽度。 1.2.2设置表格元素边框CSS提供border。 若希望得到如excel中的单线表格，就要使用CSS的border-collapse:separate/collapse；，设置collapse属性就能去除表格单元格边框就会重叠在一起。 九用CSS控制表单样式1.1了解表单元素一个表单由三个基本元素组成第一个是表单标签 1.1.1form标签和fieldset标签在标准XHTML中，应该使用语义明晰的 设置fieldset的补白，使其装载的表单元素不紧贴fieldset标签的周围，fieldset自带一个黑色边框，使用border属性改变边框的样式美化legend标签是用于嵌入表单的标题，对legend标签设置边框的文字属性1.3.2美化表单域使用CSS美化表单域中的元素通常是改变其边框和背景样式。 1.3.2.1使用CSS美化文本框设置文本框的边框和背景颜色、用户输入到文本框中文字的颜色和大小以及控制文本框的大小。 input.onecolor:#00F；border:dotted#903；background-color:#999；1.3.2.2使用CSS美化按钮与美化文本框类似，还可以使用图片作为按钮的背景图能把按钮变为任何形式。 input.oneborder:dotted#903；background-image:url(images/hengbiao.jpg)；1.3.2.3使用CSS美化下拉列表利用设置其下拉菜单的背景颜色达到美化效果十用CSS滤镜的应用CSS滤镜是微软公司整合在IE游览器中的功能，所以在其他游览器没有这个效果，滤镜的属性为filter:name(para)；其中name指是滤镜的名称，如mask。 小括号中的para指的是所使用滤镜的参数。 1.1各种参数使用1.Alpha设置透明度Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)Opacity透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。 FinishOpacity设置渐变的透明效果时，用来指定结束时的透明度，范围也是0到100。 Style设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。 StartX和StartY代表渐变透明效果的开始X和Y坐标。 FinishX和FinishY代表渐变透明效果结束X和Y的坐标。 2.BlendTrans图像之间的淡入和淡出的效果BlendTrans(Duration=?)Duration淡入或淡出的时间。 注意这个滤镜必须配合JS建立图片序列，才能做出图片间效果。 3.Blru建立模糊效果Blur(Add=?,Direction=?,Strength=?)Add是否单方向模糊，此参数是一个布尔值，true（非0）或false （0）。 Direction设置模糊的方向，其中0度代表垂直向上，然后每45度为一个单位。 Strength代表模糊的象素值。 4.Chroma把指定的颜色设置为透明Chroma(Color=?)Color是指要设置为透明的颜色。 5.DropShadow建立阴影效果DropShadow(Color=?,OffX=?,OffY=?,Positive=?)Color指定阴影的颜色。 OffX指定阴影相对于元素在水平方向偏移量，整数。 OffY指定阴影相对于元素在垂直方向偏移量，整数。 Positive是一个布尔值，值为true（非0）时，表示为建立外阴影；为false (0)，表示为建立内阴影。 6.FlipH将元素水平反转7.FlipV将元素垂直反转8.Glow建立外发光效效果Glow(Color=?,Strength=?)Color是指定发光的颜色。 Strength光的强度，可以是1到255之间的任何整数，数字越大，发光的范围就越大。 9.Gray去掉图像的色彩，显示为黑白图象10.Invert反转图象的颜色，产生类似底片的效果11.Light放置光源的效果，可以用来模拟光源在物体上的投影效果注意此效果需要用JS设置光的位置和强度。 12.Mask建立透明遮罩Mask(Color=?)Color设置底色，让对象遮住底色的部分透明。 14.Shadow建立另一种阴影效果Shadow(Color=?,Direction=?)Color是指阴影的颜色。 Direction是设置投影的方向，0度代表垂直向上，然后每45度为一个单位。 15.Wave波纹效果Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)Add表示是否显示原对象，0表示不显示，非0表示要显示原对象。 Freq设置波动的个数。 LightStrength设置波浪效果的光照强度，从0到100。 0表示最弱，100表示最强。 Phase波浪的起始相角。 从0到100的百分数值。 （例如25相当于90度，而50相当于180度。 ）Strength设置波浪摇摆的幅度。 16.Xray显现图片的轮廓，X光片效果注意在使用CSS滤镜时，必须使用在有区域的元素，比如表格，图片等。 而文本，段落这样没有区域的元素不能使用CSS滤镜，对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。 十一CSS代码的编写规范1.1使用语义明确的标记1.2使用有意义的CSS命名1.3CSS代码的缩写1.4合理的CSS注释十二DIV+CSS布局基础1.1初识DIV+CSS布局的流程1.分析效果图，分出整个网页的整体结构。 2.根据结构，设定好XHTML文档中用于排div标签。 3.使用CSS样式排布div标签。 4.重复上述三个步骤细分div标签内的内容1.2了解盒模型页面上的每个元素都能看做一个容器，这个容器就是一个盒子。 例如p标签是一个能装文字的容器，它的高度就是所承载文字的高度。 在XHTML页面中几乎所有的标签都能被当作容器使用。 1.3盒模型在div标签的内容就会被这个固定宽度限制，然后添加补白、边框、边距都会增加div容器在页面中占据的空间。 其中增加补白能通过背景颜色显示出所增加的像素；增加边框是通过边框线颜色显示边框；而增加边距所占的像素是透明的。 1.4边距边距用于设置页面元素与其他元素的距离。 CSS提供margin:length属性设置边距，可以用长度单位和百分比设定margin的值。 百分比会根据父元素宽高为基准。 1.4.1边距值的缩写1.设置四个值margin:10px20px30px40px；,第一个值代表上边距，第二个值代表右边距，第三个值代表下边距，第四个值代表左边距，顺时针法则。 2.设置三个值margin:10px20px30px；，第一个值代表上边距，第二个值代表右边距和左边距，第三个值代表下边距。 1.3设置两个值margin:10px20px；，第一个值代表上边距和下边距，第二个值代表左边距和右边距。 1.4设置一个值margin:10px；代表上下左右边距一样。 对于border和padding两个属性的值也有上述方法一样的缩写方法。 1.4.2单边距值CSS提供margin-top；margin-right；margin-bottom；margin-left，对于border和padding两个属性也有单独设置某一边的属性。 1.4.3边距重叠对垂直排列的块级元素应用了边距后，可能发生边距重叠的现象，例如有两个p标签，平标签属于块级元素，在默认情况下p标签会一个接一个垂直排列在页面上。 第一p标签应用于下边距10px，第二个p标签应用于上边距20px。 当两个边距产生同一个边距时，就会发生重叠的情况。 结果两个p标签的空白区域是20px而不是30px，因为重叠之后会淘汰边距较小的一个。 说明边距重叠只发生在边距属性中，补白和边距都不会出现重叠现象。 只有在普通文档流中的块级元素才会产生边距重叠，行内元素、浮动元素和绝对点位元素都不会产生重叠。 1.2补白用于增加页面元素边框与内容之间的空间，CSS提供padding属性值与设置方法与margin类同。 1.3边框是页面元素可视范围的最外圈。 CSS提供border、border-width、border-color、border-style属性改变边框的样式border-style的属性值none:无样式、hidden:除了同表格的边框发生冲突的时候,其它同none、dotted:点划线、dashed:虚线、solid:实线、double:双线,两条线加上中间的空白等于border-width的取值、groove:槽状、ridge:脊状,和groove相反、inset:凹陷、outset:凸出和inset相反1.4页面元素的布局1.4.1块级元素与行内元素所有的XHTML页面元素只有两种一种是块级元素，一种是行内元素。 常用的块级元素有blockquote（整段缩进）、dir（文字方向）、fieldset、form、h1-h 6、hr、dl、ul、ol、p、pre（保留空格）。 常用的行内元素有a、b、span、cite、em、i、img、input、label、select、br、strong、textarea。 两者区别如下块级元素一般用作其他页面元素的容器，块级元素一般都从新开始，它可以容纳行内元素和块级元素。 form标签这一块级元素比较特殊，它只能用来容纳其他块级元素。 行内元素只能容纳文本或者其他行内元素。 使用CSS的display属性能使块级元素和内行元素相互互换，display属性中的block和inline值，分别代表块级和内行元素。 区分块级元素和行内元素最主要的作用是在编写CSS代码时知道哪些属性是对行内元素不生效。 例如设置行内元素的高宽度和上下边距（左右边距可以控制）。 1.5CSS布局方式-常规流是指页面元素按照所在XHTML文档的位置顺序排列的布局方式。 1.6CSS布局方式-浮动使用浮动布局是目前网页制作中最为常用的方式。 应用了浮动的元素全部都会成为块级元素，并且脱离原来的常规流模式。 CSS提供float属性用于设置元素的浮动，它包含三个值，分别为left、right和none。 1.6.1两个元素的浮动 可以设置width属性改变其宽度行内元素水平排列高宽度以及上下边距都不可以控制左右边距可以控制宽度就是其包含的文字或者图片的宽度。 设置width属性无效1.6.2多个元素的浮动应用多个元素的浮动常用于相册、列表排版等。 跟两个元素同理1.6.3清除浮动使用浮动后常产生很多意外的结果，因为浮动的元素会脱离原来的常规流。 浮动元素会覆盖一些非浮动的元素，这时需要使用CSS的clear属性来清除浮动。 clear属性有四个值，分别为none、left、right和both。 none允许两边都可以有浮动对象。 both不允许有浮动对象。 left不允许左边有浮动对象。 right不允许右边有浮动对象。 1.6.4解决火狐游览器的计算高度问题需要在父元素内添加一个命名为“clear”的类选择器，然后再类选择器中设置clear属性为both。 1.7CSS布局方式-相对定位CSS提供了position属性用于定位，position属性有四个值分别为是static、absolute、relative和fixed（absolute本质一样，设置fixed的元素会跟随游览器的滚动条上下移动）1.7.1单个元素的相对定位使用相对定位，就是子元素相对自身偏移的位置。 要确定子元素相对自身偏移了多少，就要使用top、bottom、left和right属性来确定。 这个四个属性能使用长度单位或者关键字auto设置。 例如。 设定子元素的position属性为relative，然后设置top为10px。 那么子元素就会相对自身的顶部边界下移10px。 当top和bottom或者left和right同时设置时，子元素就会优先选择top和left。 两个元素的相对定位时，一个div标签覆盖第二个div标签的一部分。 第二个div标签还在原来的位置上，而第二个div标签设置了相对定位。 所以第一个div标签向下移动就会覆盖第二个div标签。 需要设置两个标签对进行相对定位。 1.8CSS布局方式-绝对定位使用绝对定位的子元素，其移动是相对已经定位的父元素。 若其父元素并未定位，那么使用绝对定位的子元素就会相对最初的包含块来定位。 通常这个最初的包含块是html标签。 十三CSS页面基本排版技术1.1固定宽度布局固定宽度布局是页面排版中最常用的一种布局方式。 通常设置页面的整体宽度为950像素。 固定宽度布局是最适合开发大型的门户网站的布局方式。 1.1一列的水平居中布局是网页中最常见的布局方式，常用于个人博客和简洁的企业网站。 一列水平居中布局就是网页中所以内容都位于一竖列中，改竖列水平居中于页面。 1.2自适应宽度布局自适应宽度布局使用的尺寸是百分比，使用百分比设置宽度容器后，页面会随着游览器窗口伸缩。 子适应宽度的布局同样需要