Writing rules for inline styles

• Any label [container, text] can add an inline style. The above writing method and writing position are called inline style.
• Remember to add a semicolon after each style.

<div  style="color: blueviolet;">Good morning</div>
<p style="color: coral;">Okay, okay</p>
<a style="color: darkgreen; font-size:66px">Hum, hum, hum, hum</a>

effect:

Okay, okay

Hum, hum, hum, hum

Font related styles

color

• The attribute value consists of English words or hexadecimal numbers
• If the color style attribute value is a hexadecimal number, remember to start with a # sign and end with a semicolon. (case insensitive)
• The second kind: rgb(red,green,blue) is composed of three pigments. The red part is composed of three pigments. What is needed is a number between 0 and 255
  • For example: color:rgb(255,0,0);

<div style="color: red;">Good morning</div>
<div style="color: orange;">Good morning</div>
<div style="color: yellow;">Good morning</div>
<div style="color: green;">Good morning</div>
<div style="color: cyan;">Good morning</div>
<div style="color: blue;">Good morning</div>
<div style="color:  purple;">Good morning</div>
<div style="color: #e4e5; "> good morning < / div >

effect:

• Note: generally, a style only needs to be set once. If it is set multiple times, the right side overrides the left side attribute.

Example:

<div style="color:red;color:green">It's not red, it's green</div>

effect:

font-size

• Font size: font size
  • Attribute value: plus px units

<p style="font-size:50px">Lala, I'm so big</p>

effect:

Lala, I'm so big

• Percentage:
  • The font size of the descendant element is several times that of the ancestor element.

#box{
	font-size :500%; // 500 times the ancestral element
}

font-family

• Font family: sets the font of text. (Chinese, English)

• A pair of single quotation marks need to be added to the outer layer of the font family attribute value. Don't give me one pair and one order

  P style = "font family: 'founder bold black song simplified', 'regular script'" > I am an old flower of the motherland</p>

• Font family: multiple fonts can be set at the same time. Multiple fonts are separated by commas from left to right. The front font setting overrides the rear font setting.

Chinese font:

• The default font of the browser is Microsoft YaHei.

	<p>Xiao Bai is the most handsome</p>
		<p style="font-family: 'Microsoft YaHei ';">Xiao Bai is the most handsome</p>
		<p style="font-family: 'Blackbody';">Xiao Bai is the most handsome</p>
		<p  style="font-family: 'Regular script';">Xiao Bai is the most handsome</p>

effect:

Xiao Bai is the most handsome

Xiao Bai is the most handsome

Xiao Bai is the most handsome

Xiao Bai is the most handsome

Xiao Bai is the most handsome

English font:

<p style="font-family: 'Arial';">hello web</p>
<p style="font-family: 'Comic Sans MS';">hello web</p>
<p  style="font-family: 'webdings';">hello web</p>

effect:

hello web

hello web

hello web

line-height

• Function: set the line height of text entity

p{
    font-size;50px;
   line-height:100px;
    //line-height : 200%;
}
<p>La La La</p>

font-weight

• Function: bold font
• Attribute value: the number (between 100 and 700) can also be English * * (normal is equivalent to the default number 400, bold is equivalent to the number 700)**

p{
	font-weight : 700;
   // font-weight :bold;
}
<p>Ha ha ha</p>

font compound style

• font is a composite style
• form
  • font:
    • Font style font tilt
    • Font weight bold
    • Font size: font size
    • Line height: line height
    • Font family: font setting

Note:

• font is the abbreviation of the above five attributes. Multiple attribute values are separated by spaces.
• Only the positions where the font is tilted and bold can be interchanged. However, the other three positions cannot be interchanged. The font size and line height are linked by slashes|

p{
	font:  italic bold 50px /300px 'Regular script'；
}

Text related styles

• Text: a sentence, a paragraph, an article

text-align

• Text align: align horizontally.
• Function: set the horizontal alignment of text.
• Attribute value: English word.
  • Left: align left (default)
  • Center: horizontal center alignment
  • Right: align right

p{
	width:400px;
    height :400px;
    border = 1px;
    text-align :center;
}
<p>Quack, quack, quack</p>

text-decoration

• Function: add line decoration.
• Attribute value: English word
  • none: no modification
  • Outline: there is a line decoration above the text.
  • Line through: the line carries through the text (in the middle of the text)
  • underline: there is a line decoration below the text

<p style="text-decoration : none">Ha ha ha ha</p>
<p style="text-decoration : overline">Ha ha ha ha</p>
<p style="text-decoration : line-through">Ha ha ha ha</p>
<p style="text-decoration : underline ">Ha ha ha ha</p>

text-indent

