CSS everywhere
Maybe you think CSS is not important at all, but in fact, if HTML is the framework of the building, CSS is the decoration of the house. What about Javascript, the most interesting argument I have heard is P3-let's go back to the code first.
CSS
The following is the code we talked about before. CSS turns the three letters of Red into red.
HTML<!DOCTYPE html> <html> <head> </head> <body> <p id="para" style="color:red">Red</p> </body> <script type="text/javascript" src="app.js"></script> </html>
just,
javascriptvar para=document.getElementById("para"); para.style.color="blue";
Turning the font into blue, CSS + HTML makes the pages work in an orderly manner, but Javascript has disrupted these orders, and it is wonderful to fear that the world is not disordered. Understand why people did n’t feel good about Javascript in the past-but here is the main room, that is CSS, there is no Javascript at this time.
About CSS
This is not a professional book about CSS, so I wo n’t talk about how CSS came from. There are some things that we can easily know from other places, so we do n’t need to spend too much time to repeat. One of the purposes such as refactoring is also to remove duplicate code, but some duplication is indispensable and necessary, and usually these things may be copied from other places.
So far we have not relied on any special hardware or software. For us, our most basic need is a computer, or your tablet, or of course your smartphone, because they all have Browsers, and these are all usable, and there is no exception for our CSS.
CSS (Cascading Style Sheets), I still do n’t remember his full name today, CSS also has a Chinese name is a cascading style sheet, in fact, what is translated into may not be what we care about, we need to care about what he can Something. As one of the three Musketeers, its main purpose is to allow us to easily and flexibly control the appearance of Web pages. We can use it to make a complex interface like Taobao, or as simple as our book, but if it is as simple as our book, CSS may not be needed. HTML was originally designed according to the format of the newspaper, we can continue to use the editor mentioned above, or other. If you like DreamWeaver, that's not bad, but using IDE at the beginning will not help us write good code.
I forgot to say that CSS is also available in versions, similar to windows, Linux kernel, etc., but updates may not be as frequent, HTML is also available in versions, and JS is also available in versions. Complex things are not currently considered.
Code structure
For our Red example above, if there is not a good structure, then this may be the case in the future.
HTML<!DOCTYPE html> <html> <head> </head> <body> <p style="font-size: 22px;color:#f00;text-align: center;padding-left: 20px;">如果没有一个好的结构</p> <p style=" font-size:44px;color:#3ed;text-indent: 2em;padding-left: 2em;">那么以后可能就是这样子。。。。</p> </body> </html>
Although we see the same:
So we rewritten the above code according to the recommendations in various books
HTML<!DOCTYPE html> <html> <head> <title>CSS example</title> <style type="text/css"> .para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px; } .para2{ font-size:44px; color:#3ed; text-indent: 2em; padding-left: 2em; } </style> </head> <body> <p class="para">如果没有一个好的结构</p> <p class="para2">那么以后可能就是这样子。。。。</p> </body> </html>
It is better than the above, and it is much better to understand. This is only a temporary usage. When the file is too large, the formal writing should be as follows:
HTML<!DOCTYPE html> <html> <head> <title>CSS example</title> <style type="text/css" href="style.css"></style> </head> <body> <p class="para">如果没有一个好的结构</p> <p class="para2">那么以后可能就是这样子。。。。</p> </body> </html>
we need
HTML<!DOCTYPE html> <html> <head> <title>CSS example</title> <link href="./style.css" rel="stylesheet" type="text/css" /> </head> <body> <p class="para">如果没有一个好的结构</p> <p class="para2">那么以后可能就是这样子。。。。</p> </body> </html>
Then we have a style.css like app.js placed in the same directory, and his content is
CSS.para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px; } .para2{ font-size:44px; color:#3ed; text-indent: 2em; padding-left: 2em; }
This code is so similar to the JS code
javascriptvar para={ font_size:'22px', color:'#f00', text_align:'center', padding_left:'20px', }
And 22px, 20px and # f00 are all numerical values, so:
javascriptvar para={ font_size:22px, color:#f00, text_align:center, padding_left:20px, }
The visual gap is as small as possible, as for these topics will be discussed later, if we want to make our compiler work more correctly, then we need a lot of such symbols, unless you are willing to understand:
lisp(dotimes (i 4) (print i))
In general we have reduced the use of symbols, but using lisp brings more parentheses, but this is a concise way of expression, maybe we can see it in other languages.
regex\d{2}/[A-Z][a-z][a-z]/\d{4}
The above code is to find "some day / month / year" from a bunch of data. If you do n’t understand it as a regular expression at first, you will find it very complicated.
This language may be designed for designers, but most designers still don't understand programming, but this language is relatively simpler and easier to understand than other languages.
Style and Goal
As shown below, it is our style
css.para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px; }
Our goal is
如果没有一个好的结构
So the style and the goal are holding hands here, the question is how are they together? The following is the focus of communication between CSS and HTML:
Selector
The selector we use is called the class selector, which is the class, or it should be called the class selector. The ID selector is most commonly used with class selectors, but this is suitable for more advanced occasions, such as when you need to use JS to control the DOM. The basic selector is like the following example:
p.para{
color:#f0f;
}
Add the code to the bottom of style.css and you will find that "If there is no good structure" turns pink, of course we will have this way of writing
p>.para{
color:#f0f;
}
In order to produce the above special style, although it is not good-looking, we finally understand what is the cascading style. The following code is more important than the above, and therefore has a higher priority rule.
And usually we can pass a
p{
text-align:left;
}
Such an element selector gives all p elements a left alignment.
There is also a more complex compound selector, below is the HTML file
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="para">如果没有一个好的结构</p>
<div id="content">
<p class="para2">那么以后可能就是这样子。。。。</p>
</div>
</body>
</html>
There are also CSS files
.para{
font-size: 22px;
color:#f00;
text-align: center;
padding-left: 20px;
}
.para2{
font-size:44px;
color:#3ed;
text-indent: 2em;
padding-left: 2em;
}
p.para{
color:#f0f;
}
div#content p {
font-size:22px;
}
More interesting CSS
An example containing para2 and para_bg
<div id="content">
<p class="para2 para_bg">那么以后可能就是这样子。。。。</p>
</div>
We just added a black background
.para_bg{
background-color:#000;
}
The re-changed web page becomes a lot more interesting than the original one. The so-called inheritance and merge is the example above.
We can also use CSS3 to make more interesting effects, and these are not in our discussion, because we are talking about be a geek.
Perhaps the code we write is so simple, from HTML to Javascript, and now CSS, but there are always some core things, not to consider those basic syntax, basic things we can one by one in the process of practice Find. But we may not find it, or we may not consider some interesting usages or special usages in normal use. At this time, we can learn by observing some exquisitely designed code. Complex things can become very simple, and simple things can also become very complicated.
View online : build an IoT system step by step
Turing-eBook version builds an Internet of Things system step by step