Overview
After the rise of the Web, the introduction of CSS and learning materials has been overwhelming.
This article does not involve specific CSS syntax and so on, but want to from the perspective of beginners, so that no contact or little contact with CSS people can quickly understand what CSS is and how to use.
What is CSS
Understanding a concept, the first thing to see is its name, and often ignored, but also its name.
CSS (cascading style sheets), can be translated into Chinese cascading style sheets. From the name can be seen:
Cascade: The description style can be superimposed, so there will be precedence
Style sheet: The description of CSS is a description of the style, and is only a table, not a program language, so later with the application of CSS more and more, will have Sass and less these expanded CSS syntax language out
The role of CSS
CSS is the role of the style, in fact, the WEB only with HTML can be done, but with the performance of the machine and browser to improve, people on the Web page aesthetics and ease of use more and more high, the importance of CSS gradually highlighted.
CSS I think there are 2 main functions:
Web styles can be managed uniformly, easily modified, similar to variables or configuration files in a program language
Leave Web content and style separated to make it possible to present content flexibly
Note that HTML is the actual content of the Web page, CSS just controls how HTML elements are displayed, displayed or not.
CSS for layout
CSS in the layout of the most, is because of the CSS, there will be so-called p+css layout, the previous use of HTML is the table layout.
To get an idea of the layout of P+CSS, I think it's enough to know 3 o'clock, box model, positioning and floating.
Box model
Each p is a box for CSS. Each box consists of 4 parts from inside to outside content padding border margin
The length and frame of p are composed of the sum and width of the 4 parts.
Example:
<!doctype html>The example is simple, but it can be seen that:
Margin, border, padding, content from outside to inside
The width and height of p are just the size of the content
Positioning
After understanding the box model, positioning is also very simple, in fact, the box is positioned on the page.
Positioning is divided into absolute positioning and relative positioning.Absolute positioning
is the absolute position on the browser, set the distance from the top and left properties relative to the top corner of the browser
<!doctype html>Absolute positioning is clear but not flexible, and multiple sets of CSS are required unless the screen size can be fixed. Bad settings can cause overlapping elements.
One of the key settings in absolute positioning is Position:absoluteRelative positioning
The top and left of each p in relative positioning is no longer relative to the upper-right corner of the browser. Instead, the upper-left corner of the relative remaining position.
The same example above, the Position:absolute replaced with position:relative can be found that 2 p no longer overlap.Floating
P is inline by default, which means that each p occupies a row.
Layout, if you want multiple p to be arranged in one row, then floating (or using the previous table method) is used
After you set the P floating property, you can use p to lay out the various structures.The following is a common management system, for example, to do a simple p+css layout
<!doctype html>In the above example, the head,foot height is fixed and the nav width is fixed. Others are self-adapting, and you can see the effect by adjusting the size of the browser window.
Summarize
CSS layout is very simple, if there are other interactive actions, can be achieved through JS (such as navigation and content linkage).
It's pretty basic that no one is using table layout, because table is a way of showing data, and Row,cell is not a good way to be modular.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
