The CSS profile

The history of

  1. When Tim Berners-Lee invented the World Wide Web in 1990, creating the HTML hypertext markup language, there was no way to decorate web pages
  2. In the 1990s, HTML took off and added a lot of features, code became bloated, HTML became messy, and CSS was born
  3. In December 1996, the W3C released the first version of the CSS specification
  4. In 1997, W3C issued CSS1.0 version, CSS1.0 more comprehensive provisions of the document display style, can be divided into selector, style attributes, pseudo class and other parts
  5. In 1998, the W3C released the second version of CSS, which is now adopted by major browsers
  6. In December 2005, the W3C began work on the CSS3 standard, which has not yet been finalized
  7. After more than 20 years of development, CSS engineering schemes have been constantly improved, and many CSS preprocessing and post-processing tools, such as Sass and PostCSS, have emerged

Relevant concepts

  1. Definition: Cascarding style sheet, cascading style sheet

  2. Classification:

    • Inline style: defined on the style property of the tag

    • Internal style sheet: The style tag definition inside the head

    • External style sheets: Link tag introduced

      <! DOCTYPEhtml>
<html>
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet" href="main.css">
    <style type="text/css">
        div {
            width: 200px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
<div style="width: 200px; height: 50px"></div>
</body>
</html>
Copy the code

  3. priority

    Inline style > Internal Style Sheet > External Style, define the same style, inline style over internal style, internal style over external style

The browser

  1. Components: shell + kernel

  2. Major browsers and kernels

    • Chrome: its/blink
    • Safari: its
    • Firefox: gecko
    • Ie: trident
    • Opera: presto

    Webkit is a kernel developed jointly by Google and Apple

    Opera is now owned by 360 and Kunlun

  3. The kernel includes a rendering engine and a JavaScript engine

The selector

species

  1. The id selector

    /* Select the element with id box */
#box{
    width: 100px;
    height: 100px;
    background-color: red;
}
Copy the code
    <div id="box"></div>
Copy the code

  2. Class selectors

    /* Select the element whose class is box */
.box{
    width: 100px;
    height: 100px;
    background-color: red;
}
Copy the code
    <div class="box"></div>
<div class="box"></div>
Copy the code

  3. Label selector

    /* Select the element with the tag div */
div{
    width: 100px;
    height: 100px;
    background-color: red;
}
Copy the code
    <div></div>
<div></div>
Copy the code

  4. Property selector

    /* Select the element with the href attribute */
[href]{
    color: blue;
}
/* Select the element with the id attribute equal to box */
[id="box"]{
    width: 100px;
    height: 100px;
    background-color: red;
}
Copy the code
    <div id="box"></div><a href="http://baidu.com">The baidu</a>
Copy the code

  5. Parallel selector

    /* Select the element */ that is a div tag with an ID equal to boxdiv.box{    width: 100px;    height: 100px;    background-color: red; }Copy the code
    <div class="box"></div><p class="box"></p>
Copy the code

  6. Descendant element selector

    /* Select all em tag elements */ within the strong tagstrong em{    color: red; }Copy the code
    <strong>    <em>123</em></strong><p>    <em>123</em></p>
Copy the code

  7. Child element selector

    /* Select all children of the em tag */ within the strong tagstrong > em{    color: red; }Copy the code
    <strong>    <em>123</em>    <p>    	<em>123</em>	</p></strong>
Copy the code

  8. Sibling element selector

    /* Select the first strong tag after div */div + strong {    color: red; }/* Select all p tags after div */div ~ p {    color: blue; }Copy the code
    <div></div><strong>abc</strong><strong>def</strong><p>123</p><p>456</p>
Copy the code

  9. Packet selector

    /* Select the strong tag and the p tag */strong.p{    color: red; }Copy the code
    <strong>123</strong><p>123</p>
Copy the code

  10. Wildcard selector

    /* Select all tag elements */* {margin: 0;    padding: 0; }Copy the code

The weight

  1. Selector weight value, 256 base
    • The wildcard 0
    • Tag, pseudo-element 1
    • Class, property, pseudo class 10
    • id 100
    • Inline style 1000
    • ! Important is infinite
  2. The weight values are summed and compared to get a valid pattern, where infinity plus one is greater than infinity

