开发指南–浏览器用户界面–选项页面(Options)

选项(Options)

你可能想通过提供一个选项页,来允许用户对你的扩展进行自定义配置。如果这样做,系统会在扩展程序管理页面(chrome://extensions)中提供一个链接指向它。点击选项链接会打开一个新的标签页来指向你的选项页面。

原文 写道
To allow users to customize the behavior of your extension, you may wish to provide an options page. If you do, a link to it will be provided from the extensions management page at chrome://extensions. Clicking the Options link opens a new tab pointing at your options page.

第一步: 在Manifest文件中声明你的选项页面

原文 写道
Step 1: Declare your options page in the manifest

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

第二步: 编写你的选项页面

原文 写道
Step 2: Write your options page

这是一个选项页面的例子:

原文 写道
Here is an example options page:

<html>
<head><title>My Test Extension Options</title></head>
<script type="text/javascript">

// 将选项保存到localStorage。
function save_options() {
  var select = document.getElementById("color");
  var color = select.children[select.selectedIndex].value;
  localStorage["favorite_color"] = color;

  // 更新状态,让用户知道选项被保存。
  var status = document.getElementById("status");
  status.innerHTML = "Options Saved.";
  setTimeout(function() {
    status.innerHTML = "";
  }, 750);
}

// 根据localStorage中保存的值恢复选择框的状态。
function restore_options() {
  var favorite = localStorage["favorite_color"];
  if (!favorite) {
    return;
  }
  var select = document.getElementById("color");
  for (var i = 0; i < select.children.length; i++) {
    var child = select.children[i];
    if (child.value == favorite) {
      child.selected = "true";
      break;
    }
  }
}

</script>

<body onload="restore_options()">

Favorite Color:
<select id="color">
 <option value="red">red</option>
 <option value="green">green</option>
 <option value="blue">blue</option>
 <option value="yellow">yellow</option>
</select>

<br>
<button onclick="save_options()">Save</button>
</body>
</html>

重要说明

  • 这个功能在4.0.222.x版本后的某个正式主干版本中加入。
  • 原文 写道
    This feature is checked in to the trunk and should land in official builds sometime after version 4.0.222.x.
  • 我们计划提供一些默认的CSS样式,以使不同扩展的选项页面外观一致。你可以在crbug.com/25317中加星来促进更新。
  • 原文 写道
    We plan on providing some default css styles to encourage a consistent look across different extensions’ options pages. You can star crbug.com/25317 to be notified of updates.

Struts2的四种theme类型

struts2 中有四种 theme 类型:

simple theme A minimal theme with no “bells and whistles”

xhtml theme The default theme that uses common HTML practices

css_xhtml theme The xhtml theme re-implemented using strictly CSS for layout

ajax theme A theme based on the xhtml theme that provides advanced AJAX features

除了simple theme之外,其他的theme都会自动为你生成layout,例如

<s:form>

<s:submint />

</s:form>

会生成如下的HTML片段:

<form>

<table>

<tr>

<td><input type=”submit” ../>

</tr>

</table>

</form>

所以如果使用这三种类型的theme不需要使用table定layout。

如果使用simple的theme才需要使用table定layout。

但是按照你的想法,使用前三种theme无法把submit和reset放在同一个tr中(即无法放在同一行)

解决方法:

1 使用simple theme , 但是这样子的话你无法使用ajax的一些特性,需要自己编写ajax的特性。

2 基于xhtml theme自己重新写一个theme,但是难度会大一点。

 

****************************************************************

struts.xml:

 <constant name=”struts.ui.theme” value=”css_xhtml” />

jsp:

<s:form namespace=”/admin/category” id=”deleteCarSeriesForm” action=”deleteCarSeries” method=”post”  theme=”launch”>

CSS定位

动态转换        作者:未知 来源:洪恩

  通过在CSS中设置属性,我们可以准确的定义一个页面的样式,如颜色、字体、边框等。现在我们要讲的CSS定位主要是在页面的布局和控制上进行定义,使您的页面从这两个方面都展现的非常完美,更加富有动感。
   另外,在讲解之前,我们首先介绍两个定义:相对定位和绝对定位。相对定位就是允许在文档的原始位置上进行偏移。而绝对定位则允许任意定位。
   实现CSS的定位最终还是要靠属性。我们来看一下定位属性的详细列表(见下图):

定位属性

  我们在下面举一个例子,其中带了一点Script的内容,我们来看看它是如何实现动态显示的。讲解之前我们还是先看一下这个例子的效果吧,请点击这里
   看,通过简单的CSS定位实现了颇具动感的效果。这种效果的代码如下:

  <html>
    <head>
    <title>dingwei css</title>
    <style type=“text/css”>
    <!–
    #container1{position:absolute;top:100}
    //*定义container1 为绝对位置*//
    #container2{position:absolute;top:100;visibility:hidden;}
     //*定义container2为绝对定位,初始可见度为hidden(隐藏)*//
    p{font-size:12pt;}//*定义p的字体*//
    –>
    </style>
    </head>
    <body>
    <p style=“font-family:行书体;font-size:15pt;color:#cc33cc”>
    请选择一幅图片: </p>//*设置字体大小、名称、颜色*//
    <div id=“container1”>
    <dd><img src=“ss01065.jpg” width=“185”height=“280”>
    //*导入一张图片,标识符为container1*//
    <p style=“font-family:行书体;color:#cc9933;font-size:12pt”>
     名称:大漠</p>//*设置字体名称、颜色、大小*//
    </dd>
    </div>
    <div id=“container2”>
    <dd><img src=“ss01095.jpg” width=“185”height=“280”>
    //*导入另一种图片,标识符为container2*//
    <p style=“font-family:行书体;color:#3366cc;font-size:12pt”>
      名称: 大海</p>
    </dd>
    </div>
    <form name=“myform”>//*定义两个按钮*//
    <p><input type=“button” value=“大漠”      
     onclick=“container1.style.visibility=‘visible’;
     container2.style.visibility=‘hidden’”>
    //*定义鼠标点击事件图片1为可见,图片2为不可见*//
    <input type=“button” value=“大海”;
     container1.style.visibility=‘hidden’;
     onclick=“container2.style.visibility=‘visible’;
     container1.style.visibility=‘hidden’”></p>
     //*定义鼠标点击事件图片1为不可见,图片2为可见*//
     </form>
     </body>
   </html>

  代码虽然长了一些,但结构很简单,您只要用心看注释,很容易理解的。下一节我将向您继续介绍一个CSS定位的例子。

  2.空间定位

  在这一节里,我们来看一个利用z-index定位的例子,这个例子的效果在这里
   我们看到例子中的两幅图片和一段文字分别处于不同的空间位置,文字覆盖在那朵花的图片上,而挥动小旗的小老鼠却又覆盖在文字的上面。那么这种效果是怎样实现的呢?这里利用了CSS定位的z-index属性,代码如下:

  <html>
    <head>
    <title>zindex</title>
    <style type=“text/css”>
    <!–                   
     .pile{position:absolute;left:2in;top:2in;
     width:3in;height:3in;}//*定义了类pile,以及它的位置*//
     .pile1{position:absolute;left:3in;top:2in;
     width:1in;height:1in;} //*定义了类pile1,以及它的位置*//
     –>
     </style>
     </head>
     <body>
     <img src=“ss01010.jpg” class=“pile” id=“image”
     style=“z-index:1”>
     //*导入一张图片,使它为pile类,z-index属性定义为1,位置处于最下方
       *//
     <div class=“pile” id=“text1”
     style=“color:#ffff33;z-index:2” > 这段文字将覆盖在图片上。
     </div>//*定义一段文字的颜色和z-index属性为2,处于中间位置*//
     <img src=“075.gif” class=“pile1” id=“image”
     style=“z-index:3”>
     //*导入第二张图片,使它为“pile1”类,z-index属性为3,位置处于最上
       方*//
     </body>
   </html>

  通过这两节的例子,我们可以看到CSS定位具有强大的功能,至于其他的一些定位属性,您可以自己尝试一下,很简单的。
   利用好了CSS的定位功能,会使您的页面更加精致,更加富有动感。

CSS选择器

=====================

CSS选择器笔记

一、基本选择器

序号 选择器 含义
1. * 通用元素选择器,匹配任何元素
2. E 标签选择器,匹配所有使用E标签的元素
3. .info class选择器,匹配所有class属性中包含info的元素
4. #footer id选择器,匹配所有id属性等于footer的元素

实例:

二、多元素的组合选择器

序号 选择器 含义
5. E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
6. E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
7. E > F 子元素选择器,匹配所有E元素的子元素F
8. E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

实例:

三、CSS 2.1 属性选择器

序号 选择器 含义
9. E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)
10. E[att=val] 匹配所有att属性等于“val”的E元素
11. E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
12. E[att|=val] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等

