[CSS] how to introduce css styles in a page

CSS (Cascading Style Sheet), also known as Cascading Style Sheets. We are learning a language essential front-end, it is actually learning how to change the page tab style in order to learn. It is currently the most widely used css3, but again, he is from css2 of evolution, so we began to learn from css2. Today on the first talk about how references in html css, to change the page style.

1. row cited (inline type)

The formula is written inside the tag by style property in the so-called row. However, this method and is not recommended. Because the w3c standard that has been advocating separation of structure and style, written in the internal label will make the css and html code intertwined.

1css.html

<p style="font-size:20px; color:red">行内式</p>

Achieve results:

2. The internal reference (embedded)

The so-called internal reference is to add a sub-label style in the head tag, write css code in the sub-tab. When fewer css files, or use more than our own way when doing this test.

1css.html (head portion)

. 1  < style type = "text / CSS" > 
2      / * Embedded / embedded * / 
. 3       P { 
. 4            Color : Aqua
 . 5         } 
. 6  </ style >

1css.html (body part)

. 1 < P > internal reference </ P >

Achieve results:

3. External quotation (external type)

The external reference is to write the tag structure in a html file, write the style code in another css file. Css file is then connected to a html file. This method of implementing the w3c standards on structural separation of style, in the actual development environment, we tend to use this method. Because of its simple maintenance, use and strong.

1css.html (head portion)

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

 1css.html (body part)

. 1  < div > 
2      external references
 . 3  </ div >

index.css

1 div {
2     width: 100px;
3     height:100px;
4     background-color:orange;
5 }

Achieve results:

 

These are the three kinds of presentations and small css reference example, when writing projects recommended for external style, but basically we are going to learn to write is embedded. For the inside line because it was so written, so we have to be able to read it, but want to avoid the use of their own development.