css(2)

css(2)

1. css attributes and usage

1.1css style operation

The length and width of the block-level label can be set, but the length and width of the row-level label cannot be set directly. Such as:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div {
                width:200px;
                height:300px;
                background-color: fuchsia;
                }
            span{
                width:100px;
                height:150px;
                background-color: aqua;
            }

    </style>
</head>
<body>
    <div>
        I am div
    </div>
<span>
    I am span
</span>

1.2 Font attributes

1.2.1 Text font

font-family can save multiple font names. If the browser does not support the first font, the next fonts will be tried in turn.

body{
            font-family: "Chinese Xingkai", "Microsoft Yahei", "Arial", sans-serif

        }

Note: sans-serif must be added, otherwise it cannot be used.

1.2.2 Font size

body{
            font-family: "Chinese Xingkai", "Microsoft Yahei", "Arial", sans-serif;

            font-size:50px;
        }

You can change the font of the entire body, or only the font of a certain line, and the size of the font.

1.2.3font-weight

value

description

normal

Default value, standard thickness

bold

Bold

bolder

Thicker

lighter

Finer (lighter)

100~900

Set specific thickness

inherit

Inherit the font weight of the parent element

It needs to be explained here that these are all font-weight attributes, and the specific usage is the same as the font and font size usage above.

1.2.4 The color of the text

Method 1: color is used to modify the color of the text, and color directly selects the corresponding color word.

Method 2: Use the color picker of pycharm to fetch the color value, add # in front of the fetched color value as the value of color, such as: color: #FF00FF;

Method 3: Use RGB to set the color, such as: color: rgb(255,255,255);

Another way to set the RGB value is color:rgba(123,123,123,0.6); the last value is used to adjust the transparency of the font.

1.3 text attributes

1.3.1 Text alignment

The text-again attribute specifies the horizontal alignment of the text in the element.

value

description

left

Left-justified, this way is the default

right

Align right

center

Centered

justify

Justified

1.3.2 Text decoration

text-decoration adds special effects to text.

value

description

none

Defined standard text

underline

A line drawn below the text

overline

A line drawn above the text

line

A line through the text

Inherit the text-decoration value of the parent element

Common application scenarios: remove the underscore that comes with the a tag.

a{
            text-decoration: none;
        }

1.3.3 First line indentation

p{
            text-indent:40px;
        }

1.4 background properties

Add a background image

background-image: url("Picture 1.jpg");
background-color: black; can only be used when no background image is set
background-repeat: repeat-x; only tile the background image in the horizontal direction
background-repeat: repeat-y; only tile the background image in the vertical direction
background-repeat:no-repeat; do not tile the background image
These three functions can only be used when the background image is smaller than the size of the webpage, otherwise the effect will not be seen. The so-called tiling means that several background images cover the specified area.
background-position: center; The position of the background image can be set on the x, y axis, or directly set the x and y axis values.
Such as background-position: 200px 200px;

The above program can be abbreviated:

background: url("capture.PNG")no-repeat left top;

1.5 Border

1.5.1 The properties of the border

  • border-width
  • border-style
  • border-color

Set its border directly:

 #a1{
            border-width: 5px;
            border-style: solid;
            border-color: darkslateblue;
        }

Can be abbreviated as follows:

border:5px solid darkslateblue;

Border style

value

description

none

Rimless

dotted

Dotted dotted border

dashed

Rectangle dotted border

solid

Solid border

Settings for the top, bottom, left, right, etc. of the frame:

        border-top-style: dotted;
        border-top-color: cornflowerblue;
        border-right-style: dotted;
        border-bottom-style: dotted;
        border-left-style: none;

1.5.2border-radius

border-radius adds radians to the four corners of the border. When the border is a square, set the radius to half of the border to get a circle, and if the border is a rectangle, you can get an ellipse.

border-radius: 50%;

1.6 display properties

display is used to control the display effect of HTML elements.

value

description

none

The element exists in the HTML document, but it is not displayed in the browser. Generally used in conjunction with JavaScript code

block

