Home > Developer > JavaScript
CSS design guide, Study Notes 1, css design guide
This article is about some notes and Experiences after reading Charles Wyke-Smit's "CSS design guide" over the past few days. I seem to be getting started with web design when I was a freshman, because it is not a computer Major, all of them are self-taught. I remember that I didn't know anything about CSS at the time, even how to select a class and id in CSS, then download some source code. Later, we can see that these CSS files contain. and #, and then even learned how to use them, and then directly go to W3School to find the API if you see anything you don't understand in the source code, in this way, I gradually learned the common parts of CSS and solved most of the problems when creating webpages. I want to learn PHP, Java, Android, and so on, but I can imagine the result. I didn't stick to it yet. Now, I am about to enter the quasi-senior level, I don't feel like this anymore. I have been thinking about a problem some time ago, what do I like, and then I think about what I spent the most time in college, the final result is the front-end. Although the front-end involves a lot of knowledge, this does not hinder my enthusiasm for it. The first thing after the decision is to consolidate the system's knowledge system, and then take the study notes in the CSS design guide, this book is also a CSS entry-level book that many people have recommended and praised. After talking about so much nonsense, it is useless. * hurry to the topic. The following is my summary of some chapters, which is not a summary of each chapter, at the same time, I also have some personal opinions and some extensions on the book content.
Because the article is long, I will divide the article into multiple parts here. The first part of this article
Chapter 1 HTML Tag and document structure
Since CSS is used for HTML, the author first introduces some basic HTML Tag usage and structure in this chapter.
1.2 HTML document analysis
In this section, the author mainly describes the basic structure of an HTML page:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> Document </title>
</Head>
<Body>
<! -- Here is the webpage content -->
</Body>
</Html>
First <! DOCTYPE html> is the new file type declaration syntax in html5. compared with the lengthy file type declaration syntax in html4. HTML5 is greatly simplified.
1.2.2 block-level and intra-row Elements
The author introduces two important concepts in this section-block-level elements and intra-row elements. By default, block-level elements always occupy one row, while intra-row elements do not. Except for the display attribute of the table element, the display attribute values of all HTML elements are either block or inline. The author's idea is that no matter which HTML element you want to know, the first question to ask is: whether it is a block-level element or a row element, then, when writing a tag, you can pre-think about how the element is located in the initial state, so that you can further think about how to use CSS to reposition it in the future, because block-level elements differ greatly from intra-row elements in positioning, the subsequent expansion will be described in detail.
The block-level element box (a very important concept-the box model, which will be described later) will be extended to the same width as the parent element, which is why the block-level element occupies a row, because the parent element of all block-level elements is the body, and its default width is the browser's viewport size, by default, the block-level element width is the same as that of the browser. Therefore, there is no space next to a block-level element to accommodate another block-level element.
Compared to block-level elements that extend to the same width as the parent element, the behavior of the element in the row is the opposite. It tries its best to "contract the contents" (also the concept of the Box Model ), this is why the elements in several rows are displayed in one row side by side until they are filled with one row before they start another row, and each block-level element directly starts another row.
Expansion:
In this section, the author does not give a detailed explanation of some other features of block-level elements and intra-row elements. Here I will expand some of their feature knowledge. First, list some common block-level elements and In-row elements:
<! -- Common block-level elements -->
Div, form, table, header, aside, section, article, figure, figcaption, h1 ~ H6, nav, p, pre, blockqoute, canvas, ol, ul, dl
<! -- Common in-row elements -->
Span, a, img, label, input, select, textarea, br, I, em, strong, small, button, sub, sup, code
The author mentioned that no matter which HTML element you want to know, the first question to ask is: whether it is a block-level element or an in-Row Element, because they are very different in the box model, but before learning about their differences, we have to first know another concept-replace elements and non-replace elements, the replacement element refers to the element in which the browser determines the content to be displayed based on the element attributes, 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, and video, these elements share a common feature, that is, the browser does not directly display the content, but displays the specific content through the value of an attribute, for example, the browser determines whether to display single-choice buttons, multiple-choice buttons, or text input boxes based on the property value of type in input. For non-replacement elements, such as p and label elements, the browser directly displays the content contained in the element. Here, you should probably know what is a replacement element and a non-replacement element.
After a rough understanding of the two concepts, we can understand the differences between block and inline in the box model. The first is margin, w3C defines its element objects as follows:
Applies to: all elements partition t elements with table display types other than table-caption, table and inline-table
The English is not very good. I am not very clear about the meaning of this sentence, in my understanding, all elements support the display types of all tables except the display attribute values of margin for table-caption and table-inline, such as table-row-group, table-cell, and table-row. and table-header-group, however, to verify my understanding, I recommend that the elements whose display attribute value is table are also supported. It may be that my understanding of the original standards is incorrect. Note that the attributes of margin-top and margin-bottom are special, and they have no effect on the Elements in non-replaced rows, the following describes the supported objects of margin-top and margin-bottom on W3C:
Applies to: all elements partition t 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 is the same as the previous description of margin, which undoubtedly means the following (margin-top and margin-bottom) attribute has no effect on non-replaced row elements, such as a and span. Note that this field does not replace row elements, not just replacement elements or intra-row elements. For example, img is a row element, and margin-top and margin-bottom have an effect on it, because it is a replacement element rather than a non-replacement element, therefore, it is incorrect to say that "margin-top and margin-bottom have no effect on intra-row elements.
W3C describes the supported padding objects as follows:
All elements should t table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
The preceding statement indicates that the table display types include table-row-group, table-header-group, table-footer-group, and table-row, table-column-group and table-column elements are not supported, and all other elements are supported.
However, in some special cases, it should be noted that the effect of setting the Left and Right padding on the row elements such as span and img is visible, however, setting the upper and lower margins of the row elements is invisible in some cases. In these cases, we need to determine whether to replace the elements and whether the background color is set. In order to better understand these concepts, here I made a table:
Padding-top, whether bottom is visible
Therefore, it is not true that "padding-top" and "padding-bottom" have no effect on intra-row elements, because they are only invisible to non-replaceable elements in rows without a background color, for an in-row replacement element, no matter whether or not the background color is set, it is effective, and the parent element is extended.
After talking about the differences between so many blocks and inline-blocks, in fact, in addition to the two common display attributes, there is also a very common attribute, that is, inline-block, that is, yes, this is the combination of the previous two cases. It has both the block feature and the inline feature. For example, after setting the attribute value of an element whose display attribute value is block or inline to an inline-block, you can use text-align: center, which is only valid for the row elements, to declare that the content is centered, you can also use padding-top and padding-bottom to set the upper and lower margins of elements without setting the background color, and extend the parent element.
The expansion of block-level elements and In-row elements is now here. If you do not understand or do not understand anything, please note.
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 is to observe the elements in the page and the attributes of each element from the perspective of the browser, so that a family tree of these elements can be obtained. DOM clearly shows the relationship between each element in the document. For example, the DOM family tree of the following HTML code is as follows:
<Body>
<Section>
<H1> The Document Object Model <P> The page's HTML markup structure defines the DOM. </p>
</Section>
</Body>
DOM
The above is a very simple DOM structure diagram, so you can intuitively see the relationship between each element in the HTML document stream, such as whether it is a parent-child element or a sibling element.
Conclusion 1.4
In this chapter, the author explains how HTML tags provide structure for the content, and how each element will generate a box on the screen, such as an in-row box or a block-level box, finally, I briefly explained what DOM is. It is the document model in the browser, and CSS can modify the element style attribute in the DOM to modify the layout and appearance of the page.
Chapter 2 How CSS works
In this chapter, the author explains how CSS adds styles to HTML, it also explains the cascade mechanism, such as the style that should be selected after the same attribute of an element is set for multiple times, this depends on the CSS cascade mechanism to determine the final style of the application.
Each HTML element has a set of style attributes, which involve different aspects of the elements displayed in the Document Stream, such as the position, border, background, and color in the Document Stream. CSS is a mechanism that selects HTML elements first and then sets the CSS attributes of the selected elements. The CSS selector and the style to be applied constitute a CSS rule.
2.2 context Selector
The format of the context selector is as follows:
Label 1 label 2 {declaration}
Tag 2 is the target to be selected, and is selected only when TAG 1 is the ancestor element of tag 2 (not necessarily the parent element. The context Selector should be called the Descendant Comninator Selector )」.
Note that the context selector uses spaces as the separator while the group selector uses commas as the separator.
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 in the DOM structure "upstream, no matter how many layers the ancestor element is separated from the target element, sometimes we need a more specific context than "an ancestor element, at this time, we can use some special selectors, such as the self-Selector>, the adjacent sibling selector +, and the general sibling selector ~ And General selector *.
2.3.1 sub-Selector>
Tag 1> tag 2
Tag 2 must be a child element of tag 1, that is, tag 1 must be the parent element of tag 2, rather than any other ancestor element of tag 2.
2.3.2 adjacent to Brother selector +
Tag 1 + tag 2
Here tag 2 must be followed by sibling tag 1; otherwise, it is invalid.
2.3.3 common sibling selector ~
Label 1 ~ Label 2
Here, tag 2 must be followed (not necessarily followed, but only after tag 1) After sibling tag 1.
2.3.4 General selector *
*
The general selector * is a wildcard that represents any element in the Document Stream. However, the general selector * is usually used with some other selectors, such:
Section> *
Represents all child elements of a section, but generally, all child elements under an element are rarely selected using wildcards, because this involves browser performance issues and affects the rendering time of the webpage, we wrote it from left to right, but the browser rendering was from right to left. In the above Code, the browser first traverses all elements, then, find out which elements have the parent element section. In another example, there is a selector:
Div. container # main>. article {}
When rendering, the browser first obtains all the elements in the class that contain article to form a set, and then traverses the elements in each set, if the id of the element's parent element is not main, the element is deleted from the set. Then, start from the parent element of the element and look up. If no element whose label name is div and the class name contains iner is found, the element is deleted from the set until all conditions are matched, therefore, do not use a wildcard if possible.
2.4 ID and class selector
In this section, the author introduces id and class selector, which provides us with another method to select elements. They can be used without considering the hierarchical structure of elements in the Document Stream, 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 cannot start with a number or special symbol.
2.4.3 When to use id and class
Id is used to uniquely identify an element on a page. Therefore, each id attribute value on each page is unique. The purpose of class is to identify a group of elements with the same features, that is, multiple identical classes can appear on a page.
The author's opinion on when to use id is:
Each top-level area should be added with an id to obtain a very clear context, so that you can select only labels nested in the corresponding area when writing CSS.
When to use the class, because the purpose of the class is to identify a group of elements with the same features, if a group of elements on the page have some same features, class should not be hesitated.
However, do not use classes indiscriminately to avoid class flooding. For example:
<Nav>
<Ul>
<Li class = "boy"> <a href = "#"> Alan </a> </li>
<Li class = "girl"> <a href = "#"> Andrew </a> </li>
<Li class = "boy"> <a href = "#"> Angela </a> </li>
<Li class = "boy"> <a href = "#"> Angus </a> </li>
<Li class = "girl"> <a href = "#"> Anne </a> </li>
<Li class = "girl"> <a href = "#"> Annette </a> </li>
</Ul>
</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. Here I will talk about my point of view. I think that I will try not to use id if it is not practical, the actual situation is that the author basically does not use id in CSS, because in the CSS cascade mechanism, the weight of id is 10 times that of class, in fact, in many cases, setting a different style for an element to overwrite the previous style does not work because the previous style weight is too high, and to achieve the effect, you need to write a selector with a higher weight, therefore, only when an element needs to be found by JavaScript will the id be added to an element so that the document can be used. getElementById () method to quickly obtain the required elements.
2.5 attribute Selector
Attribute selectors include the attribute name selector and attribute value selector. they obtain the elements through the attributes and values of the elements:
Tag name [attribute name]
Tag name [attribute name = "attribute value"]
For example:
Img [title] {border: 2px solid blue ;}
A [target = "_ blank"] {background-image: url(_blk.png );}
The first code above indicates that if an img tag has the title attribute, a blue solid-line border with a width of 2 PX will be added to it. The second code indicates that if a tag a has the target attribute and the value of this attribute is _ blank, a background image is added to this element.
Expansion:
In fact, in addition to the above two attribute selectors, there are several other attribute selectors not listed by the author. Here these other attribute selectors are a simple introduction:
The tag name [name ^ = "value"] matches the tag whose attribute is 'name' and whose attribute value starts with 'value', for example, a [href ^ = "http: // "] matches all tags with the 'href 'attribute and the attribute value starts with 'HTTP.
The tag name [name $ = "value"] matches the tag whose attribute is 'name' and whose attribute value ends with 'value', for example, a [href $ = ". com "] matches all tags with the 'href 'attribute and whose attribute value ends with 'HTTP.
The tag name [name * = "value"] allows you to match the tag whose attribute is 'name' and whose attribute value contains 'value', for example: a [href * = "renren"] matches all tags with the 'href 'attribute and the attribute value contains 'HTTP.
The tag name [name | = "value"] matches tags whose attributes are 'name' or whose names start with 'name-', for example: p [lang | = "en"] matches the 'p' tag with the 'lang 'attribute, regardless of whether the attribute value is 'en' or 'en-us '.
Tag name [name ~ = "Value"] enables you to match the attribute 'name' and the attribute value is a value separated by multiple spaces. One of the values is 'value', such:
<A title = "I'm title for learn more"> Learn More </a>
You can use p [title ~ = "Learn"] to select this element.
You should notice the difference between these property selectors and the previous two property selectors. Through these property selectors, we can easily make many unexpected effects, such:
A [href $ = ". pdf"] {background-image: url().png );}
For example, the above Code adds an image indicating that the link is a pdf document connection tag, and the value of other href attributes is not. the a tag at the end of the pdf will not apply this style declaration, so that users can clearly determine what type of link this is.
2.6 pseudo classes
The pseudo-classes are derived from their similarities with classes, but no classes are actually appended to tags in the tags. the pseudo-classes are divided into two types:
UI (User Interface) pseudo class: When an HTML element is in a certain state (for example, the mouse pointer is on the connection), apply the CSS style to the element.
Structured pseudo-class: When marking a link purely on a certain structure (for example, an element is the first or most element of a group of elements ), apply CSS styles to corresponding elements.
2.6.1 UI pseudo class
Link pseudo-class
Link: the link is waiting for the user to click.
Visited: You have previously clicked this link.
Hover: The mouse pointer is hovering over the connection.
Active: the link is being clicked on I (the mouse is pressed on the element and has not been released ).
Note that the above links of pseudo classes must be effective in a certain order. In order to facilitate the memory, the author suggests: "LoVe? HA !", Uppercase letters are the first letter of each pseudo-class. In fact, you can also remember "LoVe, HAte", which is almost the same.
A colon (:) indicates a pseudo-class, and two colons (: :) indicates a new pseudo element in CSS3.
: The text field in the focus pseudo-type form gets the focus when the user clicks it. For example:
Input: focus {border: 1px solid blud ;}
This Code indicates that when you click the text field in the form, add a blue solid-line border with a width of 1 px to the input label. Note that, the colon of the pseudo-class must be followed by the label name, and there must be no space between them. Otherwise, the Declaration is invalid.
: Target pseudo-class if you click a link pointing to other elements on the page, which element is the target, you can use the: target pseudo class to select it, for example:
<A href = "# more-info"> More Information </a>
The element with the id more-info located elsewhere on the page is the target element, which may be like this:
<H2 id = "more = info"> This is the information you are looking for. The CSS rules are as follows:
# More-info: target {background: # eee ;}
The background of the target element becomes light gray when the user clicks the link to turn to the element with the id more-info.
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 and last elements in a group of siblings respectively, while nth-child (n) represents any element in a group of siblings, n indicates an integer (which can also be an odd-odd or even-even number) or an arithmetic expression (2n + 1). For example:
<Ul>
<Li> My Fast Pony </li>
<Li> Steady Trotter </li>
<Li> Slow Ol 'Nag </li>
</Ul>
Ul li: first-child {color: black ;}
Ul li: nth-child (2) {color: red ;}
Ul li: last-child {color: blue ;}
After the preceding CSS rules are applied to the HTML, the font color of the first element in the unordered list turns black, the second element turns red, and the last element turns blue.
2.7 pseudo elements
As the name suggests, pseudo elements are some common pseudo elements in the document.
: 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 be three times that of the original one, while that of other elements will not.
: First-line: You can select the first line of a text section.
: Before AND: after pseudo elements
E: before
E: after
You can add special content before or after a specific element, for example:
<P class = "age"> 25 </p>
. Age: before {content: "Age :";}
. Age: after {content: "years ";}
Note that for the: before AND: after pseudo elements, the content attribute is required, in addition, the search engine does not obtain the information of pseudo elements (because it does not exist in the Document Stream). Therefore, do not add some content that is important to the search engine by using pseudo elements.
Expansion:
In fact, the colon in front of the pseudo element can be two or one, but in order to distinguish the pseudo class, I suggest you still use two colons. Note that, for example, adding two pseudo elements for the pseudo-element class to the pseudo-element: before AND: after, the two pseudo elements are in the interior of the pseudo-element, that is, the sub-element of the pseudo-element, the Code is as follows:
<Div class = "pseudo-element">
<P> Pseudo Element </p>
</Div>
. Pseudo-element: after,
. Pseudo-element: before {
Content :"";
}
Pseudo Element
As shown in, the two pseudo elements are inside the pseudo-element, and are located at the front and back of the content p tag of the pseudo-element, respectively, instead of the front and back of the external element of the pseudo-element, as shown in:
Pseudo Element
2.9 Cascade
A stack is a process of overlapping styles in a stack style table at the document level. The purpose is to allow the browser to determine which value is used for multiple sources of a tag-specific attribute value.
Cascade is the core mechanism of CSS. After understanding it, you can write the most easily modified CSS in the most economical way, so that the document appearance meets the design requirements while leaving some space for users, allows them to change the document display effect as needed.
2.9.1 style source
The author introduces several sources of styles in this section:
-Browser default style sheet
-User style sheet
-Author link style sheet
-Author embedded Style
-Intra-row style of the author
The author describes this in his book:
The browser checks the styles of each source in order above, and updates the setting of each label attribute value when there is a definition. After the update process ends, then, each label is displayed in the final set style.
2.9.4 computing Specialization
In this section, the author mainly introduces the degree-specific calculation method. Compared with the author's calculation method, I personally prefer my previous calculation method, although similar, as follows:
// Define four levels First: A-B-C-D
1. Level A indicates an inline style, for example, 'style = "" '. The weight is 1000;
2. Level B indicates the ID selector, for example, '# main'. The weight is 100;
3. class C indicates class, pseudo class, and attribute selector: '. class' and' [title] '. The weight is 10;
4. Level D indicates the element (TAG) Name or pseudo element selector, for example, 'p' and ': after'. The weight is 1.
// After calculating each value, add up each value, and the weight of which value is greater and which value is higher.
For example:
Body # main. class a [title]: after {}
First, we will analyze which selectors it consists of. the above rule has an id selector (# main) and a class selector (. class), an attribute selector ([title]), a pseudo-element selector (: after), and two tag name selector (body and a), so its weight is equal:
100 × 1 + 10 × 2 + 1 × 3 = 123
Another point to note is that the weight value 001 (12) is higher than the weight value 0020. If the weight is the same, the post-declaration style is higher.
Conclusion 2.10
In this chapter, the author introduces some CSS rules, such as the use of various selectors, cascade mechanisms, and weight calculation.
If you have any questions or do not understand them, you are welcome to point them out and discuss them.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
