Front end CSS

CSS

css is essentially a style sheet

It is mainly composed of selector and declaration, and the declaration part includes attribute and attribute value

CSS comments:

/*notes*/
/*
multiline comment 
*/

CSS introduction method:

/*Internal style*/
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: red;
        }
    </style>
</head>

/*External styles write css code in a separate file and then reference it*/
<link href="mystyle.css" rel="stylesheet" type="text/css"/>

/*Inline style*/
<p style="color:red">hello world</p>

CSS selector

Basic selector

/*  ID selector  */
#id name{
    background-color:red;
}

/*  Class selector   */
.Class name{
  color:red;  
}

/*  element selector   */
Yuan Su Ming{color:red}

/* universal selector  */
*{
    color:red
}

/*  example  */
#id1{
    background-color:red;
}

.c1{
  color:red;  
}

p{color:red}

Combination selector

Descendant selector:

/*The a tag that acts inside the div*/
div a{
    color:red;
}
<div>
　　<a>
</div>

Son selector

/*Select all < span > elements whose parents are < div > elements*/
div>span{
    color:red;  
}

<div>
    <span></span>
</div>

Adjacent selector

/* 
Select all the first < p > elements immediately after the < div > element
That is, the first one next to the same level
*/
div+p{
    color:green;
}

Brother selector

/*All span at the same level*/
div-span{
    color:red;
}
For example:
<div></div>
<span>
<span>
<span>

Attribute selector:

/*All label styles with attribute name username*/
[username]{
    background-color:red
}
/*All p label styles with attribute name username*/
p[username]{
    background-color:red
}
/*All label styles with attribute name username="json"*/
[username="json"]{
    background-color:red
}

Grouping and nesting

Grouping: use comma separated grouping selectors between multiple selectors to set styles uniformly

/* Set div and P labels to red   */
div,
p{
    color:red;
}

Nesting: a combination of multiple selectors

/*  c1 The style of all p labels inside the class   */
.c1 p{
    color:red;
}

Pseudo class selector

/*Unreachable connections */
a:link{
      color:#b7e8b7;
}
 /*Move the mouse over the link*/
a:hover{
      color:yellow;
}
 /*When selected*/
a:active{
      color: hotpink;
 }
/*Visited links*/
a:visited{
     color: #892BCF;
}

Pseudo selector element

First letter: it is often used to set special styles for initials

p:first-letter{
      font-size: 24px;
      color: #892BCF;
}

Before: insert content before each p element (mostly used to clear floating)

p:before {
    content:"Level 4 tomorrow";
    color:red;
}

After: insert content after each p element (mostly used to clear floating)

p:after{
      content: "Pass every exam";
      color: yellow;
 }

Priority of selector

css inheritance

/*At this time, all labels on the page will inherit the font color of the body, but the p label will not, because the p label's own style overrides the style of the body*/
body{
    color:red;
}

p{
    color: green;
}

Priority of selector:

Inline style > ID selector > class selector > element selector

css attribute related

Width and height

The width attribute sets the width for the element

The height attribute sets the height of the element

The width can only be set for block level labels, and the width of inline labels is determined by the content

Font properties

Font family note: multiple font names can be saved as a "fallback" system. When the first font is not supported, the next one will be tried.

body{
     font-family: "Microsoft Yahei", Simsun, Arial, sans-serif;      
}

Font size: font size

p {
     font-size:24px;
     /*font-size:inherit;  Represents the font size of the inherited parent element
}

Font weight: font weight

normal: default value, standard thickness
bold: bold
bolder: thicker
lighter: finer
100 ~ 900: set the specific thickness. 400 is equal to normal and 700 is equal to bold
inherit: the thickness value of the base parent element font

text color

There are three main ways to express colors:

Hexadecimal value: for example: #ffffff
An RGB value: for example: RGB(255,0,0)
Color name: e.g.: red
The fourth value of rgba(255,0,0,0.2) is alpha, which refers to the transparency / opacity of color, and its range is 0.0 to 1.0

Text properties

Text alignment: text align

Align lef t
Align right
center align
justify both ends

Text decoration

none default
underline defines a line under the text
overline defines a line on the text
Line through defines a line that passes under the text
inherit inherits the value of the text decoration attribute of the parent element

Note: this attribute is often used to remove the default self dash of the a tag

a{
    text-decoration:none;
}

First line indent: text indent: 32px

p{
    text-indent: 32px;
}

Background properties:

div{
   width:56%;
   height: 50%;
  /*background-color: deepskyblue;*/
  /*!* Background picture */
  /*background-image: url('J-20 jpg');*/
  /*background-repeat: repeat;  !* repeat(Default): the background picture tiles the whole div *!*/
  /*background-repeat: repeat-x;  !* repeat-x: Tile horizontally *!*/
  /*background-repeat: repeat-y;  !* repeat-y: Tile vertically *!*/
  /*background-repeat: no-repeat; !* no-repeat: Not tiled *!*/

  /*If there are multiple attribute names with the same prefix, it can be abbreviated to prefix in general*/
  background: deepskyblue url("J-20.jpg") no-repeat center;
}

The background attachment property sets whether the background image is fixed or scrolls with the rest of the page

1. sroll# default: the background image is not fixed and will scroll as the page scrolls

2. fixed # the background image will not move when the page scrolls

3. inherit inherits the setting of the attribute from the parent element

frame

Border properties: border thickness, style, color

