14 common CSS skills and FAQs

1. Using css abbreviations can reduce the page file size, increase the download speed, and make the code concise and readable.
For example:

Div {
Border-top: 1px solid # cccccc;
Border-left: 1px solid # cccccc;
Border-right: 1px soli # cccccc;
Border-bottom: 1px solid # cccccc;
}

Can be written

P {border: 1px solid # cccccc}

Another example is:

Div {
Margin-top: 10px;
Margin-right: 20px;
Margin-bottom: 30px;
Margin-left: 40px;
}

It can be rewritten:

/* Pay attention to the top, right, bottom, and left writing order */
Div {margin: 10px 20px 30px 40px}
/* Note that there cannot be spaces between values and units. Each value is separated by spaces */

(For details, refer to: css2 reference manual and common css abbreviations and summaries)

2. You can set multiple rules (multiple class definitions) for the class attribute of an html element at the same time ).
We usually write the following code: <p class = "a"> </p>
In fact, we can specify multiple rules for the p element, such:

CSS:
. {...}
. B {....}
HTML:
<P class = "a B"> This element includes both the style set in a and B </p>

Note: Multiple rules are separated by spaces.

3. Define the unit unless the value is 0.
Forgetting to define the size is a common problem for beginners of css. In html, we can write width = "100", but an accurate unit should be provided in css. For example, width: 100px; height: 50px; font-size: 9pt, except for 0, because for any unit. The values of 0 are all equal.

Note: Do not add spaces between values and units.

4. Case Sensitive
In xhtml, the element names defined by css are case-sensitive, and the values of class and id are case-sensitive in html and xhtml. To avoid errors, we recommend that you use lowercase letters.
For example, # aaa is different from # AAA. In xhtml, p and P are different. They are not overwritten.
If # aaa is defined in css, the style defined in # AAA cannot be obtained by using aaa in html elements.
Sample code:

CSS:
# Aaa {border: 1px solid # ccc}
HTML:
<Div id = "AAA"> unable to display the edge of one pixel </div>

5. Recent CSS priorities
If a style is defined for an element multiple times, the most recent level takes precedence. The latest level style will overwrite other style definitions.
For example:

CSS:
P {color: red}
. Blue {color: blue}
. Yellow {color: yellow}
HTML:
<P> Red </p>
<P class = "blue"> blue </p>
<P class = "blue" style = "color: green"> green </p>
<P class = "blue yellow"> yellow </p>

Note:
(1) pay attention to the following priorities of the style (priority decreases from top to bottom ):
-- Element style settings
-- Settings in the head area <style> </style>
-- Reference css files externally
(2) priority is not set in the access order, but in the declared order in css.
In the preceding example, <p class = "yellow blue"> yellow </p> is also displayed, because in css definition,. yellow is behind. blue.

6. Use the sub-selector to reduce the definition of id and class.
For example:

# Contain {..}
# Contain_ul {...}
. Contail_li {...}
<Div id = "contain">
<Ul id = "contain_ul">
<Li class = "contain_li"> </li>
<Li class = "contain_li"> </li>
</Ul>
</Div>

It can be changed:

# Contain {..}
# Contain ul {...}
. Contain ul li {...}
<Div id = "contain">
<Ul>
<Li> </li>
<Li> </li>
</Ul>
</Div>

7. Do not quote the path of the background image.
Change background: url ("xxx.gif") to background: url(xxx.gif)
Some browsers may encounter errors when quotation marks are added.

8. The path of the background image is relative to the path of the current css page.

For example:
Has the following directory structure
| -- Images
| --Xxx.gif
| -- Css
| --Xx.css
| --Index.html
Code content
Index.html references the xx.css file. <Link rel = "stylesheet" href = "css/xx.css"/>
Xx.cssto introduce xxx.gif images, the format is: background: url (../images/xxx.gif)

9. Use the group selector to apply the same style to different elements
Such as h1, h2, h3, div {font-size: 16px; font-weight: bold}
The style of h1, h2, h3, and div elements is 16 pixels in font and bold in font.

10. Write the correct link style
When using css to define various states of a link, pay attention to the writing order, that is:: Link: visited: hover: active.
If you do not write in this order, you may not be able to achieve the desired effect. To remember this order, we extract the first letter of each word: l v h a. You can remember the order of LoVe, Hate, and two words.

11. Prohibit content wrapping and force content wrapping
In tables or layers, we may want the content to not wrap or force line breaks. We can use some css attributes to meet these requirements.
Disable line feed: white-space: nowrap
Forced line feed: word-wrap: break-word; word-break: normal;

12. Differences between relative and absolute
Absolute: position: absolute; it indicates Absolute positioning. It refers to the top left corner of the browser and works with TOP, RIGHT, BOTTOM, and LEFT (TRBL) positioning. If TRBL is not set, the original vertices are marked as the original vertices based on the parent level by default. If TRBL is set and the position attribute is not set at the parent level, the current absolute is located at the original point in the upper left corner of the browser. The location is determined by TRBL.

Relative: position: relative in CSS. It indicates absolute Relative positioning. It refers to the original point of the parent level as the original point, and the original point of the BODY is the original point without a parent level, TRBL is used for positioning. When the parent class has CSS attributes such as padding, the original points of the current level are located according to the original points of the parent level content area.

13. Difference between div and span
Div is a block-level element that can contain paragraphs, tables, and other content for different content. In general, we use div to layout and locate each block in the webpage.
Span is an inline element and has no practical significance. It exists purely for Applying styles, you can add the <span> </span> flag to a piece of content to set the style of the content by defining the style on the span.

14. Differences between display and visibility
Both display: none and visibility: hidden can hide an element.
However, visibility: hidden only hides the content of the element, but its location space is still reserved.
Display: none removes the elements from the page, and the occupied position is also deleted.