css selector priority resolution and font attribute resolution

Welcome~

1. Multiple styles

If some attributes are defined by the same selector in different style sheets, the attribute values will be inherited from the more specific style sheet.  

For example, an external style sheet has three properties for h3 selectors:

The internal style sheet has two properties for h3 selectors:

​

h3 { color:red; text-align:left; font-size: 8pt;
      }
h3 { text-align:right; font-size:20pt; }

If the page with the internal style sheet is linked to the external style sheet at the same time, the style h3 obtained is:

color:red; text-align:right; font-size:20pt;

That is, the color attribute will be inherited from the external style sheet, and the text alignment and font size will be replaced by the rules in the internal style sheet.

2. Multiple style priority

Style sheets allow you to specify style information in a variety of ways. Styles can be specified in a single HTML element, in the header element of an HTML page, or in an external CSS file. You can even reference multiple external style sheets within the same HTML document.

In general, the priority is as follows:

(inline style) inline style > (internal style) Internal style sheet = (external style) (Note: proximity principle, later overwritten) external style sheet > browser default style

Below is the comparison between the internal style and the external style. The external style overrides the internal style in the back and displays green:

​

​

<head> 
<!-- External style style.css -->
 <link rel="stylesheet" type="text/css" href="style.css"/> 
<!-- set up: h3{color:blue;} --> 
<style type="text/css"> 
/* Internal style */ h3{color:green;} 
</style> </head> <body> 
<h3>Test!</h3> 
</body>

​

The following is the comparison of inline style, internal style and external style. Red is displayed:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- External style style.css -->

    <!-- set up: h3{color:blue;} -->
    <style type="text/css">
        /* Internal style */
        
        h3 {
            color: green;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <h3 style="color: red;">Test!</h3>
</body>

3.CSS style inheritance line

  • After some attributes are set to parent or ancestor elements, their descendant elements will inherit the style, which is called inheritance.
  •  
  • Inheritance is from the current element to the smallest element.
  •  
  • Descendant elements can inherit text styles from ancestor elements. These attributes include: color, text start, line start, font start.
  •  
  • The properties of box, positioning and layout cannot be inherited.

example:

 

<body>
  
    <div>
        Rat tail juice
        <p>Dawei Tianlong
            <span>Young people don't talk about martial virtue</span>
        </p>
    </div>
</body>

The p tag and span tag inherit the font size and color of the parent

Priority selector CSS. 4

Priority is that the browser determines and applies to the element by judging which attribute values are most relevant to the element. Priority is determined only by matching rules consisting of selectors.

Priority is a weight assigned to a specified CSS declaration, which is determined by the value of each selector type in the matched selector.

4.1 priority order

The following is a list of selectors whose priority increases step by step:

  • Universal selector (*)
  • Element (type) selector
  • Class selector
  • attribute selectors
  • Pseudo class
  • ID selector
  • inline style

4.2!important rule exceptions

When! When an important rule is applied to a style declaration, the style declaration overrides any other declaration in CSS, no matter where it is in the declaration list Nevertheless! The important rule still has nothing to do with priority use! Important is not a good habit because it changes the original cascading rules of your stylesheet, making it difficult to debug.

Some rules of thumb:

  • Always optimize and consider using the priority of style rules to solve the problem instead of! important
  • Only can only be used in specific pages that need to cover the whole site or external css (such as referenced ExtJs or YUI)! important
  • Never use never on the css of the whole station! important
  • Never use never in your plug-in! important

4.3 weight calculation:

Explanation:

  • 1. The maximum weight of inline style sheet is 1000;
  • 2. The weight of ID selector is 100
  • 3. The weight of class selector is 10
  • 4. The weight of HTML tag selector is 1

Use the weight of the selector to calculate and compare, em displays blue, and the example is as follows

<head>
        <style type="text/css">
            #redP p {
                /* Weight = 100 + 1 = 101 */
                color: #F00;
                /* gules */
            }
            
            #redP .red em {
                /* Weight = 100 + 10 + 1 = 111 */
                color: #00F;
                /* blue */
            }
            
            #redP p span em {
                /* Weight = 100 + 1 + 1 + 1 = 103 */
                color: #FF0;
                /*yellow*/
            }
        </style>
    </head>

    <body>
        <div id="redP">
            <p class="red">red
                <span><em>em red</em></span>
            </p>
            <p>red</p>
        </div>
    </body>

4.4CSS priority rule:

  • A selectors have a weight, and the greater the weight, the more priority;
  • B when the weight values are equal, the style sheet setting that appears later is better than the style sheet setting that appears first;
  • The rule of C creator is higher than that of the browser: that is, the CSS style set by the web page writer takes precedence over the style set by the browser;
  • The CSS style inherited by D is not as good as the CSS style specified later;
  • E in the same set of attribute settings, the rule marked with "! important" has the highest priority; Examples are as follows:
<html>
  <head>
    <style type="text/css">
     #redP p{
        /*Two color attributes are in the same group*/
        color:#00f !important; /*  Highest priority*/
        color:#f00;
     }
    </style>
  </head>
  <body>
     <div id="redP">
       <p>color</p>
       <p>color</p>
     </div>
  </body>
