自己总结的css.docx

1、自己总结的cssCSS的应用1、 长度单位类型单位含义示例相对长度px像素，根据显示设备的分辨率而确定的一个长度单位，显然，分辨率都为800*600的17寸显示器和52寸投影中，像素为100*80的绝对长度是不一样的，但同一显示设备中px值是绝对的。pfont-size:18px;将字号设置为18像素。em以目前字符高度为单位。p text-indent:2em段落前空两个字符。%表示长度为参考标签的百分比，前面可以加“+”或“-”两个符号，如果参考对象没有确定值，则为标准值。tablewidth:80%;表示表格占父容器宽度的80%。绝对长度in英寸，1 in = 2.54 cm，非国际单位

2、，平时使用极少。pfline-height:1in;行高为1英寸。cm厘米，国际标准单位，使用较少。mm毫米，国际标准单位，使用较少。pt点数，1 pt = 1 / 72 in，基本的显示单位，较少使用。pfont-size:11pt;将字号设置为11点。pc印刷单位，应用在印刷行业中，1pc=12pt。2、 颜色值表示方法含义示例颜色名使用系统预先定义好的颜色名称表示颜色，如red/green/blue分别表示红绿蓝。a:linkcolor:gray;活动超链接颜色为灰色十六进制使用十六进制表示颜色，格式为#RRGGBB，RR表示红色分量值，GG表示绿色分量值，BB表示蓝色分量值。font-

3、color:#ff0000字体颜色为红色background-color:#800080背景色为紫色RGB分量rgb(RR,GG,BB)，RR表示红色分量值，GG表示绿色分量值，BB表示蓝色分量值，可以用数值或百分比形式表示。color:rgb(255,0,0);红色color:rgb(80%,0,0);暗红3 、字体属性表示方法含义示例font-family所有字体hongenfont- style字体是否倾斜属性Normal italic obliquehongenhongenhongenfont- variant字体是否用大小写属性Normal small-caps bold bolde

4、r lithter等hongenfont- size定义字体的大小属性Normal Absolute-size relative-size length percentageLeaf4、CSS中的文本属性属性名称属性值说明color十六进制、英文名称、三原色单位颜色letter-spacingNormal 正常显示长度 文本间隔设置字符间距，word-spacingnormal 正常显示长度 文本间隔设置文本中单词white-spacenormal 文本自动处理换行pre 换行和空白受保护nowrap 强制在同一行显示text-alignleft（左）, right（右）, center（居中

5、）, justify（两端对齐）设置对象中首行文本的缩进值h1 h1 text-align: centertext-decoration underline（下划线）, overline（底线）, line-through（线穿过）, blink（闪烁）文本修饰属性h3 text-decoration: underlinetext-indent长度 首行缩进百分比 同上设置首行缩进，p text-indent: 1.0 inline-height像素 行高数字/百分比 行高元素的行高divfont-size:10pt；line-height:2;text-transform none正常显示可

6、以包含大，小字符capitalize字符串第一个字符大写uppercase 设置大写字符lowercase 设置小写字符用来设置文本格式转换，capitalize（首字母大写）, uppercase（大写）, lowercase（小写）和none（无） vertical-alignsub 设置文字为下标super 设置文字为上标top 元件往上端靠齐middle 设置文字是在中线位置bottom 元件往下端靠齐设某对象相对其他文本的位置平方值：325、CSS中背景的使用属性名称属性值说明color定义前景色颜色color：rgb（204，82，28）background-attachments

7、croll设置背景图像会随视窗滚动条的移动而移动fixed设置背景图像不会随视窗滚动条的移动而移动背景是否随内容滚动background-color十六进background-color:#ff0000英文名称background-color:red三原色background-color:rgb(255,0,0)Transparent background-color:transparent;透明背景颜色background-imageURL background-image:url(bg.jpg)背景图片none 不设置背景图片背景图像background-position top left

8、设置背景图案出现在上左方。top center设置背景图案出现在上方中间。top right设置背景图案出现在上右方。center left设置背景图案出现在中间左方。center center设置背景图案出现在IE中间。center right设置背景图案出现中间右方。bottom left 设置背景图案出现在下左方。bottom 设置背景图案出现在正下方。bottom right设置背景图案出现在下右方背景图片的位置background-repeatrepeat 将背景图案填满整个背景repeat-x将背景图案在水平方向添满repeat-y将背景图案在垂直方向添满no-repeat图案只出

