css常用代码大全讲解.pdf_三一文库31doc.com

资源描述

《css常用代码大全讲解.pdf》由会员分享，可在线阅读，更多相关《css常用代码大全讲解.pdf（13页珍藏版）》请在三一文库上搜索。

1、字体属性：(font) 大小 font-size: x-large;( 特大) xx-small;( 极小) 一般中文用不到，只要用数值就可以，单位： PX、PD 样式 font-style: oblique;( 偏斜体) italic;( 斜体) normal;( 正常) 行高 line-height: normal;( 正常) 单位： PX、PD、EM 粗细 font-weight: bold;( 粗体) lighter;( 细体) normal;( 正常) 变体 font-variant: small-caps;(小型大写字母 ) normal;( 正常) 大小写text-t

2、ransform: capitalize;( 首字母大写 ) uppercase;(大写 ) lowercase;( 小写) none;( 无) 修饰 text-decoration: underline;(下划线 ) overline;( 上划线 ) line-through;( 删除线) blink;( 闪烁) 常用字体：(font-family) “Courier New“, Courier, monospace, “Times New Roman“, Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性：(back

3、ground) 色彩 background-color: #FFFFFF; 图片 background-image: url(); 重复 background-repeat: no-repeat; 滚动 background-attachment: fixed;(固定) scroll;( 滚动) 位置 background-position: left;(水平) top(垂直); 简写方法background:#000 url() repeat fixed left top; /*简写这个在阅读代码中经常出现，要认真的研究*/ 区块属性：(Block) /* 这个属性第一次认识，要多多研

4、究*/ 字间距 letter-spacing: normal; 数值 /*这个属性似乎有用，多实践下*/ 对齐 text-align: justify;( 两端对齐 ) left;(左对齐 ) right;( 右对齐 ) center;( 居中) 缩进 text-indent: 数值 px; 垂直对齐vertical-align: baseline;(基线) sub;( 下标) super;( 下标) top; text-top; middle; bottom; text-bottom; 词间距 word-spacing: normal; 数值空格 white-space: pre;( 保留

5、) nowrap;( 不换行 ) 显示 display:block;( 块) inline;( 内嵌) list-item;( 列表项 ) run-in;( 追加部分 ) compact;(紧凑 ) marker;(标记 ) table; inline-table; table-raw-group; table-header- group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;( 表格标题 ) /*display 属性的了解很模糊 */ 方框属性

6、：(Box) width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性：(Border) border-style: dotted;( 点线 ) dashed;( 虚线 ) solid （实线）; double;( 双线 ) groove;( 槽线) ridge;(脊状) inset;( 凹陷) outset; border-width:; 边框宽度 border-color:#; 简写方法 border ：width style color; /* 简写*/ 列表属性：(List-style) 类型

7、list-style-type: disc;(圆点) circle;( 圆圈) square;( 方块) decimal;( 数字) lower-roman;( 小罗码数字 ) upper-roman; lower-alpha; upper-alpha; 位置 list-style-position: outside;(外) inside; 图像 list-style-image: url(); 定位属性：(Position) Position: absolute; relative; static; visibility: inherit; visible; hidden; overflow

8、: visible; hidden; scroll; auto; clip: rect(12px,auto,12px,auto) (裁切) css 属性代码大全一 CSS 文字属性： color : #999999; /* 文字颜色 */ font-family : 宋体,sans-serif; /* 文字字体 */ font-size : 9pt; /* 文字大小 */ font-style:itelic; /* 文字斜体 */ font-variant:small-caps; /*小字体 */ letter-spacing : 1pt; /* 字间距离 */ line-height :

9、200%; /* 设置行高 */ font-weight:bold; /* 文字粗体 */ vertical-align:sub; /* 下标字 */ vertical-align:super; /* 上标字 */ text-decoration:line-through; /*加删除线 */ text-decoration: overline; /*加顶线 */ text-decoration:underline; /*加下划线 */ text-decoration:none; /* 删除链接下划线 */ text-transform : capitalize; /*首字大写 */ text

