CSS2 review summary

After learning css2.0, make a summary of what you have learned and thought.
This is the first time I have learned to use the Markdown editor to edit articles

1. Introduction and function of css

1.1 introduction to CSS

Cascading style sheets

Is a computer language used to represent file styles such as HTML (an application of the standard universal markup language) or XML (a subset of the standard universal markup language). CSS can statically decorate web pages and dynamically format the elements of web pages with various scripting languages.

2. css focus

2.1 six attributes of box model

1)Content area  width height 
2)Inner filled area  padding 
3)frame  border
4)Outer filled area  margin
5)background  <img />   You can also give img Add background picture

2.2 block level elements are displayed side by side:

1)float float 
4)Inline block

2.3css attributes:

    Box settings
    Floating setting
    Positioning settings
    Font settings
    Text settings
    List settings
    Table setup 

3. Three methods of css introduction

1) Inline style

    <div style="width: 100px;height: 100px;border: 2px solid purple;"></div>

2) Internal style

    div {
        width: 100px;
        height: 100px;
        border: 2px solid purple;

3} External style

Add the path of css file after link (the content of css file is the same as above)

   <link rel="stylesheet" href="mode.css">

4. Selector overview and classification


CSS selectors are required to implement one-to-one, one to many or many to one control of elements in HTML pages using CSS. Elements in HTML pages are controlled through CSS selectors.

Note: the following first code area is html code, and the second code area is css code.

1) Category selector

Class selector selects by class name

  <div class="one">Using the class selector</div>
    width: 100px;
    height: 100px;
    border: 2px solid purple;

2) Label selector

A complete HTML page is composed of many different tags, and the corresponding css style can be determined by using the tags

   <h1>tag chooser </h1>
 h1{color: blue;}

3) ID selector

The ID selector can specify a specific style for HTML elements marked with a specific ID, and the ID is unique.

 <div id="two">ID selector</div>
    width: 100px;
    height: 100px;
    border: 2px solid purple;

4) Descendant selector

The descendant selector, also known as the include selector, is used to select the descendants of a specific element or element group. The parent element is placed in the front, the selection of child elements is placed in the back, and a space is added in the middle to separate them. There can be more than two elements in the descendant selector. For multi-level ancestor descendant relationships, multiple spaces can be used to separate them. For example, for three elements with IDS a, B and C, the descendant selector can be written in the form of \a \b \c{}. As long as the selection of ancestor elements is separated by spaces before and in the middle of the descendant elements.

     <p class="father">
        Father defaults to black
        <label class="child">(Child) offspring selector set to blue </label>
   .father .child{

4) Pseudo class selector

You need to use conditions other than the document to apply element styles, such as mouse over. At this point, we need to use pseudo classes.

   <a href="#"> when the mouse hovers here, the color is gold</a>
 a:hover{color: gold;}

5) Universal selector

Universal selectors are represented by *.

*{ font-size: 12px;}

Indicates that the font size of all elements is 12px;
Universal selectors can also be combined with descendant selectors.

p *{......}

This style is applied to all elements that represent descendants of all p elements.

6) Group selector

css file

p, td, li { line-height:20px; color:blue; }

Indicates that the row height of the three labels P, TD and Li is 20px and the color is blue.

7) Intersection selector

<div class="one">First div</div>
<div class="two">Second div </div>
div.two { color:blue }

Will select to the second div

8) Attribute selector

[id] {} all tags with ID attribute are selected

<div class="one">First div</div>
<div class="two">Second div </div>
 background-color: gold;

Both boxes have a gold background

5. Font settings

1. Font style: set whether the font is tilted ----- attribute value normal Italic
Em: font style: normal EM default tilt

2. Font weight: set whether the font is bold ----- attribute value normal bold border 100200300
H1: font weight: normal H1 bold by default

3. Font size: set the font size. By default, Google Chrome is 16px. 12px and 14px are used at most
It can be very large but not very small. The minimum is 12px

