CSS based syntax (2)
Related Tags:css manuals css templates css download css button css fillet css vertical middling css games css menu css float xhtml css Syntax CSS Font CSS Border css Margin css Padding CSS List CSS Table css background css fonts css borders what is the css css editor css hack Baidu space css css transparent css clear css Chinese manual css filter css rolling css navigation css li css dotted line css spaced css files css form css links css table css shadow css fonts css position css css navigation of the book css language dreamweaver css asp css css attributes css example css Notes css inheritance css padding css gradual css Auto-trip xhtml css css grammar css custom templates css input css middling css important css ul css overflow css entry css link css positioning proficient css background image css expression css space css tab css map css display css margindiv css bold css zen garden css authoritative guides css css hover css mandatory for firms
Switched from: http://go2self.blog.hexun.com/6878256_d.html
1. Basic grammar
css is defined by three components: Selectors (selector), attributes (properties) and the attribute values (value).
Basic format is as follows:
(Selector property: value)
(Selectors (attributes: value))
Selectors can be in various forms, the general definition is the pattern of your html tags, for example, BODY, P, TABLE……,
If you need to select a specified number of properties at, we use the semicolon all the attributes and values separately:
(Property1 selector: value1; property2: value2)
(1 choice at (attributes: Duty 2; attribute 1: Duty 2))
(1 choice at (attributes: Duty 2; attribute 1: Duty 2))
2, selectors type
HTML tags selectors / label selectors
The definition of the pattern of your HTML tags, for example, BODY, P, TABLE……, you can use this method definition of its attributes and values, properties, and use of a colon to separate:
Body (color: black)
Body (color: black)
ID selectors
HTML pages in the id parameter designated a single element, ID address is used to select a single Element of this definition of Individual Style.
ID selectors choose the applications and at a similar category, the use of tags in the html id parameters: <p id="intro">
This paragraph right alignment
</ P>
HTML pages in the id parameter designated a single element, ID address is used to select a single Element of this definition of Individual Style.
ID selectors choose the applications and at a similar category, the use of tags in the html id parameters: <p id="intro">
This paragraph right alignment
</ P>
Definition of ID selectors to add an ID name "#". ID selectors defined attributes there were two ways.
Below example, ID attributes will be matching all id = "intro" element: # intro
(
Font-size: 110%;
Font-weight: bold;
Color: # 0000ff;
Background-color: transparent
)
(
Font-size: 110%;
Font-weight: bold;
Color: # 0000ff;
Background-color: transparent
)
(Font size to the default size of 110%; bold; blue Background Color transparent)
Below this example, only ID attribute matching id = "intro" paragraph element: p # intro
(
Font-size: 110%;
Font-weight: bold;
Color: # 0000ff;
Background-color: transparent
)
Below this example, only ID attribute matching id = "intro" paragraph element: p # intro
(
Font-size: 110%;
Font-weight: bold;
Color: # 0000ff;
Background-color: transparent
)
Note: ID selectors great limitations, only individual elements of a definition of the form of general only in exceptional circumstances. Id a page can be used only once, if we use a number of id: First, it is not passed W3 validation, although in the browser can be used in the second when you need JavaScript to control through this div id, it will errors. Concept, said:
Id is to find a structure / content, to give it definition style; first class is a good definition of the pattern, then sets to the number of structure / content.
Id is to find a structure / content, to give it definition style; first class is a good definition of the pattern, then sets to the number of structure / content.
Class selectors
Use categories you can choose at the same definition of the different elements of the pattern classification, the definition of selectors, in the name of self-front, plus one point. If you want two different paragraphs, a right-justified paragraphs, a paragraph middling, You can define two categories:
P.right (text-align: right)
P.center (text-align: center)
Application, the HTML tags, as long as you join the definition of class parameters: <p class="right">
This paragraph right alignment
</ P>
<p Class="center">
This paragraph is the middle of the order
</ P>
Use categories you can choose at the same definition of the different elements of the pattern classification, the definition of selectors, in the name of self-front, plus one point. If you want two different paragraphs, a right-justified paragraphs, a paragraph middling, You can define two categories:
P.right (text-align: right)
P.center (text-align: center)
Application, the HTML tags, as long as you join the definition of class parameters: <p class="right">
This paragraph right alignment
</ P>
<p Class="center">
This paragraph is the middle of the order
</ P>
Note: The category name can be any word in English or in English and the beginning of the combination of figures, functions and effectiveness of its general summary named.
There is also a category selectors usage, the choice at the HTML tags were omitted, this can be several different elements of the definition into the same pattern:. Center (text-align: center)
There is also a category selectors usage, the choice at the HTML tags were omitted, this can be several different elements of the definition into the same pattern:. Center (text-align: center)
This category can be applied to any element on.
Note: This omission HTML tags like selectors is the most commonly used after the CSS methods, the use of such methods, we can be very convenient to apply in any element of pre-defined patterns.
Group selectors
You can put the same attributes and values at the choice of writing combined with a comma will be selected at separate, thus reducing duplication of style definition: p, table (font-size: 9pt)
(Paragraphs and tables in the text size on the 9th of words)
Equivalent to full effect: p (font-size: 9pt)
Table (font-size: 9pt)
You can put the same attributes and values at the choice of writing combined with a comma will be selected at separate, thus reducing duplication of style definition: p, table (font-size: 9pt)
(Paragraphs and tables in the text size on the 9th of words)
Equivalent to full effect: p (font-size: 9pt)
Table (font-size: 9pt)
Contain selectors
Individual elements can be included on a definition of the relationship between style sheets, an element contains two elements, in this way only one element in the definition of two elements, a single element or elements 2 No definition, such as: Table. Leftdiv (
Font-size: 12px
)
Individual elements can be included on a definition of the relationship between style sheets, an element contains two elements, in this way only one element in the definition of two elements, a single element or elements 2 No definition, such as: Table. Leftdiv (
Font-size: 12px
)
In the form of a change in the pattern of links, text size of 12 pixels, and the form of text links at the default size.
Cascading Style Sheets of the
Layering of the succession, style sheet Rules of succession pattern of external elements will be preserved by the successor to the elements contained other elements. In fact, all the elements of the nested elements will inherit the properties of the outer elements specified value, and sometimes many layers will form nested stack together. For example, in the DIV tag nested P Tags: div (color: red; font-size: 9pt)
<div>
<p>
This paragraph text the word red on the 9th
</ P>
</ Div>
Layering of the succession, style sheet Rules of succession pattern of external elements will be preserved by the successor to the elements contained other elements. In fact, all the elements of the nested elements will inherit the properties of the outer elements specified value, and sometimes many layers will form nested stack together. For example, in the DIV tag nested P Tags: div (color: red; font-size: 9pt)
<div>
<p>
This paragraph text the word red on the 9th
</ P>
</ Div>
(P element will be the contents of the definition of property Inheritance DIV)
Note: In some cases the internal selectors do not inherit the value of the surrounding selectors, but in theory these are special. For example: on the Border attribute value is not inherited, intuition, not a paragraph with the same document body on the boundary value.
Moreover, the style sheet succession encountered conflict, always to the final, whichever is the definition of style. If the cases in the definition of P Color: div (color: red; font-size: 9pt)
P (color: blue)
<div>
<p>
The text of this paragraph on the 9th of blue characters
</ P>
</ Div>
Note: In some cases the internal selectors do not inherit the value of the surrounding selectors, but in theory these are special. For example: on the Border attribute value is not inherited, intuition, not a paragraph with the same document body on the boundary value.
Moreover, the style sheet succession encountered conflict, always to the final, whichever is the definition of style. If the cases in the definition of P Color: div (color: red; font-size: 9pt)
P (color: blue)
<div>
<p>
The text of this paragraph on the 9th of blue characters
</ P>
</ Div>
We can see that in paragraph text size on the 9th word div inherited attributes, and the color attribute in the final definition.
Different options at the same definition of the elements, it is necessary to take into account the different options at the priorities. ID selectors, and class selectors HTML tag selectors, because ID selectors is the final element, therefore, the highest priority, followed by selectors category, in descending order:
Different options at the same definition of the elements, it is necessary to take into account the different options at the priorities. ID selectors, and class selectors HTML tag selectors, because ID selectors is the final element, therefore, the highest priority, followed by selectors category, in descending order:
Embedded style sheet styles id selectors selective at the HTML tag selectors
If you want to go beyond that the relationship between the three can be! Upgrade style sheet important priority, such as: p (color: # FF0000)
. Blue (color: # 0000FF)
# Id1 (color: # FFFF00) <p id="id1" class="blue" style=""> color shown here </ p>
. Blue (color: # 0000FF)
# Id1 (color: # FFFF00) <p id="id1" class="blue" style=""> color shown here </ p>
At the same time we have one of the paragraphs in the pages plus three format, and it will eventually be in accordance with! Important affirmed at the HTML tag selection pattern in red text. If removed! Important, the highest priority in the choice of ID at yellow text.
3. Special selectors - pseudo-category
Can be seen as pseudo-category is a special category of selectors, CSS can be supported by the browser automatically identify the special selectors. It is the largest use of the links can be in different states under different definition of the style effect.
1. Grammar
Pseudo-like in the original grammar, Syntax with a pseudo-category (pseudo-class): selector: pseudo-class (property: value)
(Selectors: pseudo-type (attributes: value))
Can be seen as pseudo-category is a special category of selectors, CSS can be supported by the browser automatically identify the special selectors. It is the largest use of the links can be in different states under different definition of the style effect.
1. Grammar
Pseudo-like in the original grammar, Syntax with a pseudo-category (pseudo-class): selector: pseudo-class (property: value)
(Selectors: pseudo-type (attributes: value))
Pseudo-classes and different categories, CSS has been defined, not as selective at the same arbitrary use other names,
According to the above grammar can be interpreted as:
Objects (selectors) in a particular state (pseudo) patterns.
Class selectors and other selectors can also mix and pseudo-category: selector.class: pseudo-class (property: value)
(Selectors. Category: pseudo-type (attributes: value))
Class selectors and other selectors can also mix and pseudo-category: selector.class: pseudo-class (property: value)
(Selectors. Category: pseudo-type (attributes: value))
2. Pseudo-anchor category - Dynamic Link
We are the most commonly used four kinds of a (Anchor) of the pseudo-element type, it said that dynamic link in four different states: link, visited, active, hover (not visit the link has already visited links, and link activation of the mouse on the link.) We put them were different definition of the effect of:
A: link (color: # FF0000; text-decoration: none) / * not visit the link * /
A: visited (color: # 00FF00; text-decoration: none) / * visit the link * /
A: hover (color: # FF00FF; text-decoration: underline) / * mouse on the link * /
A: active (color: # 0000FF; text-decoration: underline) / * activation link * /
Note: Sometimes this link to the former mouse pointer effective link, and links to visit again after the mouse when no links at the results. This is because you put a: hover on the a: visited the front, so as behind the high priority when Access overlooked after a: hover effect. These links style in the definition, must act in accordance with a: link, a: visited, a: hover, a: actived in the order written.
3. Anchor pseudo-categories - Class selectors dynamic link
Pseudo-class category will be combined and used, it can be done with a page of links several different sets of results, for example, we define a set of links for the red, blue for the visit; another green group, visit yellow:
A.red: link (color: # FF0000)
A.red: visited (color: # 0000FF)
A.blue: link (color: # 00FF00)
A.blue: visited (color: # FF00FF)
Now used in different links:
<a Class="red" href="..."> This is the first set of links </ a>
<a Class="blue" href="..."> This is the second set of links </ a>
4. Other pseudo-category
CSS2 also the first definition of the word and the first (the first-letter and the first-line) pseudo-category, the first elements can be the first line settings or characters of different styles.
Below example, we have marked paragraphs in the text definition of the word size of the first three times the size of the default:
<style Type= "text/css">
P: first-letter (font-size: 300%)
</ Style>
We are the most commonly used four kinds of a (Anchor) of the pseudo-element type, it said that dynamic link in four different states: link, visited, active, hover (not visit the link has already visited links, and link activation of the mouse on the link.) We put them were different definition of the effect of:
A: link (color: # FF0000; text-decoration: none) / * not visit the link * /
A: visited (color: # 00FF00; text-decoration: none) / * visit the link * /
A: hover (color: # FF00FF; text-decoration: underline) / * mouse on the link * /
A: active (color: # 0000FF; text-decoration: underline) / * activation link * /
Note: Sometimes this link to the former mouse pointer effective link, and links to visit again after the mouse when no links at the results. This is because you put a: hover on the a: visited the front, so as behind the high priority when Access overlooked after a: hover effect. These links style in the definition, must act in accordance with a: link, a: visited, a: hover, a: actived in the order written.
3. Anchor pseudo-categories - Class selectors dynamic link
Pseudo-class category will be combined and used, it can be done with a page of links several different sets of results, for example, we define a set of links for the red, blue for the visit; another green group, visit yellow:
A.red: link (color: # FF0000)
A.red: visited (color: # 0000FF)
A.blue: link (color: # 00FF00)
A.blue: visited (color: # FF00FF)
Now used in different links:
<a Class="red" href="..."> This is the first set of links </ a>
<a Class="blue" href="..."> This is the second set of links </ a>
4. Other pseudo-category
CSS2 also the first definition of the word and the first (the first-letter and the first-line) pseudo-category, the first elements can be the first line settings or characters of different styles.
Below example, we have marked paragraphs in the text definition of the word size of the first three times the size of the default:
<style Type= "text/css">
P: first-letter (font-size: 300%)
</ Style>
First trip to define a pattern of examples:
<style Type= "text/css">
Div: first-line (color: red)
</ Style>
<style Type= "text/css">
Div: first-line (color: red)
</ Style>
If more firms paragraphs, the first of red, the second and third acts default color
Note: the first word and the first line of the pseudo-over version of IE5.5 need support.
Note: the first word and the first line of the pseudo-over version of IE5.5 need support.
- CSS Selector
- Css Guide: CSS syntax (CSS Syntax)
- CSS and DOM attribute usage manuals Fast Facts
- CSS layout entry [css]
- CSS entry
- CSS sel
- Into CSS
- CSS manuals compendium
- ? ? ? ? ¨° (css)
- CSS Essentials
- Css Profile
- The CSS
- CSS attributes usage manuals Fast facts
- CSS on
- CSS Optimization
- CSS quick
- All commonly used language reference manual for manual HTML | CSS manuals | JScript Manual | VbScript Manual | ASP Manual | PHP Manual | SQL manual | Site effects | ADO Manual
- On the XHTML CSS
- CSS use
- CSS
Web2.0 facing self-salvation
Web2.0 boom, the rise in 2005, hot in 2006, and anxiety in 2007. This year is 2007. Like the first round development of the Internet boom, Web2.0 has entered into an era of re-positioning. According to the Dow Jones financial data research institutions, ...
Search engine optimization: SEO criteria for the five gold
As seo in China continued to heat up, with the international market continues to mature, have simple "mate + text labels, such as" seo approach has been to consider a comprehensive seo alternative formulas and procedures. And the different search engines: google, yahoo...
Dreamweaver skills: Let your picture to download more quickly
Sometimes in the website, often because of the picture page document而使too much longer time to download, this does not downloading, there will be many visitors impatient to walk out, thereby losing the customer flow. But for the smaller picture files may have to sacrifice picture...
[Recommended] very good script Javascript
1> shielding functional classes 1.1 shielding all key keyboard <script Language="javascript"> <! -- Function document.onkeydown () ( Event.keyCode = 0; Event.returnvalue = false; &...
Application of Advanced HTML skills (12) is the interaction between the window frame skills
More points in the window frame page, the sub-window of information between the interaction is often matter. In the navigation window midpoint of the hyperlink, then how in another window open links page? In this window, I pressed the button, and another window in t...