实例:

四、CSS 2.1中的伪类

序号 选择器 含义
13. E:first-child 匹配父元素的第一个子元素
14. E:link 匹配所有未被点击的链接
15. E:visited 匹配所有已被点击的链接
16. E:active 匹配鼠标已经其上按下、还没有释放的E元素
17. E:hover 匹配鼠标悬停其上的E元素
18. E:focus 匹配获得当前焦点的E元素
19. E:lang(c) 匹配lang属性等于c的E元素

实例:

五、 CSS 2.1中的伪元素

序号 选择器 含义
20. E:first-line 匹配E元素的第一行
21. E:first-letter 匹配E元素的第一个字母
22. E:before 在E元素之前插入生成的内容
23. E:after 在E元素之后插入生成的内容

实例:

六、CSS 3的同级元素通用选择器

序号 选择器 含义
24. E ~ F 匹配任何在E元素之后的同级F元素

实例:

七、CSS 3 属性选择器

序号 选择器 含义
25. E[att^=”val”] 属性att的值以”val”开头的元素
26. E[att$=”val”] 属性att的值以”val”结尾的元素
27. E[att*=”val”] 属性att的值包含”val”字符串的元素

实例:

八、CSS 3中与用户界面有关的伪类

序号 选择器 含义
28. E:enabled 匹配表单中激活的元素
29. E:disabled 匹配表单中禁用的元素
30. E:checked 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
31. E::selection 匹配用户当前选中的元素

