"CSS Design Guide" Study Notes 1_html/css_WEB-ITnose

This article is about some study notes and experiences after reading Charles Wyke-Smit's "CSS Design Guide" these days. The author seems to have started contacting web design when he was a freshman. I am not a computer major, so I learned everything by myself. I remember that I basically didn’t know anything about CSS at the time, not even how to select a certain class and id in CSS, so I just downloaded some source code to look at it. , and later I saw that there were . and # in these CSS files, and then I learned how to use them without even guessing. Then when I saw something in the source code that I didn’t understand, I went directly to W3School to find the API. This gradually It allowed me to master the commonly used parts of CSS, and most of the problems when making web pages can be solved. Because my attitude was wavering during this period, I also wanted to learn PHP, Java, Android, etc. However, as you can imagine, the result was that I didn't stick to it. Now that my junior year is almost over and I am about to enter the stage of quasi-senior year, I feel that I can't do this. I have been thinking about a question some time ago, what do I like, and then I think about where I have spent the most time since college. The final result is... the front end. Although the front end involves a lot of knowledge, it does not Can't stop my passion for it. The first thing after deciding was to systematically consolidate my knowledge system, and then I had the study notes of this "CSS Design Guide". This book is also an introduction to CSS that is recommended by many people and has many positive reviews. Book. I have said so much nonsense but it is of no use. Let’s get to the point quickly. The following is mainly the author’s summary of certain chapters, not every chapter. It also contains some of the author’s personal views and some expansions on the content of the book. .

Since the article is relatively long, I will divide the article into multiple parts. The first part of this article

Chapter 1 HTML Markup and Document Structure
Since the object that CSS acts on is HTML, so the author mainly talks about the usage and structure of some basic HTML tags in this chapter.

1.2 HTML Document Analysis
In this section, the author mainly talks about the most basic document structure required for an HTML page as follows:

< html>







First of all, is a new document type in HTML5 Declaration syntax, HTML5 is greatly simplified compared to HTML4's lengthy document type declaration syntax.

1.2.2 Block-level elements and inline elements

The author introduces two important concepts in this section????Block-level elements and inline elements. By default, block-level elements are Elements will always occupy a line, but inline elements will not. Except for the special display attribute of the table element, the display attribute value of basically all HTML elements is either block or inline. One of the author's ideas is that no matter which HTML element you want to know, the first question to ask is: is it a block-level element or an inline element? Then when writing the markup, anticipate how this element will be positioned in the initial state. , so that you can further think about how to use CSS to reposition it in the future, because there is a big difference in positioning between block-level elements and inline elements, which will be explained in detail in the following expansion.

The block-level element box (a very important concept????box model, which will be explained in detail later) will expand to the same width as the parent element. This is why the block-level element will occupy one line. , because the parent element of all block-level elements is body, and its default width is the browser's viewport size, so by default the width of block-level elements is also as wide as the browser's viewport, so , there is no space next to one block-level element to accommodate another block-level element.

Compared with block-level elements that will expand to the same width as the parent element, inline elements behave exactly the opposite. They will try to "shrink-wrap" their content (also the concept of the box model). This That's why several inline elements will be displayed side by side on one line until they fill up a new line, and each block-level element will directly start a new line.

Expansion:

The author did not explain in detail some other characteristics of block-level elements and inline elements in this section. Here I will expand some knowledge of their characteristics. First, list some common block-level elements and inline elements:

div, form, table, header, aside, section, article , figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dl

span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code
The author mentioned before that no matter which HTML element you want to know, the first question to ask is: is it a block-level element or an inline element, because their performance on the box model is very different, but in Before understanding their differences, we must first understand another concept????Replacement elements and non-replacement elements. Replacement elements refer to elements that the browser determines the specific content to be displayed based on the attributes of the element, such as the img tag. The browser reads the content contained in this element based on its src attribute value. Common replacement elements include input, textarea, select, object, iframe, video, etc. These elements have a common characteristic, which is The browser does not directly display its content, but displays specific content through the value of one of its attributes. For example, the browser will determine whether it should display radio buttons or multi-select buttons based on the value of the type attribute in the input. Is a text input box. For non-replaced elements, such as p, label elements, etc., the browser directly displays the content contained in the element. At this point you should have a rough idea of ​​what replacement elements and non-replacement elements are.

