javascript 进阶篇2 CSS XML学习


答案：CSS全称是cascading style sheets，中文名字叫级联样式单，也叫层叠样式表。它的好处就是能让代码整齐，并且可以批量处理一些样式。 
基本语法： 
注释符：/* */ 
选择符：selector {attribute:value} 同一个属性的值用空格符号隔开，不同属性用分号隔开。 区分大小写。 
比如要给页面中的table定制样式，则写table {.....;.....;} 
选择符的使用方法有很多种，于是我又一次懒得打，从网上抄来的： 




选择符模式
说明

*
匹配任意元素。(通用选择器)

E
匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器)

E F
匹配元素 E 的任意后代元素 F 。(后代选择器)

E > F
匹配元素 E 的任意子元素 F 。(子选择器) 

E:first-child
当元素 E 是它的父元素中的第一个子元素时，匹配元素 E 。(:first-child 伪类)

E:link E:visited
如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类)

E:active E:hover E:focus
在确定的用户动作中匹配 E 。(动态伪类)

E:lang(c)
如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的)，则匹配该元素。(:lang() 伪类)

E + F
如果一个元素 E 直接在元素 F 之前，则匹配元素 F 。(临近选择器)

E[attr] 
匹配具有”attr”属性集(不考虑它的值)的任意元素 E 。(属性选择器)

E[attr="warning"] 
匹配其“attr”属性值严格等于“warning”的任意元素 E 。(属性选择器)

E[attr~="warning"]
匹配其“attr”属性值为空格分隔的值列表，并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)

E[lang|="en"]
匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)

DIV.warning
仅 HTML。用法同 DIV[class~="warning"]。(类选择器)

E#myid
匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)
用到的时候再详细解释吧。 
CSS优先级：同一个页面或者css文件里，有时候会对同一个元素有多个定义，这就需要根据优先级来渲染了。优先级分为 外部定义样式的优先级与其他样式的优先级。 
外部定义样式的优先级：具体怎么算法就不说了，这里单纯说结果：id选择符>类选择符>属性选择符>伪类选择符>元素选择符>伪元素选择符>全局选择符>其他 
其他样式定义的优先级：文内样式，也就是在元素里面的style=...，这个是最最高级的，优先于所有的外部定义样式。"!important" 这个在不同版本用法有偏差，也就不具体说了，需要的时候查吧。通过继承得到的样式：这个是优先级最低的样式。 
CSS属性：请参考http://www.zzzyk.com/w3school/css/css_reference.htm (喂这也太不负责了吧！摔) 
CSS单位: http://www.zzzyk.com/w3school/css/css_units.htm (博主你简直就是个废柴啊！摔！) 
(假装没听见) 
下面来进入应用环节 (￣︶￣) 
1.当前页面嵌入css样式： 
复制代码 代码如下:
 
<html> 
<head> 
<title>css test</title> 
<style> 
.tableStyle{ 
background:yellow; 
font-size:14px; 
font-weight:bold; 
} 
</style> 
</head> 
<body> 
<table width="400" align="center" class="tableStyle"> 
<tr> 
<td>title:</td> 
<td><input type="text" name="title" size="50"></td> 
</tr> 
<tr> 
<td>content:</td> 
<td><textarea name="content" class="userData" cols="45" rows="10"></textarea></td> 
</tr> 
</table> 
<body> 
 
2.嵌入css样式文件： 
我们在工程下新建一个css文件夹，然后新建一个css文件，取名为style.css。这样做是为了代码能整齐，当然因为这里只是个例子于是里面的内容我只写了刚才例子里的东西。 

复制代码 代码如下:
 
.tableStyle{ 
background:yellow; 
font-size:14px; 
font-weight:bold; 
border:1px solid #000000 
 
引用的时候也很容易，只需要加一行： 
<link rel="stylesheet" type="text/css" href=>rel指定加入的是css样式表文件，type指定文件类型，href则是文件的物理地址。 
3 动态修改css样式。 
终于，跟js扯上关系了。 
这个修改的方法无外乎取到元素然后修改属性。要提的一点是，link的属性也可以修改。 
比如：写一个link的id是myStyle，然后修改它的导入文件，方法是这样的： 
复制代码 代码如下:
JavaScript异步调用定时方法并停止该方法实现代码
下一个：使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
更多图片编程知识:
用js检测两个线段是否相交

国内首发 -- ajax完整功能框架

JScript中的undefined和"undefined"的区别

ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合一：构建项目框架

JS编辑器获取选择内容的HTML多浏览器兼容性写法（支持Chorme、Firefox） 

轻量级的jQuery表单验证插件 - HAPPY.js
  
更多JS疑问解答：
几个验证11位手机号码格式的js代码
js如何获得FCKeditor控件的值
用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
JS验证，这块“牛皮”反复修改都不能实现
在JS中使用DOM模型
如何用JS 获取本地文件夹的文件列表
js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
求实现自动生成图片缩略图的JS代码
JS脚本网页问题
js，代码中"object"和"Object"区别？
js+flash实现网页图片切换效果，出现边框，单击激活此控件。
JS怎样操作PHP中的参数
js 怎么在一打开页面就加载这个函数。
Date.parse()的问题(js)
<script src="/{maxcms:sitepath}js/common.js"></script>是什么意思

选择符模式	说明
*	匹配任意元素。(通用选择器)
E	匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器)
E F	匹配元素 E 的任意后代元素 F 。(后代选择器)
E > F	匹配元素 E 的任意子元素 F 。(子选择器)
E:first-child	当元素 E 是它的父元素中的第一个子元素时，匹配元素 E 。(:first-child 伪类)
E:link E:visited	如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类)
E:active E:hover E:focus	在确定的用户动作中匹配 E 。(动态伪类)
E:lang(c)	如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的)，则匹配该元素。(:lang() 伪类)
E + F	如果一个元素 E 直接在元素 F 之前，则匹配元素 F 。(临近选择器)
E[attr]	匹配具有”attr”属性集(不考虑它的值)的任意元素 E 。(属性选择器)
E[attr="warning"]	匹配其“attr”属性值严格等于“warning”的任意元素 E 。(属性选择器)
E[attr~="warning"]	匹配其“attr”属性值为空格分隔的值列表，并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)
E[lang\|="en"]	匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)
DIV.warning	仅 HTML。用法同 DIV[class~="warning"]。(类选择器)
E#myid	匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)