css3 three characteristics:
A, laminating properties
The so-called stack refers to the superposition of multiple CSS styles.
Is a browser capable of handling conflict, if a property is set to the same elements by the same two selectors, then this time a property will be stacked away another property
For example, give a label to specify the internal text color is red, then another designated color is blue, appears a label specifies a different value of the same style, this is the style conflict.
Under normal circumstances, if the style conflict, CSS will be written in the order, subject to final style.
- Style conflict, the principle to follow is the principle of proximity. That style structure from the close on the implementation of that style.
- Styles do not conflict, not stacked
CSS last execution formulas: The waves pushed forward waves before the waves die on the beach.
Second, inheritance
The so-called inheritance means that when writing CSS style sheets, some sub-label style tags will inherit the parent, such as text color and font size. I want to set an inheritable property, just apply it to the parent element.
Simple to understand is this: in his footsteps.
CSS last execution formulas: born dragon, phoenix raw chicken, mouse holes will be born child.
note:
Proper use of inheritance can simplify the code, reduce the complexity of CSS styles. Child elements can inherit the style of the parent element (can inherit the beginning of these elements text-, font-, line-, and color attributes)
Third, the priority
When you define CSS styles, often two or more rules are applied on the same element, then there will be a priority issue.
When considering the weight, beginners need to pay attention to some special cases, as follows:
The right to inherit the style of weight 0. That in a nested structure, regardless of the parent element of style heavy weights much, when the quilt elements inherit his weights are zero, which means that the child elements defined style will override inherited styles. Inline style takes precedence. Application of an element of style attribute, the style of its right row weight is very high, much greater than 100 may be understood. In short, he has elevated than the above selectors are big priority. Weights are the same, CSS follow the principle of proximity. That is close to the style element with the greatest priority, or that came in the final of the biggest priorities style. CSS defines an! Important command, the command is given maximum priority. That no matter how heavy the right position and distance style,! Important have the highest priority.
Summary of priority:
- Use the! Important rule declaration.
- Embedded declared in style attributes of the HTML elements inside.
- Use the ID selector rules.
- Using class selector, attribute rule selector, pseudo-elements and pseudo class selector.
- Use the element selector rules.
- It contains only a general rule selector.
- The same type of selector is to follow the principle of proximity.
Summary: weight is a priority algorithm, priority is layered performance.
Mate
<! DOCTYPE html> <-! H5 standard statement, using the HTML5 doctype, case-insensitive ->
<Head lang = "en"> <-! Lang attribute standard wording ->
<Meta charset = "utf-8"> <-! Character encoding declaration document uses ->
<Meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1" /> <-! Preferentially use the latest version of IE and Chrome ->
<Meta name = "description" content = "no more than 150 characters" /> <! - page description ->
<Meta name = "keywords" content = "" /> <-! Keywords page ->
<meta name="author" content="name, [email protected]"/> <!-- 网页作者 -->
<Meta name = "robots" content = "index, follow" /> <-! Search engine crawlers ->
<Meta name = "viewport" content = "initial-scale = 1, maximum-scale = 3, minimum-scale = 1, user-scalable = no"> <-! Add viewport for mobile devices ->
<-! Settings page does not cache ->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
Mate moving end properties
In the development of mobile end, which head is provided most commonly seen following properties
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" >
- width: the width of the layout viewport is provided for a positive integer, or string "width-device"
- initial-scale: setting an initial value of the page is scaled as a number that can be decimals
- minimum-scale: allowing the user to the minimum scale value, a number that can be decimals
- maximum-scale: allowing the user maximum scaling value for a number, may be decimals
- height: Set height layout viewport, this property is not important, rarely used
- user-scalable: whether to allow the user to zoom, is "no" or "yes", no representatives are not allowed, yes to allow representatives
Special Instructions: (IE6,7,8) support, you need to use css3mediaqueries.js
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]>
meta http-equiv
http-equiv name suggests, is equivalent to the role of the http header. The associated content attributes to the HTTP header. http-equiv attributes are the following parameters:
- content-Type (settings page character set) (recommended way for HTML5)
Description: Used to set the page character set for easy parsing and rendering browser page, for example:
<Meta http-equiv = "content-Type" content = "text / html; charset = utf-8"> <-! Old HTML, is not recommended ->
- X-UA-Compatible (take what version of the browser to render the current page)
Description: Used to tell the browser how to render the page version. (Usually set to the latest model in the major framework of this setting is also very common.)
<Meta http-equiv = "X-UA-Compatibel" conent = "IE = edge, chrome = 1"> <-! Specify IE and Chrome use the latest version render the current page ->
- cache-control (designated requests and responses follow the caching mechanism)
Description: how to specify the browser cache and cache for how long a response
<meta http-equiv="cache-contorl" conent="no-cache">
There are several uses:
- no-cache: first send a request to confirm whether the resource is changed with the server, if not changed, then use the cache.
- no-store: do not allow caching, each time to go on the server, download the complete response. (Security measures)
- public: cache all the responses, but not necessarily. Because the max-age can do the same effect.
- private: only for a single user cache, and therefore it does not allow any relay for caching. (For example, CDN is not allowed to respond to the private cache)
- maxage: represents the beginning of the current request, the response in the cache and how long it can be reused, rather than to re-server requests. For example: max-age = 60 represents the response can be cached and reused again for 60 seconds.
- expires (page expiration time)
Description: The expiration time for setting the page, expired pages must be re-transmitted to the server. For example:
<meta htttp-equiv="expires" content="Sunday 26 October 2019 01:00 GMT">
- Pragma (cache mode)
Description: The browser is used to set prohibit access to the contents of page cache from the local machine, after setting once you leave the page will no longer be recalled from Cache. For example:
＜meta http-equiv="pragma" content="no-cache"＞
- Set-Cookie (cookie settings)
Note: If the page expired. Then there is the local cookies will be automatically deleted this page. For example:
<meta http-equiv="Set-Cookie" content="name, date"> <!-- 格式 -->
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> <!-- 具体范例 -->
- refresh (auto refresh and point to a page)
Description: The page will automatically refresh and tone to set the URL within a set time. For example:
<Meta http-equiv = "refresh" content = "2; URL = https: //segmentfault.com/u/clearlove07"> <- mean 2 seconds to jump to my blog -!>