1. CSS Introduction

Internet is now the front end of three layers:

HTML: HTML. From the perspective of semantic structure description page.

CSS: Cascading Style Sheets. Responsible for the page style from the aesthetic point of view.

JS: JavaScript. From the perspective of interactive behavior description page

CSS: Cascading Style Sheet, cascading style sheets. CSS role is to display HTML page tags to add a variety of styles, the definition of the page. To put it simply: CSS web content and display style separation, improved display.

Next we talk about why you want to use CSS.

1.1 HTML defects

Can not adapt to a variety of devices

It requires a browser must be large enough intelligence

No separate data and display

It is not powerful enough

1.2 CSS advantage

And that the data displayed separately

Reduce network traffic

The visual effect is consistent throughout the site

The development efficiency improved (reduced coupling, a person responsible for writing html, a person responsible for writing css)

For example, there is a pattern to be displayed on one hundred pages, html if it is to realize that to write a hundred times, now have css, just write it again. Now, html only provide data and some controls, css entirely to provide a wide variety of styles.

2. CSS manner of introduction

2.1 inline style

< Div > 
    < the p- style = "Color: Green" > I am a paragraph </ the p- > 
</ div >

Then within 2.2 style

< Style type = "text / css" > 
    / * write our css code * / 
        
    span { 
    Color : Yellow ; 
    } 

</ style >

2.3 External style - style links

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

2.4 External Style - introduction of formula

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

3. CSS selectors

3.1 Basic selector

Tag selector

Class selector

id selector

3.1.1 tag selector (tag name)

The tag selector to select all the label elements, such as div, ul, li, p, etc., regardless of the label reservoir deep, and can be selected, check that all, rather than one, so that the "common" rather than "characteristic".

body{
    color:gray;
    font-size: 12px;
}
/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}

3.1.2 class selector (.)

The so-called class: class class and id is very similar, the label can be added to any class, but the class can be repeated, belong to the concept of classification. May carry a label with a plurality of classes, separated by spaces.

Using classes, css can determine the level of front-end engineers in the end how fast hardware? Here there must be the concept of "Public Class".

.lv{
     color: green;
 
 }
 .big{
     font-size: 40px;
 }
 .line{
    text-decoration: underline;

  }

html：

<! - attribute common public class -> 
     <div> 
         <P class = "LV Big"> Paragraph. 1 </ P> 
         <P class = "LV Line"> Paragraph 2 </ P> 
         <P class = " line big "> paragraph. 3 </ P> 
</ div>

3.1.3 id selector (#)

The same page id can not be repeated.

Any label can be set id, id naming convention to the letter may have underlined numbers - sensitive strict distinction between aa and AA are two different property values.

#box{
    background:green;
}
            
#s1{
    color: red;
}

#s2{
    font-size: 30px;
}

html：

< Body > 
    < div ID = "Box" > wahaha </ div > 
    < div ID = "S1" > Shuangwai </ div > 
    < div ID = "S2" > QQ Star </ div > 
</ body >

3.2 Advanced Selector

Descendant selectors

Descendant selector

And set the selector (Selector composition)

Intersection selector

3.2.1 descendant selectors

Use spaces indicate descendant selectors. As the name suggests, the offspring of the parent element (including the son, grandson, great-grandson).

.container p{
    color: red;        
}
.container .item p{
    color: yellow;
}

3.2.2 descendant selector

Use> represents progeny selector. For example div> p, merely represents the current div element selected progeny (does not include grandchildren ....) element p.

.container>p{
     color: yellowgreen;
}

3.2.3 Set selector and

A plurality of selectors using a comma separated. Indicate the selected page in multiple labels. Some common elements, and can be set using the selector.

/ * And diversity selector * / 
H3, A { 
    Color : # 008000 ; 
    text-Decoration : none ; 
                
}

3.2.4 intersection selector

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

For example a <h4 class = 'active'> </ h4> such labels. It represents an element selected after both common characteristics.

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集选择器 */
h4.active{
    background: #00BFFF;
}

3.3 Other selectors

Pseudo class selector

Pseudo tag selector

Attribute selectors

3.3.1 pseudo class selector

Pseudo class selector typically used in a hyperlink tags, a pseudo-class selector tag.

/ * Link represents a style has not been accessed tag * / 
.box a UL li.item1: Link { 
            
    Color : # 666 ; 
} / * style after the visited access a tag showing * / 
.box a UL li.item2 : visited { 
    Color : Yellow ; 
} / * hover the mouse hovers over a presentation style tags * / 
.box a UL li.item3: hover { 
    Color : Green ; 
} / * Active indicates style mouse pressed when a tag * / 
.box UL li.item4 A: Active { 
    Color : YellowGreen ; 
}

3.3.2 dummy tag selector

/ * Set the first letter of the first pattern * / 
P: First-Letter { 
    Color : Red ; 
    font-size : 30px ; 

} / * Use this element before adding .... this property is not very frequent use Learn the selector must be combined with the content attribute * / 
P: before { 
    content : 'Alex' ; 
} / * add content after ...., very frequent use is usually associated with large layout we want to address the back (floating Clear ) * / 
P: After { 
    Content : '&' ; 
    Color : Red ; 
    font-size : 40px ; 
}

3.3.3 Attribute selectors

Attribute selector literally, tag according to the attributes in the selected current label.

/ * The for attribute lookup, to find all of the properties and for setting the font color to red * / 
[for] { 
    Color: Red; 
} 
            
/ * find the username for the attribute value is equal to the font color to yellow elements * / 
[for = 'username'] { 
    Color: Yellow; 
} 
            
/ * start with ^ .... * /  
[for ^ = 'User'] { 
    Color: # 008000; 
} 
            
/ * end in $ .... * / 
[for = $ 'VVIP'] { 
    Color: Red; 
} 
            
/ * comprises a tab element * / 
[for * = "VIP"] { 
    Color: # 00BFFF; 
} 
            
/ * given label for the attribute 
   value of the attribute for which is space-separated list of values, 
   user1 separate value is a list of values * / 
label [for ~ = 'user1'] { 
    Color: red;
}
            
input[type='text']{
    background: red;
}

3.4 weight selector

There are times when we could have set up multiple styles with a label, met overlapping set of items should we listen to one? Here we must use the weight selector.

Inline style 1000> id selector 100> class selector 10> tag selector 1> 0 Inherited Styles

Two characteristics 3.4.1 css are: basic and laminating properties

Inherited: set some properties to the parent, the child inherits the parent's property, which is inherited in our css.

The concept of object-oriented languages will exist inheritance in object-oriented languages, inherited characteristics: inherits the properties and methods of the parent class. So now our research css, css is set in the property. Not involve the level of methods.

Remember: Some properties can be inherited: color, font- *, text - *, line- *. The main level is the text of the label elements.

However, as some element properties box, positioned elements (floating, absolute positioning, fixed positioning) can not be inherited.

Layered: the right to a major label covers off the weight of a small label, whose weight is greater, the browser will show who attributes.

Web front-end basis (4): CSS (a)