div css introductory knowledge_html/css_WEB-ITnose

Traditional page tables are used to layout and display data
Disadvantages:
1. The display style and data are bound together
2. The flexibility is not high during layout.
3. A page may have a large number of

elements, and the code will be redundant
4. Increased bandwidth (200 bytes*2000000*30=?).
5. Search engines don’t like this layout.
Advantages:
1. It is relatively simple to understand
2. Different browsers generally see the same effect.
3. It is very good for displaying data.
div css
Basic idea: data and style should be separated
div (section) data
css file to specify how the data should be displayed.
To summarize, div css is a currently popular web page layout technology
div is used to store the data that needs to be displayed (text, charts...); css is used to specify how to display, so as to achieve data and display mutual separation effect.
div is a container used to store content (text, pictures, elements).
CSS is used to specify how the content placed in the div is displayed, including the location and appearance of the content.
Example:
my.css
.style{
/*Width*/
width: 400px;
height:300px;/*Be sure to write a semicolon*/
background-color:silver;
border:1px solid red;
margin-left:400px;
margin-top:250px;
padding-top:20px;
padding-left :40px;
}

demo.html

< ;!--Introduce our css-->



 

 
 

Advantages of div css
To deeply understand the superiority of div css, we have to mention the three historical periods of web design: table, table css, div css
①table web design : Content and style (appearance and layout) mixed
②table css web design: table layout, css specified appearance
③div css web design: div holds content, css specifies style (appearance and layout), content and style are completely separated .
/*.s1 uses term class selector*/
.s1
{
color:green;
font-size:30px;
}
.s2
{
color:yellow;
font-size:12px;
}
.s3
{
color:blue;
font-style:italic;
}
.s4
{
color:green;
font-weight:bold;
}
.s5
{
color:#9c3131;
text-decoration:underline;
}