Forms
u Form role: to collect information of the user ;
Form box :
Form form role: to collect information of the user; form box: < form name = "name form" Method = "POST / GET" Action = "Submit Address" > </ form > < INPUT type = "text" value = "default" /> text box < the INPUT of the type = "password" /> password box < the INPUT of the type = "the submit" value = "button content" /> submit button < the INPUT of the type = "the RESET"value = "Content button" /> reset button <INPUT name = " '" type = "button" value = "Content button" /> button (button and submit the difference is, submit a submit button to submit information functions, jump button only play the role, not submit.)
Introduction css
CSS (cascading style sheets) Translation to Cascading Style Sheets , for controlling the page style
Css laminating properties
CSS laminate refers to the CSS style when setting the same attributes for the same element, according to the cascading rules (weight) to conflict, choose to apply high weight CSS selectors specified attributes, also generally described as a high weight to cover low weight therefore it is also referred to laminate a label is superior to automatically inherits all of its subordinate tags
C SS style sheets to create and classification
1. The inline style sheet (inline style, the inline style, inline style)
Syntax: < tag style = "properties: Property Value ; property : Property Value ; " > </ tab >
For example: <P style = "Color: Red;"> This is what </ p>
Do practical work, mistakes when using modal
2 , internal style sheet (nested into the page)
Creating syntax:
<style type="text/css">
css syntax example: div {width: 200px;}
</style>
NOTE: Use style for creating style tag, the tag is preferably written in the <head> </ head> between ;
With a relatively small, convenient maintenance, write a small effect when the case is more appropriate
3 , reference an external style sheet
(1) cited wording:
<link href = " destination file path " rel = "stylesheet" type = "text / css" />
Description:
Written in the <head> and </ head> between.
rel : used to define the associated documents, indicates that the associated style sheet;
of the type : Custom document type;
External links to the most commonly used and can be multi-purpose, clear structure, easy maintenance after modification
(2) introducing wording
<style type="text/css">
@import url ( " path and file name of the target file full name ");
</style>
Note: @ and import no space between the url too small and no space between brackets; must end with a semicolon ;
Fourth, the scope of the style sheet
Within the scope of the current line style tags inside style of scope is the current file, external stylesheets scope is all associated files.
Fifth, the style sheet priority
The highest priority of inline style sheets
Internal and external style sheet style sheet and the priority order of writing about, after writing high priority.
CSS basic grammar
CSS syntax consists of two parts: a selector (selector), Statement
Selector { property : Property Value; }
CSS syntax:
- Each CSS style consists of two parts, i.e. selectors and declaration that is divided into attributes and attribute values;
- Property must be placed in braces, attributes and attribute values are connected by a colon.
- Each statement ends with a semicolon.
- When a plurality of attribute values of attributes, attributes and attribute values regardless of the order.
- In the course of writing style, space, line feed operation does not affect attribute display
css selectors defined
A selector (operator) of the definition of
Said to define the object selectors style, may be an element ( tag ) themselves, may be formulated for a class of elements or element names .
( 1 ) tag selector (type selector / element selectors):
Label selector is directly in html language defined according to the marking
Syntax: Label Name { properties: Property Value; }
Example: div {width: 30px;}
Description:
a) element in a document language selector is the object type as a selector, i.e., the use of the structure as the element name selectors. For example body , div , the p-, img, EM, strong, span ...... and so on.
b) all the page elements can be used as selector
usage:
When a display element unified document, you can use the tag (Type) selector;
Class selector ( class selector )
- Class selector uses must enter into force by reference to
Syntax: .class Name { properties: Property Value ;}
Description:
- When we use the class selectors, each element should be defined as a class name,
- Class selectors syntax is: " as: <div class =" Top "> </ div>"
- Usage: class selector is more suitable for defining a class of pattern;
A flag may be provided a plurality of class name syntax: <tag class = "Name 1 Name 2"> </ tag>
( . 3 ) ID selector
Syntax: #id Name { properties: Property Value ;}
Description: When we use the id when selectors, each element should be defined as a id attribute;
如：<div id="top"></div>
When named to take the English name, you can not use the keyword: ( all the tags and attributes are keywords )
( 1 ) may be used for each element id selectors, but id is an element of the unique identifier, can not duplicate the id name ;
( 2 ) is most useful: create peripheral structure of the web.
(4) Tsuhaifu: *
Syntax: * { properties: ; ( padding: 0; margin: 0; ) }
Usage: used to reset the style.
(5) pseudo-class selector
a: link {color: # FF0000 ;} / * hyperlink initial state * /
a: visited {color: # 00FF00 ;} / * after the hyperlink is accessed state * /
a: hover {color: # FF00FF ;} / * state when the mouse over a hyperlink * /
a: active {color: # 0000FF ;} / * mouse down hyperlinks state * /
note:
According to the above order of writing style can be displayed properly, or part of the effect of failure
(6) group selector (set selector)
Syntax: Selector 1 , ...... , the selector 5 { properties: Property Value ;}
Description: When the same application with a plurality of selection patterns, each selection can be Used "," separated manner, combined into a group.
Example: .div, #div, p {width: 100px;}
(7) comprises a selector ( descendant selectors )
Syntax: Selector 1 Selector 2 { properties: Property Value ;}
Description: The selector 1 and selector 2 with a space separated, meaning that the selector 1 contained all child selector 2;
Example: div {Li UL height: 200px;}
(8) attribute selector
Syntax: [class = " Box " ] { properties: Property Value ;}
Description: This property must be included in element
Example: [class = " Box " ] {height: 200px;}
Extended:
* Link and import external style of introducing differences:
Differences in 1: ancestors difference: link belongs XHTML tags and CSS @import is a way to completely provided. In addition to the link tag can load CSS, you can also do a lot of other things, such as the definition of RSS, defined rel connection attributes, @ import can only load CSS.
Differences 2: Load different order: When a page is loaded (that is, the viewer when browsing), link referenced CSS will also be loaded, and references @import CSS will wait until the entire page is downloaded and then loaded . So sometimes the browser will not start @import CSS style while loading the page.
The difference 3: differences in compatibility. : @Import is proposed CSS2.1, so older browsers do not support, @ import in order to identify knowledge only in IE5 or more, and link label no such problem.
Differences 4: Use difference when the control style dom: dom control when using javascript to change the style, use only link tags, because @import dom can not control.