After you have a general understanding of the two concepts, you can understand the difference in performance between block and inline on the box model. The first is margin. This is how W3C defines the element objects it supports. ：

Applies to: all elements except elements with table display types other than table-caption, table and inline-table
My English is not very good, so I don’t quite understand the meaning of this sentence. My understanding is this All elements support margin. All table display types except the display attribute value table-caption and table-inline, such as table-row-group, table-cell, table-row and table-header-group, etc., but in order to verify that I For my understanding, I would like to point out that elements with a display attribute value of table are also supported. Maybe my understanding of the original standard is wrong. But there is another thing to pay special attention to: margin-top and margin-bottom are two special attributes. They have no effect on non-replaced inline elements. The following is an introduction to the supported objects of margin-top and margin-bottom from W3C:

Applies to: all elements except elements with table display types other than table-caption, table and inline-table
These properties have no effect on non-replaced inline elements.
The previous sentence and the previous pair of margins The description is the same, there is no doubt that the following sentence means that these (margin-top and margin-bottom) properties have no effect on non-replaced inline elements such as a and span. Note that this is non-replaced inline elements and not just Is a non-replaced element or an inline element. For example, img is an inline element, margin-top and margin-bottom have an effect on it, because it is a replaced element rather than a non-replaced element, so "margin-top and margin-bottom have no effect on inline elements" This statement is incorrect.

W3C describes the support objects for padding as follows:

all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
The above sentence means that in addition to the table display types are table-row-group, table-header-group, table-footer-group, table-row, table-column- Group and table-column elements are not supported, but all other elements are supported.

But there are some special cases here that need to be noted. The effect of setting left and right padding on inline elements such as span and img is visible, but setting top and bottom padding on inline elements is not visible in some cases. , these situations are divided into whether it is a replacement element and whether the background color is set. In order to understand these concepts more intuitively, I made a table here:

padding-top, bottom is visible

So the statement that "padding-top and padding-bottom have no effect on inline elements" is also wrong, because they are only invisible for inline non-replaced elements that do not have a background color, and for inline replacement For elements, it will have an effect regardless of whether the background color is set, and it will expand the parent element.

Having said so many differences between block and inline-block, in fact, in addition to these two common display attributes, there is another attribute that is also very common, that is inline-block. Yes, these are the first two A combination of these situations, it has both the characteristics of block and inline. For example, after setting the attribute value of an element whose display attribute value is block or inline to inline-block, you can use text- which is only valid for inline elements. align: center; In addition to declaring to center it, you can also use padding-top and padding-bottom to set the top and bottom padding on the element without setting a background color, and can stretch the parent element.

This is the end of the expansion of block-level elements and inline elements. If there is anything unclear or wrong, please point it out.

1.3 Document Object Model
In this section, the author only introduces the Document Object Model (DOM, Document Object Model) corresponding to the HTML structure. DOM observes the elements in the page and each element from the perspective of the browser. Attributes of elements, from which a family tree of these elements can be derived. The relationship between each element in the document can be clearly seen through the DOM. For example, the DOM family tree of the following HTML code is as follows:

The Document Object Model

< ;p>The page's HTML markup structure defines the DOM.

DOM

The above is a very simple DOM Structure diagram, from which you can and intuitively see the relationship between each element in the HTML document flow, such as whether it is a parent-child element or a sibling element.

1.4 Summary
In this chapter, the author mainly explains how HTML tags provide structure for content, and what kind of boxes each element will generate on the screen, such as inline boxes or block-level boxes. Finally, I briefly explained what DOM is. It is the model of the document in the browser, and CSS can modify the style attributes of elements in the DOM, thereby modifying the layout and appearance of the page itself.

Chapter 2: How CSS works
In this chapter, the author mainly explains how CSS adds styles to HTML, and explains the working mechanism of cascading, such as when the same attribute of an element is styled multiple times. Which style should be chosen depends on the cascading mechanism of CSS to determine which style is ultimately applied.

