JavaScript Advanced 2 CSS XML 학습_기본지식-JS 튜토리얼-php.cn

CSS의 전체 이름은 계단식 스타일 시트(Cascading Style Sheet)이고 중국어 이름은 계단식 스타일 시트(Cascading Style Sheet)라고도 합니다. 코드를 깔끔하게 만들 수 있고 일부 스타일을 일괄 처리할 수 있다는 장점이 있습니다.
기본 구문:
주석 기호: /* */
선택기 기호: 선택기 {속성:값} 동일한 속성의 값은 공백으로 구분되며, 서로 다른 속성의 값은 세미콜론으로 구분됩니다. 대소문자를 구분합니다.
예를 들어 페이지의 테이블 스타일을 커스터마이즈하고 싶다면 table {...;...;}라고 씁니다.
선택기를 사용하는 방법이 다양해서 너무 게을렀습니다. 다시 입력하세요. 인터넷에서 복사했습니다:

선택 모드	설명
*	은 모든 요소와 일치합니다. (범용 선택자)
에	은 E 요소(예: E 유형 요소)와 일치합니다. (유형 선택기)
EF	요소 E의 하위 요소 F와 일치합니다. (하위 선택자)
E > F	요소 E의 하위 요소 F와 일치합니다. (하위 선택자)
E:첫째	E 요소가 상위 요소 내의 첫 번째 하위 요소인 경우 요소 E와 일치합니다. (:첫째 의사 클래스)
E:링크 E:방문	E가 대상을 방문하지 않았거나(:link) 방문한(:visited) 하이퍼링크의 소스 앵커인 경우 요소 E와 일치합니다. (링크 의사 클래스)
E:활성 E:호버 E:초점	특정 사용자 작업에서 E와 일치합니다. (동적 의사 클래스)
E:lang(c)	(인간) 언어 c에 있는 경우 유형 E의 요소와 일치합니다(문서 언어에 따라 언어가 결정되는 방식이 결정됨). (:lang() 의사 클래스)
EF	E 요소가 F 요소 바로 앞에 있는 경우 F 요소를 일치시킵니다. (근접 선택기)
E[속성]	값에 관계없이 "attr" 속성 세트가 있는 모든 요소 E와 일치합니다. (속성 선택기)
E[attr="경고"]	"attr" 속성 값이 "warning"과 정확히 동일한 모든 요소 E와 일치합니다. (속성 선택기)
E[attr~="경고"]	"attr" 속성 값이 공백으로 구분된 값 목록이고 그 중 하나가 "warning"과 엄격하게 동일한 모든 요소 E와 일치합니다.(属性选择器)
E[lang\|="en"]	匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)
DIV.warning	仅 HTML。用法同 DIV[class~="warning"]。(类选择器)
E#myid	匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)

사용하면서 자세히 설명하겠습니다.
CSS 우선순위: 동일한 페이지 또는 CSS 파일에 동일한 요소에 대한 여러 정의가 있는 경우가 있는데, 이 경우 우선순위에 따라 렌더링해야 합니다. 우선순위는 외부에서 정의된 스타일의 우선순위와 기타 스타일의 우선순위로 구분됩니다.
외부 정의 스타일의 우선순위: 특정 알고리즘에 대해서는 이야기하지 않습니다. 여기서는 간단히 결과에 대해 이야기하겠습니다. id 선택기>클래스 선택기>속성 선택기>의사 클래스 선택기>요소 선택기>의사 요소 선택기>글로벌 선택기>기타
다른 스타일 정의의 우선순위: 텍스트 내 스타일, 즉 스타일=... 요소에서 이것은 가장 고급이며 모든 외부 정의 스타일보다 우선합니다. "!important"는 버전마다 사용법이 다르기 때문에 자세히 설명하지 않겠습니다. 필요한 경우 확인하시기 바랍니다. 상속을 통해 얻은 스타일: 우선순위가 가장 낮은 스타일입니다.
CSS 속성: http://www.jb51.net/w3school/css/css_reference.htm 참고하세요 (야 이거 너무 무책임하다! 가을)
CSS 유닛: http://www.jb51 . net/w3school/css/css_units.htm (Blogger, 너 정말 패배자야! 추락!)
(못들은 척)
지원링크에 들어가자(￣︶￣)
1. 현재 페이지의 스타일:

코드 복사 코드는 다음과 같습니다.

css 테스트

title:
	textarea name= "content" class="userData" cols="45"rows="10">

🎜>< ;body>

