A preliminary understanding of CSS

1. Basic CSS concepts

1) Definition

CSS (cascadingstyle sheet translated as "Cascading Style Sheet") is a markup language used to control webpage styles and allow the separation of style information from webpage content. It is used for webpage design; it is also a computer language used to display HTML, XML, and other file styles;

2) CSS syntax

Selector {property: Value} (selector {property: Value })

3) selector in CSS

Id selector: in the HTML page, the ID parameter specifies a single element. The ID selector is used to define a separate style for this single element. Therefore, only one style can be set for a tag.

Class selector: You can define different styles for the same element category. You can add multiple styles using spaces.

Selector priority:

Id selector> class> HTML Tag Selector

4) span and Div

Division is a block-level element with the scope of an entire "row" (The Box modified with the DIV has the scope of an entire row ). It can contain paragraphs, titles, tables, and even chapters, summaries, and remarks.

A span is an element in a row. It does not wrap the line before and after a span. It has no structural meaning and is purely an application style.

However, we advocate the use of Div, because the box modified with span is often ineffective when we modify its attributes (such as border and margin) (especially for browsers with different ie kernels, it does not work well for Row Element support ). But we don't mean we don't need span. We can use span when Div cannot achieve the effect, so span is a good supplement to Div.

 

2. Core of CSS

1) Standard stream

The standard stream is actually the arrangement of tags (that is, the code writing order), just like a flow, and so on, it is ordered.

2) Box Model

A page is a collection of all boxes, each tag is a box, and the class and ID selector are specific descriptions of the box attributes.

3) floating

This is because the range of the DIV is a positive line, so according to the control flow scheme, the next Div block can only be moved down. If we need to put two DIV blocks in the same row, there is a high requirement on the layout. At this time, it is very limited to observe the control flow.

So there is a concept of floating: the box that is set as floating will be separated from the control flow scheme and become an independent entity. For example, a blog supports the free layout of content blocks. Each content block is an independent "floating" and can change its position.

4) Positioning

Location: move the cursor to a specific rule.

As the box float leaves the original "constraint", we will conflict with the original control layout scheme when designing the page layout, therefore, we need to add a compliant "constraint" for floating, so that it can be well compatible without unexpected results.

3. Advantages of CSS

CSS technology is used in homepage creation to control page layout, Font, color, background and other effects more accurately.

You only need to make some simple changes to the corresponding code, you can change the appearance and format of different parts of the same page, or pages of different webpages.

Its advantages include:

1) style and content Separation

Extract the style part and place it in an independent style sheet. The heml file only stores text information.

2) Improve browser browsing speed

For the visual effects of the same page, the size of the page with CSS layout is much smaller than the size of the page file with table encoding. The former is generally only 1/2 of the size of the latter. Browsers Do not need to compile a large number of lengthy labels.

3) Easy Maintenance and revision

You can simply modify the CSS file to redesign the page of the entire website.

4) almost all browsers can be used.

Supports most IE and non-ie kernels.

5) A single style sheet can control multiple page documents.

6) it is easy to write and the language is simple and clear.

7) the CSS layout is more in line with the W3C standard.