Each HTML element has a set of style attributes that relate to different aspects of the element when it is displayed in the document flow, such as its position in the document flow, borders, background, color, etc. CSS is a mechanism that first selects HTML elements and then sets the CSS properties of the selected elements. The CSS selector and the style to be applied form a CSS rule.

2.2 Context Selector
The format of the context selector is as follows:

Tag 1 Tag 2 ｛ Statement ｝
Among them, tag 2 is the target we want to select, and only in the tag It will be selected only if 1 is the ancestor element of tag 2 (not necessarily the parent element). Strictly speaking, the context selector should be called "Descendant Comninator Selector".

One more thing to note is that context selectors use spaces as delimiters while group selectors use commas as delimiters, don’t get confused.

2.3 Special context selector
The context selector introduced by the author in the previous section uses an ancestor element as the context, as long as the target element has such an ancestor element "upstream" in the DOM structure. , it doesn’t matter how many levels are separated between this ancestor element and the target element, but sometimes we need a more specific context than "an ancestor element", then we can use some special selectors, such as self-select selector>, immediate sibling selector, general sibling selector~ and universal selector*.

2.3.1 Sub-selector>

Tag 1 > Tag 2
The tag 2 here must be a child element of tag 1, that is to say, tag 1 must be tag 2 The parent element of tag 2 and not any other ancestor element of tag 2.

2.3.2 Immediately following sibling selector

Tag 1 Tag 2
Here tag 2 must immediately follow sibling tag 1, otherwise it will be invalid.

2.3.3 General sibling selector~

Tag 1 ~ Tag 2
Here tag 2 must follow (does not have to follow immediately, just after tag 1) ) after its sibling label 1.

2.3.4 Universal Selector*

*
Universal Selector* is a wildcard character that represents any element in the document flow, but Universal Selector* is usually paired with some Use other selectors, such as:

section > *
represents all sub-elements of section, but generally speaking, wildcards are rarely used to select all sub-elements under a certain element, because this involves When it comes to browser performance issues, it will affect the rendering time of the web page. When we write, we write from left to right, but the browser renders from right to left. As for the above code, the browser will first Traverse all elements, and then find out which elements have a section as their parent element. Another example, there is a selector:

div.container #main > .article {}
The browser is rendering When , first take out the elements containing article in all classes to form a collection, and then traverse the elements in each collection. If the id of the element's parent element is not main, delete the element from the collection. Then start searching upwards from the parent element of this element. If you don't find an element with the tag name div and container in the class name, delete the element from the collection until all conditions are matched, so you can do it without using wildcards. If so, try not to use it.

2.4 ID and class selectors
The author introduces the id and class selectors in this section, which provides us with another means of selecting elements. They can be used to ignore the hierarchical structure of elements in the document flow. As long as the id and class attributes and values ​​are added to the element, we can find the target element through their values.

You can set any value for the id and class attributes, but they cannot start with numbers or special symbols.
2.4.3 When to use id and when to use class

The purpose of id is to uniquely identify elements in the page, so each id attribute value in each page is unique. The purpose of class is to identify a group of elements with the same characteristics, which means that multiple identical classes can appear on a page.

The author’s view on when to use ids is:

Every top-level area should be added with an id to get a very clear context so that only nesting can be selected when writing CSS label in the corresponding area.
As for when to use class, since the purpose of class is to identify a group of elements with the same characteristics, if there is a group of elements in the page that have certain same characteristics, you should not hesitate to use class.

But you should also be careful not to use classes indiscriminately here to avoid flooding of classes, for example:

• Alan


• Andrew


• Angela


• Angus


• Anne< ;/li>
  
• Annette

< /nav>
The above example is a typical class flooding.

2.4.4 Summary of id and class

I think everyone has different opinions on when to use id and when to use class. I will write down my opinion here. If you think it is practical, try not to use id. The actual situation is that I basically do not use id in CSS, because in the CSS cascading mechanism, the weight of id is 10 times that of class. In fact, in many cases, a certain element is set to a certain value. Overriding the previous style with a different style has no effect because the weight of the previous style is too high. In order to achieve the effect, a selector with a higher weight must be written, so it will only be used when an element needs to be found by JavaScript. Add an id to an element so that you can quickly get the required element through the document.getElementById() method.