9、现一次背景图片是否以如何平铺6、CSS中列表的使用属性名称属性值说明list-style-typenone 无符号disc 实体的小圆点。circle 空心的小圆点。square 实心的小方块。decimal 1,2,3.lower-roman i,ii,iii.upper-roman I,II,III.lower-alpha a,b,c,d,e.upper-alpha A,B,C,D,E.列表项所使用标记符号的样式list-style-positioninside 清单项目较往右移outside 清单项目正常显示列表项标记的放置位置list-style-imageURL list-style

10、-image:url(lmk.gif)none 不会显示任何图象列表项标记的图像7、CSS中边框的使用属性名称属性值说明border-color十六进制 可依序设置上，右，下，左线英文名称 border-color:red(四边均为红色)三原色 border-color:red green(上下为红色，左右为绿色) border-color:red green blue(上为红色、左右为绿色、下为蓝色) border-color:red green blue yellow(上右下左分别为红绿蓝黄)border-stylenone 不显示边线dotted 点线dashed 虚线solid 实线d

11、ouble 双线border-width长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm none border-width:1 2 3 48、CSS中边界的使用属性名称属性值说明padding-bottom长度/百分比元件下端边线的空隙padding-left长度/百分比元件左端边线的空隙padding-right长度/百分比元件右端边线的空隙padding-top长度/百分比元件上端边线的空隙简易写法：padding:10px padding:2px 4px padding:2px 6px 10px padding:1px 2px 3px 4pxmargin-

12、bottomauto 自动调整空隙长度/百分比 设置下端空隙简化方案：margin:2px 4pxmargin:2px 6px 10pxmargin:1px 2px 3px 4px常用网页顶格设置：margin:0;margin-left auto 自动调整空隙长度/百分比 设置左端空隙margin-rightauto 自动调整空隙长度/百分比 设置右端空隙margin-top auto 自动调整空隙长度/百分比 设置上端空隙9、CSS中区块的使用属性名称属性值说明 width像素/百分比 区块的宽度auto height 像素/百分比 区块的高度automin-height像素像素/百分比

13、区块最小高度automax-height像素像素/百分比 区块最大高度automin-width像素像素/百分比 区块最小宽度auto max-width像素像素/百分比 区块最大宽度auto10、CSS中浮动的使用属性名称属性值说明floatnone 正常显示left 左浮动right 右浮动clearnone 允许两边浮动left 不允许左边浮动right 不允许右边浮动both 不允许两边浮动11、CSS中定位的使用属性名称属性值说明positionrelative 设置区块基准点为左上角 absolute 设置网页的为基准点左上角static 无设置leftauto 以基准点定位在左边

14、像素/百分比 定位在左边topauto 以基准点定位在上边像素/百分比 定位在上边rightauto 以基准点定位在右边像素/百分比 定位在右边bottomauto 以基准点定位在下边像素/百分比 定位在下边z-indexauto 自动调整高度数字 数字越大越往上层12、CSS中溢出的使用属性名称属性值说明overflowvisible 不剪切内容也不添加滚动auto 在必需时对象内容才会被hidden 不显示超过对象尺寸的内容scroll 总是显示滚动条overflow-x(同上)overflow-y(同上)13、CSS中滚动条的使用属性名称属性值说明scrollbar-3dlight-co

15、lor颜色/十六进制 滚动条亮边框scrollbar-highlight-color颜色/十六进制 滚动条3D界面亮边scrollbar-face-color颜色/十六进制 滚动条3D表面scrollbar-arrow-color颜色/十六进制 滚动条方向箭头scrollbar-shadow-color颜色/十六进制 滚动条3D暗边scrollbar-darkshadow-color颜色/十六进制 动条暗边框scrollbar-base-color颜色/十六进制 滚动条基准颜色scrollbar-track-color颜色/十六进制 滚动条的拖动区域14、SS链接、光标、DHTML、缩放属性名

