CSS authoritative Guide-third Edition-reading notes

First chapter: CSS and Documentation

HTML is a structured language, CSS is a style language, HTML is mainly used to be a powerful search engine better index, better let a blind person through the Voice browser to understand our web page, which is why the HTML is a structured language, because this is the Internet rules, everyone is following, Uniform standards will bring convenience to all (such as the blind person mentioned above).

From the beginning of the decline of the web, the web was just a simple HTML to write, a lot of popular, in order to better display, so there are some <font>,<center> and so on to the performance of the label, making HTML very confusing. 1996, CSS has become a mature recommendation, it is our savior, that is, the style language mentioned above, as the name implies, is used to change the style of the Web page, because there is a strong CSS change style, start to remove the style elements from the HTML, such as <font>, <center>, that's why we're trying not to use it in our HTML code.

　　element is the basis of the document structure, and each element generates a box (box). Elements are divided into substitution and non-replacement elements, and replacement elements (replace element) are those that are used to replace the contents of elements that are not directly represented by the contents of the document. For example, an IMG, input, non-replacement element means that the content is displayed by the user agent (usually a browser) in the box generated by the element itself. Elements Display roles: block-level elements, inline elements, inline elements do not generate "separators" before or after it, and block-level elements cannot inherit self-inner elements.

Link tag, CSS uses this tag to connect style sheets and documents, external stylesheets cannot contain any HTML code, only CSS rules and CSS annotations. The attribute rel (relation) represents the relationship, the relationship is stylesheet, and type is always TEXT/CSS, which describes the type of data loaded with link, the value of the href attribute is the URL of the style sheet, which can be a relative and absolute path.    Media properties, currently supported for three values: all, print and Screen,all, description This style sheet applies to all presentation media, print, used for printing documents for visually correct users, and is also used when displaying the "Print Preview" of a document, screen used when performing documents in screen media (such as desktop computer monitor), all Web browsers running on such a system are screen media user agents, can use a stylesheet in multiple media, separated by commas, and can be separated by commas in multiple media using a style sheet.

Candidate StyleSheets: The attribute value of rel is alternate stylesheet, which allows you to define a candidate style sheet that will be used for document performance only if the user chooses this style sheet. Style element, which can contain a style sheet, which appears separately in the document, by using the style element. Load external style sheet @import, @import appear at the beginning of the style sheet and can (generally) be introduced in CSS. Inner chain (internal) style, use style in HTML to set an inner chain style. In use because of differences in the browser, resulting in the inability of certain tags, backward accessibility, in order to prevent the browser unrecognized markup, it is recommended to use <!--and include it.

Summary, the use of CSS will completely change the way the user agent performance elements, the difference between the inner chain style and the external style, the external style so that all the information of the site in one place, not only make the network update and maintenance is quite easy, but also help to save bandwidth, because the document to remove all the performance information. In this section, the display usage is mentioned, the display specifies the type of box that the element should generate, the inline element is displayed as an inner chain element, there is no newline character before and after the element, and the block element is displayed as a chunk level element with a newline character before and after the element, none of this element will be displayed, List-item this element will be displayed as a list

Chapter II: Selectors

　　CSS Basic rules , rule structure, each rule has two basic parts, selectors and declaration blocks, the declaration block consists of one or more declarations, each declaration is a property corresponding to a value, tells us how to write CSS.