2.5 Attribute selector
Attribute selector includes attribute name selector and attribute value selector, which obtain the element through its attribute and value:

Tag name [attribute name]
Tag name[attribute name="attribute value"]
For example:

img[title] {border: 2px solid blue;}
a[target="_blank"] {background-image: url(_blank.png);}
The first piece of code above means that if an img tag has the attribute title, then add a solid blue border with a width of 2px to it . The meaning of the second piece of code is that if an a tag has the target attribute and the value of this attribute is _blank, then add a background image to this element.

Extensions:

In fact, in addition to the above two attribute selectors, there are several other attribute selectors that the author has not listed. Here is a simple summary of these other attribute selectors. Introduction:

Tag name [name^="value"] allows you to match tags whose attribute is `name` and whose attribute value starts with `value`, such as: a[href^= "http://" ] matches all tags that have a `href` attribute and the attribute value starts with `http://`.

Tag name [name$="value"] allows you to match tags whose attribute is `name` and the attribute value ends with `value`, such as: a[href$=".com"] matches all tags A tag with a `href` attribute whose value ends with `http://`.

Tag name [name*="value"] allows you to match tags with the attribute `name` and the attribute value containing `value`, such as: a[href*= "renren"] matches all tags with ` href` attribute and the attribute value contains the `http://` tag.

Tag name [name|="value"] allows you to match tags with attributes `name` or starting with `name-`, such as: p[lang|= "en"] matches tags with `lang ` The `p` tag of an attribute, regardless of whether its attribute value is `en` or `en-us`.

Tag name[name~="value"] allows you to match the attribute `name` and its attribute value is a value with multiple space-separated values, one of which is `value`, if any:
< a title="I'm title for learn more">Learn More
You can use p[title~="learn"] to select this element.
You should have noticed the difference between these attribute selectors and the previous two attribute selectors. Through these attribute selectors we can easily create many unexpected effects, such as:

a[href$=".pdf"] {background-image: url(pdf.png);}
For example, the above code adds an a tag indicating that the link is a pdf document. Image, and the a tag whose href attribute value does not end with .pdf will not apply this style statement, allowing users to clearly determine what type of link this is.

2.6 Pseudo-classes
Pseudo-classes are called pseudo-classes because they are similar to classes, but in fact there is no class attached to the label in the markup. Pseudo-classes are divided into two types:

UI (User Interface, User Interface) pseudo-class: When the HTML element is in a certain state (such as the mouse pointer is on a connection), CSS styles are applied to the element.
Structured pseudo-class: When there is a purely structural relationship in the markup (for example, an element is the first or last element of a group of elements), CSS styles are applied to the corresponding elements.
2.6.1 UI pseudo-class

Link pseudo-class
link: The link is right there waiting for the user to click.
visited: The user has clicked this link before.
hover: The mouse pointer is hovering over the connection.
active: The link is being clicked (the mouse is pressed on the element but has not been released).
Note that the above link pseudo-categories must be in a certain order to be effective. In order to facilitate memory, the author recommends: "LoVe? HA!", the capital letter is the first letter of each pseudo-category. In fact, it is also You can remember it like this: "LoVe, HAte", in fact, it's almost the same.

One colon (:) represents a pseudo-class, and two colons (::) represent new pseudo-elements in CSS3.
:focus The text field in the pseudo-class form will gain focus when the user clicks it, for example:
input:focus {border: 1px solid blud;}
The meaning of this code is that when the user clicks When clicking the text field in the form, add a solid blue border with a width of 1px to the input label. It should be noted that the colon of the pseudo class must follow the label name, and there must be no space between them, otherwise the statement will be invalid.

:target pseudo-class If the user clicks on a link to another element on the page, which element is the target (target), you can use the :target pseudo-class to select it, such as:
More Information
The element with the id more-info located elsewhere on the page is the target element. The element may look like this:

This is the information you are looking for.

Then the CSS rules are as follows:

#more-info:target {background: #eee;}
At this time, when the user clicks on the link to redirect to the element with the id of more-info, the background of the target element will turn to light gray.

2.6.2 Structured pseudo-classes

