CSS journey-why CSS and css are used at the first stop
I don't know how many coders like me, css has always been a weakness, soft to the whole body... Since the weakness is coming, we can only find a solution, so we should look at this CSS authoritative guide.
The CSS authoritative guide is outdated, but the content is quite informative. It is basically the same as talking with you. It is very comfortable. Well, let's start with the text below.
I. Why learning CSS?
When you know that the history of CSS is still quite appealing, a long time ago, there was no css on the web, and there were only some html tags, such as p, h1... h5... div span, ul, etc. These html tags
They are all html tags with specific meanings. People in the past are very real and don't pay attention to typographical layout. As long as the content is dry, just like the current blog garden layout, it is concise and beautiful, we coders don't care about this either.
As long as the article is dry, but what? Web users are not programmers, so they do not pay attention to dry goods or dry goods. They pay attention to appearance, cool, and personality. In this way, Html cannot survive,
The W3C organization provides html tags such as strong, font, B, and u to satisfy these appetite... As shown in the following figure.
<Body> <font size = "20" color = "red"> <B> Hello </B> </font> </body>
Then, the programmer has the following complaints...
First, I want to write countless labels for decorate text... Too much trouble...
Second: Madan, now our page structure is getting more and more complex. These several font and B cannot be reused at all. They are just the final thing .... Tall hair...
Third: Now the country is so poor, the bandwidth is so expensive, my html size is really large tmd, the content actually only accounts for less than 1/10 of html... It may take several minutes for my customers to access the service... So proceed,
I want to lose my job ..
As a result, W3C caused online programmers to scream. The original idea was to modify the structure content of html through html tags of some styles. As a result, the current structure is messy and the page structure is lost.
Balance... In the face of three major problems, W3C began to launch CSS, a stacked style sheet for Html decoration. It completely solves the three major challenges raised by programmers...
Ii. How to Solve the three major problems
1. Numerous tag Problems
Css uses a rule to decorate the structure elements of each html. The rule structure adopts the "tag + content Declaration" method, for example:
1 <style type="text/css">2 p {3 font-size: 20px;4 color: red;5 margin: auto 0;6 width: 50%;7 }8 </style>
I have nothing to say about this definition. In this case, we have taken out all the decoration labels in html and put them in a specialized css rule. This benefits are also seen, "separation of content" and "display,
This solves the first complaint of programmers.
2. Reuse of decorative labels.
Indeed, the original html decoration labels cannot be reused. In this way, the page expands naturally, and css uses rule groups to solve this problem. First, write the rules, if you want to use the tag, apply it by yourself.
Set the css definition. In this way, the reuse problem is solved.
3. Problems with volume expansion
If the first and second problems are not solved, the third problem will naturally occur. I think there are other chain reflections, what measures have css taken to solve, to highlight the ultimate goal of css
Strictly separate "content" from "Presentation". To achieve "separation", css must be separately encapsulated into a specialized css file, you can not only reuse tags on a single html page, but also use multiple pages.
Area reuse and multi-site reuse. The next question is, how can I reference a css file ??? What is not worth advocating?
Iii. Reference of css files
1. link reference
When you drag css to vs, the link mode is used by default. link is a tag of xhtml, so we can use js to dynamically append and control it, I think everyone knows this. There is something more interesting.
Yes. You can create a "Candidate style table" and dynamically select the desired style in the browser. For example, I have defined two css files to display the red and blue backgrounds on the page.
Then we can dynamically switch the css style I want in the browser. This is very interesting. Although this function is relatively rare, it is difficult to intercept, you can use "View" => "style" in the toolbar ".
2. import reference
This tag can also be imported, as shown below.
1
Finally, we should try to avoid using the "inline style" style. If this is the case, there is almost no difference with the use of the font, strong, such as the following, so we try to avoid it.
1 <!DOCTYPE html> 2
Well, this is probably the first article. We will extend it later and enjoy the weekend.
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
