CSS个人归纳.docx

1、CSS个人归纳一CSS基本语法 1.1选择器1.1.1标签选择器，如p标签，h1标签 pcolor:#000；标签选择器标签选择器标签选择器1.1.2类选择器:类选择器有英文句号和类选择器名组成。.classcolor:#000；类选择器类选择器类选择器1.1.3 ID选择器：与类选择器类似，不同的是不能重复使用，会影响javascript 的调用。#idcolor:#000；ID选择器ID选择器ID选择器1.1.4 全局选择器：全局选择器是一个星号，能作用于文档所有元素。*color:#000；全局选择器全局选择器全局选择器1.1.5组合选择器，算不上真正的选择器，但是经常用到。一般组合方式

2、是标签选择器和类选择器、标签选择器和ID选择器。 p.onecolor:#000； p#onecolor:#000；组合选择器组合选择器组合选择器1.1.6继承选择器：父子元素可以应用继承选择器，爷孙关系，跨多级的元素都可以运用继承选择器。两与元素的文字的空格必不可少。p bcolor:#000；继承选择器继承选择器 除了使用标签作为继承选择器外，还有可以使用组合选择器嵌套在继承选择器中。p.one b.twocolor:#000； 组合选择器之间没有空格，继承选择器之间必须要有空格。组合选择器用于构成继承选择器1.1.7伪类：伪类也是作为选择器一种。但是用伪类定义的CSS样式并不是作用带标签

3、上的。主流游览器都支持的。就是超链接的伪类，包括 :link :active :hover :visited伪类伪类2.1声明2.1.1多重声明:指对同一个选择器设置属性时，可以把所有属性写在同一选择器中，而不需要分开写。多重声明多重声明2.1.2 集体声明：指若样式表中有多个选择器使用相同的属性设置，这些选择器可以并列写在一起。h1font-size:24px； color:#FF0； text-decoration:underline；h2font-size:24px； color:#FF0； text-decoration:underline；pfont-size:24px； color

4、:#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)三个颜色通道的变化以及他们相互之

5、间的叠加来得到各式的颜色。 1.1.1颜色名称：使用颜色的名称来表示颜色是最直接的命名方法。有16种颜色是规范的。black黑色white白色red红色aqua水绿yellow黄色blue蓝色lime浅绿fuchsia紫红gray灰色green绿色teal深青navy深蓝purple紫色 1.1.2百分比颜色 rgb(100%,100%,100%)； 第一个百分比代表红色，第二个百分比代表绿色，第三个百分比代表蓝色。把三个值都设置为100%则得到白色，三个都设置为0%则得到黑色，三个值不相同就得到其他颜色 2.1长度单位 2.1.1绝对单位：有英寸、厘米、毫米、磅。网页设计中极少使用绝对单位。

6、 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关键字就

7、是子元素文字相对父元素文字的大小进行放大，原来为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:textwei

8、ght，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-sty

9、le属性用于设置斜体，font-style:textstyle； textstyle可以使用normal、italic、oblique三个关键字进行设置，normal为不斜体显示，italic和oblique同为斜体显示，显示效果一样 6.2下划线、顶划线、删除线：CSS提供text-decoration属性设置。text-decoration:textline； textline值有none、underline、overline、line-through、blink(代表闪烁)关键字进行设置 6.3英文字母大小写：CSS提供text-transform:texttpye； texttpye可

10、以使用none、capitalize、uppercase、lowercase。 none维持原状、capitalize将每个单词的第一个字母转换为大写、uppercase使所有字母转换大写、lowercase使所有字母转换成小写 6.4属性的缩写法：是将多个属性的值并列写在一个属性下。只要是符合属性都能应用属性速写法定义CSS样式。例如，font属性是一个复合属性。多个文字属性的值可以并列缩写在font属性下 font:1em italic bold； 不需要写属性名，只要要写属性的值即可，每个值用空格隔开 6.5用段落属性改变文字的段落样式 6.5.1段落的水平对齐方式：CSS提供了text

11、-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-ideogra

12、phic代表文本垂直排列. 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属性设置英文，则每个字母会分隔。要设置每个英文词之间的距

13、离，可使用word-spacing属性四 用CSS设置图片样式 1.1在网页中插入图片：使用img标签 1.2控制图片的大小CSS的width和height属性适用于控制图片的宽度和高度 1.2.1使用像素控制图片宽高imgwidth:300px； height:400px； 使用百分比控制图片宽度：使用百分比缩放图片，图片的宽高比例不变，但是使用百分比缩放图片，图片缩放不是根据原图片的尺寸进行缩放，而是根据父元素的尺寸进行缩放。所以使用百分比缩放，最好把img标签放在一个固定的父元素中 imgwidth:300px； height:400px； 单独设置图片的宽度或高度：单独设置图片的宽度后

