CSS phase summary

Time:2022-5-11

The core function of CSS language is to set specific values for specific attributes;

CSS rule set:

Selector: selects one or more elements (in this case, the P element) to be styled. To add styles to different elements, just change the selector.

Declaration: a separate rule, such as color: red; Specifies the attributes to add style elements

Attribute: a way to change the style of HTML elements. In CSS, it is up to the writer to decide which attribute to modify to change the rule.

Attribute value: on the right side of the attribute, the value of the attribute is after the colon. It selects a value from many appearances of the specified attribute

Introduction of CSS:

Inline style (inline style): higher priority

eg:< div style = "color: Red" > set the color of text to red < / div >

Internal style sheets: separating styles from structures

Note:

1. The style tag should be written between the start tag and the end tag of the head tag (that is, it is brotherly with the title tag)

​ 2. In fact, the type attribute in the style tag does not need to be written. The default is type = “text / CSS”

​ 3. When setting the style, it must be set according to the fixed format key: value; Where: cannot be omitted, and semicolon cannot be omitted in most cases

eg:`<style type=”text/css”>
p{

color:red;        
background-color:yellow;    

}
</style>`

External style sheet: style and structure are separated and decoupled; The reuse rate of styles is high (framework: such as bootstrap), which can be shared, and the defined CSS files can be applied to multiple pages.

eg:< link rel = "stylesheet" type = "text / CSS" href = "path to file" / >

@Import URL (), you can also import CSS files through import

eg:`<style>

/*It should be written at the front of the style tag, otherwise it will not take effect or be used directly in the external CSS file*/

@import url(‘./style.css’);
</style>`

Priority of import method

Inline style > inline style / external import

CSS selector

Label selector:

Note:

1. The tag selector selects all tags in the current interface, but cannot select a single tag
        2. Label selector can be selected no matter how deep the label is hidden
        3. As long as it is a tag in HTML, it can be used as a tag selector

ID selector: #id name{

Attribute: value;
                               }

Note:

1. Each HTML tag has an attribute called ID, which means that each tag can be set with ID
        2. The name of ID cannot be repeated in the same interface
        3. When writing an ID selector, be sure to prefix the ID name with#
        4. The name of ID is standardized
        The name of ID can only consist of letters / numbers / underscores, A-Z 0-9_ 
        ID name cannot start with a number
        The ID name cannot be the name of an HTML tag or a H1 img input 
        5. In enterprise development, generally, if it is only for setting styles, we will not use ID, because ID is reserved for JS

Class selector: Class name{

Attribute: value;
                               }

Note:

1. Each HTML tag has an attribute called class, that is, each tag can set a class name
        2. The name of class can be repeated in the same interface
        3. When writing a class selector, be sure to precede the class name with
        4. The naming convention of class name is the same as that of ID name
        5. The class name is specially used to set the style for CSS
        6. In HTML, each tag can bind multiple class names at the same time

Descendant selector: label name 1 label name 2{

Attribute: value;
                               }

Note:

1. Descendant selectors must be separated by spaces

2. Offspring are not only sons, but also grandchildren and great grandchildren, as long as those in the specified label are descendants

3. Descendant selectors can use not only labels, but also other selectors

4. The descendant selector can continue through the space.

Sub element selector: label name1 > label Name2{

Attribute: value;
                               }

Note:

1. The child element selector will only find the child, not other nested tags

2. The sub element selectors need to be connected with the > symbol, and there can be no spaces

3. The sub element selector can use not only the label name, but also other selectors
4. The sub element selector can continue through the > symbol

What is the difference between descendant selectors and child element selectors?

1. The descendant selector uses spaces as connecting symbols
2. The sub element selector uses > as the connection symbol
3. The descendant selector will select all specific descendant labels in the specified label, that is, it will select sons / grandchildren, Any specific label placed in the specified label will be selected

4. The sub element selector will only select all specific direct labels in the specified label, that is, only specific child labels will be selected

Common points between descendant selector and child element selector:

Both descendant selectors and child element selectors can use tag name / ID name / class name as selectors
                                                                Both descendant selectors and child element selectors can continue through their respective connection symbols
                                                                 Selector 1 > selector 2 > selector 3 > selector 4{}