Element selectors, the most common selectors are often HTML elements, in other words, the elements of a document are the most basic selectors. Groups, multiple elements apply the same style, or apply multiple styles to an element or a group of elements. Selector groupings, for example: H1,h2{color: #999999;}, declaring groupings, for example: h1{color:red;font-size:18px;}. The wildcard selector (*), class selector, selector p.waring is interpreted as: Its class attribute contains all the paragraphs of warning. A multi-class selector is where the HTML element can have multiple class values.

How to choose a class selector or an ID selector, the browser does not detect the uniqueness of the ID in the HTML, but if there are multiple values of the same ID in a document, it is difficult to write DOM scripts, such as when using document.getElementById. We give to those that are important, only once, using the ID selector.

　　Simple Property Selector , select all H1 tags with class attribute, H1[class]{color: #fff;}, apply a style to the image with the ALT attribute, img[alt]{border:1px solid red;}. You can also choose from multiple properties by linking the property selectors together, such as A[href][title]{font-weight:bold;}. Select based on specific attributes, such as a[href= "http://www.baidu.com"]{style}. Select an element based on a partial attribute property value, use "~=", img[title~= "good"]{border:1px solid gray; Select all images that contain good in the title. Substring matching Property selector,
[class*= "Test"] Select the class attribute contains all elements of the substring test
[class^= "Test"] Select all elements with the class attribute beginning with test
[class$= "Test"] selects all elements with the class attribute ending with test, and the substring matching property selector is used for any attribute, for example: Class,href,alt,title, and so on. Specific attribute selection type, *[lang|= "en"]{color:white; this rule selects all elements that have the lang attribute equal to the beginning of en or en, and is used for any attribute and value.

Using the document structure: descendant selectors, an important aspect of the descendant selector, the level interval between two elements can be infinite, regardless of how deep your nesting hierarchy is. Select child element, if you want to select an arbitrary descendant selector, use the greater than sign (>), select the child element of an element
Select adjacent sibling elements, using the plus sign (+), which have a common parent element.

　　pseudo-and pseudo-elements, all pseudo-and pseudo-element keywords preceded by a colon:, class selectors, and ID selectors apply to pseudo-classes. In CSS2.1, static pseudo class has link and visited, Dynamic Pseudo class: Focus,hover,active. The order of pseudo-classes is usually as follows: Link-visited-focus-hover-active, warning, IE6 only allow dynamic pseudo-class to select hyperlinks before. Select the first child element, FIRST-CHILD,IE6 does not support First-child, IE7 support. Combine pseudo-class: a:link:hover{the mouse pointer rests on the non-access link when the mouse rests on the link that has been visited},a:visited:hover{},ie6 cannot recognize these combinations, IE7 can. Combine pseudo-class: a:link:hover{the mouse pointer rests on the non-access link when the mouse rests on the link that has been visited},a:visited:hover{},ie6 cannot recognize these combinations, IE7 can.

Summary, using selectors to create CSS rules, you can make our style sheet concise, flexible, reduce file size, shorten the download time. So we have to write the selector correctly so that the user agent can interpret the selector correctly. Through learning, let me know more about the class selector, the element selector has never been used to understand, pseudo-element or pseudo-class implementation, is by the user agent (here refers to the browser) dynamically constructed. Learn more about pseudo-class details, the selectors mentioned above: class selector-"ID selector-" element selector (basic selector)-"Multi-class Selector-" simple attribute selector-"descendant selector-" pseudo-class selector-"pseudo-element selector.

Chapter III: Structure and CASCADE

the particularity of the selector, the user agent calculates the particularity of the selector, attaches this particularity to the various declarations in the rule, and if the declaration conflicts, then the statement of the highest specificity will prevail.
The specifics of a selector are as follows:
For each ID attribute value given in the selector, add 0,1,0,0
For each class property value, attribute selection, and pseudo-class plus 0,0,1,0 given in the selector
Adds 0,0,0,1 for each element and pseudo-element given in the selector
Combined with a wildcard selector for specificity without any contribution
The particularity of the inner chain style 1,0,0,0

The particularity of the wildcard selector, a selector contains a wildcard selector and other selectors, the specificity of the selector will not be changed by the advent of the wildcard selector. Use!important to show importance.

Inheritance is the most basic content of CSS, some properties can not be inherited, such as attribute border,0 particularity is stronger than no particularity, for example, inheritance has no particularity, the wildcard selector is stronger than he, so try not to use a wildcard selector.

cascading ,!important importance is higher than the inline style weight.
Consider 5 levels in terms of weight, with weights from large to small in turn:
1, the reader's important statement (this refers to the user)
2, an important statement of the creator (creator refers to the web developer)
3, the creative person's normal statement
4, the reader's normal statement
5, user Agent declaration

In CSS2, it is considered that the style attribute declaration appears at the end of the document style sheet.

Non-CSS presentation hints, such as the font element, are handled as a special 0, as long as there is a creator style and appears in front of the creator style, it will be overwritten
Summary: Through the learning cascade, through the specificity and order to determine the priority of the style, and finally achieve the performance of the document.

Fourth chapter: Values and Units

All the work that can be done with CSS is based on units. Examples: numbers, percentages, colors, named colors, colors specified with RGB, functional RGB colors RGB (color), hexadecimal RGB colors, web-safe colors, length units. Absolute length units: inches (in), centimeters (cm), millimeters (mm), Points (PT), dispatch cards (PC), relative length units: Relative units are because they are measured according to the relationship of other things. There are three units of relative length, em,ex,px. 1EM=14PX, pixel theory, pixels are not the best choice, EM is. The URL absolute path and relative path, and the keyword None,inherit makes the value of one property the same as the value of its parent element. Can be used at the time of inheritance.

Summary: For this chapter understanding is not too clear, may feel the use of not too much, most of them use the PX, hope later can well understand the next

CSS authoritative Guide-third Edition-reading notes