The box model

  1. Box Model, we usually double tag HTML elements with width and height attributes as boxes, containers
  2. Composition of a box
    • Margin – Clears the area outside the border and is transparent
    • Border – The Border around the inside margin and around the content
    • Padding – Clears the area around the content, making it transparent
    • Content – The Content of the box, the area divided by width and height
  3. The box – sizing properties
    • Content-box: Draw border and padding outside width/height
    • Border-box: draws the border and padding within width/height
  4. Margin of the body element
    • The default for most browsers is 8px
    • IE8 16px 8px, IE7 16px 11px
  5. Background backgroud property
    • Backgroud – image: passurl()The specified path
    • Background-position: Specifies the starting position of the background image on the horizontal and vertical coordinates, as intop left/top right/center center/50% 60%/100px 200px 等
    • Background-repeat: Specifies whether the background image is repeated on the horizontal and vertical coordinates.no-repeat/repeat/repeat-x/repeat-y
    • Background-siz: Specifies the size of the background image100px 100px|40% 60%|cover|containContain amplifies an image so that the content area is exactly the size it should be
    • Background-attachment: Specify how the background image scrolls with the page,scroll|fixed

Text attributes

  1. Font-family Sets the font. When the attribute values are Chinese or multiple English words, enclose them in double quotation marks

    font-family: Arial,Microsoft Yahei."Times New Roman"
Copy the code

  2. Color Set the font color, can use color English word, hexadecimal color, RGB ()

  3. Bolder /bold/normal/ 100-900 (400 is normal)

  4. Text-align Sets the alignment, left, right, and center

  5. Text – decoration set the text, none/underline/overline/line – through

  6. Text-indent Sets indentation, value, or percentage

  7. Line-height sets the line height. The text is centered within the line height

  8. Single-line text truncation

    text-overflow: ellipsis
overflow-x:  hidden
white-space:  nowrap
Copy the code

  9. Multiple lines of text inside the container are vertically centered

    Container, such as div, sets display to table

    For text elements in the container, such as span, set display to table-cell and vertical-align to middle

Pseudo class, pseudo element

  1. Pseudo-classes: Used to define the style of an element in a particular state

    • :hover hovering
    • :foucsGet focus
    • :checkedA radio or multiple button is selected
    • first-chirld/last-chirldBe first or last of all sibling elements
    • first-of-type/last-of-typeBe first or last in the same tag of all sibling elements
    • nth-childandnth-of-typeAs above, the number can be specified
    • :targetCurrently active HTML anchor point

  2. Pseudo elements

    ::before or ::after, inserts new content before or after the content of the element

    The content must be specified through the Content attribute, which can use strings, attr(element attributes), urls (resource links for images, etc.)

floating

  1. The float property specifies the direction in which the element floats out of the current document flow and into the float flow

  2. Block-level elements do not recognize the position of floating elements; inline, inline blocks, and plain text do

  3. Put several floating elements together and they will be adjacent to each other if there is room

  4. The clear property defines the edge of an element where floating elements are not allowed and is often used to clear floating elements

    .clearfix::after {
    content: "";
    display: block;
    clear: both;
}
Copy the code

positioning

  1. The position property specifies how to locate

    • Static: the default
    • Relative: relative to its original position, does not affect the space occupied by the original position
    • Fixed: fixed relative to the browser window, does not occupy space
    • Absolute: Positioned relative to the most recently located parent element. No matching parent element is positioned relative to the entire document, taking up no space
    • Sticky: similar torelative, when the element is scrolled out of visual rangefixed

  2. The top/bottom/left/right attribute adjusts the relative position of the positioning

  3. The z-index attribute controls the cascading order of multiple positioned elements between positioned elements that are the same as the nearest positioned parent element

    Elements with a higher stack order always precede elements with a lower stack order

    If two positioned elements overlap and no Z-index is specified, the last positioned element in the HTML code will be displayed first

BFC

  1. BFC: block formating Context, block level formatting context

  2. Document flows are classified into normal flow and float flow. BFC is a normal flow and does not affect other elements

  3. Several BFC scenarios

    • Body element

    • The floating element

    • Position is absolute or fixed

    • Display: inline-block or tabe-cell

    • Overflow is hidden auto scroll

  4. Margin collapse means that when the child element is set to float, the height of the parent element cannot be stretched. The solution is as follows

    • Set the parent element to BFC
    • Using pseudo-elements::afterRemove the floating

  5. Margin merge refers to two common sibling elements. The vertical margin is merged, which can also be resolved by setting the BFC

Attribute writing order

  1. Position properties (position, top, right, Z-index, display, float, etc.)
  2. Size attributes (width, height, padding, Margin, border)
  3. Text attributes (font, line-height, letter-spacing, color-text-align, etc.)
  4. Decorative properties (background, box-shadow, etc.)
  5. Other properties (animation, Transition, etc.)