Intersection selector: set properties for the intersecting part of the labels selected by all selectors

Selector 1 selector 2{

Attribute: value;
                               }

Note:

1. There is no connection symbol between the selector and the selector
        2. The selector can use tag name / ID name / class name
        3. Intersection selector is only for understanding, and it is not used much in enterprise development

Union selector: selector 1, selector 2{

Attribute: value;
                               }

Note:

1. Union selector must be used to connect

2. The selector can use tag name / ID name / class name

Adjacent sibling selector: sets properties for the selected tag of the selector immediately following the specified selector

Selector 1 + selector 2{

Attribute: value;
                               }

Note:

1. Adjacent sibling selectors must be connected through +
        2. The adjacent sibling selector can only select the tag immediately following it, not the separated tag

Universal sibling selector: sets properties for all tags selected by all selectors after the specified selector

Selector 1 ~ selector 2{

Attribute: value;
                               }

Note:

1. Universal brother selector must be connected with ~
        2. The universal brother selector selects all the tags selected by a selector behind the specified selector, regardless of whether they are separated or not

Pseudo class selector: the pseudo class starts with “:” and is used after the selector to indicate that the element can only be selected in a special state

Order selector (structure pseudo class selector)

: first child select the first label in the same level
: last child selects the last label in the same level
: nth child (n) select the nth label in the same level
: nth child (odd) selects all odd numbers in the same level
: nth child (even) selects all even numbers in the same level
: nth child (xn + y) x and y are user-defined, while n is a counter that increments from 0

For example, (3N + 1) corresponds to 1,4,7
: nth last child (n) select the nth to last label in the same level
: only child selects the only child element E of the parent element. Takes effect when there is only one child element
Note: do not distinguish between types

Number of the same level and type

: first of type select the first label of the same type in the same level
            : last of type select the last label of the same type in the same level
            : nth of type (n) select the nth label of the same type in the same level
            : nth last of type (n) select the nth to last label of the same type in the same level
            : only of type selects the unique child element of a specific type of the parent element

Dynamic pseudo class selector:

E: Link (link pseudo class selector): select the matching e element, and the matching element is defined, and the hyperlink has not been accessed. Often used on link tracing points
E: Visited (link pseudo class selector): select the matching e element, and the matching element has been hyperlinked and accessed. Often used on link tracing points
E: Active (user behavior selector): select the matching e element, and the matching element is activated. Commonly used on link tracing points and buttons
E: Hover (user behavior selector): select the matching e element, and the user hovers over the element E. IE6 and below browsers only support

A pseudo class selector for tag:

format

: linkmodify a style that has never been accessed
        : visited modifies the style in the accessed state
        : hover modifies the style when the mouse hovers over a label
        : active modify the style when the mouse is long pressed

Attention

The pseudo class selector of a tag can appear alone or together
        If the pseudo class selectors of a tag appear together, there are strict sequence requirements
         Default status: link - > accessed status: visited - > mouse over status: hover - > mouse long press status: active
         The order of writing must comply with the principle of love hate
        If the style of the default state is the same as that of the accessed state, it can be abbreviated

Negative pseudo class: some elements can be eliminated from the selected elements

: not (selector)

Pseudo element selector:

::after

The part that represents the last edge of an element
            Generally, it needs to be used in combination with the style of content,
            Through content, you can add some content to the after location

::before

Represents the leading part of an element
            Generally, it needs to be used in combination with the style of content,
            Through content, you can add some content to the position of before     
::first-letter
            Set a style for the first character
::first-line    
            Set a style for the first row

Attribute selector:

[attribute=value]
Function: find the tag with the specified attribute and the value of the attribute is equal to value, and then set the attribute

What does the value of the attribute begin with
​ [attribute|=value] CSS2
​ [attribute^=value] CSS3
The difference between the two:
CSS2 can only find the beginning of value, and value is separated by – and other content
CSS3 can be found as long as it starts with value, regardless of whether it is separated by –

– what does the value of the attribute end with
​ [attribute$=value] CSS3

– whether the value of the attribute contains a specific value
​ [attribute~=value] CSS2
​ [attribute*=value] CSS3
The difference between the two:
CSS2 can only find independent words, that is, contain value, and value is separated by spaces
CSS3 can be found as long as it contains value

