CSS is a name and a function used to supplement and expand the HTML file function. The function is to set various typographical settings in HTML files to control fonts, colors, backgrounds, and images on webpages so that webpages can be displayed completely according to the designer's ideas.
Why is CSS required?CSS can control the display of webpages, and the display of attributes in HTML tags can also be controlled. why CSS? One of the reasons is as follows. In the past, almost one person could complete the setting of a website, which is very simple. Now, no, a website can be completed only when many people work together, if everyone makes a webpage according to their preferences, the style of the developed webpage will be different. Therefore, it is difficult for these webpages to be placed on the same website, CSS allows you to easily set the style of all webpages, and then make friends with people from different departments and different places to create webpages.
CSS is a tag attribute independent from HTML. Of course, CSS also has its own unique features. The content displayed in the HTML language is independently formed into a whole (CSS). Then, when we write a webpage, we use the HTML language to set the structure of the webpage content, the CSS language is used to set the display of webpage content, so as to enhance the flexibility and reusability of WEB programming. Note that the HTML language still provides the webpage content display function. However, when we create a webpage, we usually only use the function of controlling the webpage content structure.
How to Use CSS?Unlike JavaScript, CSS cannot exist independently. It must exist by "tags" in HTML. "tags" are the selectors in CSS. The basic syntax structure of CSS style sheets is as follows:Selector {attribute 1: value 1; Attribute 2: Value 2 ;......}; The selector can beHTML Tag NameCan also be a tagAttribute id value, OrClass Value.
HTML uses CSS in four ways: in-row style, embedded style, imported type, and connector type. In-row style and embedded CSS code are stored in HTML documents, and imported and connected CSS code is stored in separate files.
<HTML>Note: The "connector" will load the CSS file before loading the main part of the page, so that the corresponding style will be displayed when the webpage displays the content; the "Pilot" will load the CSS file after the whole page is loaded, so that the webpage displays the content first and then specifies the corresponding style.
Why is it CSS + div?DIV is a block tag in HTML. It uses some HTML tags as a block. CSS can use Div labels to flexibly change the granularity of the operated object. SPAN labels are intra-Row Labels. Div can achieve the span effect through settings, but span is difficult to achieve some Div effects.
Box ModelAll elements in HTML, whether block-level elements or row set elements, are a box in CSS. This is the box model. What we need to say here is that we 'd better understand this "box" as a box without a height, which helps us understand the concept of the following layers. Of course, you can also think of this "box" as a box with a height. In this case, we need to understand the following "layer" as a layer with a certain height. The specific box model is as follows:
Block-level elements and row set Elements
Block-level elements occupy a single row in the standard Document Stream, while row set elements occupy a part of the row in the standard document stream. But when they are completely out of the standard Document Stream, they no longer have this feature. Block-level elements and row set elements can change each other. With the display attribute, when the attribute value is block, it can be converted to block-level elements. When the attribute value is inline, it can be converted into a row set (Inline) element.
Concept of LayerThe layout and display of HTML document content are not only on one plane, but also on multiple planes) some of the la s are not completely disconnected, and some are completely disconnected. Of course, we can set the display effect through the Z-index attribute, finally, the overlapping effect we see from the outermost layer is the final display effect.
Document Stream the document flow is the continuous reading of the content in the document into the program process. Then, after processing, it is read from the program process continuously and output to the monitor. Of course, when reading and reading data, there is a certain sequence, not a mess. here we need to note that the reason for using the word "stream" is mainly because the data is transmitted during reading, reading, and reading, the flow of water is very similar. Therefore, the word "stream" is used to describe the data transmission process, but the word does not emphasize the reading and reading sequence.Here, we don't need to care too much about the input stream of the document. We should know more about the output stream of some documents, because the program processes output different layers in different order, in the end, we can see different overlapping effects of layers.
Depending on the control of the Document Stream layer, we can divide the document stream into regular streams, absolute locating streams, and floating streams. Now we can regard this stream as a layer.
Regular stream: the most primitive layer. At first, this layer contains all the elements. The elements of other layers are obtained from this layer, you have to give people a saying; absolute stream positioning: When the layer gets the elements of the original layer, it tells people that what I get is completely mine, nothing about it will be available in the future. Floating stream: This layer is still a thick road, not like the absolute positioning stream, even a Mao will not be left for others. When floating streams walk away from others, they will tell the regular layer that you can leave a cemetery for it or keep its original home, if you leave the cemetery (enough for it to live), the position of the cemetery will be determined by me. The "benefit" is that its real body will be above the cemetery. If you leave its original home, its real body can be drifting at will. You will be told whether you stay in the cemetery or visit our house.
Note: When a row set element is used as a box, its essence is still in the conventional stream, but the top of the element forms a bulge, in this way, when we look at the top, some coverage will occur. When the block set element is used as a box, it acts on the whole, and there will be no spikes or overwrites. Absolute stream location and floating stream are displayed when the element position (float and position attribute settings) is located again.
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
