Front-end---CSS

First, the introduction of CSS methods

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

1.CSS Introduction

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.

2.CSS Introduction Mode 2.1 inline style

< Div > 2      <  style= "Color:green"> I am a paragraph </p>  </div>

2.2 Inline style

<styletype= "Text/css">    /*write our CSS code*/span{Color:Yellow;    }</style>

2.3 External Styles

1. Link-type

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

2. Import type

<type= "Text/css">        @import url ('./index.css '); </ style >

Second, CSS selector 2.1 base selector 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;}

View Code2.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}

View Code3. 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<!--properties common to public classes -2<Div>3<Pclass= "LV Big">Paragraph 1</P>4<Pclass= "LV Line">Paragraph 2</P>5<Pclass= "line Big">Paragraph 3</P>6</Div>

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

2.2 Advanced selector 1. Descendant selector 2. Descendant selector 3. Set selector 4. Intersection Selector

Front-end---CSS