《叠层样式表达式.doc》由会员分享，可在线阅读，更多相关《叠层样式表达式.doc（9页珍藏版）》请在金锄头文库上搜索。
1、CSS全称Cascading Style Sheet。层叠式样式表。一、CSS的四种实现方式：1.内嵌式：2.外链式：3.导入式4.属性式：二.CSS的定义：选择对象属性1:值1;属性2:值2;属性3:值3;属性n:值n如：tdfont-size:12px;color:#FFFF00.mynamefont-size:12px;color:#FFFF00a:hoverfont-size:12px;color:#FFFF00;text-decoration: underline;三.四种选择对象1.HTML selector (TagName)2.class selector (.NAME)3.I
2、D selector (#IDname)4.特殊对象 (a:hovera:linka:visiteda:active)1.HTML selectorHTML selector就是HTML的置标符，如：DIV、TD、H1。HTML selector的作用范围是应用了该样式的所有页面中的所有该置标符。例：tdcolor: #FF0000; -注意：代码的作用是使表格单元格内文字自动变红色。2.class selector定义class selector需要往其名称其加一个点“.”。如“.classname”。class selector的作用范围是所有包含“class=classname”的置标符
3、。例：.fontRedcolor: #FF0000; -注意：在第二个中没有“class=fontRed”，所以文字没有变红色。3.ID selector定义ID selector需要往其名称其加一个点“#”。如“#IDname”。ID selector的作用范围是所有包含“ID=classname”的置标符。例：#fontRedcolor: #FF0000;- 注意：在第二个中没有“ID=fontRed”，所以文字没有变红色。4.特殊对象特殊对象包括四种，是针对链接对象设置的:a:hover 鼠标移上时的超链接a:link 常规，非访问超链接a:visited 访问过的超链接a:active
4、 鼠标点击时的超链接特殊对象的作用范围是所有置标符（这句话有待商榷，因为下面很快就有一种方法可以把“所有”两个字推翻）。例：a:hovercolor: #0000FF;text-decoration: underline;-注意下面，很有用！a.classname:hovera#IDname:hover这两种写法，是分别配合.classname与#IDname使用的。它的作用范围变成了所有包含“class=classname”或“ID=IDname”的置标符。这种写法，可以帮助你在同一页面中实现多种a:hover效果，可以看一下艺网的主页上导航栏文字与普通文章标题在鼠标时的区别。四.应用：1.
5、置标符自动应用2.特制类class=NAME3.ID ID=IDname4.特殊对象自动应用五.CSS属性CSS的属性有很多，像上文中用到最多的color，表示文字的颜色。background-color表示背景色。这个是最主要的，但是因为没有什么难度，参考一下相关手册就可以了。CSS 标签属性/属性参考这里列出了目前支持的样式表(CSS)标签属性。CSS 标签属性/属性行为属性 behavior字体和文本属性 directiondirection di?rek?n 指南font font-family font-size font-style font-variant ?v?ri?nt 变形
6、font-weight weit重量ime-mode m?ud方式layout-grid ?leiaut 布局排版rid格子layout-grid-char t?:(把.)烧焦layout-grid-linelayout-grid-modelayout-grid-typeletter-spacing ?let?字母?speisi?间距line-breakbreik打破line-height hait高度min-heightruby-align?ru:bi红宝石ruby-overhang?uv?h?伸出ruby-position p?zi?n定位text-align text-autospace
7、 speis自动间距text-decoration ?dek?rei?n装饰text-indent in?dent缩进排版text-justify?d?stifai对齐text-kashida-spacetext-overflow ?uv?fl?u溢出text-transform tr?ns?f?:m改变text-underline-positionunicode-bidi ?bi:divertical-align white-spaceWord-breakword-wrapwriting-mode颜色和背景属性 background-attachment background-color b
8、ackground-image background-position background-position-xbackground-position-y background-repeat color 版面属性 border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse* border-color border-left border-left-color border-left-style border-left-width border-right bo
9、rder-right-color border-right-style border-right-width border-style border-top border-top-color border-top-style border-top-width border-width clear float layout-flowmargin margin-bottom margin-left margin-right margin-top padding padding-bottom padding-left padding-right padding-top scrollbar-3dlig
10、ht-colorscrollbar-arrow-colorscrollbar-base-colorscrollbar-darkshadow-colorscrollbar-face-colorscrollbar-highlight-colorscrollbar-shadow-colortable-layoutzoom分类属性 display list-style list-style-image list-style-position list-style-type 定位属性 bottomclip height left overflow overflow-xoverflow-yposition
11、 righttop visibility width z-index 打印属性 pagepageBreakAfter pageBreakBefore滤镜属性 filter伪类和其它属性 :active charset cursor :first-letter:first-linefont-face :hover import !important :link media page:visited 实现CSS图片边框效果的方法图片边框效果主要有两种，较简单的方法是直接在CSS文件中对img定义边界（border），例如我在CSS中定义了： img.framed padding: 6px; bor
12、der: 1px solid #CCCCCC; background-color: #FFFFFF; 那么在HTML文件中，或者在网页更新的时候，针对嵌入的图片定义使用class=framed就会有相应的边框效果。上面的方法的优点是比较简单，但实现的效果比较单调，并不一定能达到令人满意的效果和一些特殊效果，例如阴影，色彩变化等等。运用图象替代与定位平移就可以很好地做到这点，在这里就不多讲了，相信等你学会了基本的CSS，再向更高级的CSS效果挑战就不是什么难事了。有关表格边框的css语法整理我们知道Dreamweaver在表格制作方面做得非常出色，但是在某些时候还是必须结合css才能达到一些特定
13、效果，下面我们先把有关表格边框的css语法整理出来，然后另外介绍怎样用css美化表格的边框。有关表格边框的css语法具体内容包括：上边框宽度、右边框宽度、下边框宽度、左边框宽度、边框宽度、边框颜色、边框样式、上边框、下边框、左边框、右边框、边框、宽度、高度、有关标签等。 1.上边框宽度语法: border-top-width: 允许值: thin | medium | thick | 初始值: medium适用于: 所有对象向下兼容: 否上边框宽度属性用于指定一个元素上边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在上边
14、框、边框的宽度或边框的属性略写。2.右边框宽度语法: border-right-width: 允许值: thin | medium | thick | 初始值: medium适用于: 所有对象向下兼容: 否右边框宽度属性用于指定元素的右边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在右边框、边框的宽度或边框的属性略写。 3.下边框宽度语法: border-bottom-width: 允许值: thin | medium | thick | 初始值: medium适用于: 所有对象向下兼容: 否下边框宽度属性用于指定元素的下边框的宽度。值可以是三个关键字其中的一个，都不受字体大小或长度的影响，可以用于实现成比例的宽度。不允许使用负值。也可以用在下边框、边框的宽度或边框的属性略写。 4.左边框宽度语法: border-left-width: 允许值: thin |
