How the CSS Design Guide notes--CSS works

Summary of the CSS Design Guide by reading and learning books
CSS Design Guide/charles lvyke-smith. Lisongfeng-People post and Telecommunications publishing house
Book site: http://www.stylinwithcss.com
Highly Recommended!! Simple, concise, suitable for beginners!!

How CSS Works 2.1 parsing CSS rules

?? The rule is actually a complete CSS directive. The rule declares the element to be modified and the style to apply to the element.

2.1.1 Three ways to add a style to a document

?? There are three ways to add CSS to a Web page, which is written in the element tag (inline style), written in a <style> tag (embedded style), and written in a separate CSS style sheet (link style).

• Inline styles: inline styles are written in the style attribute of a particular HTML tag, and are very limited in their usefulness. Inline styles affect only the labels they are in, and they always overwrite the embedded and link styles.

• Embedding styles: embedded CSS styles are placed in the head element of an HTML document, and the embedded style is scoped to the current page. Page styles override the style of an external style sheet, but are overridden by inline styles.

• link Style: When you create a Web site that contains multiple pages, you need to set the style in a separate file, which is called a style sheet. A style sheet is actually a text file with a. css extension. You can link the same stylesheet file to any number of HTML pages, each with just one line of code similar to the following:

<link href="style.css" rel="stylesheet"type="text/css" />

?? A link style can be scoped to the entire Web site. As long as you use the label to link the style sheet to each page, the corresponding page can use the style. Then, just modify the style in the style sheet, and the changes will be reflected on all the selected elements, no matter which page the element is in. In this way, the overall appearance of the page can be unified, but also facilitate the whole station style update.

?? In addition to the three ways to add styles to a page, there is a way to link other style sheets on a style sheet, and then apply the @import directive (which is an at rule):

@import url（css/style2.css）

Note that the @import instruction must appear before other styles in the style sheet, otherwise @import the referenced style sheet will not be loaded.

2.1.2 CSS Rule Naming conventions

?? CSS rules are divided into two parts: selectors and declarations. The declaration is made up of two parts, the property and the value. The declaration is contained within a pair of curly braces.

P {color:red;} P {color:red;  font-size:px;  font-weight:bold; }H1,H2,H3 {color:blue;  font-weight:bold; }

2.2 Context Selectors

?? The format of the context selector is as follows:

标签1 标签2{声明}

?? Where label 2 is the target of our choice and is selected only if label 1 is its ancestor (not necessarily the parent element).

?? The context selector, strictly speaking (in the CSS specification), called the descendant combo selector (descentdant combinator selector), is a set of spaces separated by a label. Used to select the label as the descendant of the specified ancestor element. Such as:

articlep {font-weight:bold;}articleh1em {color:green;}//双上下文选择符可以选中更具体的标签

2.3 Special contextual selectors 2.3.1 sub-selectors >

??标签2 Must be a 标签1 child element, or conversely, a 标签1 parent element that must be 标签2 . This selector 标签1 cannot be an 标签2 ancestor element other than the other. Such as:

sectionh2{font-style:italic；}

2.3.2 adjacent to sibling selector +

??标签2 Must be immediately behind his countrymen 标签1 . Such as:

h2p{font-variant:small-caps;}

2.3.3 General Sibling Selector ~

标签1~标签2

??标签2 Must be followed (not necessarily immediately) behind his countrymen 标签1 . Such as:

h2a{color:red;}

2.3.4 Universal Selector *

?? The Universal selector * (often referred to as the asterisk selector) is a wildcard character that matches any element. Such as:

p * {color:green;}sectiona {font-size:1.3em;}//任何是section孙子元素，而非子元素的a标签都会被选中

?? In summary, only a selector for a label name selects all instances of the same label on the page. With the context selector, you can specify that the tag must have a corresponding ancestor or sibling.

2.4 ID and Class selector 2.4.1 class properties

?? The Class property is the class attribute of the HTML element, and any HTML element contained in the body tag can add this property.

• Class selector: Adds a dot before the HTML class name. Such as:

.specialtext {font-style：italic}

• Tag Band class selector: write the label signature and the class selection symbol in one piece, for example:

p.specialtext {color:red;}//更精确的选择特定的标签p.specialtextspan{font-weight:bold;}

• A multi-class selector. Such as:

<p class="specialtext featured">tag<span>ornot</span> be styled.</p>.specialtext.featured {font-size:120%;}//两个类名之间没有空格，这里选择同时具有这两个类名的那个元素

2.4.2 ID Property

?? The ID is similar to the class, such as:

#specialtext {CSS样式声明}

2.4.3 when to use the ID, when to use the class

?? The purpose of the ID is to uniquely identify a specific element in the page markup. It provides the necessary context for us to write CSS rules, excludes extraneous markup, and selects only the tags in that context.

?? In contrast, the purpose of a class is to identify a set of elements with the same characteristics that can be applied to the public identifiers of any number of HTML elements in any number of pages, so that we apply the same CSS style to those elements. Also, using a class makes it possible to apply the same style to elements of different tag names.

?? Note: Do not use classes indiscriminately. To fully understand the role of inheritance and context selectors. Use it to share styles with different tags, reducing the amount of CSS you need to write and maintain.