实例:

九、CSS 3中的结构性伪类

序号 选择器 含义
32. E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
33. E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
34. E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
35. E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
36. E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
37. E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
38. E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
39. E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
40. E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
41. E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
42. E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素

实例:

十、CSS 3的反选伪类

序号 选择器 含义
43. E:not(s) 匹配不符合当前选择器的任何元素

实例:

十一、CSS 3中的 :target 伪类

序号 选择器 含义
44. E:target 匹配文档中特定”id”点击后的效果

请参看HTML DOG上关于该选择器的详细解释实例

HTML-加速、再加速

作者:听风    文章来源:eNet技术学院

web开发人员是否必须掌握复杂的组件技术才能加快html页面的访问速度?答案是:不一定!实际上,有许多关于HTML与DHTML方面的技巧,它们原理简单而且上手容易。无论是技术高超的老手,还是初涉编程的菜鸟,领会这些都十分必要。

明显HTML,暗渡“公用脚本”

减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时,就可以考虑将这些公用部分单独分离出来。比如:我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.js文件,然后再在页面中按如下方式调用它:

<script src=”myfile.js”></script>

这样,公用文件只需要下载一次,然后就进入缓冲区。等下次再次调用包含公用文件的html页面时,下载时间明显减少。

让样式表内容进入地下工作

CSS是HTML装扮器,一个漂亮的Web页面不可能没有它。HTML页面中有多种引用CSS的方法,不同的方法导致的效率也不一样。通常,我们可以将定义于<style></style>间的样式控制代码提取出来,保存到单独的.css文件中,然后在HTML页面中以<LINK>标记或者@import标记的方式进行引用:

<style>
@import url(“mysheet1.css”);
</style>
<link rel=Stylesheet href=”mysheet2.css”>

请注意2点:1、.css文件中无需包括<style>标记;2、@import和LINK标记要定义在HTML页面的HEAD部分。

宝贵内存节省两法

尽量减少HTML页面占用的内存空间是加快页面下载速度的一个有效方法。在这方面,有2个需要注意的问题:

1、使用同一种脚本语言

HTML页面离不开脚本程序的支持,我们经常会在页面中嵌入多种脚本语言,比如javascript与VBScript。但是,不知你发觉没有:这样的混合使用减慢了页面的访问速度。原因在于:要解释并运行多种脚本代码,就必须在内存中装载多种脚本引擎。所以,请尽量在页面中使用同一种脚本语言编写代码。

2、巧用IFrame

