Home >Web Front-end >HTML Tutorial >div css introductory knowledge_html/css_WEB-ITnose

div css introductory knowledge_html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 12:32:01933browse

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

css entry-level small case
< ;!--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;
}

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：div css html study notes (1)_html/css_WEB-ITnoseNext article：div css html study notes (1)_html/css_WEB-ITnose

See more

div css introductory knowledge_html/css_WEB-ITnose

Related articles