• Meaning: text indentation.

• Function: set the indent distance of the first line of text.

• Attribute values: two.

  • Pixel unit: for example, 100px, which means that the first line of text is indented 100 pixels to the right.
  • EM unit: for example, 10em represents that the first line of the text is indented to the right by 10 Chinese characters.

p{
	width:400px;
    height :400px;
    border = 1px;
    text-indent: 100px;
    <!--  text-indent: 2em;-->
}
<p>Quack, quack, quack</p>

Box model

• Box model is also called "box model". Box model is the label in the web page, which actually occupies the area in the web page.
• The box model consists of five styles:
  • width, height, border, padding (inner boundary), margin (outer boundary).
  • [the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-p7toamrc-16311034334) (C: \ users \ 86130 \ appdata \ roaming \ typora user images \ image-20210724163430813. PNG)]

<div style="background-color: aqua;width: 100px;height: 30px;padding:200px;margin:120px; border:20px solid red">Xiao Bai is the most handsome</div>

effect:

width，height

• Attribute values: two types: 1. Pixel form and 2. Percent form.

padding

• padding is a composite style.
  • padding :
    • padding-top ,
    • padding-right ,
    • padding-bottom,
    • padding-left.

p{
	padding-top:10px; 
	padding-right:10px；
	padding-bottom: 10px；
	padding-left: 10px；
}
Equivalent to:
p{
	padding : 10px 10px 10px 10px ；
}

Four ways of writing padding

• If you write four values, they represent upper, right, lower and left respectively.

  • padding : 10px 10px 10px 10px ；
    

• If you write three values, they represent up, left, right and down respectively.

  padding : 10px 10px 10px ；
  

• If you write two values, they represent up, down, left and right respectively.

  padding : 10px 10px ；
  

• If you write a value, it represents the top, right, bottom and left respectively.

  padding : 10px ；
  

exceptional case

• If the paddng attribute value of the matching style is written, after the compound style, if a single inner margin style appears, the inner margin setting data of the former will be overwritten.

border

• Attribute value; attribute value is divided into three parts, and the three attribute values need to be separated by spaces.

  • The three attribute values are:

    • The width of the border. (example 10px)
    • Border line settings. (example: solid: solid line)
    • The color of the border.

    (description is also a composite style)

border-width

• You can set four sides. Like padding, there are four writing methods

  padding : 10px 10px 10px 10px ；
  

border-style

• Like padding, there are four ways to write

• Attribute values: solid, dashed

  border-style:solid dashed solid solid ;
  

border-color

• Like padding, there are four ways to write

  border-color: red blue green red;
  

marign

• Function: set the distance between labels.
• Features: unable to display content and set background.
• It's also a composite style, just like padding.

CSS writing position

• There are three styles: inline style, inline style and outer chain style

Inline style

<div style="color:red;font-size:50px;font-family:'Regular script'">La La La</div>

effect:

embedded style

• style is usually written in head
• type="text/css" can be written or not.

<style  type="text/css">
    p{
    color:cyan;
    font-size:30px;
    }
</style>

<p id="nq">Ha ha ha</p>
<div>Hee hee</div>
<div>Interesting</div>
<div>Hey, hey, hey</div>

selector

• Selector [English]: selector

• Selector: selector is a mode in CSS (cascading style), which is used to add styles to the tags in those web pages.

• Classification:

  • Basic selector: label selector, id selector, class selector and wildcard selector. (4 kinds)
  • Advanced selector: descendant selector, intersection selector and union selector. (3 kinds)

tag chooser

• Selector range: all tags with the same name in the web page will be added with styles.

<style  type="text/css">
    p{
    color:cyan;
    font-size:30px;
    }
</style>

<p>Ha ha ha</p>
<p>Hee hee</p>
<p>Interesting</p>

id selector

• Steps:

  • The first step is to add an id attribute to the style label you want to add.

  • Step 2. In the embedded style, select and match through #+ id attribute value.

• id selector range: the current label.

• How to write the id attribute value of the tag: the first character must be an English letter, and the subsequent attribute values can be English letters, numbers and underscores.

• The D attribute value of each label must be unique. (it's the same as a person's ID card. No one is the same)

• The Id property value is case sensitive.

<style  type="text/css">
    #nq{
    color:cyan;
    font-size:30px;
    }
</style>

<p id="nq">Ha ha ha</p>
<div>Hee hee</div>
<div>Interesting</div>

Class selector

• Steps:
  • Step 1: add a style label and a class attribute.
  • Step 2: in the embedded style, use the attribute value of the class of the. + tag.
• Selection range: as long as the tag has the class attribute and the class attribute value is the same, you can select matching [even if the tag types are different]

