Web front end starting from 0--1

Bloggers have not touched the front end of the web before, and recently began to learn.

In the study of the same time, I hope to continue to collate summary. So I have this blog.

Bo Master technology Shallow, and for the first time to write such a blog, I hope you can have a lot of letter.

Okay, nonsense, don't say much, start the text.

The most basic of web front-end development is the label.

such as

In general, we can define the label's properties, events, names, etc.

For example, <input type= "Submit" value= "OK" name= "submit" > defines a submit button named Submit value to determine.

The Web pages implemented by HTML+CSS are static. I feel like learning English is almost like, is to remember English words have several meanings (corresponding to the use of the label).

This is a process of accumulation, in the study of the best can be kept hands-on practice. Even with a WordPad we can go to a page and try it out.

In general, we call CSS in HTML three kinds: inline, embedded, external.

Inline: <p stlye= "color:red,font-size=14px" ></p>.

Embedded: We write the CSS style separately. The following is the setting of the content within the span tag color to blue. Generally embedded CSS styles are written in the

<type= "Text/css">{     span{              color:red;         }}

</style>

External: Generally we will write a <link> in the

<link href= "Style.css" rel= "stylesheet" type= "Text/css" >

Usually when we call the external style rel= "stylesheet" and type= "Text/css" This is fixed, the specific rel other usage please refer to the W3school.

Three-way Priority book order (weights in the same case): inline > Embedded > External

Embedding is larger than the external premise is the embedded code behind the external type.

About the weight of the value, and so on.

Each CSS style definition consists of two parts, in the following form:

selector {style;} example body{color:red;font-size:12px}

Tag Selector

is to use the label's name to set the label's style.

Example: P{font-size:12px;line-height:1.6em;}

Class Selector

Usage-> class selector name {CSS style code} (note that there is an English dot in front)

Example: <style tpye= "Text/css" >.stress{color:red}</style>

<p class= "Stress" ></p>

Class Selector, you can call styles that call multiple classes class= "Class 1 Class 2". The middle is separated by a space

ID Selector

You need to set the ID for the tag and define the style for the tag by ID

Example: <span id= "Setgreen" >11</span>

<style tpye= "Text/css";. #setGreen {color:red;} </style>

The ID selector differs from the class in that the ID selector is used once, and only once, in an HTML document. (multiple use will still have an effect, but we will have a conflict when we use JS in the back, and we typically use the class selector instead of the ID selector)

Child selector and descendant selector

Sub-selector, descendant selector with spaces. Example: H1>span and H1 span

As for the child selector and descendant selector, the blogger's understanding is that the child chooses the first generation of tags that act on the selector. The descendant selector acts on all descendants of the selector. That is, if the selector is considered to be the first generation, then the sub-selector only works in the second generation. The descendant selector will be used for the second, third, fourth, and so on.

Universal Selector

*{color:red;} Acts on all labels.

Pseudo class Selector

a:hover{color:red;}

Inherited

Some tags have inheritance, actually inherit this should be very good understanding, I believe we all have the experience of programming. Inheritance is the property of the child tag that inherits the parent tag. 、

Weighted value

After simply finishing the selector, let's take a look at the weights.

The weight of the label is 1, and the weight of the class selector is 10,id the maximum value of the selector is 100. For example, the following code:

/ * Weighted value is 1*/ / * Weighted value is 1+1=2*/ / * Weighted value is 10*/ / * Weighted value is 1+1+10=12*/ / * Weighted value is 100+10+1=111*/

Note: There is also a special weighted value-inheritance is also entitled to value but very low, some literature proposed it only 0.1, so it can be understood as the inheritance of the lowest weight,

CSS style performs the highest-weighted style.

We also add by mentioning! Important to enforce the use of styles.   Example: p{color:red!important;} Note:!important to be added in front of the semicolon.

(not to be continued)

Web front end starting from 0--1