Wildcard selector: set attributes for all labels on the current interface

*{

Attribute: value;

}

Since the wildcard selector is used to set the attributes of all labels on the interface, it will traverse all labels before setting. If there are many labels on the current interface, the performance will be poor. Therefore, the wildcard selector is generally not used in enterprise development

Combined selectors: multiple selectors combined

Three features of CSS:

Inheritance: set some attributes for the parent element, and the child element can also be used. This is called inheritance
Note:

1. Not all attributes can be inherited. Only attributes starting with color / font - / text - / line - can be inherited
        2. In CSS inheritance, not only sons can inherit, but also descendants can inherit
        3. Particularity in inheritance
         A the text color and underline of the label cannot be inherited
         The text size of H label cannot be inherited

Lamination:

Note:

Cascading occurs only when multiple selectors select the same label and then set the same attribute

Priority: when multiple selectors select the same label and set the same attributes for the same label, how to stack is determined by priority

There are three ways to judge priority:

Indirect selection means inheritance
If it is selected indirectly, it means that those who are close to the target tag will listen to them

– same selector (directly selected)
If they are all directly selected, and they are all selectors of the same type, they will listen to whoever writes later

– different selectors (directly selected)
If they are all directly selected and not of the same type, they will be stacked according to the priority of the selector
ID > class > label > wildcard > inheritance > browser default

Priority! important:

Note:

1.! Important can only be used for direct selection, not indirect selection
            2. The label selected by the wildcard selector is also directly selected
            3.! Important can only promote the priority of the specified attribute, and the priority of other attributes will not be promoted
            4.! Important must be written before the semicolon of the attribute value
            5.! The exclamation point in front of important cannot be omitted
            6. However, it is generally recommended not to use "! Important", because it will change the working mode of cascade and make debugging difficult.

Font style: used to turn italic text on and off

Value:

Italic: inclined

Normal: normal. The default is normal

Font weight: sets the thickness of the font

Value:

Bold bold

Bolder is thicker than thicker

Lighter thin line, the default is thin line
Numerical value:
A number in the range of 100-900

400 is equivalent to normal

700 is equivalent to bold

Font size specifies the size of the text

Font family specifies a special font for text, and the browser will only use the font that can be accessed by the browser

Text decoration: attributes of text decoration

Value:

Underline underline
Line through
Underline
None has nothing. The most common use is to remove the underline of hyperlinks

Text align: attribute of text horizontal alignment

Value:

Left left
    Right right
    In center

Text indent: attribute of text indent

Value:

2em, where is the EM unit, and an EM represents the width of a text indented

Text transform: allows font change, text deformation, setting or canceling font change, which is used to make the text display all uppercase or all lowercase

Value:

None prevents any changes

Uppercase converts text to uppercase

Lowercase converts text to lowercase

Capitalize converts the first letter of all words to uppercase

Full width is converted to a font similar to a constant width font

text-shadow: h-shadow v-shadow blur color; (font shadow)

Value:

None: cancel all shadows          
    H-shadow: required. The location of the horizontal shadow. Negative values are allowed.     
    V-shadow: required. The position of the vertical shadow. Negative values are allowed.     
    Blur: optional. Fuzzy distance.
    Color: optional. The color of the shadow.

List style type: sets the list item flag type

List style position: sets the position where the list item flag appears

Value:

Outside: the list item flag appears outside the main block box
    Inside: the list item flag appears inside the main block box

List style image custom setting list item flag

Value:

URL (): Specifies the icon location

Line height: sets the line height of the text as absolute unit or relative unit

Display: displayed in the inline line, and the width and height are invalid

Block level display, effective width and height

The inline block is displayed in the line, and the width and height are valid at the same time

None is not displayed and does not occupy screen space

Visibility: hidden: hidden, occupying screen space

Visible display

Overflow: overflow handling

Hidden beyond content hiding

Auto out of range produces a scroll bar

Scroll scroll bar

Cursor: Specifies the style of the cursor

Merging of outer margins: in the vertical direction, the outer margins will not be superimposed, and merging will occur. Whoever has a large outer margin will listen to who. The outer margins in the horizontal direction are superimposed