.c1{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
/*It can also be abbreviated as*/
.c1{
    border: 2px  solid red;
}
/*Different styles can be set on the four sides of the border, and the four prefixes are as follows:
border-top
border-right
border-bottom
border-left
*/

Border style: border style

1. none ， no border

2. Dotted dotted border

3. Dashed rectangle dashed border

4. Solid solid border

Fillet attribute: border radius

display attribute

1. none: not displayed in the browser

2. Block: it has the characteristics of block level elements. If the width is set, the remaining part will be filled with margin

3. Inline: display of inline elements

4. Inline block: make elements have the characteristics of both inline elements and block level elements

Note: the difference between display: none # and possibility: hidden:

The former can hide an element without taking up any space

The latter can hide an element, but the hidden element still occupies the original space of the element and still affects the layout

css box model

Margin: outer margin, used to control the distance between elements
Padding: inner padding, used to control the distance between the content and the border
Border: border of border, inner margin and outer margin of content
Content: box conten t, displaying text and graphics

Note: there are four common abbreviations for margin and padding:

Provide a parameter for four sides, for example: padding / margin: 5px
Two parameters are provided, the first is up and down, and the second is left and right. For example: padding / margin: 5px 10px
Three parameters are provided, the first is up, the second is left and right, and the third is down. For example: padding / margin: 5px 10px 3px
Four parameters are provided, which will be in the order of top right, bottom left. For example: padding / margin: 5px 10px 3px 4PX

float attribute

No matter what kind of floating element it is, it will generate a block level box, which has two characteristics:

A floating box can move left and right until its outer edge touches the border containing the box or another floating box
Since the floating box is not in the normal flow of the document, the block box in the normal flow of the document behaves as if the floating box does not exist.

Attribute value:

Left: left
Right: right
none: default value, not floating

Note: floating will have an impact (which will cause the parent label to collapse) as shown in the following figure (collapse figure on the top and no collapse figure on the bottom):

<!--example-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            border: 3px black solid;
        }
        #d2{
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            /*display: none;*/
            float: left;
        }
        #d3{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            /*display: inline-block;*/
            float: left;
        }
        /*Methods to solve collapse*/
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="d1" class="clearfix">
        <div id="d2">222</div>
        <div id="d3">333</div>
    </div>
</body>
</html>

General solution to floating effects:

.clearfix:after{
    content:'';
    display:block;
    cear:both;
}

clear attribute

Left: floating elements are not allowed on the left
Right: floating elements are not allowed on the right
Both: floating elements are not allowed on both sides
none: default value. Floating elements are allowed on the left and right sides
Inherit: inherit attribute values from parent elements

Overflow overflow attribute

visible: by default, the overflow content will be rendered outside the element box
Hidden: the default value. Overflow content will be hidden
Scroll: the content will be trimmed and the scroll bar will be displayed. You can see all the content by scrolling through the scroll bar
auto: like scroll, it is also viewed through the scroll bar
Inherit: inherit the overflow attribute of the parent element

overflow application case (round head):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            margin: auto;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border:5px solid deepskyblue;
            overflow: hidden;
        }
        div>img{
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div id="d1">
        <img src="J-20.jpg">
    </div>
</body>
</html>

location:

1. static: default value, no positioning, and the left and top equivalents of label objects do not work

2. Relative: relative positioning, which offsets the position based on its original position and attributes such as top, right, bottom and left

Note: left means moving from left to right

The main usage of this positioning: it is convenient for absolute positioning elements to find references

3. Absolute: absolute positioning: offset the positioning (i.e. starting position) with the ancestor element closest to you and with positioning enabled,

If there is no positioned parent element, the body element is used for positioning.

Note: if the parent element sets the position attribute, such as position:relative, the child element will be offset with the upper left corner of the parent element as the starting point

4. Fixed: fixed. You can directly use the top, right, bottom, left and other attributes to locate with the window as the reference point, and will not scroll with the scroll bar

Mainly used in: small ads on the right, back to the top button, etc

Examples of positioning:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d2{
            width: 300px;
            height: 300px;
            background-color: #892BCF;
            left: 200px;
            top: 200px;
            position: relative;
        }
        #d3{
            width: 100px;
            height: 100px;
            background-color: #1ba91b;
            left: 300px;
            top: 300px;
            position: absolute;
        }
        #d4{
            width: 100px;
            height: 50px;
            border: 3px solid black;
            bottom: 20px;
            right: 30px;
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="d2">
        <div id="d3"></div>
    </div>
    <div id="d4">Back to the top</div>
</body>
</html>

Out of document flow (document flow refers to the original location, and out of document flow refers to not retaining the original location)

Absolute positioning
Fixed positioning
float

Do not detach from document flow:

Relative positioning

z-index attribute

Sets the stacking order of objects. eg: Baidu login interface

Three layer structure: 1. The bottom layer is the one where the normal text content (z=0) is farthest from the user

2. Middle layer of black transparent area (z=99)

3. The white registration area (z=100) is the layer closest to the user

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        #d2{
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background-color: black;
            opacity: 0.4;
        }
        #d3{
            width: 300px;
            height: 200px;
            position: fixed;
            left: 40%;
            top: 40%;
            background-color: white;
        }
    </style>
</head>
<body>
    <div id="d1">hello world</div>
    <div id="d2"></div>
    <div id="d3">
        <p>Registration interface</p>
        <label>
            username: <input type="text">
        </label>
        <label>
            password: <input type="password">
        </label>
        <p>        <input type=submit>
        </p>

    </div>

</body>
</html>

Transparency: opacity

It is used to define the transparency effect. The value range is 0 ~ 1. 0 is completely transparent and 1 is completely opaque

The difference between opacity and rgba:

rgba can only affect color
opacity can modify the color and font

Tags: Front-end

Posted by Darrel on Mon, 16 May 2022 01:50:39 +0300

Algorithm Zone