4. Font family: setting font type is also related to the font set on the user's computer

5. font: composite attribute of the above 5 attributes
font:font-style font-weight font-size/line-height font-family
Where: font style font weight can be switched without writing
Font size / line height font family must write interchangeable positions

6. Color: set font color

Inheritability: if it is set for the parent element, the child element can also inherit to
Apply: set font related attributes for body.
For the a tag, you need to select the a tag.

6. Text settings

1. Text align: sets the position attribute of text center center left align right align right.
text-align: center
1) Center text in box
2) Center inline elements or inline block elements in a box (you can treat inline elements or inline block elements as text)

2. Text indent: set the indent of the first line of the text. There are two values: px or EM (1em is the width of a Chinese character).

3. Line height: set the attribute of the height occupied by a line of text. By default, it is the same as the font size. If you want to center a single line of text in the container, just make the value of height equal to the value of line height.
1) If the sub label is a male label, the row height can support the height of the sub label
2) If the sub label is a female label, the row height cannot support the height of the sub label

4. Text decoration: the meaning of text decoration. You can set whether the text has an underline, an upper dash, and a middle dash. The values are underline, overline, and line through respectively.

7. Box settings

Classification of boxes

Male box: male label, block level element
 Female box: female label, inline element
 Inline elements:
        1)Full inline elements:
        2)Inline block element: img input  Except that it can be displayed side by side, other features are the same as the male box.

1. Content area of box: width and height

1. Content area: width and height
Set the width and height of the box

2. Inner filling area of box: padding

2. Inner filled area: padding
It is used to set the inner fill, also known as padding, to indicate the distance between the content area and the border
Four directions: more used
padding-top: padding-right: padding-bottom: padding-left:
padding can also be followed by one value, two values, three values and four values:
One value: padding:10px padding in all four directions is 10px
Two values: padding:10px 20px; 10px up and down, 20px around
Three values: padding:10px 20px 30px; 10px above, 20px below
Four values: padding:10px 20px 30px 40px; Upper right lower left

    1)Some labels have defaults padding  as ul  ol... One size fits all  *{ padding:0; }
    2)For inline elements, padding It does not affect the row height in the vertical direction, and the effect seems to be padding,
    however padding Not really padding,Or for a female box, padding Invalid in vertical direction.
    3)For block level elements, up and down padding Can support the height of the male box.

3. Inner filling area of box: padding

3. Borders: border
Border width
Style border style
Color border color
In general, border is not set separately. It is a composite attribute
1) Border:1px solid red; There is no order for the attributes after border. Generally, border width is written first, then border style, and finally border color.
2) Thickness in most cases, the unit is px. You can also use words. When using words, the thickness is different in different browsers
3) The border styles are also very versatile. There are a lot of them: solid solid dotted dotted dotted dashed dashed none no line
4) The color of the border sets whether the word is in hexadecimal or rgb function
5) You can also set the border border top in a certain direction separately: 1px solid red;

4. Outside filled area of box: margin

4. Outer filled area: margin
Indicates that the outer margin the distance between boxes is outside the border, and the interval between boxes is outside the border
Four directions:
margin can also be followed by a value, two values, three values and four values:
One value: margin:10px margin in all four directions is 10px
Two values: margin:10px 20px; 10px up and down, 20px around
Three values: margin:10px 20px 30px; 10px above, 20px below
Four values: margin:10px 20px 30px 40px; Upper right lower left

    1)With this tag, there is a default margin  One size fits all  *{ margin:0; padding:0; }
    2)For inline elements, margin Invalid in vertical direction 
    3)margin Can be set auto.  Indicates as large as possible  div{ margin:0 auto; }
    4)margin Negative values can be set  
    5)For block level elements, margin Overlap problem (collapse problem)

5. Box background

