CSS editing knowledge (1---12)

First, the introduction of 01-css way

There are three ways to introduce CSS in HTML:

1. inline style
2. inline style
3. External styles

3.1-Link

3.1 Import Type

Introduction to CSS

Now the Internet front end is divided into three layers:

• HTML: Hypertext Markup Language. Describe the page structure from a semantic perspective.
• CSS: Cascading style sheets. Responsible for the page style from an aesthetic standpoint.
• Js:javascript. Describe page behavior from an interactive perspective

Css:cascading style Sheet, cascading style sheets. The function of CSS is to add various styles to the HTML page label, and define the display effect of the page . Simple sentence: CSS separates the content of the Web page from the display style , which improves the display function.

The latest version of CSS is CSS3, and we are currently studying css2.1

Next, let's talk about why we want to use CSS.

HTML flaws:

1. Not adaptable to multiple devices
2. Requires the browser to be sufficiently intelligent to be large enough
3. Data and display are not separated
4. Function not strong enough

CSS Benefits:

1. Separating the data from the display
2. Reduce network traffic
3. Make the entire site visually consistent
4. Increased development efficiency (reduced coupling, one person is responsible for writing HTML, one person is responsible for writing CSS)

For example, there is a style that needs to be displayed on 100 pages, if it is HTML to implement, then write 100 times, now have CSS, just write it again. Now, HTML provides only data and some controls, completely giving CSS a variety of styles.

inline style

1 <div>2     <p style= "Color:green" > I was a paragraph </p>3 </div>

inline style

<style type= "Text/css" >/    * Write our CSS code */            span{    color:yellow;    } </style>

External styles-linked

<link rel= "stylesheet" href= "./index.css" >

External styles-Imported

<style type= "Text/css" >        

Second, CSS selector:

CSS selector: 1. Basic selector 2. Advanced Selector

The basic selector contains:

1. Tag Selector
Tag Selector can select all of the label elements, such as Div,ul,li, p, etc., regardless of how deep the tag is hidden, can be selected, select All, not one, so say "commonality" rather than "feature"

body{    Color:gray;    font-size:12px;} /* Tag Selector */p{    color:red;font-size:20px;} span{    Color:yellow;}

2.id Selector
# Check ID

The ID in the same page cannot be duplicated.
Any label can set the ID
ID naming specification to have a numeric underscore in letters-case is strictly distinguished between AA and AA are two different attribute values

1 #box {2     background:green; 3} 4              5 #s1 {6     color:red; 7} 8  9 #s2 {ten     font-size:30px;11}

3. Class Selector

3.1 The so-called classes are class. Class and ID are very similar to any of the tags can be added class but the class is repeatable, belonging to the concept of collation.

3.2 Multiple classes can be carried in the same tag, separated by a space

The use of the class, can determine the front-end engineer CSS level is how awesome?

Answer: Must have the concept of "public class"

1. lv{2     color:green; 3  4} 5. big{6     font-size:40px; 7} 8. line{9     Text-decoration:underline;10}

1 <!--Common class    Properties-->2     <div>3         <p class= "LV Big" > paragraph 1</p>4         <p class= "LV Line > Paragraph 2</p>5         <p class= "line Big" > paragraph 3</p>6     </div>7     

Summarize:

• Don't try to use a class to finish writing our page. This tag takes more than one class and sets the style together.
• Each class should be as small as possible, with a public concept that allows more labels to be used

Play a good class is equal to play the CSS 1/2

Do you use ID or class?
Answer: Use the class as much as possible. Unless some special cases can be used with ID

Reason: The ID is usually used in JS. In other words, JS is the ID to get to the label

Third, advanced selector

The advanced selector is divided into: descendant selector, descendant selector, set selector, intersection selector

Descendant Selector

Use a space to represent the descendant selector. As the name implies, the descendants of the parent element (including son, grandson, heavy grandson)

1. Container p{2     color:red;        3}4. Container. Item p{5     Color:yellow;6}