By default, it occupies the entire page width. If the specified width is set, the remaining part will be filled with margin to make the inline elements become block-level elements

inline

Display by inline element. At this time, setting the width, height, margin-top, margin-bottom and float attributes of the element will not have any effect. Make block-level elements into inline elements

inline-block

Make elements have the characteristics of inline elements and block-level elements at the same time

The difference between display's none and visibility's hidden: both can hide elements, but after display hides the element, the position occupied by the element will also be occupied by other elements, while visibility's hidden only hides the element, and the position of the element still exists of.

1.7css box model

value

description

margin

Control the distance between elements

padding

Control the distance between the content and the border

border

Border outside the content

content

content

The setting of margin is similar to the setting of border:

        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 15px;
        margin-left: 20px;  

You can also use the shorthand method:

margin: 10px 10px 15px 20px;
Here, if you only write the first parameter, all borders will follow the first parameter by default. If you only write two parameters, the first parameter will control up and down by default, and the second parameter will control left and right. If you write three parameters, the first one On control, the second one controls left and right, and the third one controls. If all four are written, the control sequence is up, right, down, and left (clockwise).

In addition, padding is used in the same way as margin.

1.8 float (floating)

Any element can float in css, the characteristics of float:

The floating frame can be moved left and right until it touches the border of the webpage or another floating frame. The floating frame can cover the fixed frame, and the floating frame will give up the position occupied by the original frame. (It should be noted that the floating box can cover the fixed box, but the text content of the fixed box cannot be covered, and the text content will be squeezed out to display below the floating box) (In addition, I tried to change the floating p tag to a block tag Can't cover fixed block tag div, but floating div can.)

Floating application scenarios:

Floating is mostly used in the construction of functional blocks of the page, such as the page of Xiaomi Mall, which uses a lot of floating.

3.commonly used methods of floating: l

  1. left float left
  2. right to float
  3. none default value, no float

1.8.1 Impact of Floating

Will collapse the parent label of the floating box, that is, when the border is the parent label, if the child label is set to float, the outer border will collapse into a line.

Such as:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width:200px;
            height: 200px;
            background: cornflowerblue;
            float: right;

        }
        .c2{
            border: 1px solid black;
        }

        #d2{
            width:200px;
            height: 200px;
            background: red;

        }

        p{
            width: 100px;
            height: 300px;
            display: block;
            background: blueviolet;
            float: left;
            margin-top: 0px;
        }

    </style>
</head>
<body>
<div id="d1" class="c2">
<div class="c1"></div></div>
<div id="d2">div2</div>
<p>p</p>
</body>

The clear attribute specifies which book of the element does not allow other floating elements.

value

description

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

The default value allows floating elements

inherit

Inherit the value of the clear attribute from the parent element

clear will only work on itself.

1.8.2 Eliminate the impact of floating

Solve the problem of collapse of the parent label caused by floating.

There are three main ways:

  1. Fixed height (add a fixed height to the parent label)
  2. Pseudo element removal method (clearfix)
  3. overflow:hidden

Pseudo element removal method (used more):

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

The specific procedures are as follows:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width:200px;
            height: 200px;
            background: cornflowerblue;
            float: right;

        }
        .c2{
            border: 1px solid black;
        }

        #d2{
            width:200px;
            height: 200px;
            background: red;

        }

        p{
            width: 100px;
            height: 300px;
            display: block;
            background: blueviolet;
            float: left;
            margin-top: 0px;
        }

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

    </style>
</head>
<body>
<div id="d1" class="c2 clearfix">
<div class="c1"></div></div>
<div id="d2">div2</div>
<p>p</p>
</body>

1.9overflow overflow attribute

The overflow occurs because the text content of the label is too much, and the size of the label cannot fit so much content, which leads to the overflow of the label text content.

value

description

visible

Defaults. The content will not be trimmed and will appear outside the element box.

hidden

The content will be trimmed, and the rest of the content will be invisible.

scroll

The content will be trimmed, but the browser will display a scroll bar to view the rest of the content.

auto