</html>

4.5 a popular CSS weight diagram is introduced here:

 

5.font attribute

 

5.1 font family

  • The font family property sets the font family of the text.
  • The font family attribute should set several font names as a "backup" mechanism. If the browser does not support the first font, it will try the next font.
  • Fonts are divided into English fonts and Chinese fonts. Some English fonts will not work on Chinese fonts, while Chinese fonts will work on English.
  • The font attribute value can be multiple, and the back font is an alternative font. When the front font is not loaded on the computer, the back font will be loaded. If none is loaded, the default font (Microsoft YaHei) will be used
  • Writing order: English font is written in the front and Chinese font is written in the back.
  • Chinese fonts also have English names
  • Note: if the name of the Font Family is more than one word, it must be quoted, such as Font Family: "Arial".
  • Multiple font families are separated by a comma to indicate:
  • example

p{font-family:"Times New Roman", Times, serif;}

5.2 font style

It is mainly used to specify the font style attribute of italic text.

This attribute has three values:

  • Normal - normal display text - font style: normal;
  • Italics - text in italics - font style: italic;
  • Slanted text - text slants to one side (very similar to italics, but not very supported) - font style: oblique;

example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Rookie tutorial(runoob.com)</title>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>

<body>
<p class="normal">This is a paragraph,Normal.</p>
<p class="italic">This is a paragraph,Italics.</p>
<p class="oblique">This is a paragraph,Italics.</p>
</body>

</html>

 

5.3 font size

Font size property sets the size of the text.

Whether we can manage the size of text is very important in web design. However, you cannot make a paragraph look like a heading or a heading look like a paragraph by resizing the font.

Please be sure to use the correct HTML tags, for < H1 > - < H6 >, for the title and < p > for the paragraph:

The value of font size can be absolute or relative.

Absolute size:

  • Sets a specified size of text
  • Users are not allowed to change the text size in all browsers
  • Absolute size is useful when determining the physical size of the output

Relative size:

  • Sets the size relative to the surrounding elements
  • Allows the user to change the text size in the browser

If you don't specify a font size, the default size is 16 pixels (16px=1em), which is the same as that of ordinary text paragraphs.

Set font size pixels

Set the size and pixels of the text so that you can fully control the text size:

example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Rookie tutorial(runoob.com)</title>
<style>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Allow in Internet Explorer 9, Firefox, Chrome, Opera, and Safari Resize text by zooming the browser in.</p>
<p><b>be careful:</b>This example is in IE9 Previous versions did not work, prior version 9.</p>

</body>
</html>

The above example can resize text by zooming the browser in Internet Explorer 9, Firefox, Chrome, Opera, and Safari.

Although the text can be resized through the browser's zoom tool, this adjustment is the whole page, not just the text

Use em to set the font size

In order to avoid the problem that text cannot be adjusted in Internet Explorer, many developers use em units instead of pixels.

The dimension unit of em is recommended by W3C.

1em is equal to the current font size. The default text size in the browser is 16px.

Therefore, the default size of 1em is 16px. The pixel can be converted to em by the following formula: px/16=em

example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Rookie tutorial(runoob.com)</title>
<style>
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>use em Units that allow text resizing in all browsers.
Unfortunately, it is still IE Browser problems. When you resize the text, it will be larger or smaller than the normal size.
</p>
</body>
</html>

5.4 bold font weight

Attribute definition and instructions

The font weight property sets the thickness of the text

Default: normal
Succession: yes

Attribute value

value describe
normal Default value. Defines the standard character.
bold Define bold characters.
bolder Define thicker characters.
lighter Define finer characters.
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
Defines characters from thick to thin. 400 is equivalent to normal and 700 is equivalent to bold.
inherit Specifies that the font weight should be inherited from the parent element.

5.6 the following table shows all CSS font attributes

Property describe
font Set all font properties in one declaration
font-family Specifies the font family of the text
font-size Specifies the font size of the text
font-style Specifies the font style of the text
font-variant Display the text in small uppercase or normal font.
font-weight Specifies the thickness of the font.

6. Text align:

Sets the alignment of paragraphs.

Left , align left , default

center align

Align right.

It has nothing to do with the number of lines of text.

Example: text centered

​

<head>
<style>
        p {
            font: 24px/40px "Song style";
            background-color: aquamarine;
            text-align: center;
        }
    </style>
</head>

<body>

    <p>
        Captain Teemo on duty 
    </p>
</body>

[Click and drag to move]
​

Word overflow

The CSS overflow attribute can control the content overflow element box to add a scroll bar in the corresponding element interval.

The overflow property has the following values:

value describe
visible Default value. The content will not be trimmed and will appear outside the element box.
hidden The content is trimmed and the rest is invisible.
scroll The content is trimmed, but the browser displays a scroll bar to see the rest of the content.
auto If the content is trimmed, the browser displays a scroll bar to see the rest of the content.
inherit Specifies that the value of the overflow attribute should be inherited from the parent element.

For example: text overflow parent box

 

Use overflow: hidden; Hide overflow text

Tags: html css

Posted by arkleyjoe on Tue, 03 May 2022 07:05:59 +0300