Descendant Selector

Use > to represent descendant selectors. Div>p, for example, represents only the descendants selected by the current DIV element (not including grandson ...). Element P.

1. Container>p{2     Color:yellowgreen;3}

and set Selector

Use commas to separate multiple selectors. Represents multiple labels in a selected page. Some common elements that can be used with the set selector

1/* Set selector */2 h3,a{3     color: #008000; 4     text-decoration:none;5                 6}

For example, like Baidu Home use set selector.

BODY,H1,H2,H3,H4,H5,H6,HR,P,BLOCKQUOTE,DL,DT,DD,UL,OL,LI,PRE,FORM,FIELDSET,LEGEND,BUTTON,INPUT,TEXTAREA,TH,TD {      margin:0;      padding:0   }/* Use this set selector to select all the tabs in the page, and the page layout will be used */

Intersection Selector

Use. Represents the intersection selector. The first label must be a tag selector, and the second tag must be the class selector syntax: div.active

For example there is a

So

1 h4{2     width:100px; 3     font-size:14px; 4} 5. active{6     color:red; 7     text-decoration:underline; 8} 9 /* Intersection selector */10 h4.active{11     background: #00BFFF; 12}

It represents the attributes common to the elements after they have been selected.

Four, attribute selector:

The property selector, which literally means that the current label is selected based on the attributes in the tag.

Grammar:

1/* Based on the property lookup */2             /*[for]{3                 color:red; 4             }*/5              6             * * Find the element with the for property equal to username font color set to Red */7             /*[for= ' Username ']{8                 color:yellow; 9             }*/10             /             * To .... Start  ^*/             /*[for^= ' user ']{13                 color: #008000,}*/15 +//             to .... End   $*/17             /*[for$= ' VVIP ']{18                 color:red;19             }*/20             * * Contains the label of an element */22             /*[for*= " VIP "]{23                 color: #00BFFF;             }*/25             /**/27 */             * Specify the properties of the word */29             label[for~= ' User1 ']{30                 color:red;31             }32             input[type= ' text ']{34                 background:red;35             }

V. Pseudo-Class selector:

Pseudo-class selectors are generally used in the hyperlink a tag, using the A-tag pseudo-class selector, we must follow the "love and Hate Guidelines," HAte

1/               * The style of a tag that is not accessed */2         . Box ul li.item1 a:link{3              4             color: #666; 5         } 6/* The style of         a tag after access */7         . Box UL li.item2 a:visited{8              9             color:yellow;10         }11/         * The style of a label when mouse hovers */12         . Box ul li.item3 a:hover{13             color:green;15         }16/         * When the mouse is pressed, the style of a tag is */17         . Box ul li.item4 a:active{18             Color:yellowgreen;20         }

Let us introduce a CSS3 selector nth-child ()

              /* Select the first element */        div ul li:first-child{            font-size:20px;            color:red;        }        /* Select last element */        div ul li:last-child{            font-size:20px;            Color:yellow;        }                /* Select the currently specified element  value starting from 1 *        /div ul Li:nth-child (3) {            font-size:30px;            color:purple;        }                /*n means check all, this must be N, starting from 0  0 when the time is not checked *        /div ul li:nth-child (n) {            font-size:40px;            color:red;        }                /* even *        /div ul li:nth-child (2n) {            font-size:50px;            Color:gold;        }        /* Odd *        /div ul li:nth-child (2n-1) {            font-size:50px;            Color:yellow;        }        /* Alternate color  alternating             4 color change is 5n+1, 3 color change is 4n+1            *                /div ul li:nth-child (5n+1) {            font-size:50px;            color:red;        }            

VI, pseudo-element selector:

Nonsense not much to say, directly on the code!!!

/* Set the first first letter style */        p:first-letter{            color:red;            font-size:30px;        }        /* in .... Before adding content   This property uses not very frequently to understand the  use of this pseudo element selector must be combined with the content attribute *            /p:before{content: ' Alex ';        }                /* in .... After adding the content, the use is usually very frequent with the following we want to talk about the layout has a large association (clear floating) */        p:after{            content: ' & ';            color:red;            font-size:40px;        }

Vii. CSS Inheritance and layering

There are two main features of CSS: inheritance and layering

Inheritance of

Object-oriented language has the concept of inheritance, in the object-oriented language, the characteristics of inheritance: Inherit the properties and methods of the parent class. So now we're going to focus on CSS,CSS, which is setting properties. Does not involve the level of the method.

Inheritance: Set some properties for the parent, the child inherits that property from the parent, and this is the inheritance in our CSS.

Remember: Some attributes can be inherited: color, font-*, text-*, line-*. is primarily a text-level label element.

But like some box element attributes, positioned elements (floating, absolute positioning, fixed positioning) cannot be inherited.

Cascade Sex

Stacking: The weight of the label cover off the weight of the small label, plainly, is to be killed
Weight: Who has a significant power, the browser will show whose properties

Whose weight is big? Very simple is the number of primary schools.

Number: Number of IDs class number of labels, order cannot be disorderly

/*1  0  0 * * Show red #box{

    color:red; }/*0  1  0*/.container{    Color:yellow;} /*0  0  1*/p{    color:purple;}

Does it feel clear? OK, let's make it more difficult for everyone.

1     <div id= ' box1 ' class= "Wrap1" >2 <div         id= "Box2" class= "Wrap2" >3             <div id= "Box3" class= " Wrap3 ">4                 <p> guess what color I am? </p>5             </div>6         </div>7     </div>

        #box1 #box2 p{            color:yellow;        }                #box2. wrap3 p{            color:red;        }                Div Div #box3 p{            color:purple;        }                        Div.wrap1 div.wrap2 div.wrap3 p{            color:blue;        }

Good. So, do you understand the above case? So let's move on to the case.

or the above HTML structure, if I set the following CSS, what color will be displayed.

1         #box2. WRAP3 p{2             color:yellow;3         }4         5         #box1. WRAP2 p{6             color:red;7         }

The answer is red. Conclusion: When the weight is the same as the later set of attributes, the premise must be the same weight. "Later on."

Good, we continue to look at the following CSS, you guess the following words what color?

#box1 #box2. wrap3{    color:red;}        #box2. wrap3 p{    Color:green;}

The answer is green. Haha, is not feeling quickly lost. In fact, we just need to remember this feature. The property value of the first CSS setting, which is set to red by inheritance, is the inherited attribute, which has a weight of 0. It is not eligible to be compared with the labels we have selected below.

Guess what color the word will look if it's inherited?

#box1 #box2. wrap3{    color:red;}. Wrap1 #box2 {    color:green;}

Small case Proof: The weight is 0: then is the "nearest principle": Who describes the near, will show whose attributes. The so-called description of the near, is selected to the inner layer of the distance closer.

A little summary:

Summarize:
1. First look at the label element has not been selected, if selected, on the number (Id,class, the number of labels) who the right to display the attributes of the major. The weights are as big as the later.
2. If no label element is selected, the weight is 0.
If the attribute is inherited, the weight is 0. The weights are all 0: "Nearest principle": Who describes the near, the attributes that show who

Eight, the same stacking weight processing:

The first phenomenon: when the weight of the same, with the later set of attributes, the premise must be the same weight

#box2. wrap3 p{    color:yellow;}        #box1. WRAP2 p{    color:red;}

We will find that the red is displayed at this time.

The second phenomenon: the first selector does not have the inner label selected, then it is a property set by inheritance, then its weight is 0. The second selector selects the inner tag, which has the right weight.

So the inherited element weights are 0. There is no comparability with the selected element.

#box1 #box2. wrap3{    color:red;} #box2. wrap3 p{    Color:green;}

We will find that it is shown in green at this time.

The third phenomenon: if all are inherited from attributes, who describe the near, which shows whose attributes. ' Nearest principle '

#box1 #box2. wrap3{    color:red;}. wrap1 #box2 {    color:green;}

The use of!important.

！ Important: Set Weights to infinity
!important does not affect inherited weights, only the selected elements. Do not use!important, as it will affect the layout of the page

Nine, Box model

Box model

In CSS, the term "box model" is used for design and layout, and then basically shows some square boxes in the Web page. We call this box a box model.

There are two types of box models: Standard Model and IE model. We are here to focus on the standard model.

Box model

Properties of the box model

Width: breadth of content

Height: How high the content is

padding: padding, border-to-content distance

Border: Frame, refers to the width of the box

Margin: The distance from the box border to the nearest box nearby

If you were to make a box with a wide 402*402, how would you design it?

There are tens of thousands of answers, even the last one.

Calculation of Box model

If a box is set to Padding,border,width,height,margin (let's not set up margin,margin there is a pit, the course will explain later)

The true width of the box =width+2*padding+2*border

The true width of the box =height+2*padding+2*border

Then watch it here. The standard box model, width is not equal to the true width of the box.

In addition, if you want to maintain the true width of the box, then add padding must reduce the width, reduce padding must be added width. Set as true height.

Ten, padding, inner margin

Padding

padding: is the meaning of the inner margin, which is the distance between the border and the content

Another padding area is a background color. And the background color is the same as the color of the content. That is, background-color this property will populate all areas within the border

Settings for padding

The padding has four directions, describing padding in 4 directions respectively.

There are two types of methods described

1, write small attributes, respectively set different directions of padding

padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;

2, write comprehensive properties, separated by a space

/* Upper right lower left */padding:20px 30px 40px 50px;/* on  */padding:20px 30px 40px;/* up or down */padding:20px 30px;            /* up or down */padding:20px;

Some tags have padding by default

such as the UL tag, there is a default Padding-left value.

Then we usually do the station, is to clear the page label in the default padding and margin. To make it easier for us to adjust the position of the element.

We're beginners now. You can use a wildcard selector

*{  padding:0;  margin:0;    }

But this method is inefficient.

So we're going to use the set selector to select the label that should be on the page (different back, because someone has already written it for us to clear the default style sheet, RESET.CSS)

https://meyerweb.com/eric/tools/css/reset/

Xi. border of border

Border

border: Meaning of the border, describing the box's border

Border has three features: thickness linear style color

Border:solid

If the color is not written, the default is black. If the thickness is not written, the border is not displayed. If you write only a linear style, the default has a width of up and down 3px, an entity style, and a black border.

Write border according to 3 elements

border-width:3px;border-style:solid;border-color:red;/*border-width:5px 10px;border-style:solid dotted Double Dashed;border-color:red Green yellow;*/            

Divided by direction

Border-top-width:10px;border-top-color:red;border-top-style:solid;border-right-width:10px;border-right-color: Red;border-right-style:solid;border-bottom-width:10px;border-bottom-color:red;border-bottom-style:solid; Border-left-width:10px;border-left-color:red;border-left-style:solid;

Above 12 statements, equivalent to bordr:10px solid red;

In addition, you can do this:

border-top:10px Solid red;border-right:10px Solid red;border-bottom:10px solid RED;BORDER-LEFT:10PXB solid red;

Border:none;

border:0;

Indicates that border does not have a style set.

Using border to make a small triangle

/* Small triangle arrow pointing below */        div{            width:0;            height:0;            border-bottom:20px solid red;            border-left:20px solid transparent;            border-right:20px solid transparent;        }

12. Simple understanding of margin:

Margin

margin: The meaning of an outer margin. Represents the distance from the border to the nearest box.

/* indicates that the outer distance of four directions is 20px*/margin:20px;/* means that the box moves down 30px*/margin-top:30px;/* means the box moves to the right 50px*/margin-left:50px;
margin-bottom:100px;

CSS editing knowledge (1---12)