first-child, last-child and nth-child(n)
e:first-child
e:last-child
first-child and last-child represent the first element and the last element in a group of sibling elements respectively, while nth-child(n) represents any element in a group of sibling elements, where n represents an integer (It can also be odd-odd number or even-even number) or it can be an arithmetic expression (2n 1), for example:

• My Fast Pony
• Steady Trotter


• Slow Ol' Nag

ul li:first-child { color: black;}
ul li:nth-child(2) {color: red;}
ul li:last-child {color: blue;}
The above HTML applies the above CSS rules Then, the font color of the first element of the unordered list will become black, the second element will become red, and the last element will become blue.

2.7 Pseudo-elements
As the name suggests, pseudo-elements are elements that exist or not in the document. The following are some of the more commonly used pseudo-elements.

::first-letter pseudo-element, for example:
p::first-letter {font-size: 300%;}
In this way, the size of the first letter of the p tag will become 3 times the original size, while other elements do not.

::first-line pseudo-element: you can select the first line of a text paragraph.
::before and ::after pseudo-elements
e::before
e::after
can be used to add special content before or after specific elements, such as:

< p class="age">25

.age::before { content: "Age: ";}
.age::after { content: " years";}
It should be noted here that for ::before and ::after Pseudo-element, its content attribute is required, and search engines will not obtain the information of pseudo-element (because it does not exist in the document flow), so do not add some content that is important to search engines through pseudo-element .

Extension:

In fact, there can be two or one colon in front of the pseudo element, but in order to distinguish the pseudo class, the author recommends that you still use two colons. Another thing to note is that, for example, if you add two pseudo-elements to a pseudo-element through the ::before and ::after pseudo-elements, the two generated pseudo-elements will be inside the pseudo-element element, that is to say They are child elements of the pseudo-element element, and are located at the front and end of the content of the pseudo-element element respectively. The code is as follows:

< ;p>Pseudo Element

.pseudo-element::after,
.pseudo-element::before {
content: "";
}
Pseudo Element

As shown in the figure above, the two generated pseudo-elements are inside the pseudo-element element and are located in front and behind the content p tag of the pseudo-element element respectively. , instead of in front and behind the outside of the pseudo-element element as shown below:

Pseudo Element

2.9 Cascading
Cascading is the cascading in the cascading style sheet, which is a The process of stacking styles layer by layer in the document hierarchy to allow the browser to determine which value to use when faced with multiple sources of a specific attribute value for a tag.

Cascading is the core mechanism of CSS. Only by understanding it can we write the most easily changeable CSS in the most economical way, so that the appearance of the document can meet the design requirements while also leaving some space for users. The display effect of the document can be changed as needed.

2.9.1 Style Sources

The author introduces several sources of styles in this section:

- Browser default style sheet
- User style sheet
- Author link style sheet
- Author embedded style
- Author inline style
The author describes this in the book:

The browser will check each item in sequence in the order above. Styles from a source, and if defined, update the setting of the attribute value of each label. After the entire checking and updating process is completed, each label will be displayed in the final set style.
2.9.4 Calculating specificity

The author mainly introduces the calculation method of specificity in this section. Compared with the author’s calculation method, the author personally prefers his previous calculation method, although Almost as follows:

// First define four levels: A - B - C - D
1. Level A represents inline style: for example `style=" "`, the weight is: 1000 ;
2. Level B represents ID selector: for example `#main`, weight is: 100;
3. Level C represents class, pseudo-class and attribute selector: `.class` and `[title ]`, the weight is: 10;
4. D level represents the element (tag) name or pseudo-element selector: such as `p` and `::after`, the weight is: 1.

//After calculating each value, add each value together. Whichever value is larger will have a higher weight.
For example:

body #main .class a[title]::after {}
Let’s first analyze which selectors it consists of. The above rule has an id selector (#main ), a class selector (.class), an attribute selector ([title]), a pseudo-element selector (::after) and two tag name selectors (body and a), so its weight is equal to :

100 × 1 10 × 2 1 × 3 = 123
Another thing to note is that the weight value 001(12) still has a higher weight than 0020. For If the weights are the same, the style declared later will be higher.

2.10 Summary
The author introduced some rules of CSS in this chapter, such as the use of various selectors, the cascading mechanism, and the calculation of weights.

If there is something wrong or unclear, please point it out and discuss it.