10、-transform : uppercase; /*英文大写 */ text-transform : lowercase; /*英文小写 */ text-align:right; /* 文字右对齐 */ text-align:left; /* 文字左对齐 */ text-align:center; /* 文字居中对齐 */ text-align:justify; /* 文字分散对齐 */ vertical-align 属性 vertical-align:top; /* 垂直向上对齐 */ vertical-align:bottom; /* 垂直向下对齐 */ vertical-align:mi

11、ddle; /* 垂直居中对齐 */ vertical-align:text-top; /* 文字垂直向上对齐 */ vertical-align:text-bottom; /*文字垂直向下对齐 */ 二、CSS 边框空白 padding-top:10px; /* 上边框留空白 */ padding-right:10px; /* 右边框留空白 */ padding-bottom:10px; /* 下边框留空白 */ padding-left:10px; /* 左边框留空白三、CSS 符号属性： list-style-type:none; /* 不编号 */ list-style-type:d

12、ecimal; /* 阿拉伯数字 */ list-style-type:lower-roman; /*小写罗马数字 */ list-style-type:upper-roman; /*大写罗马数字 */ list-style-type:lower-alpha; /*小写英文字母 */ list-style-type:upper-alpha; /*大写英文字母 */ list-style-type:disc; /* 实心圆形符号 */ list-style-type:circle; /* 空心圆形符号 */ list-style-type:square; /* 实心方形符号 */ list-st

13、yle-image:url(/dot.gif); /*图片式符号 */ list-style-position: outside; /*凸排*/ list-style-position:inside; /*缩进*/ 四、CSS 背景样式： background-color:#F5E2EC; /*背景颜色 */ background:transparent; /*透视背景 */ background-image : url(/image/bg.gif); /*背景图片 */ background-attachment : fixed; /*浮水印固定背景 */ background-repeat

14、 : repeat; /*重复排列 -网页默认 */ background-repeat : no-repeat; /*不重复排列 */ background-repeat : repeat-x; /*在 x 轴重复排列 */ background-repeat : repeat-y; /*在 y 轴重复排列 */ 指定背景位置 background-position : 90% 90%; /*背景图片 x 与 y 轴的位置 */ background-position : top; /*向上对齐 */ background-position : buttom; /*向下对齐 */ backg

15、round-position : left; /*向左对齐 */ background-position : right; /*向右对齐 */ background-position : center; /*居中对齐 */ 五、CSS 连接属性： a /*所有超链接 */ a:link /* 超链接文字格式 */ a:visited /* 浏览过的链接文字格式 */ a:active /* 按下链接的格式 */ a:hover /* 鼠标转到链接 */ 鼠标光标样式：链接手指CURSOR: hand 十字体 cursor:crosshair 箭头朝下cursor:s-resize 十字箭头c

16、ursor:move 箭头朝右cursor:move 加一问号cursor:help 箭头朝左cursor:w-resize 箭头朝上cursor:n-resize 箭头朝右上cursor:ne-resize 箭头朝左上cursor:nw-resize 文字 I 型 cursor:text 箭头斜右下cursor:se-resize 箭头斜左下cursor:sw-resize 漏斗 cursor:wait 光标图案 (IE6) p cursor:url(“ 光标文件名 .cur“),text; 六、CSS 边框线一览表： border-top : 1px solid #6699cc; /*上框

17、线*/ border-bottom : 1px solid #6699cc; /*下框线 */ border-left : 1px solid #6699cc; /*左框线 */ border-right : 1px solid #6699cc; /*右框线 */ 以上是建议书写方式 ,但也可以使用常规的方式如下: border-top-color : #369 /*设置上框线 top 颜色*/ border-top-width :1px /* 设置上框线 top 宽度*/ border-top-style : solid/* 设置上框线 top 样式*/ 其他框线样式 solid /* 实线