5. background
Background color: sets the background color of the box. The background color can be filled with padding or border
Background image: set the background image of the box img label is also a box. You can also set the background image for the IMG box

take care
    A box is exactly the same size as the background image: just fit in 
    One box is larger than the background image: by default, the x and y Axes are tiled 
    A box is smaller than the background image: only part of the background image will be displayed, and the upper left corner of the background image is aligned with the upper left corner of the box  
    The upper left corner refers to the pddding At first, but border Pictures will also be filled in
background-repeat:  Controls whether to tile  
repeat-x  Tile only x axis    repeat-y  Tile only y axis   repeat x and y Axes are tiled   
no-repeat x and y Axes are not tiled background-position:
A large background image in a small box and a small background image in a large box can be used background-position Positioning.

The collapse of the box and its solution

For the block level elements of margin, the margin has an overlap problem (collapse problem):
1) Overlapping between sibling elements
2) Overlap between parent and child elements

Overlap between sibling elements:

Overlap between sibling elements:
<div class="box7">box7</div>
<div class="box8">box8</div>
.box7{ width: 200px;height: 200px;background-color: gold; margin-bottom: 150px;}
.box8{ width: 200px;height: 200px;background-color: skyblue; margin-top: 100px;}
According to theory: between two boxes margin It should be 250 px
 Implementation: 150 px 

This phenomenon is called: margin Collapse of  
margin Premise of collapse: 1) male label 2) vertical direction    
margin How much is it: the principle of taking the largest

margin Premise of collapse: 1) male label 2) vertical direction    
After collapse margin How much is it: the principle of taking the largest
 How to avoid collapse? Answer: only one box margin. 

Overlap between parent and child elements

Overlap between parent and child elements:
<div class="box9">
    <p class="box10">I am a paragraph</p>
    background-color: pink;
    margin-top: 50px;
.box9 .box10{
    background-color: gold;
    margin-top: 30px;

Arguably: p There should be 80 on the label px of margin 
Only 50 px margin 
This phenomenon is called: between parent and child elements margin overlap

    1)Add to parent element border 
    2)Add to parent element padding  Add only one 0 px No  

8. Float

8.1 purpose of floating

In order to achieve the word surround effect of news.

8.2 characteristics of floating elements

1)If both of them float in the same direction, the two floating elements will stick closely together. If the space behind them is not enough, it will automatically wrap.

2)Wrapping if it is a male box, its width will be as small as possible as long as it floats without setting the width

3)All elements within an element float. If the parent element does not have a height set, its height will become 0, which means that the height of the parent element collapses.

4)If a female box floats, you can set the width and height. At this time, the female box will become a male box.

8.3 impact of floating

1)Effect on parent element     The height of the parent element collapses

2)The influence on the following sibling elements will overlap

8.4 elimination of floating effect


2)Heightening method

When floating, the following elements will drill up, but the text will not, and the text will form a character surround effect. It affects sibling elements. Clearing this effect is called clearing floats.

Professional: clear: left/right/both clear:both

clear:both It can only be written on the first affected element. It is useless to write on the parent element.

8.5 other floating problems

Question: can a floating element in a div be separated from a div.
A: the floating cannot be separated from the parent element. It can affect the height of the parent element. It must run to other boxes.

Q: can two floating elements overlap?
Answer: no

Q: when can I make two boxes overlap:
Answer: 1) one box is floating, the other is not floating 2) positioning, positioning is completely separated from the standard document flow

Q: do floating elements float upward first?
A: Yes

Q: where does the floating element float first?
A: if the boundary of the floating parent box is body, and the height of the body is not set, it will also affect the body, and the height of the body will collapse,
Use overflow:hidden; Floating cannot be cleared, so do not run naked in the body directly.

Q: is the body a box?
Answer: Yes

Mainly refer to the teacher's lectures.

Tags: html css

Posted by misslilbit02 on Thu, 02 Jun 2022 04:08:41 +0530