Inner margin:

Note:

1. After setting the inner margin for the label, the width and height of the label will change
            2. After setting the inner margin for the label, the inner margin will also have the background color

Content box:

The width property only indicates the width occupied by the contents of the box

The height attribute only indicates the height occupied by the contents of the box

Border box:

Width of content area: width paddingleft paddingright borderLeft borderright

Height of content area: height paddingtop paddingbottom bordertop borderbottom

Width of box

Height of box

Width of screen space: width + marginleft + marginright

Height of screen space: height + margintop + marginbottom

Precautions for box model:

​ 1. If the two boxes are nested, the outer margin at the top of the inner box (child element) is set, and the outer box (parent element) will also be pushed down.

reason:

The upper borders of the child and parent elements coincide. Because if the margin top of the first child element of the parent element cannot touch the effective border or padding, it will continue to find its own parent element layer by layer. As long as a valid border or padding is set for the parent element, the margin top can be effectively controlled to prevent it from overstepping and executing its own margin top as the margin top of the parent element.

2. If the outer box doesn’t want to be pushed down together, you can add a border attribute to the outer box.

3. In enterprise development, if you need to control the distance between nested relationship boxes, you should first consider padding and then margin. Margin is essentially used to control the gap between siblings.

4. Only the vertical outer margin of the block box in the ordinary document stream can merge the outer margin. The outer margins between inline boxes, floating boxes, or absolute positioning are not merged.

5. In the nested box, we can use margin: 0 Auto; To center the inner box horizontally in the outer box
Margin: 0 auto = margin: 0 auto 0 auto, which means that the top and bottom are 0 and the left and right are auto;
6.margin: 0 auto; Valid only for horizontal direction, not for vertical direction

Background color

Background image background picture

Background repeat background tile attribute

Value:

By default, repeat needs to be tiled horizontally and vertically
        No repeat does not need to be tiled horizontally or vertically
        Repeat-x tiles horizontally only
        Repeat-y tiles only vertically

Background position background positioning attribute

Value
Specific location NOUN
Horizontal direction: left center right
Vertical direction: top center bottom

Specific pixels
For example: background position: 100px, 200px;
Remember to write units, that is, PX
Remember that specific pixels can receive negative numbers

Background attachment: used to modify the association method

Value:

Scroll is the default value and scrolls with the scroll bar
Fixed does not scroll with the scroll bar

Floating stream typesetting mode

1. Floating flow is a typesetting method that is “half separated from standard flow”
2. There is only one typesetting method for floating stream, that is, horizontal typesetting It can only set the left or right alignment of an element

Floating element word surround phenomenon:

The floating element will not block the text in the non floating element, and the non floating text will automatically give way to the floating element. This is the word circumference phenomenon of the floating element

-Note:
           1. There is no center alignment in the floating flow, that is, there is no center value
           2. Margin: 0 auto cannot be used in floating flow;

– features:
​ 1. In a floating stream, block level elements / inline elements / inline block level elements are not distinguished
Both block level elements / inline elements / inline block level elements can be arranged horizontally
​ 2. In the floating flow, the width and height can be set for both block level elements / inline elements / inline block level elements
​ 3. To sum up, the elements in the floating flow are very similar to the in-line block level elements in the standard flow

Solve high collapse

1. Therefore, the problem of high collapse must be avoided in development. We can write the height of the parent element to avoid the problem of collapse. However, once the height is written to death, the height of the parent element will not automatically adapt to the height of the child element, so this scheme is not recommended.
        2. You can directly add a blank div at the end of the highly collapsed parent element. Because the div does not float, it can expand the height of the parent element, and then clear the float. In this way, you can expand the height of the parent element through the blank div without side effects.
        Although this method can solve the problem, it will add redundant structure to the page.
                Clear attribute value:
                    None: the default value is sorted according to the sorting rules of floating elements (floating on the left finds floating on the left, floating on the right finds floating on the right)
                    Left: don't look for the front left floating element
                    Right: don't look for the front right floating element
                    Both: don't find the previous left floating element and right floating element
        3. Pass after pseudo class
                You can add a blank block element to the end of the element through the after pseudo class, and then clear the floating. This is the same principle as adding a div, which can achieve the same effect, and no redundant div will be added to the page. This is our most recommended method, with almost no side effects.
                        .clearfix::after{
                            /*Add a content*/
                            content: "";
                           /*Convert to a block element*/
                            display: block;
                            /*Clear the float on both sides*/
                            clear: both;
                        }
