1、CSS入门,北京易技特科技有限公司 2006年8月,课程目录,CSS简介 CSS常用指令,CSS简介,CSS 是 Cascading Style Sheet 的缩写。译作层叠样式表单。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。,CSS简介,链入外部样式表文件 (Linking to a Style Sheet)你可以先建立外部样式表文件（.css），然后使用HTML的link对象。示例如下： 文档标题 ,CSS简介,定义内部样式
2、块对象 (Embedding a Style Block)你可以在你的HTML文档的和标记之间插入一个.块对象。 示例如下： 文档标题 ,CSS简介,body font: 10pt “Arial“ h1 font: 15pt/17pt “Arial“; font-weight: bold; color: maroon h2 font: 13pt/15pt “Arial“; font-weight: bold; color: blue p font: 10pt/12pt “Arial“; color: black ,CSS简介,请注意，这里将style对象的type属性设置为“text/css”
3、，是允许不支持这类型的浏览器忽略样式表单。 内联定义 (Inline Styles)内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： 这一行被增加了左右的外补丁,CSS常用指令,背景综合设定 (配合 BODY 使用) background:颜色 图片 并排 固定 位置 背景颜色 (配合 BODY 使用) background-color:Color默认值为透明 (transparent),Netscape不支持。背景图片 (配合 BODY 使用) backgorund-image:url(*.gif)相对位置 backgorund-image:url(htt
4、p:/*.gif) 绝对位置,CSS常用指令,背景图片并排处理 (配合 BODY 使用) background-repeat:repeat重复排列,默认值 background-repeat:no-repeat不重复排列 background-repeat:repeat-x往X轴重复排列 background-repeat:repeat-y往Y轴重复排列固定网页背景图片 (配合 BODY 使用) background-attachment:scroll 随着网页内容卷动,默认值 background-attachment:fixed 不随着网页内容卷动,CSS常用指令,设定背景图片的起始显示位
5、置 (配合 BODY 使 用) background-position:x y 可使用像素px,百分比%,位置关键词 字形综合设定 font:形态 大小 种类字形种类 font-family:“Font1“,“Font2“,“Font3“ 一定要用逗号隔开,CSS常用指令,字形颜色 color:颜色 可使用所有颜色关键词字形大小 font-size:绝对大小 xx-small,x-small,small,medium,large,x-large,xx-large font-size:相对大小 ?em,larger,smaller font-size:? 可使用所有的字形关键词 字形粗细 fon
6、t-weight:normal 正常字，默认值,CSS常用指令,font-weight:bold 粗体字斜体字形 font-style:normal 正常字，默认值 font-style=italic 斜体字 字距 letter-spacing:normal 标准字距，默认值 letter-spacing:长度 固定长度值,可使用所有的长度关键词，%除外,CSS常用指令,文字加线 text-decoration:none 不加线，默认值 text-decoration:underline 底线 text-decoration:overline 顶线 text-decoration:line-t
7、hrough 删除线 转换英文字母大小写 text-transform:none 正常，默认值 text-transform:capitalize 首字变大写 text-transform:uppercase 全部转大写 text-transform:lowercase 全部转小写,CSS常用指令,font-variant:normal 正常，默认值 font-variant:small-caps 英文字转为字体较小的大写字母，中文字转为字体较小的中文字 垂直对齐 vertical-align:baseline 标准，默认值 vertical-align:sub 下标字 vertical-al
8、ign:super 上标字 vertical-align:text-top文字向上对齐,同上,CSS常用指令,vertical-align:text-bottom 文字向下对齐，同bottom vertical-align:top 垂直向上对齐 vertical-align:middle 垂直置中对齐 vertical-align:bottom 垂直向下对齐文字水平对齐 text-align:left 靠左对齐 text-align:right 靠右对齐 text-align:center 置中对齐 text-align:justify 分散对齐，只有对英文,CSS常用指令,字母生效文前缀行缩
9、排 text-indent:?pt 可为正整数或负整数 行高 line-height:normal 标准行高，默认值 line-height:Length 固定长度值，可使用所有的长度关键词 line-height:? 比例行高，结果为目前字形大小的倍数 line-height:?% 百分比行高，结果为目前字,CSS常用指令,形大小的百分比 超级链接显示格式 A:link 设定一般的超级链接之显示格式 A:visited 设定浏览过的超级链接之显示格式 A:hover 设定鼠标停在超级链接上之显示格式 A:active 设定鼠标左键按下时的超级链接之显示格式 鼠标指针的变化指定 curosr:
10、auto 依浏览器内定值 curosr:crosshair 十字形,CSS常用指令,curosr:default 一般形状 curosr:hand 手形 curosr:move 可移动 curosr:text 输入文字 curosr:wait 执行中 curosr:help 说明 curosr:e-resize 调整右方大小 curosr:ne-resize 调整右上方大小 curosr:nw-resize 调整左上方大小 curosr:n-resize 调整上方大小,CSS常用指令,curosr:se-resize 调整右下方大小 curosr:sw-resize 调整左下方大小 curos
11、r:s-resize 调整下方大小 curosr:w-resize 调整左方大小 二度空间定位效果 (配合 DIV 使用) position:static 正常的对象排列方式 position:relative 以父对象左上角位置为基准点取相对位置 position:absolute 以网页左上角位置为基准点取绝对位置,CSS常用指令,立体空间定位效果 (配合 DIV 使用) z-index:? 可为正整数或负整数，数字越小越底层 卷标元素之边框样式 border-style:? ? ? ? 卷标元素之上右下左的边框样式 border-style-top:? 卷标元素之上边框样式 border
12、-style-bottom:? 卷标元素之下边框样式,CSS常用指令,border-style-left:? 卷标元素之左边框样式 border-style-right:? 卷标元素之右边框样式 border-style:solid 粗线 border-style:dashed 粗线 border-style:double 双线 border-style:groove 浅色 border-style:ridge 四边阴影 border-style:inset 左上边阴影 border-style:outset 右下边阴影,CSS常用指令,卷标元素之边框颜色 border-color:? ? ?
13、 ? 卷标元素之上右下左的边框颜色 border-color-top:? 卷标元素之上边框颜色 border-color-bottom:? 卷标元素之下边框颜色 border-color-left:? 卷标元素之左边框颜色 border-color-right:? 卷标元素之右边框颜色,CSS常用指令,卷标元素之边框宽度 border-width:?pt ?pt ?pt ?pt 卷标元素之上右下左的边框宽度 border-width-top:?pt卷标元素之上边框宽度 border-width-bottom:?pt 卷标元素之下边框宽度 border-width-left:?pt 卷标元素之左
14、边框宽度,CSS常用指令,border-width-right:?pt 卷标元素之右边框宽度卷标元素之内容和边框间的留白距padding:?pt ?pt ?pt ?pt 卷标元素之上右下左的留白距离 padding-top:?pt 卷标元素之上方白距离 padding-bottom:?pt卷标元素之下方留白距离 padding-left:?pt 卷标元素之左方留白距离 padding-right:?pt 卷标元素之右方留白距离,CSS常用指令,卷标元素之边界距离 margin:?pt ?pt ?pt ?pt 卷标元素之上右下左的边界值 margin-top:?pt 卷标元素之上边界值 marg
15、in-bottom:?pt 卷标元素之下边界值 margin-left:?pt 卷标元素之左边界值 margin-right:?pt 卷标元素之右边界值 卷标元素之宽度 width:?pt 固定长度表示 width:?% 百分比表示,CSS常用指令,卷标元素之高度 height:?pt 固定长度表示 height:?% 百分比表示 卷标元素和文字的相对位置 float:none 默认值 float:left 卷标元素往左靠，文字排在右边 float:right 卷标元素往右靠，文字排在左边 卷标元素和文字的相对位置 clear:none 默认值 clear:left 卷标元素往左靠,右边不能有
16、文字,CSS常用指令,clear:right卷标元素往右靠,左边不能有文字 clear:both 卷标元素两侧都不能有文字 清单项目综合设定 list-style:编号 图片 缩排 清单编号 (配合 OL 使用) list-style-type:none 不编号 list-style-type:decimal 阿拉伯数字 list-style-type:lower-roman 小写罗马数字 list-style-type:upper-roman 大写罗马数字 list-style-type:lower-alpha 小写英文字母,CSS常用指令,list-style-type:upper-alp
17、ha 大写英文字母清单编号 (配合 UL 使用) list-style-type:none 不编号 list-style-type:disk 实心圆 list-style-type:circle 空心圆 list-style-type:square 实心方块 图片式清单符号 (配合 UL 使用) list-style-image:url(*.gif) 相对位置 list-style-image:url(http:/*.gif) 绝对位置,CSS常用指令,清单符号缩排 list-style-position:outside 符号凸出,默认值 list-style-position:inside
18、符号缩排 其它 所谓的卷标元素(element)为一对完整的开始及结束卷标，及该卷标之间的内容。 /* */ 批注段落 属性间要用 ; 隔开 在属性后加上 !important ，代表该属性为最,CSS常用指令,高优先权，Netscape不支持。 颜色表示法 #RRGGBB 十六进制表示法 RBG(?,?,?) RGB三原色整数表示法，从0到255 RBG(?%,?%,?%) RGB三原色百分比表示法,从0%到100% Color 颜色英文代码，只支持下列十六种Color 颜色代码 aqua #00FFFF 浅绿色，水色black #000000 黑色,CSS常用指令,blue #0000FF
19、 蓝色fuchsia #FF00FF 洋红色gray #808080 灰色green #008000 绿色lime #00FF00 橙色maroon #800000 褐紫红色navy #000080 深蓝色olive #808080 橄榄色,CSS常用指令,purple #800080 紫色red #FF0000 红色silver #C0C0C0 银色teal #008080 蓝绿色white #FFFFFF 白色yellow #FFFF00 黄色Position 位置关键词top 上,CSS常用指令,bottom 下 left 左 right 右 center 中央 % 百分比，0%到100% 字形关键词 in 英吋 Inch cm 公分 Centimeter mm 公厘 Millimeter pt 点 Point,CSS常用指令,pc Pica,1pc = 12pt px 像素 Pixels em 元素 假设父元素为12pt，则2em就是2em*12pt=24pt Length 长度关键词 pt 点 px 像素 % 百分比，0%到100% cm 公分 in 英吋,