你使用过<IFRAME>标记吗?它可是一个非常美妙的功能。如果要在一个HTML文档中包含第2个页面的内容,通常的方法是使用<FRAMESET>标记。但是有了<IFRAME>,一切变得简单了。比如,开发一个文档预览页面,可以在左边放置一系列主题,在右边放置一个IFRAME,其中包含要预览的文档;当鼠标掠过左边的每一个主题链接时,就在右边建立一个新的IFRAME以预览文档。这样做,代码效率无疑是高效的,但同时导致了繁重的处理过程,最终是缓慢的速度。

没关系,我们有办法:只使用单一的IFRAME。当鼠标指向一个新主题时,只需要修改IFRAME元素的SRC属性即可。这样,任何时间内只会有一个预览文档保留在内存。

择优选用动画定位属性

每天上网浏览页面,你一定会看到许多动画效果。比如,一个可爱的小兔子在页面上来回地走动 … 实现这个效果的核心技术就是CCS定位。通常,我们是使用element.style.left和element.style.top2个属性来达到图形定位的目的。但是,这样做会产生一些问题:left属性返回一个字符串,并且其中包含了度量单位(比如100px)。因此,要设定新的位置坐标,就必须首先对这个字符串返回值进行处理,然后才能赋值,象下面一样:

dim stringLeft, intLeft

stringLeft = element.style.left

intLeft = parseInt(stringLeft)

intLeft = intLeft + 10

element.style.left = intLeft;

你一定会感觉做这么点事情竟要编写这么复杂的代码,是否有更简洁的方法?当然有!请看这4个属性:posLeft、posTop、posWidth

和 posHeight,它们对应于相应字符串返回值的点数数值。好了,使用这些属性重新编写代码实现上面代码实现的功能:

element.style.posLeft += 10

代码短小、速度却更快!

循环控制多个动画

说到制作动画效果,当然离不开定时器的运用。通常的方法就是使用window.setTimeout来不断地定位页面上的元素。但是,如果页面上有多个动画要显示,是不是就要设定多个定时器呢?答案是No!原因很简单:定时器功能将消耗掉大量宝贵的系统资源。可是我们仍能在页面上控制多个动画,技巧就是使用一个循环。在循环中根据不同的变量值控制相应动画的位置,整个循环中只使用一个window.setTimeout()函数调用。

Visibility快于Display

让图画时隐时现会创造很有趣的效果,有2种方法可以实现这个目的:使用CSS的visibility属性或者display属性。对于绝对位置元素,diaplay和visibility具有同样的效果。两者的区别在于:设置为display:none的元素将不再占用文档流的空间,而设置为visibility:hidden的元素仍然保留原位置。

但是如果要处理绝对位置的元素,使用visibility会更快。

从小处着手

编写DHTML网页的一个重要提示是:从小处着手。初次编写DHTML页面时,一定不要试图在页面中使用你了解到的全部DHTML功能。每次可以只使用一个单一的新特征,并且仔细地观察由此产生的变化。如果发现性能有所下降,就可以快速地找到为什么。

脚本的DEFER化

DEFER是脚本程序强大功能中的一个“无名英雄”。你可能从没有使用过它,但是看完这里的介绍后,相信你就离不开它。它告诉浏览器Script段包含了无需立即执行的代码,并且,与SRC属性联合使用,它还可以使这些脚本在后台被下载,前台的内容则正常显示给用户。

<SCRIPT DEFER>
function UsedLater()
{
// 用户与页面交互操作时才使用到的函数
}
</SCRIPT>

<SCRIPT>
// 立即要执行的脚本程序
document.write(“<H1>Immediate Gratification</H1>”);
</SCRIPT>

最后请注意两点:

1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。

2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

保持同一URL的大小写一致性

我们都知道UNIX服务器是大小写敏感的,但是你知道吗:Internet Explorer的缓冲区也是区别对待大小写字符串的。因此,作为web开发者,一定要记住保持相同链接的URL字符串在不同位置的大小写的一致性。否则,就会在浏览器的缓冲区中存放同一位置的不同文件备份,也增加了下载同一位置内容的请求次数。这些都无疑降低了web访问效率。所以请谨记:同一位置的URL,在不同页面中请保持URL字符串的大小写一致性。

让标记有始有终

自己编写或者查看他人的HTML代码时,我们一定都遇到过标记有头无尾的情况。比如:

<P>有头无尾标记举例
<UL>
<LI>第一个
<LI>第二个
<LI>第三个
</UL>