Layout rules of BFC
  1. The inner boxes will be placed one by one in the vertical direction.
  2. The distance in the vertical direction of the box is determined by margin. Margins of two adjacent boxes belonging to the same BFC will overlap.
  3. The left outer border of each box is next to the left border of the containing block, even for floating elements.
  4. The area of BFC will not overlap with the float box.
  5. BFC is an isolated independent container on the page. The child elements in the container will not affect the external elements, and vice versa.
  6. When calculating the height of BFC, floating sub elements also participate in the calculation.
Which elements generate BFC

1. Root element

2. The float attribute is not none

3. Position is absolute or fixed

4. Display is inline block table cell table caption flex inline flex

5. Overflow is not visible

Role of BFC

  • Solve the problem that the floating element causes the parent element to collapse highly

Method: turn on BFC for parent element

Principle: when calculating the height of BFC, floating sub elements also participate in the calculation

Positioning layout

Static positioning: the default positioning method for all elements. This means positioning an element in the default document flow (position: static;)

Relative positioning: move relative to your previous position in the standard flow (position: relative;)

Relative positioning precautions

  • Relative positioning is not separated from the standard flow, and will continue to occupy a space in the standard flow
  • In relative positioning, only one positioning attribute in the same direction can be used
  • Since the relative positioning is not separated from the standard flow, the relative positioning is to distinguish block level elements / in-line elements / in-line block level elements
  • Because the relative positioning is not separated from the standard flow, and the relatively positioned elements will occupy the position in the standard flow, the layout of the standard flow will be affected when setting the attributes such as margin / padding for the relatively positioned elements

Absolute positioning: absolute positioning is positioning relative to the body (position: absolute;)

Absolute positioning reference point:

1. Law
By default, all absolutely positioned elements, whether they have ancestor elements or not, will take body as the reference point

​ 2. If an absolutely positioned element has an ancestor element and the ancestor element is also a positioning stream, the absolutely positioned element will take the ancestor element of the positioning stream as the reference point.
2.1 as long as it is the ancestor element of this absolute positioning element
2.2 positioning flow refers to absolute positioning / relative positioning / fixed positioning
2.3 only static positioning cannot be used in positioning flow

​ 3. If an absolutely positioned element has an ancestor element, and the ancestor element is also a location stream, and multiple elements in the ancestor element are location streams, the absolutely positioned element will take the ancestor element of the location stream closest to it as the reference point.

-Absolute positioning horizontal center

You only need to set the left of the absolute positioning element: 50%;
Then set the margin left of the absolute positioning element: – half PX of the width of the element;

Fixed positioning: position: fixed;

Note:

1. Fixed positioning elements are separated from the standard flow and will not occupy the space in the standard flow
        2. Fixed positioning is the same as absolute positioning, and does not distinguish between intra branch / block level / intra bank block level

Sticky positioning: position: sticky;

Service conditions:

Parent element cannot have overflow: hidden or overflow: Auto attributes.

You must specify one of the four values of top, bottom, left and right, otherwise it will only be in relative positioning

The height of the parent element cannot be lower than the height of the sticky element

A sticky element takes effect only within its parent element

Z-index: the default value is 0

Note:
1. Subordination
1.1 if the parent element of both elements does not have the Z-index attribute set, the one whose Z-index attribute is larger will be displayed on it.
1.2 if the parent element of two elements sets the Z-index attribute, the Z-index attribute of the child element will be invalid, that is, the parent element whose Z-index attribute is larger will be displayed on it.

Recommended Today

The difference and relation between Eval (CMD) and eval ($CMD)

This problem has been bothering me for a long time, and it has finally been solved today Question 1: does Eval need double quotation marks for execution, including: First look at three commands: A:<?php eval(system(dir))?> B:<?php $cmd=”system(dir)”; eval($cmd)?> A result: B result: report errors reflection: It is also a command. Why is there such a […]