The full name of the CSS is cascading style sheets, which is called Cascading style sheets, also called cascading stylesheets. The advantage of this is that the code is neat and can be processed in batches.
Basic syntax:
Annotation character:/* */
Selector: selector {Attribute:value} The value of the same property is separated by a space symbol, separated by semicolons. Case sensitive.
For example, to customize the style of the table in the page, write the table {...; .....;}
There are many ways to use the selector, so I am too lazy to play, copied from the Internet:
| Selector mode |
Description |
| * |
matches any element. (Universal selector) |
| E |
Matches any element e (for example, an element of type E). (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, the match element E. (: First-child pseudo Class) |
| E:link e:visited |
Match element E If E is a destination that has not been accessed (: link) or a hyperlink that has already visited (: visited). (Link pseudo Class) |
| E:active E:hover E:focus |
Match E in the determined user action. (Dynamic pseudo Class) |
| E:lang (c) |
If an element of type E uses the (human) language C (the document language determines how the language is determined), the element is matched. (: lang () pseudo class) |
| E + F |
If an element E is directly before the element F, then the element f is matched. (near selector) |
| E[ATTR] |
Matches any element E that has a "attr" attribute set (regardless of its value). (Property selector) |
| e[attr= "Warning"] |
Matches any element E whose "attr" property value is strictly equal to "warning". (Property selector) |
| e[attr~= "Warning"] |
Matches a list of values whose "attr" property is a space-delimited value, and one of them is strictly equal to any element E of "warning". (Property selector) |
| E[lang|= "en"] |
Any element E that matches its "Lang" property with a list of values beginning with "en" (from the left). (Property selector) |
| Div.warning |
HTML only. Usage with div[class~= "warning"]. (class selector) |
| E#myid |
Any element E that matches the ID equal to "myID". (ID selector) |
Explain it in detail when you use it.
CSS precedence: In the same page or CSS file, sometimes there are multiple definitions of the same element, which needs to be rendered according to priority. Precedence is divided into the precedence of external definition styles and other styles.
The precedence of the external definition style: How does the algorithm not say, here simply say results: ID selector > class selector > Attribute selector > Pseudo class selector > element selector > pseudo element selector > global selector > Other
Precedence of other style definitions: in-style, which is the style= inside the element ..., this is the most advanced, takes precedence over all external definition styles. "!important" This in different versions of the use of deviation, it is not specifically said, when needed to check it. Inherited styles: This is the lowest-priority style.
CSS Properties: Please refer to http://www.jb51.net/w3school/css/css_reference.htm (hey, this is not responsible!) Fell
CSS unit: http://www.jb51.net/w3school/css/css_units.htm (Bo Lord you are a waste of firewood!) Fell! )
(pretending not to hear)
Below to enter the application link (￣︶￣)
1. Current page embedding CSS style:
Copy Code code as follows:
<title>css test</title>
<style>
. tablestyle{
Background:yellow;
font-size:14px;
Font-weight:bold;
}
</style>
<body>
<table width= "align=" "Center" class= "TableStyle" >
<tr>
<td>title:</td>
<td><input type= "text" name= "title" Size= "></td>"
</tr>
<tr>
<td>content:</td>
<td><textarea name= "Content" class= "UserData" cols= "a" rows= "ten" ></textarea></td>
</tr>
</table>
<body>
2. Embed CSS style file:
We create a new CSS folder under the project, and then create a new CSS file named Style.css. This is for the code to be neat, of course, because this is just an example, so the contents of the inside I just write the things in the example.
Copy Code code as follows:
. tablestyle{
Background:yellow;
font-size:14px;
Font-weight:bold;
BORDER:1PX Solid #000000
It's also easy to quote, just add one line:
<link rel= "stylesheet" type= "Text/css" href= "Css/style.css"/>
REL Specifies that the CSS style sheet file is joined, type specifies the file type, and href is the physical address of the file.
3 dynamically modify CSS styles.
Finally, with JS pull on the relationship.
This modified method has nothing to do with taking the element and then modifying the attribute. The point to mention is that the properties of link can also be modified.
For example: Write a link ID is mystyle, and then modify its import file, the method is this:
Copy Code code as follows:
<link rel= "stylesheet" id= "MyStyle" type= "Text/css" href= "Css/style.css" >
<script tyle= "Text/javascript" >
When you modify in javascript:
var Styleobj=document.getelementbyid ("MyStyle");
Styleobj.stylesheet.csstext= "";//Clear Original style
StyleObj.styleSheet.addImport ("Css/style2");
</script>
Okay, let's start with the XML section.
(Bo Lord your integrity?!!) ）
XML If you really want to learn in detail can open another series. So, we here is simple to say.
The full name of XML is: Extensible Markup Language, where it exists for better, more flexible and extensive descriptive data. Almost all of his tags can be defined by the user.
For example, we want to store a book on the information, can have different ways of storing:
Copy Code code 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>
There are several dead rules in XML:
There must be a declaration statement <?xml cersion= "1.0"?> of course there can be other attributes such as encoding.
All elements outside of XML must be closed, that is, there must be a/>
Attribute values must be enclosed in quotation marks.
Case sensitive
Mark names with letters. "_", ":" At the beginning, followed by letters, numbers, periods, colons, underline.
Only one root node.
Xpath
XPath is the language used to find information in an XML file and locate it. It can traverse the elements and attributes in the tree.
The number is what everyone knows, in fact speaking of this is to speak of XPath syntax just.
For the syntax of XPath, see http://www.jb51.net/w3school/xpath/xpath_syntax.htm.
Explore the "XPath syntax" XPath axis "XPath operators" and "XPath functions" under the Reference manual section of the above page.
After a rough glance, you can start this part of the exercise:
First, give an XML file:
Copy Code code 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>vaidyanathan nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>
(Copy from site Copy, please retain permissions.) ）
In the use of IE and FF slightly different, this is more trouble, first to IE: this code again: script written in the back, otherwise it in the compilation of JS, do not know where to load the sentence innertext, because there is no rendering to the table place. The complete code is as follows:
XML in IE
Copy Code code as follows:
<title>xml test</title>
<body>
<table width= "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>
The next is FF:
Copy Code code as follows:
<title>xml test</title>
<body>
<table width= "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.documentelement,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>
XML in FF read online resources are very few, I looked for a lot also did not find can read the node value, so I used to debug in the FF browser under observation for a long time, finally found the author.childnodes[0].nodevalue this sentence.
XML files in the Firefox browser read the main two classes to achieve, one is Xpathevaluator, Xpathresult. In fact, it is to use Xpathevaluator to find, and then store the search results in Xpathresult. You can see the part of my code that looks in Xpathevaluator, and that function evaluate a lot of arguments, but you have to understand this function to get the other person's stuff (the original content point here):
Function: Evaluate (Xpathtext,contextnode,namespaceurlmapper,resulttype,result)
| Parameters |
Description |
| Xpathtext |
A string representing the XPath expression to evaluate. |
| ContextNode |
The node in the document that corresponds to the expression to be evaluated. |
| Namespaceurlmapper |
A function that maps a namespace prefix to a full name namespace URL. If such a mapping is not required, it is null. |
| Resulttype |
Specifies the type of object expected as the result, using XPath conversions to force the result type. The possible value of a type is a constant defined by the Xpathresult object. |
| Result |
A Xpathresult object for reuse; Null if you want to create a new Xpathresult object. |
Note that Resulttypt has a number of parameter values that continue to be copied:
| return type |
Description |
| Any_type |
Pass this value to Document.evaluate () or xpathexpression.evaluate () to specify the acceptable result type. Property Resulttype does not set this value. |
| Number_type |
Numbervalue Save the results. |
| String_type |
StringValue Save the results. |
| Boolean_type |
Booleanvalue Save the results. |
| Unordered_node_iterator_type |
This result is an unordered collection of nodes that can be accessed sequentially by repeatedly calling Iteratenext () until NULL is returned. During this iteration, the document must not be modified. |
| Ordered_node_iterator_type |
The result is a list of nodes, sorted by the attributes in the document, which can be accessed sequentially by repeatedly calling Iteratenext () until NULL is returned. During this iteration, the document must not be modified. |
| Unordered_node_snapshot_type |
The result is a randomly accessed list of nodes. The Snapshotlength property specifies the length of the list, and the Snapshotitem () method returns the node for the specified subscript. Nodes may be different in the order in which 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 randomly accessed list of nodes, like Unordered_node_snapshot_type, except that the list is listed in the order in which they are in the document. |
| Any_unordered_node_type |
The Singlenodevalue property Reference and query match a node that is null if there are no matching nodes. If multiple nodes and queries match, Singlenodevalue may be any one of the matching nodes. |
| First_ordered_node_type |
Singlenodevalue saves the first and query-matching nodes in the document, or null if there are no matching nodes. |
(although it is copied, but the reproduction of God's horse is also very hard =w=)
In addition to these, XML file nodes can actually add conditions, such as as long as the first qualifying node:
/bookstore/book[1]/title
Or a price above 35:
/bookstore/book[price>35]/price
The previous example does not use the conditional selection is I want to demonstrate the effect of returning all the child nodes, after all, this is commonly used.
This refers to a concept called XSLT, which is a language used to convert XML files, the full name is: Extensible Stylesheet Language Transformation. XSLT borrows XPath to find information in an XML document, and it can display content stored in an XML file as an HTML page in the specified style.
Specific interested students can check, anyway, I am not interested in. ╮(╯▽╰)╭
Finally, to the last concept of XML: Data island
In fact, refers to the page contains XML data information, like CSS, can be embedded inside, the solution is <xml>......</xml> can also be introduced externally: <xml src= "Xml/books.xml" ></ Xml>
XML data island data and HTML tag binding, through the DATASRC, datafld to complete, but I try to try and no one code can run, so just for the moment, and then I will come back to add the code.