16、称属性值说明CSS中链接的使用a:link表示该超链接文字尚未被点选a:visited 表示该超链接文字已被点选过a:active表示该超链接文字正被点选,但未被放开a:hover表示当鼠标停留在文字上CSS中光标的使用cursorauto 光标是手指Crosshair 光标是十子形default 光标是箭头hand/pointer 光标是手形move 光标是移动的符号text 输入文字的符号wait 漏斗help 帮助 CSS中DHTML的使用behaviorurl DHTML文件CSS中缩放的使用zoomnormal 使用对象的实际尺寸百分数/浮点实数 放大缩小15、 CSS滤镜属性名称属

17、性值说明Alpha滤镜的使用opacity0-100 对象的亮度style1,2,3 滤镜的样式Blur滤镜的使用addtrue/false 是否印象派direction0-360 角度strength数字 模糊度Fliph、Flipv滤镜无属性DropShadow滤镜color颜色 阴影颜色offx数字 x坐标偏移offy数字 y坐标偏移positivetrue/false 是否建立透明Glow 滤镜color颜色 发光颜色strength数字 发光厚度Gray ,Invert,Xray无属性Shadow 滤镜color颜色 阴影颜色direction0-360 阴影方向16、CSS定义选择

18、器属性名称属性值说明应用ID每个ID在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID只用于页面的唯一元素,如页眉,主导航条,布局区块等示例:This paragraph has red text.相应的CSS代码: #hightlightcolor:#FFFFFF;将ID与选择器结合/*适合所有h2标题*/ h2color:#333;font-size:16px;/*只适合title的h2标题*/ h2#title color:#eee;相应的XHTML代码:Title Of My ArticleID的使用场合对于每个ID,每个页面只能有一个元素使用该样式,因此ID应该为每

19、个页面唯一存在并仅使用一次的元素不保留避免使用ID的场合当一个以上的地方需要使用同一CSS规则时,不应该使用ID应用类类可以无限次的使用,因此它是应用CSS的非常灵活的方法his paragraph has red text. 相关CSS代码: .hightlight color:FFFFFF;结合多个类和IDBeerSpirtisColaLemonade相应的CSS代码:ul#drinks color:FF6600;.mix Color:#999999;.hot Color:#333333;利用类改写基本样式pColor:#ff6600;.bleached Color:#ccc;相应的XHT

20、ML代码:This paragraph has red text.This paragraph has red text.直接将类链接到元素上p.bleached color:red;相应的XHTML代码:This paragraph has red text.避免,适合对于class,如果多次重复使用或者使用子类选择器，那么就选择class，如果是定义唯一性的标记，比如布局，那么用id17、CSS层叠属性名称例子外部链接实现层叠导入样式实现层叠import url(“one.css”)import url(“two.css”)import url(“three.css”)分组h1Font-f

21、amily:隶书,宋体,楷体;Line-height: 140%;Color:#333;h2Font-family:隶书,宋体,楷体;Line-height: 140%;Color:#333;h3Font-family:隶书,宋体,楷体;Line-height: 140%;Color:#333;/*分组后*/h1,h2.h3Font-family:隶书,宋体,楷体;Line-height: 140%;Color:#333;/*分组例外*/h1Font-style:italic;继承h1 Color:#333;This is the greatest heading in the world从B

22、ODY继承Body Margin:10px;Font-family:隶书;Background:#000;Color:#fff;上下文选择器h1Color: #ccc;i Color:#000;/*使用上下文选择器*/h1 I Color:#000;子类选择器.box color:red;.box1 font-weight:bold;.box2 font-style:italic;BoxBox1Box2其他选择器pcolor:black;atext-decoration:underline;h1font-weight:bold;后代选择器h2 icolor:red;li atext-decor

23、ation:none;#main h1Color:red;伪类a:linkcolor:blue;a:visitedcolor:green;a:hover,a:activecolor:red;input:focusbackground-color:yellow;通用选择器*Padding:0;Margin:0;子选择器和相邻同胞选择器 子选择器#nav li background:url(bg.gif) no-repeat left top; Home Server Development Consultancy Contact Us 相邻同胞选择器: h1+pfont-weight:bold;

24、 Main Heading First Paragraph Second Paragraph属性选择器CSSstrongtitle border-bottom: 1px dotted #999;strongtitle:hover cursor:help;background:#ccc代码注释与结构/*body styles*/ body Font-size:67.5%;18、CSS构造模属性名称例子添加div This is our content area. 给div添加一个id This is our content area. #container Padding: 20px;Border:1px solid #000;Background:#ccc;添加子div This is our content area. Im in a box! Im also in a