18、框 */ dotted /* 虚线框 */ double /* 双线框 */ groove /* 立体内凸框 */ ridge /* 立体浮雕框 */ inset /* 凹框*/ outset /* 凸框*/ 七、CSS 表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2 八、CSS 边界样式： margin-top:10px; /* 上边界 */ margin-right:10px; /* 右边界值 */ margin-bottom:10px; /* 下边界值 */ margin-left:10px; /* 左边界值 */ CSS 属性：字体样式 (Font

24、margin-bottom margin-left 2 补白 padding:padding-top padding-right padding-bottom padding-left 3 边框宽度border-width:border-top-width border-right-width border-bottom-width border-left-width 宽度值：thin|medium|thick| 数值 4 边框颜色border-color: 数值数值数值数值数值：分别代表 top、 right、 bottom 、 left 颜色值 5 边框风格border- styl

28、色。背景图像（background-image），设置网页背景图像。重复（background-repeat），控制背景图像的平铺方式，有不重复（no-repeat ）、重复（repeat ，沿水平、垂直方向平铺）、横向重复（repeat-X，图像沿水平方向平铺）和纵向重复（repeat-Y，沿图像垂直方向平铺）等 4 种选择。附加（background-attachment ），用于控制背景图像是否会随页面的滚动而一起滚动。有固定（fixd，文字滚动时，背景图像保质固定）和滚动（ scroll，背景图像随文字内容一起滚动）两种选择。水平位置 /垂直位置（ba

29、ckground-position），确定背景图像的水平、垂直位置。共有左对齐（ left）、右对齐（ right）、顶部（ top）、底部（bottom）、居中（ center）和值（自定义背景图像的起点位置，可使用户对背景图像的位置做出更精确的控制）等6 种选择。类型属性共有九项：字体（font-family ），设定时，需考虑浏览器中有无该字体。大小（font-size），注意度量单位。粗细（font-weight），除了 normal（正常）、bold（粗体）、bolder（特粗）、lighter（细体）外，还有9 种以像素为度量为单位的设置

30、方式。样式（font-style），也就是字型。行高（line-height），就是行距。注意，行距只能以是字体大小值为变形（font-variant），可以将正常文字一半尺寸后大写显示，但 IE 目前不支持这项属性。大小写（text-transform），这项属性能轻而易举地控制字母大小写，有首字大写（capitalize、大写（uppercase ）、小写（lowercase）和无（none，使所有继承文字和变形参数被忽略，文字将以正常形式显示）等 4 种。修饰（text-decoration），用于控制链接文本的显示形态，有下划线（underli

31、ne）、无下划线（overline）、删除线（line-through）、闪烁（blink）和无（ none ，使上述效果均不会发生）等5 种修饰方式。但IE4 不支持文字闪烁。区块属性共有六项：单词间距（word-spacing），主要用于控制文字间相隔的距离。有正常（normal）和值（自定义间隔值）两种选择方式。当选择值时，可用的单位有英吋（ in）、厘米（ cm）、毫米（ mm）、点数 (pt）、12pt 字(pc）、字体高（ em）、字体 x 有高（ ex）像素（ px）。字母间距（letter-spacing），其作用与字符间距类似，

32、也有正常（normal）和值（自定义间隔值）两种选择方式。垂直对齐（vertical-align），控制文字或图像相对于其母体元素的垂直位置。如将一个 2 3 像素的 GIF 图像同其母体元素文字的顶部垂直对齐，则该GIF 图像将在该行文字的顶部显示。共有基线（baseline，将元素的基准线同母体元素的基准线对齐）、下标（ sub，将元素以下标的形式显示） ,上标（ super，将元素以上标的形式显示）、顶部（ top ，将元素顶部同最高的母体元素对齐）、文本顶对齐（ text-top，将元素的顶部同母体元素文字的顶部对齐）、中线对齐（ middle，将元素的中点同母

33、体元素的中点对齐）、底部（ bottom，将元素的底部同最低的母体元素对齐）及值（自定义）等9 种选择。文本对齐（text-align），设置块的水平对齐方式。共有左对齐（left）、右对齐（ right）、居中（ center）和均分（ justify）等 4 种选择。文字缩进（text-indent），控制块的缩进程度。空白间距（white-space），在 HTML中，空格是被省略的；在CSS 中则使用属性（ white-space）控制空格的输入。共有正常（normal）、保留（pre）和不换行（ nowrap）等 3 种选择。边框的属性有 3 项：宽

34、（ border-width ），控制边框的宽度，其中分为4 个属性： border-top-width 顶边框的宽度、border-right-width右边框的宽度、 border-bottom-width 底边框的宽度、 border-left-width 左边框的宽度。颜色（border-color），设置各边框的颜色。若要使边框的四边显示不同的颜色，可在设置中分别列出。如， p: #ff0000 #009900 #0000ff #55cc00 浏览器将四种颜色依次理解为：上边框、右边框、底边框和左边框（自上开始顺时针）。样式（border-

35、style），设定边框的样式，共有无（none）、虚线（dotted）、点划线线（ dotted）、点划线（ dashed ）、实线（ solid）、双线（ double ）、槽状（ grove）、脊状（ ridge）、凹陷（ inset）和凸起（ outset）等 9 种。盒子属性共有6 项：宽（width），确定盒子本身的宽度，可以使盒子的宽度不依靠它所包含的内容多少。高（height），确定盒子本身的高度。浮动（float），设置块元素的浮动效果。清除（clear），用于清除设置的浮动效果。边距（margin），控制围绕边框的

36、边距大小。其中包含4 个属性： margin-top 控制上边距的宽度、 margin-right控制右边距的宽度、 margin-bottom 控制下边距的宽度、 margin-left 控制左边距的宽度。边界（padding），确定围绕块元素的空格填充数量，其中包含 4 个属性padding-top 控制上留白的宽度、 padding-right 控制右留白的宽度、 padding-bottom 控制下留白宽度、 padding-left 控制左留白的宽度。列表属性共有 3 项：类型（list-style-type），确定列表每一项前使用的符号，共有圆点（disc）、

37、圆圈（ circle）、方形（ square）、数字（ decimal）、小写罗马数字（lower-roman ）、大写罗马数字（upper-roman）、小写字母（lower-alpha）和大写字母（ upperalpha）等 8 种。项目图像（list-style-image），其作用是将列表前面的符号换为图形。位置（list-style-position ），用于描述列表位置，有内（outside）和外（inside）两种选择。定位属性共有 6 项：类型（position），用于确定定位的类型，共有绝对（absolute）、相对（relat

38、ive）和静态（ static）等 3 种选择。 Z 轴（z-index），用于控制网页中块元素的叠放顺序，可为元素设置重叠效果。该属性的参数值使用纯整数，值为0 时，元素在最下层，适用于绝对定位或相对定位的元素。显示（visibility ）使用该属性可将网页中的元素隐藏，共有继承（inherit，继承母体要素的可视性设置）、可见（visible）和隐藏（hidden）等 3 种选择。溢出（overflow ），在确定了元素的高度和宽度后，如果元素的面积不能全部显示元素中的内容时，该属性做一日和尚撞一天钟起作用了。其中共有可见（ visible，扩大面积以显示

39、所有内容）、隐藏（ hidden，隐藏超出范围的内容）、滚动（ scroll，在元素的右边显示一个滚动条）和自动（ auto，当内容超出元素面积时，显示滚动条）等4 种选择。定位，当为元素确定了绝对定位类型后，该组属性决定元素在网页中的具体位置。该组属性包含4 个子属性，分别是左（属性名为left ，控制元素左边的起始位置）、上（属性名为 top ，控制元素上面的起始位置）、宽或高（与盒子类属性面板中宽或高的属性作用相同）。剪辑（clip），当元素被指定为绝对定位类型后，该属性可以把元素区域切成各种形状，但目前提供的只有方形一种。属性值为 rect(

40、top right bottom left)，即： rect(top right bottom left) ，属性值的单位为任何一种长度单位。扩展属性共有两部分：分页，其中两个属性的作用是为打印的页面设置分页符。之前（page-break-before ）；之后（page-break-after ）。视觉效果，其中两个属性的作用是为网页中的元素施加特殊效果。光标（cusor），可以指定在某个元素上要使用的光标形状，共有15 种选择方式，分别代表鼠标在Windows 操作系统中的各种形状。另外它还可以指定指针图标的URL 地址；滤镜（fiter），可以为网页中元素施加各种奇妙的滤镜效果，共包含有16 种滤镜

展开阅读全文