HTML css inheritance and cascading styles

One: Inheritance

  The basic definition is that after setting some styles to a parent element, its attribute value will be inherited by its descendants. It should be noted that descendants can only inherit the text style of the parent element, not the style of the box (block element).

                                                                       code:

                                                                           

                                                       result:          

Two: Cascading styles

A tag can take multiple class names and an ID. At the same time, if the styles are defined by multiple selectors in CSS at the same time, conflicts will occur. Therefore, we need to calculate the weight        of these selectors to determine the final style . Generally follow the following principles:

1.如果样式存在与不同的样式表。行内样式表的权重最高,再比较内嵌式与外联式的书写顺序。
2.同一样式表中,根据选择器的数量来确定优先级:
    ID选择器数量多的权重高
    ID选择器数量相同,再看类选择器的数量,谁多谁的权重高
    类选择器的数量也相同,比较标签选择器。
    如果标签选择器的数量也相同,则比较书写顺序。
    通配符的权重对标签选择器的权重要低,比继承过来的要高。

Three: text style ( commonly used )

1. Text size: font-size unit px

2. Font family: font-family

3. Font weight (font thickness): font-weight

Value: bold (bold), bolder (continue to bold), lighterr (thin)

4. Font tilt: font-style

5. Font color: color

6. Line height: line-height ( line height refers to the distance between the baselines of text lines )

        Initial value: normal Applies to: all elements

       For line-height inheritance is a bit more complicated. Single-line text content is centered: the most commonly used is to use line-height and height at the same time .

       line-height can be defined by numbers, percentages and lengths, and can be positive or negative.

            ①Number: Calculate the line height according to the multiple of the font-size calculation value of the element itself. For example, the line-height attribute value of the paragraph is 2, and the font-size of the paragraph element is 14px, then the line height is equal to 2*14=28 px

            ② Percentage: Calculate the row height based on the percentage of the calculated value of the element itself. For example, if the line-height attribute value of a paragraph is 200%, and the font-size of the paragraph element is 14px, then the line height is 200% * 14= 28px

            ③Length : Set a fixed line height, you can use absolute or relative units.

              If the relative unit em is used, the row height is calculated based on a multiple of the calculated font-size value of the element itself.

               For example, if the line-height attribute value of a paragraph is 2em, and the font-size of the paragraph element is 14px, then the line height is 200% * 14 = 28px.   

7. Horizontal alignment: text-align  

      Values: left , center , right , justify , inherit Initial Value: left Applies to: block-level elements  

8. Text decoration line (mainly applied to a tag): text-decoration

    Value: none, underline (underline), overline (overline), line-through (middle line) 

    Initial value: none ( remove the underline of the a tag ) Applies to: all elements     

9. Vertical alignment: vertical-align ( only works for inline elements )

    Value: middle (center), top (top), bottom (bottom) Default: baseline (baseline alignment)

10. Indent the first line of text: text-indent

    Initial value: 0 Applies to: block-level elements Percentage: Relative to the width of the containing block.

   Format  text-indent : 2em ;where em represents the unit, and one em represents the width of indenting a text.

11. The order of abbreviated text: font-style, weight, size/height (at the same time, separated by '/' in the middle), family

       Format: font: style weight size family;

Guess you like

Origin blog.csdn.net/JLX981314/article/details/114984781