Basic CSS knowledge (MOOC) and css knowledge (MOOC)

Basic CSS knowledge (MOOC) and css knowledge (MOOC)

1. Notes

Annotation: Comments in CSS/* here is the annotated text */comments in HTML <! -- Here is the text of the comment -->

 

2. external css styles, written in a separate file

Note:

Extension "is the extension. in 
　　
3. class selector and ID Selector
Note:
1) class selector
Class selectors are most commonly used in css style encoding. For example, the code in the code editor on the right can be used to set the font "timid" and "courageous" to red. Syntax :. class selector name {css style code;} Note: 1. The name of the class selector starts with an English dot. 2. The class selector name can be any name (but not Chinese). Usage: Step 1: use a proper tag to mark the content to be modified as follows: <span> be timid </span> Step 2: Use class = "class selector name" to set a class for the tag, <span class = "stress"> timid </span> Step 3: Set the css style of the class selector as follows :. before the stress {color: red;}/* class, add an English dot */
 
2) ID Selector
Set id = "ID name" for the tag, instead of class = "class name ". The ID is preceded by the pound sign (#) instead of the dot (.).
　　　　
When do I use id and class?
According to W3C standards, IDs with the same name are not allowed to appear on the same page, but classes with the same name are allowed. In this way, websites are generally divided into headers, bodies, and feet, because they only appear once on the same page, so id, other, for example, if you define a class with red color, you may need to use it multiple times on the same page. In addition, id is used when js is used on the page or when an object is to be dynamically called, so it should be used according to your own situation. Your own language
Difference between id selector and class selector
The ID selector can only be used once in the document. Unlike the class selector, in an HTML document, the ID selector can only be used once and only once. The class selector can be used multiple times.
It can be understood that id is the id card and is unique. It is impossible for one person to have two id cards or two id cards to represent one person.
Class is a name. A person (style) can have multiple names. Multiple Names can represent a person.
　　　　
3. Child selector and include (descendant) Selector
">" You only need to act on the "son", while "space" means that the son and sun have been used.
Note the difference between this selector and child selector. child selector only refers to its direct descendant, or you can understand it as acting on the first generation of child elements. The descendant selector acts on all child elements. The child selector selects the child selector by space, and the Child selector selects the child selector by ">. Conclusion:> it acts on the first generation of the element, and spaces act on all the descendants of the element.
　　
4. General Selector
Note: A general selector is the most powerful selector. It is specified by a (*) Number and matches all tag elements in html, use the following code to set the font color of any Tag Element in html to Red:
　　
5. Group Selector
Note:
When you want to set the same style for multiple tag elements in html, you can use the group selector (,), the following code sets the font color to red for both the h1 and span labels in the code editor on the right:
　　　　　　　　　　　　h1,span{color:red;}
It is equivalent to the following two lines of code:
　　　　　　　　　　　　h1{color:red;}　　　　　　　　　　　　span{color:red;}

6. Classification of elements in CSS
Annotation: 1. Block elements, <div>, <p>, 
Block elements have their own line breaks;
Features:
① Each block-level element starts from a new row, and the subsequent element also starts from another row. (A block-level element excludes one row)
② You can set the height, width, row height, and top and bottom margins of the element.
③ If the element width is not set, it is 100% of its parent container (consistent with the width of the parent element) unless a width is set.
How to Set an element as a block element?
1. Settingsdisplay:blockIs to display the element as a block-level element ---> a {display: block ;}
　　　　　　　　　　
2. inline elements (also called intra-row elements ), <a>, <span>, <br>, <I>, <em>, <strong>, <label>, <q>, <var>, <cite>, <code>
Inline elements define small areas in the row without line breaks, but it makes no sense if there is no content and does not occupy space;
Features:
① And other elements are on one line;
② The height, width, and top and bottom margins of the element cannot be set;
③ The width of an element is the width of the text or image it contains and cannot be changed.
How to Set an element as a block element?
① Through codedisplay:inlineSet the element as an inline element ----> div {display: inline ;}
 
3. inline block elements. , , <input>
In addition to line breaks, inline block elements occupy space even if there is no content.
It also has the characteristics of inline and block elements.
Features:
① And other elements are on one line;
② You can set the height, width, row height, and top and bottom margins of the element.
How can I set an element to an inline block element?
①. Codedisplay:inline-blockIs to set the element to inline block element --> a {display: inline-block ;}
 
7. Box Model: border
Note: The border of the box model is the line around the content and fill the white, this line can set its width, style and color (border three attributes ).
Setting method:
① Div {border: 2px solid red ;}
② Div {border-width: 2px; border-style: solid; border-color: red ;}
Note: 1. Common border-style styles include dashed, dotted, and solid ). 2. The color in border-color (border color) can be set to hexadecimal color, for example, border-color: #888; // do not forget the Front Well number. 3. The width in border-width (border width) can also be set to: thin | medium | thick (but not frequently used). pixel (px) is used most often ).
When border: is used to set a style for all four lines of the border
If you set the border of the specified side:
Div {border-bottom: 1px solid red;} You can also use the following code to set the borders of other three sides (top, right, left): border-top: 1px solid red; border-right: 1px solid red; border-left: 1px solid red;
 