2. CSS 스타일 파일 삽입:
프로젝트 아래에 새 CSS 폴더를 만든 다음 style.css라는 이름의 새 CSS 파일을 만듭니다. 물론 이것은 단지 예시일 뿐이므로 지금은 예시의 내용만 작성했습니다.

코드 복사

코드는 다음과 같습니다. .tableStyle{ background:yellow; font-size:14px;

font-weight:bold;

border:1px solid #000000 

인용하기도 쉽습니다. 한 줄 추가: 
 
rel은 추가할 CSS 스타일 시트 파일을 지정하고 다음을 입력합니다. 파일 형식을 지정합니다. href는 파일의 실제 주소입니다. 
3 CSS 스타일을 동적으로 수정합니다.

마지막으로 js와 관련이 있습니다.
이 수정 방법은 요소를 가져오고 해당 속성을 수정하는 것 이상입니다. 한 가지 언급할 점은 링크의 속성도 수정할 수 있다는 것입니다.
예: ID가 myStyle인 링크를 작성한 후 가져오기 파일을 수정하는 방법은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. 🎜>

자, XML 부분부터 시작하겠습니다
(블로거 당신의 성실함은 어디에 있나요? ! )
정말 XML을 자세히 배우고 싶다면 다른 시리즈를 시작해도 됩니다. . 그러므로 여기서는 이에 대해 간략하게 이야기하겠습니다.
xml의 전체 이름은 확장 가능한 마크업 언어입니다. 이는 데이터를 더 잘, 더 유연하게, 더 광범위하게 설명하기 위해 존재합니다. 거의 모든 태그는 사용자 정의가 가능합니다.
예를 들어, 책에 대한 정보를 저장하려는 경우 다양한 방법으로 저장할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

 
.... 
....저자> 
 .. 
 
<속성 이름="이름" 값=" ...."/>

XML에는 다음과 같은 몇 가지 죽은 규칙이 있습니다.
선언문이 있어야 합니다 인코딩과 같은 다른 속성이 있을 수 있습니다.
xml을 제외한 모든 요소는 닫혀 있어야 합니다. 즉, />가 있어야 합니다.
속성 값은 따옴표로 묶어야 합니다.
대소문자를 구분합니다.
문자로 이름을 태그하세요. "_" 및 ":"으로 시작하고 문자, 숫자, 마침표, 콜론 및 밑줄이 뒤에 올 수 있습니다.
루트 노드는 하나만 있습니다.
XPath
XPath는 XML 파일에서 정보를 찾고 찾는 데 사용되는 언어입니다. 트리의 요소와 속성을 순회할 수 있습니다.
모두가 숫자가 무엇인지 알고 있습니다. 사실 여기서 이야기하고 있는 것은 단지 xpath의 구문에 관한 것입니다.
xpath의 구문은 http://www.jb51.net/w3school/xpath/xpath_syntax.htm을 참조하세요.
"XPath 구문", "XPath 축", "XPath 연산자"를 간략하게 살펴보고 다음을 참조하세요. 위 웹페이지의 Manual 열 아래에 있는 "XPath Functions"를 참조하세요.
대충 탐색한 후 연습의 다음 부분을 시작할 수 있습니다.
먼저 xml 파일 제공:

코드 복사 코드는 다음과 같습니다.

接下来是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
before 예제에서는 모든 하위 노드를 반환하는 효과를 보여주기 위해 조건부 선택을 사용하지 않았습니다. 결국 이것이 일반적으로 사용됩니다.

XML 파일을 변환하는 데 사용되는 언어인 XSLT라는 개념이 여기에 언급되어 있습니다. 전체 이름은 확장 가능한 스타일시트 언어 변환입니다. XSLT는 XPath를 빌려 xml 문서에서 정보를 찾습니다. xml 파일에 저장된 내용을 지정된 스타일에 따라 html 페이지로 표시할 수 있습니다.

특별히 관심이 있는 학생들은 확인해봐도 되지만 저는 어차피 관심이 없습니다. . ╮(╯▽╰)╭

드디어 xml의 마지막 개념인 data island

에 도달했습니다. 이는 실제로 페이지에 CSS와 마찬가지로 xml 데이터 정보가 포함될 수 있음을 의미합니다. 내부적으로는 ...... 외부에서도 가져올 수 있습니다: >data of xml data island html 태그에 대한 바인딩은 datasrc와 datafld를 통해 완료했는데 실행해본 결과 코드가 실행되지 않아서 당분간은 이대로 두고 나중에 보완하도록 하겠습니다. 코드를 완성하세요.