web basics [css]

css

Cascade style sheet
Cascading style sheet
CSS basic syntax rules: selector + several attribute declarations

CSS independent language: declarative language (similar to sql language) only declares the result, what "I" wants, regardless of which
elements the process targets, given those styles, through the selector (selector)

Three ways to write CSS:

1. Use the style tag to write CSS directly into the html file. [Internal style]
   At this time, the style tag can be placed anywhere, and it is generally recommended to be placed in the head tag.

    <style>
        p {
      
      
            color: #f44f09;
            font-size: 30px;
        }
    </style>

2. Inline style: Use the style attribute to set the style for the specified element. At this time, you don't need to write a selector, but directly write the attribute key-value pair [inline style]

    <p style="color: red;" >1111111111</p>   

3. External style: Separate the CSS code as a .CSS file, and then use the link attribute to let html import the CSS file [external style]. Most commonly used in actual development.

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

CSS selector

1. Label selector: { Write the label name in front, which means that all the specified labels in the current page will be selected.
2. class selector: a better option, you can create a CSS class and manually specify which elements apply this class.
   The so-called class of CSS is to give a set of CSS properties a name for easy reference elsewhere.
   To define a class, you need to .start . When referencing this class, pass the class attribute = "class name" instead of.

    <style>
        /* 定义了一个css类 */
        .one {
      
      
            color: red;
        }
        .two {
      
      
            color: green;
        }
        .three {
      
      
            color: blue;
        }
    </style>

    <div class="one">
        这是第 1 个div
    </div>
    <div class="two">
        这是第 2 个div
    </div>
    <div class="three">
        这是第 3 个div
    </div>

A class can be referenced by one element or multiple elements
An element can reference one class or multiple classes.
Understand cascading: an element can be applied with multiple sets of styles, and these styles seem to be superimposed layer by layer

3. Each element in the ID selector
   HTML page can be set to a unique id as the identity of the element.
   After the id is arranged for the element, the corresponding element can be selected by the id.
   Class selector: Allows multiple elements to apply the same class.
   id selector: it can only be effective for unique elements, because there is only a unique id in a page.

    <style>
        /* id选择器 */
        #oneDiv {
      
      
            color: red;
        }
    </style>

    <div id="oneDiv">
        这是第 1 个div
    </div>
    <div id="twoDiv">
        这是第 2 个div
    </div>

The above three selectors are all simple basic selectors.
In addition to this, CSS also supports some more complex "composite selectors".

A compound selector is a combination of the previous basic selectors.

4. Descendant selector
   Combine multiple simple basic selectors. (It can be any combination of label, class, and id selector)
   Here, li only needs to be a descendant of ul (child element, grandchild element...), not necessarily a child element,

    <style>
     /* 先找页面中所有的ul，然后在这些ul里再找所有的li */
        ul li {
      
      
            color: red;
        }
    </style>

    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>

    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>

5. Child selectors
   combine multiple simple base selectors. (It can be any combination of tags, classes, and id selectors)
   Only find matching child elements, not grandchildren and the like. Sub-selectors are more specific.
   selector1 > selector2 { properties... } only find tags in child elements of
   
   
   选择器1选择器2

    <style>
        .one> a {
      
      
            color: red;
        }
    </style>

    <div class="one">
        <a href="#">链接1</a>

        <p>
            <a href="#">链接2</a>
        </p>
    </div>

6. The union selectors
   are separated by commas, which are valid for both selector 1 and selector 2. Multiple sets of selectors have the same style applied.
   selector1, selector2 { properties... }
   
   

    <style>
        .two,.three {
      
      
            font-size: 40px;
        }
    </style>

    <div class="one">
        <a href="#" class="two">链接1</a>

        <p>
            <a href="#" class="three">链接2</a>
        </p>
    </div> 

7. Pseudo-class selectors
   A special use of compound selectors.
   The previous selector is to select an element, and the pseudo-class selector is to select a specific state of an element.

:hover: the state when the mouse hovers over
:active: the state when the mouse is pressed

<!-- 鼠标悬停时变为红色 -->
    <style>
        .one:hover {
      
      
            color: red;
            font-size: 40px;
        }
        
        .one:active {
      
      
            color: gold;
        }
    </style>

    <div class="one">
        这是第 1 个div
    </div>

Shortcut key skills:
div: generate <div></div>
div.one: generate <div class="one"></div>
div#one: generate<div id="one"></div>

How HTML relates to CSS

1. Internal styles, through an HTML tag: style

<style>.....css语法内容</style>

2. External style: write CSS specifically in another resource (CSS file) and <link>import it through tags
3. Inline style: placed directly in the style attribute of the element, no need to follow the selector

CSS common properties

Indicates a specific style setting.
Style covers many aspects, including but not limited to: size, position, color, shape, margin, border, special filter, transition effect, animation, etc.

font properties

1. Set the font family font-family, which font is currently used for display.
   The font specified by this attribute must be installed in the system.
   If you want to specify some special fonts that are not available on the system, they cannot be displayed correctly.
   In this case, you generally need to request the corresponding server through the browser to obtain the specified font file before setting it.

2. set font sizefont-size

3. Font weight When font-weight
   actually setting the value, there are two typical setting styles

   • use words
     • normal: normal thickness, equivalent to 400
     • bold: bold, equivalent to 700
     • lighter: Thinner than the value inherited from the parent element (in the range of possible weight values ​​for the font)
     • bolder: thicker than the value inherited from the parent element (in the range of possible weight values ​​for the font)
   • Use
     values ​​between numbers 1-1000

4. Text slant font-style
   iand emtags in HTML that make text slant. These two tags are actually useless and can be set directly through CSS.
   A div, with CSS, can achieve the effect of the previous tags (individual form tag input can not be realized)
   Many functions of html are equivalent to being emptied by CSS.

