CSS (Cascading Style Sheets, Cascading Style Sheets) is an essential tool for developing front-end applications. For example, HTML5 is the body, and CSS3 is the clothes worn on the body, which makes the entire HTML5 web page more beautiful. Let's organize the CSS below~
Table of contents
1. Introduction to CSS
1.1 A brief history of CSS
It is said that a long time ago (such as the period of the Republic of China), HTML existed alone and had nothing to do with CSS. But due to the gradual development of the Internet, people want to write more things in HTML, and more beautiful, so HTML2 was born (err...). But after adding a lot of things to deal with styles, HTML became more bloated. In 1994, Ha Kun Li proposed the concept of separation of structure and style, and wrote CSS together with his friend Burt Boss.
In 1995, W3C, the world's first Web organization, was established. The members of the organization and the authors of CSS standardized CSS, which is CSS 1.0. In the same year, CSS was widely used in the world, and CSS, HTML and later JavaScript were called the "Three Front-end Musketeers". This shows the importance of CSS in front-end development.
CSS 2.0 was released in 1997, and CSS 3.0 was released in 2000, which is the CSS3 we commonly use now. (Don't ask me why there is no CSS 4.0, you ask W3C why 4.0 has not been written for 20 years)
That concludes a brief history of CSS. Also, I have to correct some students here. CSS is not a programming language, nor is HTML (HTML is a markup language). Among the front-end three swordsmen, only JavaScript is a programming language.
In addition, CSS also has some extension modules, such as Less and SASS. These modules are equivalent to C++ for C, and have more powerful functions. However, our actual programming generally does not use that advanced level, and CSS is completely sufficient.
1.2 CSS Syntax
The syntax of CSS is very simple, it is a simple selector {style} , the example is as follows:
body{ /* 选择器 */
background-color: white; /* 样式 */
font-size: 16px; /* 也是样式 */
}The syntax of the style is attribute : value; , which cannot be said to be similar to JSON and YAML, but exactly the same! Just pay attention to the semicolon at the end of the sentence. So you don't have to worry about CSS syntax at all.
And if you want to add comments in CSS, use /* comment content */ , and the content between /* */ will be regarded as comments.
2. CSS selectors
2.1 Introduction to selectors
I just said that CSS has only two things in the whole language: selectors and styles. Let’s talk about selectors first~
A selector, as the name suggests, is a tool for selecting something. In CSS, selectors specify which HTML elements CSS styles are applied to.
Before the selector, let's look at a piece of HTML code. After a while, CSS will act on this piece of HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
</head>
<body>
<h1>Head</h1>
<p id="article1">Article1</p>
<p class="article2and3">Article2</p>
<p class="article2and3">Article3</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>It doesn't matter if there are some attributes in it that you don't understand, I will explain them later. The HTML starts out like this:
If you haven't learned HTML, you can read my previous article: here .
We also need to know a small style: change the font to red, as follows:
color: red;I think people who have never learned programming should understand this style...
2.2 Type Selector
The type selector, as the name implies, uses the type of the tag to select HTML tags. Such as h tags, p tags, etc. Its implementation is very simple, that is, directly use the type name as a selector, such as p{style} . for example:
h1{
color: red;
}It indicates that all h1 tags in this HTML document should turn red. Put it into the browser to see the effect (students haven’t learned CSS introduction yet, so don’t try it yet):
Let's try again to turn all p tags red:
p{
color: red;
}Drop into browser:
The effect is good~
We can also turn all tags red, using *{style} :
*{
color: red;
}Effect:
2.3 ID Selector
Everyone should remember the id option (what? Don’t remember? Didn’t take notes?), this attribute was used when using the anchor link. Here id has a different usage: as a selector.
Since a tag can only have one ID, and this ID is always unique in an HTML document, id is a natural selector. Its syntax is also very simple: #id name{style} . Before we defined the id article1 for a p tag, it can come in handy at this time:
#article1{
color: red;
}Drop into browser:
2.4 class selector
In actual programming, we can easily encounter this situation: two tags want to share a style. Some people say that two id selectors can be used, but this is too much trouble. At this time we can use the class selector. We add an attribute class to the tag that needs to be styled, and set the value to the class name (you can set multiple: "class name 1 class name 2 class name 3", separated by spaces), such as the two p tags above :
<p class="article2and3">Article2</p>
<p class="article2and3">Article3</p>The syntax of the class selector is also very simple: .class name {style} , here is an example:
.article2and3{
color: red;
}Drop into browser:
2.5 Inheriting selectors
Have you ever encountered this situation: you want to specify all the li elements under the ul tag, but you don't want to write so many classes? That's ok, inheritance selectors help you. The syntax of inheritance selectors is also very simple: parent tag child tag {style} , such as the following:
ul li{
color: red;
}Throw into browser:
2.6 Link selector
We often see some links on web pages, and when we hover over the link, the link will change color. This uses link selectors. There are many types of link selectors, as follows:
a:link { /* 未访问的链接 */
color: red;
}
a:visited { /* 已访问的链接 */
color: red;
}
a:hover { /* 鼠标悬浮链接 */
color: red;
}Among them, a:hover mouse suspension link is the most commonly used. Due to the problem of my computer screen recording, the effect will not be displayed here, and students can try it by themselves later~
2.7 Other selectors
The selectors in CSS are far more than these, and there are also structural pseudo-class selectors, combined selectors, etc., which will not be described here because they are not commonly used. Want to know can see below:
Also, if you want to share a style with two selectors, you can use the comma operator, as follows:
h1,p{
color: red;
}The above effect:
2.8 HTML Import CSS
Many students have a lot of question marks in their minds: I have learned so many selectors before, why should I learn them if I can’t use them? Here to teach you to import. Generally speaking, the easiest way is to create a new .css file, then write the CSS code into it, and finally import it in the HTML head tag . The import method is as follows:
<!-- 引入语法：<link rel="stylesheet" type="text/css" href="CSS文件名"> -->
<!-- 假设在同目录下创建了一个 style.css 并已经写好了样式 -->
<link rel="stylesheet" type="text/css" href="style.css"> If you want to write CSS code directly in the HTML file, you can use the style tag. Please note that the use of style tags is an irregular front-end development method, which breaks the principle of separation of CSS structure and style. So we generally don't use it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
<style type="text/css">
/* 这个里面写 CSS 代码，不信你看这个注释的语法 */
h1{
color: red;
}
</style>
</head>
<body>
<h1>Head</h1>
</body>
</html>There is also an even weirder way to import CSS: inline styles. We directly add the style attribute to the label, and its value is the CSS code. How nice it is! Even the selector is saved (manual dog head.jpg)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
</head>
<body>
<!-- 行内样式 -->
<h1 style="color: red;">Head</h1>
</body>
</html>2.9 Style priority
The full name of CSS is cascading style sheet, so why is it a "cascading" style sheet? To put it bluntly, it is style priority. For example, we define the p tag to be red in the .css file, the p tag to be green in the style, and then define the p tag to be blue in the inline style, what color will the browser finally display? This comes down to style precedence. In general, style priorities are as follows:
.css < style 标签 < 行内样式That is, the last p tag is blue. Then if we define the p tag to be red in the type selector, define the p tag to be green in the class selector, and finally define the p tag to be blue in the id selector, what color will be displayed in the end ? This again comes down to style precedence. Generally speaking, the priority of styles in the same CSS block (such as the style tag) is as follows:
通用选择器(*) < 类型/继承/组合选择器 < class 选择器 < 链接/结构伪类选择器 < id 选择器That is to say, the p tag is still blue. Don't ask me which Shenjingbing will repeatedly define so many styles, don't say, when you actually write this thing in the future, you will really do it.
3. CSS styles
3.1 Box Model
After talking about CSS selectors, let’s talk about styles~ Common styles in CSS are actually not difficult, the most difficult and most important thing is the box model.
The box model is easy to say. When you F12 to open the browser's development tools, you will see such a box (what? You call this a box?):
This box has four layers. The first layer is margin, which represents the orange part in the picture and is transparent;
The second layer is the border, which represents the yellow part in the picture, and is transparent by default;
The third layer is padding, which represents the green part in the picture and is transparent;
The fourth layer is content (content), the blue part in the figure;
This box makes the style layout of each element in the web page more beautiful and flexible. It is applied to every element in HTML.
Some common operations we generally perform on the box model
Empty inner and outer margins: We generally use it in every CSS file, which limits the scope of use of the box model and only uses it when we need it. This is a CSS universal style, it is best to write this at the beginning of every CSS file.
*{
margin: 0;
padding: 0;
}(Box model: Are you polite? Just come and clear my inner and outer margins)
Define inner and outer margins: When we need the inner/outer margins of the box model, we can define it. If you only want to define a certain part of the inner/outer margin, such as the left side, add -left -right -top -bottom after the attribute name. Its unit is px (pixel, pixel) don't forget to write.
/* 定义内边距 */
padding: 30px;
/* 定义外边距 */
margin: 30px;
/* 里面的 30px 可以换成任何数值，只要结尾带 px */Center display label: When we want to center a label, we can also use the curve to the outer margin in the box model. Just set the margin to 0 auto, as follows:
margin: 0 auto;
/* 上面的 0 可以换成任何数值，它代表这个元素的上下外边距 */Since auto represents the left and right margins of this element, and auto is equivalent to giving the left and right margins of the element to the browser to define, so the browser will automatically help us center the element~
Border solid line: The default border is not displayed, so what should we do if we want it to be displayed? Then change the border style in the box model to solid so that it can be displayed. We can also manipulate the thickness and color of the border, see below for details:
border-style: solid; /* 给边框加上实线 */
border-color: yellow; /* 给边框实线定义颜色 */
border-width: 1px; /* 给边框实线定义粗细，要加 px */Border rounded corners: The default element is a standard rectangle, which is straight. We want it to have rounded corners. What should we do? You still have to manipulate the border in the box model and give it rounded corners.
border-radius: 10px; /* 后面的数值表示圆角的大小，要加 px */The difficulty of the box model is that it is more abstract, but as long as you understand it, the content behind it is very simple.
3.2 Background
Now let's learn something simple, just the background~
Background (Background), as the name implies, it represents the background of the element. Its scope is the padding part and the content part of the box. Our general operations on the background are very simple: set the background color and background image.
Set the background color: This is very simple, just use the background-color style. You can use the colors that come with it, such as red blue yellow, etc., and the range of colors that come with it is still very wide.
background-color: red;So how to make the background color more fairy? Here is another super easy-to-use color picker website: HTMLColorCodes , after selecting the color on the left, the string of hexadecimal numbers on the right is the color (such as 3F923A), just add # in CSS and use it, such as the following:
background-color: #3F923A;
And if you can't satisfy the pure color, you can try a gradient color website: Grabient . There are a lot of fairy gradient colors in this website, the masters have pre-modulated, and the CSS code is very nice after copying.
Setting the background image: It is also very simple, just use the background-image style. Of course, the ratio should be well controlled, otherwise I don’t know if it’s a human or a ghost~
background-image: url("image.png");
/* image.png 换成图像的 url */3.3 Text text
Set text color: This should be the most commonly used style for text, just use color: color directly . Color modulation can use the previously provided HTMLColorCodes color palette, but gradient colors are not supported~
color: red;
/* red 可以换成任何你想要的颜色 */Set the center of the text: you can use the text-align style. And this style can not only center the text but also align it left and right.
text-align: center; /* 居中 */
text-align: left; /* 左对齐 */
text-align: right; /* 右对齐 */Set the text to center up and down: use the line-height attribute, and let the line-height attribute be the same as the height of the HTML element. Of course, this method is only applicable to one line of text, and there is no way for multi-line text~
/* 比如这个 HTML 元素的高是 30px */
line-height: 30px;Set text style: This is a very useful style, for example, it can remove the underline that comes with the link, the style is text-decoration, the code is as follows:
text-decoration: none;We can also use this style to overline, underline and underline ordinary text (as for what the underline is, you can try it yourself)
text-decoration: overline; /* 上划线 */
text-decoration: line-through; /* 中划线 */
text-decoration: underline; /* 下划线 */Indentation of the first line of text: it is the two spaces before the natural paragraph that is usually used when writing a composition, but the unit is changed to pixels~
text-indent: 50px;3.4 Font font
Specify font: This style specifies what font to use for the selected text. Multiple fonts can also be defined, and the computer will try fonts one by one until the font can be displayed normally on the device. If none of these fonts are available on the device, the default font will be used.
font-family: "SF Pro"; /* 指定一种字体 */
font-family: "PingFang SC", "微软雅黑", "等线"; /* 指定多种字体，字体之间用逗号隔开 */Specify font size: unit px~
font-size: 16px;Specify the font style: only italics can be set, and bold text needs to be set with a strong tag to achieve it.
font-style: italic; /* 一种设置斜体的方法 */
font-style: oblique; /* 另一种设置斜体的方法 */I don’t understand that there are two italic methods, why there is still no bold method~
3.5 List list
Specify the list header style: There will be a circle in front of each li of the ul, so what if we want to change it to a square? use this style~
list-style-type: square;Table style: Since it is not used much, here is a direct link: Table Table
3.6 Display Display
I have talked about so many simple CSS styles before, and finally come to a difficult one~
In HTML, elements are divided into two categories: inline elements and block elements. Inline elements are commonly used strong em elements. These elements can be displayed within one line, but the height cannot be set, and the height depends on the length of the text~
The block elements are elements such as p div. They can set the length and width, but they cannot be displayed in one line.
After understanding the above, you can start learning Display.
div tag and span tag: These are two HTML tags, which represent an empty block element and an empty inline element respectively. Their function is to act as an empty box, simplify the layout, and make CSS selection easier (all elements can be plus class and id attributes)
Set display: We can choose whether this element is a block element or an inline element by setting the display attribute, as follows:
display: inline; /* 行内元素 */
display: block; /* 块元素 */So what if you want to set the length and width of the elements and want them to be displayed in one line? At this time, we need to use the inline-block value of display, so that the element has both the inline feature to display in one line, and the block feature to change the length and width. code show as below:
display: inline-blockHidden elements: You can set the display attribute to none, as follows:
display: none;Since the above code is equivalent to making the element disappear, that is, it does not occupy the space of the HTML document. So what if we just don't want it to be displayed, but it also takes up HTML space? Then you can use the visibility style and set the value to hidden (hidden).
visibility: hidden;So what if you just want to make this element transparent and don't want to hide it completely? You can use the opacity attribute to set the transparent value, between 0.0 - 1.0, the smaller the value, the more transparent the element.
opacity: 0.4;Set the length and width: I said so much before setting the width and height, so how to set them? See the code below. Remember that px must be written.
width: 300px; /* 宽度 */
height: 200px; /* 高度 */3.7 Position positioning
Positioning is one of the two major pain points in CSS, the other being floats behind. Positioning, as the name implies, is to set the position of the element in the HTML document. There are two types of positioning: relative positioning and absolute positioning.
Relative positioning: As the name implies, it is to change the position of the element to itself. In simple terms, it is to move the element up, down, left, and right. Before moving, we enable the relative positioning function first, and we cannot move without enabling the function:
position: relative;Enabling this feature will not make any changes to the original position. Then we can use top to move the element up, bottom to move the element down, left to move the element to the left, and right to move the element to the right. What needs to be emphasized here is that a minus sign - must be added before the number, otherwise the direction of movement will be reversed. There is also the need to add px. Here is a chestnut:
right: -30px;Absolute positioning: This positioning is a bit powerful. You can directly locate your absolute position in the HTML document, such as the "back to top" that has been stopped at the lower right corner of some web pages, which is realized by absolute positioning. Of course, absolute positioning can also be positioned in the parent element, but the parent element is also required to enable absolute or relative positioning. Generally, this function is required to enable relative positioning for the parent element without any effect on the parent element. First we need to enable absolute positioning:
position: absolute;The element is then moved to the upper-left corner relative to the HTML document or the parent element, and does not take up any space in the HTML document. Then use top to define the y-axis position of this element relative to the HTML document or the parent element (the xy axis can be Baidu if you haven’t learned it), and use left to define the x-axis position of this element. The unit is px, no negative sign is needed.
left: 100px;
top: 200px;3.8 Float floating
Floating is also one of the two major difficulties in CSS, and its difficulty can be said to be the first in CSS. A div element with many inline-blocks nested in the middle should normally be displayed like this:
But what if we want to move element 1 to the far right? Some students said that it can be realized by positioning, but it is too troublesome and needs to measure the length that needs to be moved. At this time we can use float to achieve. Floating, in simple terms, you can think of the div element nested inline-block as a rope tied to the balloon, and the inline-block as a balloon, then floating is to float the balloon away from the shackles of the rope. The floated element does not belong to the div on the browser, but it still belongs to the code~
Floating left/right elements: This is very simple, using the float style:
float: right; /* 右浮 */
/* float: left; 左浮 */After floating, the browser becomes like this:
We can see that element 1 ran to the far right~
Solve the problem of parent border collapse: I just said that the floated element does not belong to the div in the browser, so when all the elements in the div are floated, there is nothing in the div, and it will collapse. See the picture for details:
You can see that the div above has collapsed because there is no content. So how to solve this problem? Some people say that you can specify the height of the div, but this is very inflexible. We have many methods for this problem, and here is only the one with the best effect: the pseudo-class after method. The principle is that you can search for it yourself on the Internet, because I don’t know it myself (TT) The code is as follows:
#father:after{ /* 这里的 #father 换成指向父类的选择器 */
content: '';
display: block;
clear: both;
}The effect varies from browser to browser, some browsers may not support it, but mine supports it~
3.9 Overflow overflow
CSS is about to end the flowers~ Of course, there is a cheese point before the flowers~
When developing a web page, it often happens that one (or several) elements are larger in length and width than its parent element, and the extra part is called overflow. If overflow is not handled properly it can produce unpredictable results. Generally, we have two ways to deal with overflow: hidden overflow and scroll wheel method.
Hiding overflow: It is easy to understand that it is the part that hides the overflow. The code is given below:
overflow: hidden;The above effect:
Scroll wheel method: As the name suggests, add a scroll wheel next to the element to browse the content up and down. You can choose to add the scroll wheel to the bottom, the right, or both. code show as below:
overflow-x: scroll; /* 在底部增加滚轮 */
overflow-y: scroll; /* 在右边增加滚轮 */
/* overflow: scroll; 在底部和右边增加滚轮 */Effect:
If we need to intelligently determine whether this element needs a scroll wheel, we can replace the above scroll with auto, so that if it overflows, the scroll wheel will be added automatically, and if there is no overflow, it will not be added. This method is very nice~
4. Summary
CSS is actually not difficult, there are only two grammar points of selectors and styles (don’t worry about writing almost 10,000 words with two grammar points). After learning, you can start JavaScript 6 and React.js framework (React.js is currently a popular JS front-end development framework, similar to it are Vue.js and Angular.js, etc. I personally recommend React.js + Ant Design combination (Ant Design is a component library of Alibaba, which comes with many beautiful elements)
However, due to the reason for the second-level computer C++ exam (you can apply for your own name, you can apply if you are under the age of 18), you will start to take C++ and algorithms in the later stage, and the academic burden in junior high school is much heavier than that in elementary school, so it may not be so soon. JavaScript 6 and React.js. In short, please look forward to the front-end series!