很明显,上面的代码中缺少三个</LI>结束标记。但是这并不妨碍它的正确执行。在HTML中,这样的标记还有一些,例如FRAME、IMG和P。

可是请不要偷懒,请将结束标记写完整,这样做不仅使HTML代码格式规范,更可以加速页面的显示速度。因为Internet Explorer将不会花费时间判断和计算段落或者列表项目在哪里结束。

<P>有头有尾标记举例</P>
<UL>
<LI>第一个</LI>
<LI>第二个</LI>
<LI>第三个</LI>
</UL>

OK,以上列举了有关加速HTML页面的10个处理技巧,描述这些很简单,但是只有真正领会并掌握其中的本质,并且举一反三,才会编写出更快、更好的程序。

30个为网页设计者和开发人员精选的Firefox扩展插件

原文:30 Best Firefox add-ons

翻译:帕兰

30个为网页设计者和开发人员精选的Firefox扩展插件

Dejan Cancarevic是一名优秀的网页设计者和开发人员,下面他精选了30个他经常使用的Firefox插件,这些插件都能很好的帮助网页设计者和开发人员,简化工作量,或是增加设计应用功能等等。

1. CSSMate – 在线的CSS编辑器扩展插件

2. ViewSourceWith – 让你查看页面资源的Firefox扩展应用

3. PicLens – 变换你的浏览器为一个三维的浏览环境来查看网页图片的Firefox扩展插件

4. FireShot -强大的网页截图/截屏插件

5. SeoQuake – 搜索引擎优化和网站推广插件

6. Font Finder -简单的高亮一个事件并且左键点击弹出菜单可以查看CSS样式

7. Live HTTP Headers – 在浏览网页的同时查看一个页面的HTTP头部信息

8. Modify Headers – 允许你添加、修改或过滤http头部请求信息的Firefox扩展插件

9. CSSViewer -一个简单实用的扩张,可以让你查看当前网页中任何部分的CSS代码

10. EditCSS – 只需要右键点击就可以在浏览器的侧边栏中查看和编辑样式表代码

11. Firebug – 查看,编辑和跟踪 网页上面的CSS, HTML和Javascript的Firefox插件

12. View Formatted Source -为网页上的每一个元素格式化并使用不同的颜色高亮显示

13. Professor X -让你不看源代码就能看到页面头部信息的Firefox插件

14. CSS validator – 一键检查当前网页是否符合W3C CSS 标准的验证器插件

15. Validaty -提供给你一个类似于validator.w3.org的校验器按钮

16. Html Validator – 添加HTML校验器

17. Copy as HTML Link -给选中的文本创建一个当前页面的HTML链接

18. TableTools – 过滤、排序 HTML表格等的Firefox扩展插件

19. CHM Reader – 让Firefox支持HTML编译文件的Firefox扩展插件

20. PageDiff – 帮助网页设计者和开发人员在不同的网页之前查看页面源代码

21. Clipmarks – 让你保存当前页面中的任何元素的Firefox插件

22. SourceEditor – 查看和编辑HTML元素代码的Firefox扩展插件

23. Total Validator -使用官方DTDs提供一个真正的HTML检查器的Firefox扩展插件

24. LinkChecker – 检查任何网页上面的有效链接的Firefox扩展插件

25. Web Developer – 添加一个菜单和工具栏,包含各种网页开发工具的Firefox扩展插件

26. Style Sheet Chooser II – 让你选择网站作者为网站提供的候补风格的Firefox扩展插件

27. View Dependencies -显示网页上面所有被装载的元素信息的Firefox扩展插件

28. Accessibar – 可以轻松地操纵网页显示和文本语音输出的Firefox扩展插件

29. Aardvark – 用来清楚网页的冗余信息和打印网页等功能的Firefox扩展插件

30. JSview – 添加能够查看外部档案源代码的功能

[转贴]DWMX设计360度全景滚动效果图

网页上欣赏到360度的全景照片是一件很有趣的事,不要担心制作过程会很复杂,我们在这里介绍一种最简单的方法,同样可以达到效果,学起来很容易,只要会一点点html和css的基本语法就足够了。
 
注意:这个效果只有用IE浏览器才能看到。下面我们来看看整个的制作过程:

第一步:准备一张全景图片。