font-style:italic;   /* 设置倾斜 */
font-style:normal;   /* 取消倾斜 */

5. Text color color
   Computer representation color: use RGB representation method.
   In the front end, each RGB is assigned a byte, and the range of each byte is 0 ~ 255 / 00 ~ FF.

6. Text alignment text-align
   text-align:left default left alignment
   text-align:right right alignment
   text-align:center center alignment

7. text decoration text-decoration

• underline: underscore
• none: nothing, you can remove the underscore for the a tag
• overline: overline
• line-through: delete line

8. Text indentation text-indent
   first line indents two texts

text-indent: 2em;

px: equivalent to an absolute amount
em: a relative amount, set based on the text size. [Common]
The value of text indentation can be a negative number (indent to the left)

9. Row Height
   Row Height = Text Height + Line Spacing
   Row Height: The distance between the two top lines
   

10. background-color

11. Background image background-image background
    -image: url (image path)
    After importing the background image, the default image is tiled. If you don’t want to tile, use to background-repeat:none
    disable tiling, and the image will appear in the upper left corner.
    If we want to center the image: background-position:center center;
    top center bottom up, middle and down; left center right left, middle and right
    In addition to words, pixel coordinates can also be used to control: background-position:10px 50px;
    commonly used by computers
    

12. Set the background image size background-size
    With the support of background series attributes, div (any element) can be used to display images, and the functions provided are more powerful than img tags

• contain Make this image as large as possible without destroying the original image ratio
• cover Let this picture stretch to the entire div, breaking the original picture ratio

13. Rounded rectangle border-radius
    html elements are all rectangles by default, sometimes we need to represent a rectangle with "rounded corners":

border-radius:10px

Meaning: Draw an inscribed circle to the inside of the rectangle to form rounded corners.
border-radius sets the radius of the inscribed circle, the smaller the radius, the less obvious the inscribed circle

The display mode of the element display

display:block; block-level elements
display:inline; inline elements
The display mode (block level/inline) of any html tag can be set

About the difference between block-level elements and inline elements (classic front-end interview questions)

1. Block-level elements will occupy a single line, and inline elements will not occupy a single line
2. The height, width, and inner and outer margins of block-level elements can be set; while the height, width, and line height of inline elements are invalid, inner margins are valid, and outer margins are sometimes valid and sometimes invalid.
3. The default width of block-level elements is the same as the width of the parent element, and the default width of inline elements is the same width as the content inside.
   [Block-level elements are relatively normal, and there are many special cases for inline elements. Generally, if necessary, first convert inline elements into block-level elements]

CSS Box Model

Any html element is a rectangular box in which content can be placed (it can be text or other elements)

Describes the basic layout rules of html elements

Each block-level element is composed of several elements inside

• content: content
• padding: padding
• border: border
• margin: Margin

Border attribute: border, directly set 4 directions
You can also use: border-left, border-right, border-top, border-bottom
to set the three aspects of the border:

1. border thickness
2. border color
3. The style of the border (solid solid, dashed dashed...)

border: 5px black solid;

The border will stretch the box by default.
Usually we don't want to stretch the box, because this may affect the relative position of this element and other elements.
Use a special property to prevent the box from being stretched:box-sizing: border-box;

padding attribute: inner margin, distance between content and border
padding: 10px; means that four directions are 10px margin
padding: 10px 20px; upper and lower margins are 10px, left and right margins are 20px
padding: 10px 20px 30px 40px; top right Bottom left (clockwise)

Margin attribute: margin, setting the distance between two adjacent elements
margin is similar to padding, set
margin: 10px in four directions; it means that all four directions are 10px margin
margin: 10px 20px; the upper and lower margins are 10px, The left and right margins are 20px
margin: 10px 20px 30px 40px; top right bottom left (clockwise)

Special usage of margin: set both margin-left and margin-right to auto, let the browser adjust automatically, then the element can be centered inside the parent element. And margin-top and margin-bottom cannot achieve horizontal centering

Through the three attributes of border, padding, and margin, you can control the relative position between elements and between elements and content.

flexible layout

Used to implement page layout: control a specified element to be placed at a specified position.

The page layout of html is a troublesome thing, initially html did not consider the "layout" thing

1. Table based layout. [Original way, eliminated]
2. Float-based layout methods. It mainly solves the problem of "horizontal alignment". [Block-level elements are arranged vertically by default (one line exclusively)]
3. flexible layout. Solve the "horizontal alignment" problem. Simpler and more functional.
4. grid layout. Two-dimensional layout, a more advanced version of "table layout". It hasn't been around long enough, and there are still old browsers out there that don't support grid layouts.

Although inline elements are arranged in the horizontal direction, they are not suitable for horizontal layout because the size boundaries are not controllable.
Although the size and margin of the inline block element can be set, it does not occupy one line by default.
Both inline block elements and inline elements will treat the newline in the source code as a space, which will have a bad impact on the layout of page elements, so
we prefer to use elastic layout.

1. Enable flexible layout

display: flex;

Set flex for the parent element of the element to be aligned horizontally.
At this time, the elements in the flexible container are no longer "block level" and "inline elements", but become "flexible elements", which follow the flexible layout, and the size and margin can be set.

2. Sets the horizontal alignment of these elements

justify-content: flex-start;  /* 靠左 */
justify-content: flex-end;   /* 靠右 */
justify-content: center;     /* 居中 */
justify-content: space-around;    /* 元素两边等间距 */
justify-content: space-between;   /* 元素与元素中间等间距空白 */

3. Sets the vertical alignment of these elements

align-items: flex-start;   /* 靠上 */
align-items: flex-end;     /* 靠下 */
align-items: center;       /* 居中 */