8. Box Model: Fill
The distance between the element content and the border can be set, which is called "fill ". Filling can also be divided into upper, right, lower, left (clockwise ). Run the following code: div {padding: 20px 10px 15px 30px;}. Do not confuse the order. The code above can be written separately: div {padding-top: 20px; padding-right: 10px; padding-bottom: 15px; padding-left: 30px ;} if the top, right, bottom, and left are filled with 10px, you can write div {padding: 10px;} if the top and bottom are filled with 10px, and the left and right are 20 PX, you can write as follows: div {padding: 10px 20px ;}
　　
9. Box Model: boundary
Box Model-the distance between the Boundary Element and other elements can be set using the border (margin. The boundary can also be divided into upper, right, lower, and left. The following code: div {margin: 20px 10px 15px 30px;} can also be written separately: div {margin-top: 20px; margin-right: 10px; margin-bottom: 15px; margin-left: 30px;} if the upper-right bottom left boundary is 10px, you can write: div {margin: 10px;} if the upper and lower boundary is the same as 10px, the left and right sides are the same as 20px, you can write div {margin: 10px 20px;} to sum up the difference between padding and margin. padding is inside the border and margin is outside the border.
　　
10. CSS layout model
Note: CSS contains three basic layout models: Flow, Layer, and Float.
On a webpage, there are three layout models for elements:
1. Flow Model)
② Floating model (Float)
③ Layer Model)
　　
① Flow model, default webpage Layout mode
Features:
① Block elements are vertically distributed from top to bottom in order within the contained elements,
By default, block elements are 100% in width.
In fact, block elements occupy positions in the form of rows.
② Inline elements are displayed horizontally from left to right within the contained elements. (An inline element is not as overbearing as a block element)
　　　　　　
② Floating model (Float)
Div {width: 200px; height: 200px; border: 2px red solid ;}# div1 {float: left ;}// the module with the id div1 is on the left # div2 {float: right;} // The module with the id div2 is on the right
　　　　
③ Layer Model)
The layer model has three forms:
1. absolute position (position: absolute)
The following code moves the div element 100px to the right of the browser window and 50px down. Div {width: 200px; height: 200px; border: 2px red solid; position: absolute; left: 100px; top: 50px ;} <div id = "div1"> </div>
2. position: relative)
The following code moves 50px down relative to the previous position and 100px to the right; # div1 {width: 200px; height: 200px; border: 2px red solid; position: relative; left: 100px; top: 50px;} <div id = "div1"> </div>
3. fixed position (position: fixed)
Fixed: fixed positioning, similar to the absolute positioning type, but its relative moving coordinate is the view (the webpage window in the screen) itself.
Because the view itself is fixed, it does not change with the scroll bar of the browser window, unless you move the position of the browser window on the screen,
Or change the display size of the browser window. Therefore, fixed positioning elements are always located at a certain position in the browser window view and will not be affected by the flow of documents,
This is the same as the function of the background-attachment: fixed attributes attribute. The following code moves 100px to the right of the browser view and 50px to the bottom. The position remains unchanged when you drag the scroll bar. # Div1 {width: 200px; height: 200px; border: 2px red solid; position: fixed; left: 100px; top: 50px ;}
4. Relatively absolute hybrid use
# Box1 {width: 200px; height: 200px; position: relative;} # box2 {position: absolute; top: 20px; left: 30px ;} <div id = "box1"> <div id = "box2"> locate relative reference elements </div>
 
 
11. abbreviated Box Model Code
The margin settings of the box model include the margin (margin), the padding (padding), and the border (border). The top, bottom, and left margins are set clockwise. An example of the specific application in margin and padding is as follows: margin: 10px 15px 12px 14px; /* set to 10px on the top, 15 PX on the right, 12px on the bottom, and 14px on the left */There are usually three Abbreviations: 1. If the top, right, bottom, and left values are the same, for example, the following code: margin: 10px 10px 10px; can be abbreviated as: margin: 10px; 2. If the top and bottom values are the same, the left and right values are the same, for example, the following code: margin: 10px 20px 10px 20px; can be abbreviated as: margin: 10px 20px; 3. If the left and right values are the same, see the following code: margin: 10px 20px 30px 20px; Abbreviation: margin: 10px 20px 30px; note: the abbreviation of padding and border is the same as that of margin.
　　
12: Abbreviation of color value
The color value abbreviation can also be abbreviated to the css style of the color. When the color you set is a hexadecimal color value, if the values of each two are the same, it can be abbreviated to half. Example 1: p {color: #000000 ;}can be abbreviated as: p {color: #000 ;}example 2: p {color: #336699 ;}can be abbreviated: p {color: #369 ;}
 
13. Abbreviations
The font css style code in a webpage can also be abbreviated. The following Code sets the font for the webpage: body {font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 12px; line-height: 1.5em; font-family: "", sans-serif ;} so many lines of code can be abbreviated as: body {font: italic small-caps bold 12px/1.5em "", sans-serif;} note: 1. You must specify at least the font-size and font-family attributes in this shorthand method, if other attributes (such as font-weight, font-style, font-variant, and line-height) are not specified, the default value is automatically used. 2. Add "/" to the center of font-size and line-height. Generally, because there are few Chinese websites in English, the following code abbreviations are commonly used: body {font: 12px/1.5em "", sans-serif ;}
 
14. color value
Color settings on webpages are very important, including the font color, background-color, and border color. There are also many ways to set the color: 1. This setting method is often used in the previous sections of the English command color: p {color: red ;}
2. the RGB color is the same as the RGB color in photoshop, which is determined by the ratio of R (red), G (green), and B (blue) colors. P {color: rgb (133,45, 200);} the value of each item can be 0 ~ An integer between 255 and 0% ~ The percentage of 100%. For example: p {color: rgb (20%, 33%, 25% );}
3. The hexadecimal color setting method is a common method nowadays. Its principle is actually RGB settings, however, the value of each item is changed from 0-255 to-FF in hexadecimal notation. P {color: #00 ffff;} Or p {color: # 0fa}
　　
15. Length Value
The unit of length is summarized. Currently, px, em, and % are commonly used. Note that these three units are relative units. 1. Why is the pixel relative unit? Because pixels refer to small dots on the display ("90 pixels = 1 inch" in CSS specifications "). The actual situation is that the browser will use the actual pixel value of the display, and most designers currently tend to use pixel (px) as the unit. 2. em is the font-size value of the given font of the current element. If the font-size of the element is 14px, 1em = 14px; if the font-size is 18px, 1em = 18px. The following code: p {font-size: 12px; text-indent: 2em;} the code above can be used to indent the first line of a paragraph by 24px (that is, the distance between two font sizes ). Note the following special case: but when the unit of font-size is set to em, the calculation standard is based on the font-size of the parent element of p. The following code: html: <p> take the <span> example </span> as an example. </P> css: p {font-size: 14px} span {font-size: 0.8em ;} result The font size of the font "example" in span is 11.2px (14*0.8 = 11.2px ). 3.% p {font-size: 12px; line-height: 130%} set the Row height (row spacing) to 130% (12*1.3 = 15.6px) of the font ).
 
16. horizontal center setting-fixed width Block Element
The elements that meet the fixed width and block conditions can be centered by setting the "Left and right margin" value to "auto. Let's take a look at this example to set the horizontal center of the div block element: html code: <body> <div> I am a fixed-width block element. Haha, I want to display horizontally in the center. </Div> </body>

Css code: <style> div {border: 1px solid red;/* set the border */width: 200px for the div to show the center effect./* fixed width */margin: 20px auto;/* Set margin-left and margin-right to auto */} </style> or: margin-left: auto; margin-right: auto;
　　
17. Summary of horizontal center-Method of undefined block elements
There are three ways to center block elements with an indefinite width (these three methods are currently used in many ):
① Add table labels
Change the display of block-level elements to the inline type (set to the display of intra-row elements), and use text-align: center to center the elements. Example: html code: <body> <div class = "container"> <ul> <li> <a href = "#"> 1 </a> </li> <a href = "#"> 2 </a> </li> <a href = "#"> 3 </a> </li> </ul> </ div> </body> css code: <style>. container {text-align: center;}/* margin: 0; padding: 0 (eliminating the gap between the text and the div border )*/. container ul {list-style: none; margin: 0; padding: 0; display: inline;}/* margin-right: 8px (set the interval between li texts )*/. container li {margin-right: 8px; display: inline ;}</style> compared with the first method The advantage is that there is no need to add silent labels, but there are also some problems: it changes the display type of block elements to inline, into the line element, so it lacks some features, for example, set the length value.
③ Set position: relative and left: 50%: Use the relative positioning method to offset the element to the left by 50%, that is, to center