CSS for Front-end Basic Knowledge

What is css?

Why should we learn css

How to use css

The syntax of css

Each CSS style consists of two components: selector and declaration. The declaration also includes attributes and attribute values. Each statement ends with a semicolon.

Three ways of importing css

1. Direct in-line reference to style style
<div style="color: red;">p</div>


2. Reference in the head tag
<head>
    <meta charset="UTF-8">
    CSS </title> Front-end Foundation
    <style>
        div {
            color: red;
        }
    </style>
</head>


3. Reference from css files
<link rel="stylesheet" href="mycss.css">

Introduction of selector

Basic selector

<div id="d" class="c">basic selector</div>


tag chooser
　　div {color: red}

id selector
　　#d {color:red}

Class selector
　　.c {color:red}

Attention:

Do not start style class names with numbers (some browsers do not recognize them).

If there are more than one class attribute in the tag, it should be separated by spaces.

universal selector
　　* {color:red}

Combination selector

<span>First span Label</span>
<div>div Label
    <p>div Li p Label
        <span>div Li p Li span Label</span>
    </p>
    <span>div Li span Label</span>
</div>
<span>div The first one below span Label</span>
<span>The last one span Label</span>

<!--Descendant Selectors-->
Descendant Selectors  div All in it span Labels become red descendants
    <style>
        div span{ color: red}
    </style>


<!--Son selector-->
    <style>
        div>span{ color: red}
    </style>


<!--Adjacent selector-->
The adjacent selector is not up-to-down, next to each other. div Of span Label
    <style>
        div+span{ color: red}
    </style>


<!--Brother selector-->
Brother selector is not up to down. div After all span Label
    <style>
        div~span{ color: red}
    </style>

attribute selectors

<span xxx="2">span</span>
<p xxx>I only have attribute names</p>
<p xxx="1">I have the attribute name and value and the value is 1.</p>
<p xxx="2">I have the attribute name and the attribute value and the value is 2.</p>


<style>
/*All tags with xxx attribute names are found*/
[xxx] {
     color: red;
}

/*As long as the tag has an attribute named xxx and a value of 1*/
[xxx='1'] {
    color: blue;
}

/*Provides that there must be a label with attribute name xxx and value 2 inside the p label*/
p[xxx='2'] {
     color: green;
}



</style>

Grouping and Nesting

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

<style>
        /*Grouping*/
        div,p,span {
            color: blue;
        }

        /*Nesting: Different selectors can share one style
        Combination of descendant selector and label
        */
        div p,span {
            color: red;
        }

</style>

Pseudo-class selector

Pseudo-class selector mainly introduces four states of a tag: no access, mouse hover, mouse click, after access

input mouse click is focused

<a href="https://www.baidu.com">Baidu</a>
<a href="http://www.xiaohuar.com">Decent website</a>
<a href="http://www.sogo.com">Improper website</a>
<input type="text">

<style>
　　　　　　
        a:link {
            color: red;
        }
        a:hover {
            color: yellow;
        }
        a:active {
            color: black;
        }
        a:visited {
            color: green;
        }
        input:focus {
            background-color: red;
        }
</style>

　　　　link:Red when not accessed
　　　　hover:Display yellow when the mouse is hovering
　　　　active:Black when the mouse clicks
　　　　visited:Display green after access

　　　　focus:Click on the text box to change the background color of the text box to red

Pseudo-element selector

<p>p</p>



<style>
first-letter
/*Commonly used to set a special style for the initials:*/
        p:first-letter {
          font-size: 48px;
          color: red;
        }



before

/*Insert content before each < p > element*/
        p:before {
          content:"*";
          color:red;

        }


after
/*Insert content after each < p > element*/
        p:after {
          content:"?";
          color:blue;
　　　　　　font-size:48px

        }


before and after It is mostly used to clear floats.     
</style>

Selector priority

The attributes defined in <style> of the file header settings and the attributes of. css files who are close to the label and who modify them

html file

Inline > ID > class > label

In fact, it is decided by the weight of different selectors. The specific calculation method of selector weight is as follows:

Style modification

text

<style>
        div {
            width: 400px;/*wide*/
            height: 100px;/*high*/
        }
        p {
            font-family: "Sitka Banner", "Arial", sans-serif
        }/*Font style*/
        p {
            font-size: 16px;
            font-weight: lighter;
        }/*Font size and thickness*/
        p {
            color: red;
            color: rgb(0,0,255);
            color: #FF6700;
            color: rgba(0,0,255,0.8);
          /*a Represents alpha transparency, ranging from 0.0 to 1.0*/
        }/*Several methods of font color setting*/
    </style>

background

<style>
        div {
            width: 400px;
            height: 400px;
            background-color: green;/*Setting Background Colors*/
            background-image: url("1.png");/*Setting Background Pictures*/
            background-repeat: no-repeat;
            /*Set the background image style is not flat, there are repeat-x,repeat-y*/
            background-position: center;
            /*The picture is shown in the center, followed by two parameters, corresponding to the top and left. 
            background-position:50% 50%;*/
            background: no-repeat center url("Picture address") blue ;
            /*The above attributes can be abbreviated as this, which is recommended.*/
        }


Introduce a fixed picture operation, settings div After the width and height, insert the picture, you can choose no-repeat,It's also possible not to write, but it's important.
background-attachment:fixed; Fixed the picture. No matter how you turn the page, the picture is fixed.
        div{
            height: 400px;
            background: url("Picture address");
            background-attachment: fixed;
        }

</style>

Borders, circles

Border

<div>div</div>

    <style>
        div {
            /*border-width: 3px;*/  /*The thickness of the border*/
            /*border-style: solid;*/ /*It can also be displayed in dotted and dashed formats.*/
            /*border-color: deeppink;*/ /*border color*/
            border: 3px solid red;   /*The above three settings can be abbreviated as a sentence here, recommending writing methods.*/
        }

//Circle drawing
       div {
            width: 400px;
            height: 400px;
            background-color: red;
            border: 3px solid black;
            border-radius: 50%;  /*fillet*/
        }
    </style>

display

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



<style>
        div {
            display: none;
        }

        /*inlineTurn block-level labels into in-line labels*/

        div {
            display: inline;
        }

　　　　　/*blockTurn line-level labels into block labels*/

 　　　　span { 
　　　　　　　display: block; 
　　　　　}

        /*The selected label has the characteristics of both in-line label and block label.*/
        span {
            display: inline-block;
            height: 400px;
            width: 400px;
            background-color: red;
            border: 3px solid black;
        }



</style>

Posted by jauson on Wed, 29 May 2019 01:59:27 -0700

Programmer Group