css learning and organizing

1, background-attachment: fixed attribute prevents the background image from scrolling. Its default value is scroll, which means that by default, the background will scroll with the document

2. The font-weight attribute sets the thickness of the text (keywords 100 ~ 900 specify 9 levels of boldness for the font. If a font has these built-in boldness levels, then these numbers map directly to the predefined levels , 100 corresponds to the thinnest font variant, and 900 corresponds to the thickest font variant. The number 400 is equivalent to normal, and 700 is equivalent to bold).

3. The font-style attribute is most commonly used to specify italic text.

4. The font-family attribute defines the font family of the text.

5. The font-size attribute sets the size of the text.

Use em to set font size

If you want to avoid the problem of not being able to resize text in Internet Explorer, many developers use em units instead of pixels.

W3C recommends using em size units.

1em is equal to the current font size. If an element's font-size is 16 pixels, then 1em equals 16 pixels for that element. When setting the font size, the em value changes relative to the font size of the parent element.

The default text size in browsers is 16 pixels. So the default size of 1em is 16 pixels.

You can use the following formula to convert pixels to em: pixels/16=em

(Note: 16 is equal to the default font size of the parent element. Assume that the font-size of the parent element is 20px, then the formula needs to be changed to: pixels/20=em)

In the example above, the text size in ems is the same as the text size in pixels in the previous example. However, if you use em units, the text can be resized in all browsers.

Unfortunately, there is still a problem in IE. When resizing text, it will be larger or smaller than normal.

Use Percentage and EM together

A solution that works in all browsers is to set the default font-size value in percentage for the body element (parent element)

<code>body {font-size:100%;}</code>
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

6. The text-decoration attribute is mostly used to remove underlines from links

7,

Combine descendant selectors and child selectors

Please look at the selector below:

table.company td > p

The above selector will select all p elements that are children of the td element, which itself inherits from the table element, which has a class attribute containing company.

8,

Tip: In the CSS definition, a:hover must be placed after a:link and a:visited to be valid.

Tip: In the CSS definition, a:active must be placed after a:hover to be valid.

Tip: Pseudo class names are not case sensitive.

https://zhuanlan.zhihu.com/p/22606894 Front-end interview summary