Software architecture divided into two categories: b / s, c / s.
Html version of iterations. To write code annotated version of the model.
html code to regulate.
The height and width of the html element only if a change, the other is changed proportionally.
Picture using principles: consistent results, use a small inconsistent results, use good.
Image Type: gif, png, jpg, features are: dynamic, comprehensive and non-dynamic, more comprehensive and non-dynamic.
Html parsing, the browser will be supplemented in the general case! So not all cases are complementary, so the norm !!!
Note html not nested.
html elements can be nested, nested not cross.
Use inline frame iframe is not recommended, in the actual development, content inline frames are not concerned.
The default content center label is centered. May be centered elements in its interior.
In fact, pure behave elements and attributes are not recommended.
Each tag has a common attribute is the only one label on it. This property is all labels and concentrate only.
Namely: id attribute.
<a href="#"> Contact Us </a> role is to automatically open the computer's e-mail client.
css inline styles are generally developed for testing. not used for finished products. purpose of making the structure and performance of the separation ....
div tag is not semantics, but the main purpose. That layout.
span tag is not semantics, but the purpose is to add text style.
a tag may comprise any elements.
p tags are unable to make a good block elements.
File path far as possible without Chinese, problems may occur.
Composite selector wording is more selection together to write the next.
--- father elements parent element of an element. (A)
----- child element of the child element of an element. (S)
------ descendant elements child element of an element and its elements are grandchildren ...
All the elements of an ancestor ancestor element ------- (including his father, grandfather, grandfather, etc.).
Progeny selection: Select all descendants of an element, such as:. P span {}
Child element selection: Select the child element of an element, such as but not all descendants:. P> span {}
Pseudo-classes specifically indicates the state of the element when the elements we need to be in a particular state to set the style, you can pseudo-class .
Have used pseudo-classes: link visited hover active focus selection
Pseudo-elements: with the use of pseudo-class is similar, but (like pseudo-class class, group operator) pseudo-element is of course operate in groups, but it is more like a selection element.
Common elements have dummy: first-letter first-line before after before, after, respectively, at the connected position of the label content and labels typically used to link to the content..
Such as:
p:before{ color:red; content:"helloworld"; } <p>hello worldjasklfjkalsjflkjaf</p>
As FIG.
The title attribute doing it? when the mouse is moved to the label, it will automatically display the content title.
Attribute selector: selecting elements with the specified attribute.
Choose a variety of writing:
Such as:
<style type="text/css"> p[title]{ color:red; } p[title="xx"]{ background-color:green; } </style> </head> <body> <p title="xx">hello worldjasklfjkalsjflkjaf</p> <p title="yy">hello worldjasklfjkalsjflkjaf</p> <p title="zz">hello worldjasklfjkalsjflkjaf</p>
Attribute selectors usage.
In fact, there are select another match. As
/* * The first is equipped with tail wildcard */ p[title^="x"]{ color:red; } p[title$="x"]{ color: red; } p[title*="x"]{ color: green; }
Brothers Select: Select siblings of an element.
Specifically the following categories:
Adjacent sibling selector:
<style type="text/css"> h1 + p{ background-color: blue; } </style> </head> <body> <h1>hello world</h1> <p title="xx">hello worldjasklfjkalsjflkjaf</p> <p title="yy">hello worldjasklfjkalsjflkjaf</p> <p title="zz">hello worldjasklfjkalsjflkjaf</p>
Negation pseudo-class: when we want to remove some specific elements in the selected element, you can use negation pseudo-class!
not parentheses are selectors.
Why is it?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>html</title>
<link href="main.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
p:not(#a){
background-color:red;
}
</style>
</head>
<body>
<h1>hello world</h1>
<p id="a">hello worldjasklfjkalsjflkjaf</p>
<p title="yy">hello worldjasklfjkalsjflkjaf</p>
<p title="zz">hello worldjasklfjkalsjflkjaf</p>
</body>
</html>
Element styles can be inherited.
Useful?
When you need to set the same ancestor and descendant of style and style, only need to set the ancestors of style can be, so you can simplify coding.
However, inheritance is not complete. That is not the style elements have inheritance ....
There is a choice between priority levels.
What does that mean?
That choice is selected in the same style with an element of time:
Priority are:
Inline style 1000> id selector 100> classes and pseudo class selectors 10> Selector element 1> 0 Wild selector> inheritance pattern (none)
When a plurality of selectors used in common, the priority after the priority as the addition.
However, note that: the priority calculation and set the selector is individual calculated.
If two different priority selector, which selector determines the selected style.
Special point: behind the selector added after important, it's the highest priority becomes higher than the inline but not to try to develop the use!...
From a priority perspective, we write pseudo-classes are also to be careful because sometimes there is a pseudo-class that is has the relationship between "state" status, causality, written in the context of the principle is: cause and effect .