14、，图片就按照宽度缩放，而高度是按照宽度的缩放比例自动变化，整张图片在缩放后比例不变。 1.3给图片添加边框的技巧：CSS的border属性适用于许多元素，同一适用于图片。以下是使用border属性的通用语法 border-width:width； border-style:style； border-color:color； img border-width:3px； border-style:double； border-color:#009； border-style:none； 1.4图片不显示的解决办法：在图片不能正常显示的情况下，应增加图片的替换文字，使用img标签的alt属性 1.

15、5给图片增加链接：使用标签 通常用了超链接会给图片添加了一个边框，要去掉边框在中插入代码imgborder:none； 1.6文字环绕：使用float属性设置五 用CSS设置背景 1.1设置背景颜色：CSS提供background-color属性，background-color:color； 大部分的标签都能设置其background-color如p标签和a标签都可以 1.2设置背景图片 1.2.1为元素添加背景图案：CSS提供background-image属性 background-image:url(pic.jpg)； p标签都可以使用这个属性 1.2.2背景图的重复：CSS提供bac

16、kground-repeat属性，background-repeat:repratmode； repratmode有以下四种属性可以选择repeat：背景图在纵向和横向上平铺，no-repeat：背景图不重复，repeat-x：背景图在横向上平铺，repeat-y：背景图在纵向上平铺 1.3背景图的位置 1.3.1 使用长度单位设置背景图的位置：CSS提供了background-position:position； 其中position的值可以使用长度单位、百分比值和关键字，通常以像素作为单位。设置时要设置两个值，第一个值代表背景图与其所在的页面元素的横向相对位置，第二个值为所在的页面元素的纵

17、向相对位置。background-position:30px 40px； ，若只是设置了横向位置的数值，纵向默认为居中对齐 1.3.2使用百分比设置背景图的位置：使用百分比设置背景图的位置通常只设置0%、50%、100%分别代表左上角对齐，背景图和页面元素中心对齐，与页面元素右下角对齐 1.3.3使用关键字设置背景图的位置：设置background-position的关键字有六个，横向有left、right、center，纵向有top、centern、bottom，background-position: right bottom； ，若只是设置了一个关键字，那么那个关键字就代表横向的对齐方式

18、，纵向默认为居中对齐。 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、vis

19、ited 、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%9

20、8-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列表类型：列表类型有三种，无序列表、有序列表、定义列表，常使用无序列表来实现导航和新闻列表的位置，使用有序列表实现条文款项的表示，使用定义列表来制

21、作图文混排的排版模式。 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 大写罗马数字lowe

22、r-alpha 、小写英文字母upper-alpha 、大写英文字母、armenian 传统的亚美尼亚数字、cjk-ideographic 浅白的表意数字、georgian 传统的乔治数字、lower-greek 基本的希腊小写字母、hebrew 传统的希伯莱数字、hiragana 日文平假名字符、hiragana-iroha日文平假名序号、katakana 日文片假名字符、katakana-iroha 日文片假名序号、lower-latin 小写拉丁字母、upper-latin 大写拉丁字母、none不使用项目符号。注释：任何的版本的 Internet Explorer （包括 IE8）都不

23、支持属性值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.

24、4改变列表符的位置：CSS提供list-style-position属性用于改变列表符和列表的相对位置。该属性包括两个属性值inside和outside。inside：类别项目标记放置在文本以内，环绕本文根据标记对齐。outside列表项目标记放置在文本以外，环绕文本不根据标记对齐。默认情况下list-style-position的属性值为outside 1.2.5复合属性list-style八 用CSS美化表格 1.1表格的基本页面元素：table、tr、th、td、caption、thead、tbady、tfoot。在table标签中使用summary属性嵌入关于该表格的说明，summar

25、y中的语句不会出现在页面的任何地方，但是跟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了解表

26、单元素：一个表单由三个基本元素组成：第一个是表单标签，它包含表单数据所以CGI程序的URl以及数据提交到服务器的方法；第二个是表单域，它包含了文本框、密码框、隐藏域、多行文本框、复选框、单选按钮、下拉选择框和文件上传框等；第三个是表单按钮，它包含了提交按钮、复位按钮和一般按钮。 1.1.1form标签和fieldset标签：在标准XHTML中，应该使用语义明晰的 标签来安放整个表单，fieldset标签中可以包含legend标签，用于插入表单的标题为表单进行分类。 fieldset text 1.2表单域和表单按钮 文本框input type=text/ 密码框input type=password/ 多行文本框textarea cols=20 rows=2