For CSS, we don’t have a lot of basic knowledge to know. There may be a lot of piecemeal things that use CSS to achieve some functions, such as: text overflow ellipsis instead, etc. We will talk about these later, and this article will summarize Basic knowledge, mainly the usage of CSS.
1. Introduction to CSS
1. Chinese name: Cascading Style Sheets
2. English name: Cascading Style Sheets
3. It is a computer language used to represent document styles such as HTML (an application of the Standard Universal Markup Language) or XML (a subset of the Standard Universal Markup Language).
4. CSS can not only modify web pages statically, but also dynamically format web page elements with various scripting languages.
Second, CSS cascading order (priority from high to low)
1. Inline styles (written in HTML tags, inside the element)
例如：<div style="color:red"></div>
2. Internal style sheet (located inside the <head> tag)
For example: <head>
<style>
div{color:red}
</style>
</head>
3. External style sheets
Write CSS code in a .css file and introduce external style sheets in html
<link rel="stylesheet" href="aaa.css">
Let me say here that there are two ways to reference .css:
① Reference in html, use link tag
<link rel="stylesheet" href="aaa.css">
In this way, the link loads the .css files in parallel, all loaded before the page is displayed.
② Refer to the .css file and use the import tag
@import url('aaa.css');
This method will cause the style sheets to be loaded one by one, resulting in flickering (page repainting).
In summary, two ways.
3. CSS selectors
The selector of CSS is which tag is selected and what style should be added to which tag. We can add class or id attributes to this tag, and their corresponding selectors are called class selectors and id selectors. There is also a very commonly used pseudo-class selector, such as: :hover, :first-child, etc. My suggestion for selectors is to use these three (and then do other options when there may be other special needs).
The symbol of the represented class selector: '.', the symbol of the id selector: '#', the pseudo-class selector is added after the class selector or various selectors, such as .nav:hover.
There are also symbols to connect two selectors. The most I use is ',', and a comma is used to connect two selectors, which means that the two selectors have common attributes, so that the code can be simplified.
The selector also has priority. For example, <div class="aaa"></div> We have two types, .aaa{} and div{}, then the priority of these two selectors is .aaa >div, so we come to the conclusion that the class selector has a higher priority than the tag selector. Let's talk about the selector weight priority:
! important > inline > ID > class selector > tag | pseudo class | attribute selector > pseudo object > inheritance > wildcard
There are several selectors here, which I have not outlined one by one, because I think it is really useless.
Fourth, the specification of CSS
1. Each attribute must end with ";". Why is this? ";" represents the end of an attribute. If it is not added, the computer will not be able to identify where the end is, and it will not be able to display a beautiful web page in front of us. . The last attribute in a selector can be omitted, but for the sake of good code specification, we also need to develop good code habits, we just add it all.
2. Comments: CSS comments, whether it is multiple lines or one line, are /*content*/
Five, CSS properties
There are too many properties of CSS, I won't list them one by one, we need to memorize this, of course, not rote memorization. The next article will implement some functions based on CSS properties.