2.5 Property Selector 2.5.1 Property name Selector

标签名[属性名]//选择任何带有属性名的标签名img[title] {border:2px solid blue;}

2.5.2 Property Value Selector

标签名[属性名="属性值"]//选择任何带有值为属性值的属性名的标签名img[title="red flower"] {border:4px solid green;}

2.6 Pseudo-Class

There are two kinds of pseudo-classes.

• The UI (user Interface, UI) pseudo-class applies a CSS style to an HTML element when it is in a certain state, such as when the mouse pointer is over a link.

• A structured pseudo-class applies a CSS style to the corresponding element when there is a structural relationship in the tag, such as when an element is the first or last of a set of elements.

2.6.1 UI Pseudo-Class

?? The UI pseudo-class applies styles based on the state of the HTML element.

?? 1. Structure Pseudo-Class

• Link: At this point, the links are there waiting for the user to click.

• Visited: The user has previously clicked on this link.

• Hover: The mouse pointer is hovering over the link.

• Aactive: The link is being clicked (the mouse is pressed on the element and has not been released).

A colon (:) represents a pseudo-class, and a two colon (::) represents the new pseudo-element CSS3. Such as:

a:hover{text-decoration:none;}p:hover{background-color:gray;}

?? 2. Focus Pseudo-Class

e:focus//e表示任何元素

?? The text field in the form gets the focus when the user clicks it, and then the user can enter characters in it. Such as:

intput:focus{border:1px solid blue;}

?? Adds a blue box to the field when the cursor is in the input field. This allows the user to know exactly where the characters entered will appear.

?? 3.: Target Pseudo class

//如果用户点击一个指向页面中其他元素的链接，则这个元素就是目标，可以用：target伪类选中它

?? For example: for the following link

<a href="#more_info">More Information</a>

?? Elsewhere on the page, the element with ID More_info is the target. The element might be this:

id="more_info"isthefor.

?? So, the following CSS rules

#more_info：target {background：#eee;}

?? Adds a light gray background to the element when the user clicks the link to the element with ID more_info.

2.6.2 structured pseudo-class

?? 1.: First-child and: Last-child

e:first-child //代表一组同胞元素中的第一个元素e:last //代表最后一个

?? 2.: Nth-child

e:nth-child// n表示一个数值，也可以是odd或者even，2n+1等

2-7 Pseudo-Elements

?? A pseudo-element is an element in your document that has no real elements.
?? 1.:: First-letter pseudo-Element

p::first-letter {font-size:300%;}//段落首字母放大效果

?? 2.:: First-line pseudo-Element

p::first-line {font-variant:small-caps;}//把第一行以小型字母显示

?? 3.:: Before and:: After pseudo element

e::beforee::after //用于在特殊元素前面或后面添加特殊元素

2.8 Inheritance 2.9 Cascade

?? See "HTML+CSS Basic Course" study note six
?? The following is the order in which the browser stacks each source style:

• Browser Default Style

• User style Sheet

• Authors connect style sheets (in the order in which they are linked to pages)

• Author embed style

• Author inline style

?? The browser examines each source's style in the order listed above, and, if defined, updates the setting for each tag property value. After the entire check update process is complete, each label is displayed in the final set style.

2.9.1 cascading rules:

规则一：找到应用给每个元素和属性的你所有声明；规则二：按照顺序和权重排序；规则三：按特指度排序；规则四：顺序决定权重（当特指度相同时）。

2.9.2 calculation of the specified degree

?? First, there is a simple scoring rule that calculates three values for each selector according to the following "ICE" formula:

I-C-E

• The selector has an ID in the position of I plus 1;

• There is a class in the selector that adds 1 to the position of C;

• There is an element (label) name in the selector, plus 1 on the e position;

• Get a three-digit number.

p                                  0-0-1 特指度 =1p.largetext                        0-1-1 特指度 =11p#largetext                        1-0-1 特指度 =101body p#largetext                   1-0-2 特指度 =102body p#largetext ul.mylist         1-1-3 特指度 =113body p#largetext ul.mylist li      1-1-4 特指度 =114

Simple Stacking essentials:

• Rule one: The selector containing the ID is more than the selector containing the class, and the selector for the containing class is more than the selector containing the tag

• Rule two: If several different sources define a style for the same attribute of the same label, the inline style is better than the inline style, and the embedding style is better than the link style. In a linked style sheet, a style that has the same degree of specificity is declared more than the first declaration.

• Rule three: The style that is set is better than the inherited style, which does not consider the specified degree (that is, explicit setting takes precedence).

2.10 Rule Declaration

CSS property values are mainly divided into the following three categories.

• The text value.

• numeric value.

• Color values

"Html+css Basic Course" Study note seven (formatted layout)

"Html+css Basic Course" Study note ten (color value, text value, code shorthand, Text Center setting)

"CSS3" notes – color mode and opacity

COLRD: A Pinterest-style site has lots of inspiring images and photos, as well as a palette of the corresponding ones.

Adobe Kuler:adobe Kuler's official website offers thousands of color swatches, palette creation tools, and fashion colors that others have chosen.

How the CSS Design Guide notes--CSS works