I. CSS working principle. CSS Working Principle
CSS is the full name of the stacked style sheet. It is a computer language used to represent HTML (an application of the standard universal Markup Language), XML (a subset of the standard universal Markup Language), and other file styles. It is a style design language that truly achieves the separation of webpage performance and content. It can precisely control the position and layout of objects on the webpage at the pixel level, and supports almost all font size styles, with the ability to edit webpage objects and model styles, and preliminary interactive design, it is currently the best presentation design language based on text display.
CSS rulesA css document consists of a series of rules. a css rule is actually a CSS command. This command selects HTML elements and then sets the style of the selected elements.
The following is a simple CSS rule that sets the section background color to green.
p{background-color: green}CSS basic rules
A css rule consists of two parts: Selector and declaration.
Selector: Specifies the elements to be selected.
Declaration: It is composed of attributes and values. Attributes indicate the styles that affect elements. Values are actually a state of attributes.
In the above example, we can see that a rule is expanded from left to right: selection operator, left curly braces, attributes, colons, values, and right curly braces to basic rule 1: multiple declarations are included in a rule.
p{color: green;font-size: 45px;font-weight: bold}
Add a semicolon to each declaration to separate them.
Extension 2 for basic rules: Multiple selector combinationsh1,h3,p{color: green;font-size: 45px;font-weight: bold}
Separated by commas (,).
Expand basic rule 3: apply multiple rules to the same Selector
h1,h3,p{color: green;font-size: 45px;font-weight: bold}
Now we want to set the background color of Section p to blue. We can add another rule.
p{background-color: blue}CSS selection character Classification
There are three types of Selection Characters Used to select specific elements: Context Selection, ID, Class selection, and attribute selection.
Context SelectorThese attributes are specifically written for IE. Clearfix: after is equivalent to clear: both, which aims to solve the problem that external containers cannot automatically open according to internal floating content.
What is the working principle of the online HTML formatting tool and the online CSS formatting tool?
The essence is to use programming languages (js, asp, php, ruby...) to judge and process strings based on a set of rules.
Before format:
<Html> <body>
After the format:
<Html>
<Body> </body>
</Html>
Here is a general principle. There are many algorithms for implementation:
Rule: start from an element in html. </> it is the end of an element to find the element.
When the program reads the first
Then you can find
If there are child elements, You need to insert a line break to separate the child elements from the parent class (processing details at the same time, such as extra spaces between parent and child labels, insert tab indentation, etc)
Then I went to the <body> </body> to find out if there were any pairs <> </>. If not, I did not process them. If yes, I would search and process them in the same loop as the previous steps.
------------------------------------------------------
General css formatting rules:
Body {color: red;}. myclass {font-size: 12px;} # myid span {width: 100px; color: yellow ;}
Find the matched {}, which is the rule line according to; for the ending rule:
{
Width: 100px;
Color: yellow; (this ";" can be skipped In the last sentence, so you should also consider this situation)
}
Add tab indentation:
{
Width: 100px;
Color: yellow;
}
The other is to judge the characters outside a pair of {...} and add the line feed:
Body {}
. Myclass {}
# Myid span {}
The last thing you see is:
Body {
Color: red;
}
. Myclass {
Font-size: 12px;
}
# Myid span {
Width: 100px;
Color: yellow;
}
In specific implementation, there are still many situations to consider. For example, the person who writes the code forgets to write
This is also the principle of formatting other things, but the search rules are different.
In turn, there are a lot of JavaScript, css, and html code compressed to reduce the server load by byte, and delete useless spaces and line breaks in the file, that is, to reverse these steps.
In addition, you can use Baidu to process strings: Regular Expressions... the remaining full text>
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