您可以自己拍也可以从网上下载。当然如果您摄影技术足够高的话我还是建议你自己拍一张(题材如家庭居室的全景等),这样显得更加生动一些;如果你和我一样是个摄影菜鸟,那么还是在网上找一幅吧,如果也不是那么好找,我这里提供给你两幅照片:

国忌日将网站变灰的方法

1、首页

    首页建议不要加滤镜,这样会影响网站的访问速度,建议重新创建一个css文件将文字图片全部变成灰色。

2、非首页

    使用css的滤镜效果

<style>html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>

这段话单独使用,不要将其中的内容嵌入其他style中,同时将网页的头改成

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

或者

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

就可以实现了,但是该方法只支持IE以及使用IE核心的浏览器,不支持firefox。

CSS简单笔记

一、加入样式表到HTML文档
1、内联样式
<p style=”color: #F00″>
2、内嵌样式
<style type=”text/css”>p {color: #F00;}</style>
3、外部样式
<link rel=”stylesheet”type=”text/ css” href=”external.css”/>
4、样式表适用的环境
所有流行的浏览器都支持最普通的media属性。该属性可以应用到<link>元素中来确定样式表适用的环境。比如:
<link rel=”stylesheet” media=”handheld” type=”text/ css” href=”external.css”/>
说明样式表适用于手持设备。media支持的属性值有screen,print,all等

二、样式表的语法
CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。
基本格式如下:
selector {property: value} ,多个属性/值对必须由分号隔开。

选择符可以是多种形式:
1、要定义样式的HTML标记,例如BODY、P、TABLE……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:
body {color: black}
2、类选择符,以点号开头,比如
.right {text-align: right}
应用类选择符到标记
在标记的class属性中填入类的名称,注意不要点号。如:
<div class=”dreamdu1″>连接div标签与dreamdu1样式<div>
<div class=”dreamdu12px dreamdublack dreamdubold”>使用空格分开多个样式连接div标签<div>

3、ID选择符

在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式,样式只应用于ID参数指定的元素。例如:
<p id=”intro”>
这个段落向右对齐
</p>
定义ID选择符要在ID名称前加上一个“#”号。下面这个例子,ID属性将匹配所有id=”intro”的元素:
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

将ID和选择器结合
h2#title{

}
标识应用于ID属性为title的h2标记

4、选择符组

你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:
h1, h2, h3, h4, h5, h6 { color: green }

5、包含选择符

可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,
table a
{
font-size: 12px
}

三、样式表层叠
样式表层叠指可以将多个样式表应用到同一个页面元素,该元素展现所有应用的样式,对于多个样式表中重复定义的部分,高层样式将覆盖低层样式。最高层的样式是内联样式,其次是内嵌式样式,最后是外部样式。可以使用内联或内嵌式样式表覆盖外部定义的样式表。
对于外部定义的样式表,按照加入的顺序层次逐渐变高,最有加入的外部样式表在外部样式中具有最高的层次。
比如,依次加入如下样式表:
<link rel=”stylesheet”type=”text/ css” href=”first.css”/>
<link rel=”stylesheet”type=”text/ css” href=”second.css”/>
<link rel=”stylesheet”type=”text/ css” href=”third.css”/>
最后一个链接样式表(third.css)层次最高,优先执行它所包含的所有规则。任何在third.css中没有定义的规则则按照第二个样式表(second.css)执行,以此类推。third.css中定义的样式将覆盖在first.css或second.css中定义的同名样式。

四、样式表继承
在Html元素中,子元素将继承赋予父元素的特定CSS值。

五、样式表的组织
大型工程中可能会存在多个样式表,如何组织这些样式表呢?
1、文件夹方式
css
–default
—-default.css
–user
—-register.css
—-login.css
–news
—-news.css
将样式表按照对应的网站模块分门别类的存放。

2、应用import属性
@import url(“default.css”);
@import url(“news.css”);
 

好东西

www.adobecs4.com.cn        AdobeCS4系列软件

www.52css.com              学习CSS的好地方

http://www.kongser.com/    这个论坛很不错

http://www.nipic.com/      昵图网(卡片网)

http://www.fscyt.com/      名片模板网

http://jquery.com/         Jquery网

http://www.360buy.com/     京东商城

http://www.mingpian.org/article/    名片网

http://www.batchcard.com/index.html 贝卡网

http://im.qq.com/  模拟制作其效果

http://im.qq.com/doctor/index.shtml    模拟制作其效果