If the content is trimmed, the browser will display a scroll bar to view the rest of the content.

inherit

Specifies that the value of the overflow attribute should be inherited from the parent element.

  • overflow (both horizontal and vertical settings)
  • overflow-x (set the horizontal direction)
  • overflow-y (set vertical direction)

The specific procedures are as follows:

 #d2{
            width:200px;
            height: 200px;
            background: red;
            overflow: auto;

        }
It can be written directly in id or inherited class.

1.9.1 Example of a round avatar

<head>
    <meta charset="UTF-8">
    <title>Circle avatar</title>
    <style>
        body{
            background-color: cornflowerblue;
        }
        .c3{
            height: 120px;
            width:120px;
            border: 5px solid black;
            border-radius: 50%;
            overflow: hidden;
        }
        img{
            width: 150%;
        }
    </style>
</head>
<body>
<div class="c3">
    <img src="Puppy.png" alt="">
</div>
</body>

effect:

1.10 Position

1.10.1static

The static default value, no positioning, cannot be used as a reference for absolute positioning, and setting the left and top values ​​of the label object does not work.

1.10.2relative (relative positioning, understanding)

Relative positioning refers to positioning relative to the original position of the label. What's interesting is that even if the relative positioning and offset value of the element are set, the element still occupies the original position, that is, the document flow space. The object follows the normal document flow, but will shift its position in the normal document flow based on top, right, bottom, left and other attributes. The cascade is defined by the z-index attribute.

Note: position: one of the main uses of relative: to facilitate the absolute positioning of the element to find the reference.

1.10.3 absolute (absolute positioning, important)

Definition: Relocate relative to the parent label that has already been positioned. Positioned means that the position of this label is not static.

Important: If the parent has set the position property, such as position: relative;, then the child element will be positioned with the upper left corner of the parent as the original point. This can solve the problem of label deviation in adaptive websites, that is, the parent is adaptive, then my child element is set position: absolute; parent element is set position: relative;, and then Top, Right, Bottom, and Left use percentage Width representation.

In addition, the object is out of the normal document flow, and uses top, right, bottom, left and other attributes for absolute positioning. The cascade is defined by the z-index attribute.

The pink box is absolutely positioned with the help of the blue box. The specific procedure is as follows:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
           margin: 0px 0px;
        }
        .c1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;

        }
        .c2{
            position: absolute;
            height: 100px;
            width: 150px;
            background-color: fuchsia;
            left :100px;

        }

    </style>
</head>
<body>
<div class="c1">

</div>
<div class="c2"></div>
</body>

1.10.4 fixed positioning (fixed)

The function realized by fixed positioning is, for example, side function adjustment. No matter how you slide the webpage, it will be fixed at a certain position.

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
           margin: 0px 0px;
        }
        .c1{

            height: 1000px;
            background-color: blue;
        }
        .c2{
            height: 1000px;
            background-color: fuchsia;
        }

        .c3{
            border: 5px solid black;
            background-color: aqua;
            position: fixed;
            bottom: 50px;
            right: 50px;
        }
    </style>
</head>
<body>
<div class="c1">

</div>
<div class="c2"></div>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3">Back to top</div>

</body>

Out of the document flow:

Floating elements, absolute positioning, fixed positioning

Stay in the document flow:

  Relative positioning

1.10.5z-index

#i2 {
  z-index: 999;
}

Set the stacking order of objects.

  1. The z-index value indicates who is pressing whom, and the larger value covers the smaller value.
  2. Only positioned elements can have z-index, that is to say, regardless of relative positioning, absolute positioning, fixed positioning, z-index can be used, but floating elements cannot use z-index
  3. The z-index value has no unit, just a positive integer. The default z-index value is 0. If no one has a z-index value, or the z-index value is the same, then who writes behind the HTML and who presses others on it, Positioned elements always suppress the unpositioned elements.
  4. From the father's phenomenon: the father is counseled, the son is useless no matter how awesome

1.10.6opacity

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

Reference: https://cloud.tencent.com/developer/article/1554234 css(2)-Cloud + Community-Tencent Cloud