javascript 进阶篇2 CSS XML

CSS我觉得应该没有不会的吧。。不过因为我自己不大会于是还是补在这里好了。

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.w3school.com.cn/css/css_reference.asp (喂这也太不负责了吧！摔)
CSS单位: http://www.w3school.com.cn/css/css_units.asp (博主你简直就是个废柴啊！摔！)
(假装没听见)
下面来进入应用环节 (￣︶￣)
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="css/style.css" />
复制代码
rel指定加入的是css样式表文件，type指定文件类型，href则是文件的物理地址。
3 动态修改css样式。
终于，跟js扯上关系了。
这个修改的方法无外乎取到元素然后修改属性。要提的一点是，link的属性也可以修改。
比如：写一个link的id是myStyle，然后修改它的导入文件，方法是这样的：
<link rel="stylesheet" id="myStyle" type="text/css" href="css/style.css">

var styleObj=document.getElementById("myStyle");
styleObj.styleSheet.cssText="";//清除原有样式
styleObj.styleSheet.addImport("css/style2");
</script>

________________________________________
好的接下来开始XML部分
（博主你的节操呢？！！）
xml如果真要详细学可以再开一个系列了。。于是，我们这里就是简约的说一下。
xml的全称是：extensible markup language，它的存在时为了更好的，更灵活而广泛的描述数据。他的标签几乎全部可以由用户定义。
比如我们要存储一个关于书的信息，可以有不同的存储方式：
<book>
<name>.....</name>
<author>....</author>
<publisher>...</publisher>
</book>

<book>
<property name="name" value="....."/>
<property name="author" value="..."/>
<property name="publisher" value="...."/>.
</book>

xml还有几个死的规定：
• 必须有声明语句<?xml cersion="1.0"?> 当然里面可以有别的比如encoding之类的属性。
• 所有的xml以外的元素都必须是封闭的，也就是必须要有/>
• 属性值必须包含在引号里。
• 区分大小写
• 标记名字以字母。“_”，“:”开头，后面可以跟字母，数字，句点，冒号，下划线。
• 只有一个根节点。
XPath
XPath是用来在XML文件中查找信息并且定位的

补充：web前端 , JavaScript ,