cari
Rumahhujung hadapan webtutorial jsjavascript 进阶篇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.jb51.net/w3school/css/css_reference.htm (喂这也太不负责了吧!摔)
CSS单位: http://www.jb51.net/w3school/css/css_units.htm (博主你简直就是个废柴啊!摔!)
(假装没听见)
下面来进入应用环节 ( ̄︶ ̄)
1.当前页面嵌入css样式:
复制代码 代码如下:



css test












title:
content:



2.嵌入css样式文件:
我们在工程下新建一个css文件夹,然后新建一个css文件,取名为style.css。这样做是为了代码能整齐,当然因为这里只是个例子于是里面的内容我只写了刚才例子里的东西。
javascript 进阶篇2 CSS XML学习_基础知识
复制代码 代码如下:

.tableStyle{
background:yellow;
font-size:14px;
font-weight:bold;
border:1px solid #000000

引用的时候也很容易,只需要加一行:

rel指定加入的是css样式表文件,type指定文件类型,href则是文件的物理地址。
3 动态修改css样式。
终于,跟js扯上关系了。
这个修改的方法无外乎取到元素然后修改属性。要提的一点是,link的属性也可以修改。
比如:写一个link的id是myStyle,然后修改它的导入文件,方法是这样的:
复制代码 代码如下:




好的接下来开始XML部分
(博主你的节操呢?!!)
xml如果真要详细学可以再开一个系列了。。于是,我们这里就是简约的说一下。
xml的全称是:extensible markup language,它的存在时为了更好的,更灵活而广泛的描述数据。他的标签几乎全部可以由用户定义。
比如我们要存储一个关于书的信息,可以有不同的存储方式:
复制代码 代码如下:


.....
....
...





.


xml还有几个死的规定:
必须有声明语句 当然里面可以有别的比如encoding之类的属性。
所有的xml以外的元素都必须是封闭的,也就是必须要有/>
属性值必须包含在引号里。
区分大小写
标记名字以字母。“_”,“:”开头,后面可以跟字母,数字,句点,冒号,下划线。
只有一个根节点。
XPath
XPath是用来在XML文件中查找信息并且定位的语言。它可以遍历树中的元素和属性。
数是什么大家都懂的,其实说到这里也就是讲讲xpath的语法而已。
关于xpath的语法请看http://www.jb51.net/w3school/xpath/xpath_syntax.htm
请大致浏览上述网页的“XPath 语法” “XPath 轴” “XPath 运算符” 以及参考手册一栏下的“XPath 函数”。
大致浏览过后,就可以开始这部分的练习了:
首先给一个xml文件:
复制代码 代码如下:





Harry Potter
J K. Rowling
2005
29.99


Everyday Italian
Giada De Laurentiis
2005
30.00


Learning XML
Erik T. Ray
2003
39.95


XQuery Kick Start
James McGovern
Per Bothner
Kurt Cagle
James Linn
Vaidyanathan Nagarajan
2003
49.99



(从网站copy来的,复制请保留权限。)
在IE和FF中的使用稍有不同,这点比较麻烦,先来IE的:这段代码中再次重申:script写在table后面,否则它在编译js的时候,不知道那句innerText该往哪里加载,因为还没有渲染到table的地方。完整代码如下做参考:
XML in IE
复制代码 代码如下:



xml test











book name:
book author:





接下来是FF的:
复制代码 代码如下:



xml test











book name:
book author:





xml在FF中的读取网上的资源很少,我找了好多也没找到可以读到结点值的,于是我用debug在ff浏览器下观察了好久,终于找到了 author.childNodes[0].nodeValue 这一句。
XML文件在firefox浏览器下的读取主要有两个类实现,一个是XPathEvaluator, XPathResult。其实就是用XPathEvaluator查找,然后在XPathResult里存储查找结果。可以看到我的代码里用XPathEvaluator查找的部分,那个函数evaluate的参数非常多,但是必须要了解这个函数才行,摘取下别人的东西(原内容点这里):
函数:evaluate(xpathText,contextNode,namespaceURLMapper,resultType,result)
参数 描述
xpathText 表示要计算的 XPath 表达式的字符串。
contextNode 文档中,对应要计算的表达式的节点。
namespaceURLMapper

把一个命名空间前缀映射为一个全称命名空间 URL 的函数。

如果不需要这样的映射,就为 null。

resultType

指定了期待作为结果的对象的类型,使用 XPath 转换来强制结果类型。

类型的可能的值是 XPathResult 对象所定义的常量。

result

一个复用的 XPathResult 对象;

如果你要创建一个新的 XPathResult 对象,则为 null。

注意,resultTypt有很多种参数值,继续抄来:
返回类型 说明
ANY_TYPE 把这个值传递给 Document.evaluate() 或 XPathExpression.evaluate() 来指定可接受的结果类型。属性 resultType 并不设置这个值。
NUMBER_TYPE numbervalue 保存结果。
STRING_TYPE stringvalue 保存结果。
BOOLEAN_TYPE booleanValue 保存结果。
UNORDERED_NODE_ITERATOR_TYPE 这个结果是节点的无序集合,可以通过重复调用 iterateNext() 直到返回 null 来依次访问。在此迭代过程中,文档必须不被修改。
ORDERED_NODE_ITERATOR_TYPE 结果是节点的列表,按照文档中的属性排列,可以通过重复调用 iterateNext() 直到返回 null 来依次访问。在此迭代过程中,文档必须不被修改。
UNORDERED_NODE_SNAPSHOT_TYPE 结果是一个随机访问的节点列表。snapshotLength 属性指定了列表的长度,并且 snapshotItem() 方法返回指定下标的节点。节点可能和它们出现在文档中的顺序不一样。既然这种结果是一个“快照”,因此即便文档发生变化,它也有效。
ORDERED_NODE_SNAPSHOT_TYPE 这个结果是一个随机访问的节点列表,就像 UNORDERED_NODE_SNAPSHOT_TYPE,只不过这个列表是按照文档中的顺序排列的。
ANY_UNORDERED_NODE_TYPE singleNodeValue 属性引用和查询匹配的一个节点,如果没有匹配的节点则为 null。如果有多个节点和查询匹配,singleNodeValue 可能是任何一个匹配节点。
FIRST_ORDERED_NODE_TYPE singleNodeValue 保存了文档中的第一个和查询匹配的节点,如果没有匹配的节点,则为 null。
(虽然是抄的,可是复制神马的也很辛苦的=w=)

除了这些之外,xml文件结点其实还可以增加条件,比如只要第一个符合条件的结点:

/bookstore/book[1]/title
或者价格高于35的:

/bookstore/book[price>35]/price
之前的例子里不用条件选取是我想示范一下返回所有子结点的效果,毕竟这才是常用的。



这里提到一个概念叫做XSLT,这是一个用来转换xml文件的语言,全称是:extensible stylesheet language transformation。XSLT借用XPath在xml文档中寻找信息,它可以将xml文件中存放的内容按照指定样式显示为html页面。

具体有兴趣的同学可以查查看,反正我是没兴趣。。╮(╯▽╰)╭

终于,到了xml的最后一个概念:数据岛

其实就是指页面包含了xml数据信息,跟css一样,可以内部镶嵌,办法就是...... 也可以外部引入:

xml数据岛的数据与html标签的绑定,通过datasrc, datafld来完成,但是我试来试去也没有一个代码能运行,于是就暂时这样吧,等我把代码弄好再回来补充好了。
Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Persekitaran pembangunan bersepadu PHP yang berkuasa

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular