The full name of CSS is cascading style sheets. The Chinese name is Cascade style sheet, also called cascading style Sheet. The advantage is that the code can be neatly organized and some styles can be processed in batches.
Basic Syntax:
Annotator :/**/
Selector {attribute: value}: Values of the same attribute are separated by space characters. different attributes are separated by semicolons. Case sensitive.
For example, if you want to customize a style for the table on the page, write table {.....;.....;}
There are many ways to use the selector, So I once again was too lazy to copy it from the Internet:
| Select Character Mode |
Description |
| * |
Match any element. (General selector) |
| E |
Matches any element E (for example, an element of the E type ). (Type selector) |
| E F |
Matches any descendant element F of Element E. (Descendant selector) |
| E> F |
Matches any child element F of Element E. (Sub-Selector) |
| E: first-child |
When Element E is the first child element in its parent element, it matches Element E. (: First-child pseudo class) |
| E: link E: visited |
If E is the source anchpoint of a hyperlink that has not been accessed (: link) or has been accessed (: visited), it matches Element E. (Link pseudo class) |
| E: active E: hover E: focus |
Matches E in the specified user action. (Dynamic pseudo class) |
| E: lang (c) |
If an element of Type E uses (human) Language c (document language determines how the language is determined), it matches the element. (: Lang () pseudo class) |
| E + F |
If an element E is directly before element F, it matches element F. (Near selector) |
| E [attr] |
Matches any element E that has an "attr" attribute set (regardless of its value. (Attribute selector) |
| E [attr = "warning"] |
Matches any element E whose "attr" attribute value is strictly equal to "warning. (Attribute selector) |
| E [attr ~ = "Warning"] |
Matches the list of values whose "attr" attribute values are separated by spaces, and one of them is strictly equal to any element E of "warning. (Attribute selector) |
| E [lang | = "en"] |
Any element E that matches its "lang" attribute with a list of values starting with "en" (from the left. (Attribute selector) |
| DIV. warning |
Only HTML. The usage is the same as that of DIV [class ~ = "Warning"]. (Class selector) |
| E # myid |
Matches any element E whose ID is equal to "myid. (ID selector) |
For more information, see.
CSS priority: in a single page or css file, sometimes multiple definitions are defined for the same element, which needs to be rendered based on the priority. Priorities are classified into the priorities of the externally defined styles and those of other styles.
The priority of the externally defined style: the algorithm is not mentioned here. The result is simply described as follows: id selector> class selector> attribute selector> pseudo-class selector> element selector> pseudo element selector> global selector> others
Priorities of other style definitions: Intra-document styles, that is, the style =... in the element. This is the most advanced style, and takes precedence over all external styles. "! Important "the usage of different versions is biased, so it is not specific. Check it if necessary. Inherited style: This is the style with the lowest priority.
CSS properties: Please refer to the http://www.jb51.net/w3school/css/css_reference.htm (feed this is too irresponsible! Drop)
CSS unit: http://www.jb51.net/w3school/css/css_units.htm (blogger you are simply a waste of wood ah! Fall !)
(Pretend not to hear)
Next we will go to the application process (￣)
1. The current page is embedded with css styles:
Copy codeThe Code is as follows:
<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. embed a css style file:
Create a CSS folder under the project, and then create a CSS file named style.css. This is to make the code neat. Of course, because this is just an example, I only wrote the content in the example.
Copy codeThe Code is as follows:
. TableStyle {
Background: yellow;
Font-size: 14px;
Font-weight: bold;
Border: 1px solid #000000
It is also easy to reference. You only need to add one line:
<Link rel = "stylesheet" type = "text/css" href = "css/style.css"/>
Rel specifies that the css style table file is added, type specifies the file type, and href specifies the physical address of the file.
3. Modify the css style dynamically.
Finally, it is related to js.
This modification method gets the element and then modifies the attribute. The link attribute can also be modified.
For example, if the id of a link is myStyle and its import file is modified, the method is as follows:
Copy codeThe Code is as follows:
<Link rel = "stylesheet" id = "myStyle" type = "text/css" href = "css/style.css">
<Script tyle = "text/javascript">
// When modifying in javascript:
Var styleObj = document. getElementById ("myStyle ");
StyleObj.styleSheet.css Text = ""; // clear the original style
StyleObj. styleSheet. addImport ("css/style2 ");
</Script>
Okay. Let's start with the XML section.
(What about your exercises ?!!)
If you really want to learn xml in detail, you can start another series .. So here is a simple introduction.
The full name of xml is extensible markup language, which can be used to describe data more flexibly and extensively. Almost all of its labels can be defined by users.
For example, there are different storage methods for storing information about books:
Copy codeThe Code is as follows:
<Book>
<Name>... </name>
<Author>... </author>
<Publisher>... </publisher>
</Book>
<! -- Or -->
<Book>
<Property name = "name" value = "..."/>
<Property name = "author" value = "..."/>
<Property name = "publisher" value = "..."/>.
</Book>
Xml also has several dead rules:
A declaration statement is required. <? Xml cersion = "1.0"?> Of course, there can be other attributes such as encoding.
All elements other than xml must be closed, that is, they must have/>
Attribute values must be enclosed in quotation marks.
Case Sensitive
The name is a letter. "_", ":", Followed by letters, numbers, periods, colons, and underscores.
There is only one root node.
XPath
XPath is a language used to find and locate information in an XML file. It can traverse the elements and attributes in the tree.
Everyone knows about the number. Here we talk about the xpath syntax.
See the http://www.jb51.net/w3school/xpath/xpath_syntax.htm for the syntax of xpath
Go to the "XPath Syntax", "XPath axis", and "XPath operator" on the above page and refer to "XPath functions" in the column of the manual ".
You can start this part of the exercise after you have browsed it:
First, give an xml file:
Copy codeThe Code is as follows:
<! -- Copyright w3school.com.cn -->
<! -- W3School.com.cn bookstore example -->
<Bookstore>
<Book category = "children">
<Title lang = "en"> Harry Potter </title>
<Author> j k. Rowling </author>
<Year> 2005 </year>
<Price> 29.99 </price>
</Book>
<Book category = "cooking">
<Title lang = "en"> Everyday Italian </title>
<Author> Giada De Laurentiis </author>
<Year> 2005 </year>
<Price> 30.00 </price>
</Book>
<Book category = "web" cover = "paperback">
<Title lang = "en"> Learning XML </title>
<Author> Erik T. Ray </author>
<Year> 2003 </year>
<Price> 39.95 </price>
</Book>
<Book category = "web">
<Title lang = "en"> XQuery Kick Start </title>
<Author> James McGovern </author>
<Author> Per Bothner </author>
<Author> Kurt Cagle </author>
<Author> James Linn </author>
<Author> vaidyan#nagarajan </author>
<Year> 2003 </year>
<Price> 49.99 </price>
</Book>
</Bookstore>
(Copy from the website. You must retain the copy permission .)
The use of IE and FF is slightly different, which is troublesome. Let's start with IE: in this code, I reiterate that the script is written after the table; otherwise, when compiling js, I don't know where to load the innerText, because it hasn't been rendered to the table. The complete code is as follows:
XML in IE
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> xml test </title>
</Head>
<Body>
<Table width = "400" border = "1px" align = "center">
<Tr>
<Td width = "30%"> book name: </td>
<Td> <span id = "bname"> </span> </td>
</Tr>
<Tr>
<Td> book author: </td>
<Td> <span id = "bauthor"> <span> </td>
</Tr>
</Table>
<Script type = "text/javascript">
<! --
Var xmldoc = new ActiveXObject ("MSXML2.DOMDocument. 3.0 ");
Xmldoc. load ("xml/books. xml ");
Var name = xmldoc. selectNodes ("/bookstore/book/title ");
Var author = xmldoc. selectNodes ("/bookstore/book/author ");
Var bname = document. getElementById ("bname ");
Var bauthor = document. getElementById ("bauthor ");
Bname. innerText = name [0]. text;
Bauthor. innerHTML = "<p>" + author [0]. text + "</p> ";
// -->
</Script>
<Body>
</Html>
Next is FF:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> xml test </title>
</Head>
<Body>
<Table width = "400" border = "1px" align = "center">
<Tr>
<Td width = "30%"> book name: </td>
<Td> <span id = "bname"> </span> </td>
</Tr>
<Tr>
<Td> book author: </td>
<Td> <span id = "bauthor"> <span> </td>
</Tr>
</Table>
<Script type = "text/javascript">
<! --
Var xmldoc = document. implementation. createDocument ("", "", null );
Xmldoc. load ("xml/books. xml ")
// XmlDoc. evaluate (xpath, xmlDoc, namespace, XPathResult. ANY_TYPE, XPahrResult );
Var evaluatorObj = new XPathEvaluator ();
Function getBookChild (path ){
Return evaluatorObj.evaluate(path,xmldoc.doc umentElement, null,
XPathResult. ORDERED_NODE_ITERATOR_TYPE, null );
}
Var namelist = getBookChild ("/bookstore/book/title ");
Var name = namelist. iterateNext ();
Var authorlist = getBookChild ("/bookstore/book/author ");
Var author = authorlist. iterateNext ();
Var bname = document. getElementById ("bname ");
Var bauthor = document. getElementById ("bauthor ");
Bname. innerHTML = name. childNodes [0]. nodeValue;
Bauthor. innerHTML = author. childNodes [0]. nodeValue
// -->
</Script>
<Body>
</Html>
Xml has very few resources to read from the Internet in FF. I found a lot of resources and did not find any node values. So I used debug in ff browser for a long time and finally found author. childNodes [0]. nodeValue.
XML files are read in the firefox browser by using two main classes: XPathEvaluator and XPathResult. In fact, it is to use XPathEvaluator to search, and then store the search results in XPathResult. We can see the part in my code that is searched with XPathEvaluator. The evaluate function has many parameters, but you must understand this function to extract other people's things (for the original content, click here ):
Function: evaluate (xpathText, contextNode, namespaceURLMapper, resultType, result)
| Parameters |
Description |
| XpathText |
String that represents the XPath expression to be calculated. |
| ContextNode |
The node corresponding to the expression to be calculated in this document. |
| NamespaceURLMapper |
Maps a namespace prefix to a function with the full name of the namespace URL. If such a ing is not required, it is null. |
| ResultType |
Specifies the type of the object to be returned, and uses XPath conversion to force the result type. Possible values of the type are constants defined by the XPathResult object. |
| Result |
A reusable XPathResult object; If you want to create a new XPathResult object, it is null. |
Note that resultTypt has many parameter values and you can copy them as follows:
| Return type |
Description |
| ANY_TYPE |
Pass this value to Document. evaluate () or XPathExpression. evaluate () to specify an acceptable result type. This value is not set for the resultType attribute. |
| NUMBER_TYPE |
Numbervalue: Save the result. |
| STRING_TYPE |
Stringvalue stores the result. |
| BOOLEAN_TYPE |
BooleanValue saves the result. |
| UNORDERED_NODE_ITERATOR_TYPE |
This result is an unordered set of nodes. You can call iterateNext () repeatedly until null is returned to access the node in sequence. During this iteration, the document must not be modified. |
| ORDERED_NODE_ITERATOR_TYPE |
The result is a list of nodes, which are arranged according to the attributes in the Document. You can call iterateNext () repeatedly until null is returned for sequential access. During this iteration, the document must not be modified. |
| UNORDERED_NODE_SNAPSHOT_TYPE |
The result is a list of randomly accessed nodes. The snapshotLength attribute specifies the length of the list, and the snapshotItem () method returns the node of the specified destination. Nodes may not have the same order as they appear in the document. Since this result is a "snapshot", it works even if the document changes. |
| ORDERED_NODE_SNAPSHOT_TYPE |
The result is a list of randomly accessed nodes, just like UNORDERED_NODE_SNAPSHOT_TYPE, but the list is arranged in the order in the document. |
| ANY_UNORDERED_NODE_TYPE |
The singleNodeValue attribute references a node that matches the query. If no matching node exists, it is null. If multiple nodes match the query, singleNodeValue may be any matching node. |
| FIRST_ORDERED_NODE_TYPE |
SingleNodeValue stores the first node in the document that matches the query. If no matching node exists, it is null. |
(Although it is copied, it is hard to copy the magic horse = w =)
In addition, the xml file node can also add conditions, for example, as long as the first conforming node is:
/Bookstore/book [1]/title
Or the price is higher than 35:
/Bookstore/book [price> 35]/price
In the previous example, I want to demonstrate the effects of returning all subnodes without Selecting Conditions. After all, this is common.
The concept here is XSLT, a language used to convert xml files. Its full name is extensible stylesheet language transformation. XSLT uses XPath to search for information in xml documents. It can display the content stored in xml files as html pages according to the specified style.
If you are interested, you can check the information. I am not interested .. Second (second) Second
Finally, the last concept of xml is: data island.
In fact, the page contains xml data information, which can be embedded like css. The method is <xml> ...... </xml> can also be introduced externally: <xml src = "xml/books. xml "> </xml>
The data in xml data island is bound to html tags through datasrc and dataworks. However, no code can be run after I try it, so this is the case for the moment, after I complete the code, I will try again.