<style  type="text/css">
    .cur{
    color:cyan;
    font-size:30px;
    }
</style>
<p class="cur">Ha ha ha</p>
<div class="cur">Hee hee</div>
<div>Interesting</div>

Descendant Selectors

• If you want to add a style to a label, look for its ancestor element first.
• When writing an embedded style, look from left to right until you find the label to add the style.
• It should be noted that the selectors on the left are all the selectors of the ancestral labels, and the selectors of the ancestral labels are separated by a space. The selector on the right is the label selector for the final style.

 <style type="text/css">
        div ul li p {
            color: cyan;
            font-size: 30px;
        }
   <!--**********Highlights***************-->
     #list .cur p {
             color : green;
     }
     <!--*************************-->
    </style>

    <div>
        <ul>
            <li>
                <p>Ha ha ha ha</p>
                <p>Ha ha ha</p>
                <p>ha-ha</p>
                <p>Ha</p>
            </li>
        </ul>
    </div>
    <hr>
          <ol id="list">
            <li class="cur">
                <p>Ha ha ha ha</p>
                <p>Ha ha ha</p>
                <p>ha-ha</p>
                <p>Ha</p>
            </li>
        </ol>

Intersection selector

• Generally, label selectors and class selectors are used together (label selectors come first, class selectors come second, and the two are connected without spaces)

   <style type="text/css">
        p.cur {
            color: cyan;
            font-size: 30px;
        }
    </style>
    <div>
        <h2 class="cur">I'm a secondary label</h2>
        <p>I'm a kitten</p>
        <p c class="cur">I'm cute</p>
        <p>I'm a fairy</p>
    </div>

Union selector

• Separated by the base selector, (comma). (the last side does not need to be comma)

  <style type="text/css">
        h2,p {
            color: cyan;
            font-size: 30px;
        }
    </style>
    <div>
        <h2>I'm a secondary label</h2>
        <p>I'm a kitten</p>
        <p>I'm cute</p>
        <p>I'm a fairy</p>
    </div>

CSS properties

• Properties: inheritance, cascading.

Inheritance

• If the label is not selected by the selector, you can inherit the text style of the ancestor element.

 <style type="text/css">
        .box {
            color: cyan;
            font-size: 30px;
            background-color: rebeccapurple;
        }
    </style>
    <div class="box">
        <h2>I'm a secondary label</h2>
        <p>I'm a kitten</p>
        <p>I'm cute</p>
        <p>I'm a fairy</p>
    </div>

Lamination

1. The label is selected by multiple selectors to add the same style

   1. In css, the selectors with high weight will cascade the selectors with low weight.

   2. Base selector:
      In the basic selector, weights are divided according to the size of the selector selection range. The smaller the selector selection range, the higher the weight

      ID selector weights > class selector weights > label selector weights > wildcard selector weights

  <style type="text/css">
        #box {
            color: cyan;
            font-size: 30px;
            background-color: rebeccapurple;
        }
        
        .cur {
            color: rebeccapurple;
        }
        
        p {
            color: rosybrown;
        }
    </style>
    <P id="box" class="cur">I'm cute</P>

• In the case of advanced selectors, the basis for cascading:
  • Compare the number of id selectors:
  • If the number is the same: continue to compare
    • ID selector weights > class selector weights > label selector weights > wildcard selector weights

1. The label is not selected by the selector and inherits the text style of the ancestor element
   • Descendant elements can inherit the text style of ancestor elements. Proximity principle. (don't look at selector weights)

    #box {
            color: cyan;
            font-size: 30px;
        }
        
        #box .cur {
            color: rebeccapurple;
        }
        
        #box .cur #box1 {
            color: rosybrown;
        }
    </style>
    <div id="box">
        <div class="cur">
            <div id="box1">
                <p>La La La</p>
            </div>
        </div>

    </div>

    }
</style>
<P id="box" class="cur">I'm cute</P>

* In the case of advanced selectors, the basis for cascading:
  * contrast id Selector**number**: 
  * If the number is the same: continue to compare
    * **``ID Selector weight>Class selector weight>Label selector weight>Wildcard selector weight``**

-----------



2. **The label is not selected by the selector and inherits the text style of the ancestor element**
   * Descendant elements can inherit the text style of ancestor elements.**Proximity principle.**(Don't look at selector weights)

```html
    #box {
            color: cyan;
            font-size: 30px;
        }
        
        #box .cur {
            color: rebeccapurple;
        }
        
        #box .cur #box1 {
            color: rosybrown;
        }
    </style>
    <div id="box">
        <div class="cur">
            <div id="box1">
                <p>La La La</p>
            </div>
        </div>

    </div>