1, the primary form of application
Forms
Form role: to collect information of the user ;
Form box:
. 1 <form name = "Form Name" Method = "POST / GET" Action = "Submit Address" > < / form> . 3 <INPUT type = "text" value = "Default" / > textbox . 5 <INPUT type = "password" / > password box . 7 <INPUT type = "Submit" value = "content button" / > submit button . 8 . 9 <INPUT type = "rESET" value = "content button" / > reset button 10 . 11 <name = INPUT " '" type = "Button" value = "Content button"/ > Button
(The difference between button and submit that, submit a submit button to play the role of information submitted, the jump button only play the role, not to submit.)
Introduction css
-
CSS (cascading style sheets) Translation to Cascading Style Sheets, page style for controlling
It simply is how to modify the display style web page information.
Css laminating properties
. 1 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 coverage weight low,
and therefore it is also referred to laminate a label is superior to automatically inherits all of its subordinate tags
Css style sheets to create and classification
1. The inline style sheet (inline style, the inline style, inline style)
1 Syntax: <tag style = "properties: Property Value; properties:;"> < / tab> 2 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:
. 1 <style type = "text / CSS" > 2 CSS syntax example: div {width: 200px;} . 3 < / 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 the href = "destination file path" the rel = "this stylesheet" type = "text / CSS" / >
Description:
Write 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 name" ); </style>
No no spaces between the spaces between @ url and parentheses and import; must end with a semicolon; Note:
Fourth, the scope of the style sheet (difference)
Within the scope of the current line style tags inside style scoping 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 {properties: 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 according html directly in the tag definition language
Syntax: Label Name { properties: Property Value; }
实例： div { width: 30px;background-color:red;}
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, 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;
( 2 ) 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: "If: <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: {Name #id properties: Property Value;}
Description: When we use id selectors, an id attribute should be defined for each element;
如：<div id="top"></div>
To English names when named, can not use the keyword :( all the tags and attributes are keywords)
(1) may be used for each element id selectors, but id is a unique identifier element, the id of the non-duplication;
(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: Color Link {: # FF0000;} / * hyperlink initial state * /
A: Color visited {: # 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 separated by a space, the meaning selector is 1 contains all the sub-selector 2;
Example: div ul li {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:
1 difference: our ancestors difference: link belongs XHTML tags and CSS @import is a way to completely provided. In addition to the link tag can load CSS, but
you can also do a lot of other things, such as the definition of RSS, defined rel connection attributes, @ import can only load CSS.
2 differences: differences in load 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.
3 differences: 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.
4 difference: when using different control styles of dom: dom control when using javascript to change the style, use only link tags, because @import dom can not control.