The perfect look of front-end development tool CSS_html/css_WEB-ITnose

Please master HTML knowledge first! ! ! ! For details, see: Organizing common tags in HTML

4. Starting with CSS

1. Understand CSS styles
One of the benefits of using CSS styles is that by defining a certain style, text in different web page locations can have unified fonts, font sizes or colors

2. Advantages of CSS styles
                                                                                                                                           can be set with
p{color:blue}(selector{attribute declaration value})
Selector: Also known as selector, it indicates the elements in the web page to which style rules should be applied. In this example, it is all the paragraphs in the web page ( The text of p) will turn blue, while other elements (such as ol) will not be affected.
Declaration: What is enclosed in English curly brackets "{}" is the declaration, and the attributes and values ​​are separated by English colons ":". When there are multiple statements, they can be separated by English semicolons ";"

4. CSS comment code
Use /*comment statement*/ to indicate it (use )

5. Basic knowledge of CSS styles
1. Inline CSS styles (written directly in existing HTML tags)

The text here is red.

Note that it should be written in the start tag of the element. The css style code should be written in double quotes. If there are multiple css style code settings, they can be written together and separated by semicolons. Open
                                                                                                                                                                                                                                                                                                 ​

2. Embedded CSS style (written in the current file)
Write the css style code in > ;Between tags
Embedded css styles must be written between , and generally embedded css styles are written between

3. External CSS style (written in a separate file)
Write the css code in a separate external file. This css style file has the extension ".css" and is in the (not within the
                                                                                                                                                                                                     🎜> 4. ID selector
In many ways, ID selectors are similar to class selectors.
Difference:
Within the tag.

The priorities of the three methods
These three styles have priorities. Remember their priorities: inline> embedded> external
The external formula has a premise: the position of the embedded css style must be behind the external formula
In summary, it is the proximity principle (the closer to the element being set, the higher the priority)

6. CSS selector
1. What is a selector? Each CSS style declaration (definition) consists of two parts.
Selector {
Style;
} }
1. Set the label id="ID name", not class="class name".
2. The ID selector is preceded by a pound sign (#) instead of an English dot (.).

2. Tag selector
Tag selector is actually the tags , ,

,

,
                                                                                                                                                                                                   1. Start with a dot in English
2. The name of the category selector can be named arbitrarily (but do not name it in Chinese)
How to use:
Step 1: Use appropriate tags to mark the content to be modified
Step 2: Use the class = "class choice device name" to set a class
Step 3: Set the class selected CSS style

4. ID selector
In many In terms of aspects, ID selectors are similar to the class selector
Differences:
1. Set id="ID name" for the label instead of class="class name".
2. The ID selector is preceded by a pound sign (#) instead of an English dot (.).

The difference between class and ID selector
Similarity: Can be applied to any element
Difference:
1. ID selector can only be used once in the document.
In an HTML document, the ID selector can only be used once, and only once. Class selectors can be used multiple times.
2. You can use the class selector word list method to set multiple styles for an element at the same time. We can set multiple styles for an element at the same time, but this can only be achieved using class selectors, not ID selectors (ID word lists cannot be used).
5. Sub-selector
The greater than symbol (>) is used to select the first-generation child element of the specified label element
.food>li{border:1px solid red;}

6. Contain (descendant) selector
Add spaces to select descendant elements under the specified tag element
.first span{color:red;}

Child selector and containing selector Difference:
​​​​​​ Please note the difference between this selector and a child selector. A child selector only refers to its direct descendants, or you can understand it as the first generation descendants that act on child elements. The descendant selector acts on all child descendant elements. The descendant selector selects through spaces, while the child selector selects through ">"
Summary: > acts on the first generation descendants of the element, and spaces act on all descendants of the element.

7. The universal selector
is specified with a (*) sign. Its function is to match all tag elements in html. Use the following code to set the font color of any tag element in html to red* {color: red;}

8. Pseudo -selector
allows the label that does not exist (a certain state of the label) that does not exist in HTML, for example, we give a label element in HTML a label element Set the font color while the mouse is rolling over:
a:hover{color:red;}
Regarding the pseudo-class selector, so far, the "pseudo-class selector" that is compatible with all browsers is Use:hover on the a tag (only this type is compatible with all browsers)
Nowadays, the combination of a:hover is more commonly used

9. Group selector
is used for multiple tags in html When setting the same style in the element, you can use a packet selection character (,)
H1, span {color: red;}

Seven, the inheritance, layers and particularity of css 🎜> Some CSS styles are inherited.
Inheritance is a rule that allows styles to be applied not only to a specific html tag element, but also to its descendants.
Note that some CSS styles are not inherited. For example, border: 1px solid red;
Non-inheritable styles:
display, margin, border, padding, background, height, min-height, max-height, width, min-width, max-width, overflow, position , left, right, top, bottom, z-index, float, clear, table-layout, vertical-align, page-break-after, page-bread-before and unicode-bidi.

2. Special
The browser determines which css style to use based on the weight. The one with the higher weight will use which css style
The weight of the tag is 1, the weight of the class selector is 10, and the ID selection The maximum weight of a symbol is 100.
p {color: red;} /*right value is 1* /
p span {color: green;} /*right value is 1 = 2* /
.warning {color: white; } /*The weight is 10*/
                                                                                                                                                                                                       ​The weight is 100 10 1=111*/
Note: There is another weight that is quite special - inheritance also has a weight but it is very low. Some literature states that it is only 0.1, so it can be understood that inheritance has the lowest weight.

3. Cascading
Cascading means that there can be multiple css styles for the same element in the html file. When there are styles with the same weight, it will be determined based on the order of these css styles. The last css style will be applied.
Inline style sheet (inside tag) > Embedded style sheet (in current file) > External style sheet (in external file).

4. Importance
There are some special situations where certain style settings need to have the highest weight,
There are some special situations where certain styles need to have the highest weight,
Note ：!important should be written in front of the semicolon
The browser’s default style
8. CSS formatting and typesetting
1. Text typesetting?? Font
body{font-family:"宋体";}
Note:
Do not set uncommon fonts
Usually "Microsoft Yahei"
body{font-family:"Microsoft Yahei";} or
Body {font-family: "Microsoft Yahei";}
Note: The first method is better than the second method compatibility.

2. Font size, color
body{font-size:12px;color:#666}

3. Bold
p span{font-weight:bold;}

4. Italics
p a{font-style:italic;}

5. Underline
p a{text-decoration:underline;}

6. Strikethrough
.oldPrice{text-decoration:line-through;}

7. Indentation
p{text-indent:2em;}
2em means twice the text size.

8. Line spacing (line height)
p{line-height:1.5em;}

9. Word spacing and letter spacing
Set the text spacing or letter spacing. You can use letter-spacing to achieve
h1{
letter-spacing:50px; spacing.
Word spacing settings:
Use word-spacing to achieve
🎜> 10. Align
for text in block elements , set the centering style of the image
h1{
          text-align:center; html Label elements in are generally divided into three different types: block elements, inline elements (also called inline elements) and inline block elements
Commonly used block elements:

,

,

...

,

,

,

, ,

,

,

Commonly used inline elements:
q>, , , <br> Commonly used inline block elements: <br> Element (element classification) <br> Setting display:block is to display the element as a block-level element <br> a{display:block;} <br> Characteristics of block-level elements: <br> 1. Each block-level element is refreshed starts on a new line, and the elements after it also start on a new line. (Really overbearing, a block-level element occupies one line) <br> 2. The height, width, line height, top and bottom margins of the element can be set. <br>​​​​​ 3. When not set, the width of an element is 100% of its parent container (the same as the width of the parent element), unless a width is set. <br> 3. Inline elements (element classification) <br> Block elements can also be set as inline elements through the code display:inline <br> Features of inline elements: <br> 1. And other elements are in On one line; <br> 2. The height, width, line height and top and bottom margins of the element cannot be set; <br> 3. The width of the element is the width of the text or image it contains and cannot be changed. <br> <br> 4. Inline block elements (element classification) <br> Inline-block elements have the characteristics of both inline elements and block elements. The code display: inline-block is Set the element as an inline block element <br> Features of inline-block elements: <br> 1. On the same line as other elements; <br> 2. The height, width, line height, and top and bottom margins of the element All can be set. <br> <br> 5. What is the box model? Box model) <br> The border of the box model is the line surrounding the content and filler. You can set the thickness, style and color of this line (three attributes of the border). <br> div{ <br> div{ <br> } <br> div{ <br> Border-width:2px; <br> Border-style:solid; <br>                                                                                                              ) | solid (real Wire). <br> 2. Border-color (border color) color can be set to hexadecimal color, such as: <br> border-color:#888; // The well in front should not be forgotten. <br> 3. The width in border-width (border width) can also be set to: <br> thin | medium | thick (but not very commonly used), and pixels (px) are most commonly used. <br> <br> The css style allows you to set the style for the border in only one direction: <br>       div{border-bottom:1px solid red;} <br> <br>                                                                                          Settings for the right and left borders: <br>                                                                         using using using       use using ‐           through use using     through out through out through through off ‐   ‐ ‐ ‐ ‐‐ ‐                                                        Height (box model) <br> The width (width) and height (height) defined in css refer to the content range within the padding. <br> The actual width of an element (the width of the box) = left border, left border, left padding, content width, right padding, right border, right border. <br> <br> 8. Filling (box model) <br> The distance between the element content and the border can be set, which is called "filling". Padding can also be divided into top, right, bottom and left (clockwise) <br> div{padding:20px 10px 15px 30px;} <br> div{ <br>                padding-top:20px; <br>                padding-right:10px; <br>                padding-bottom:15px; <br>                padding-left:30px; <br>             } <br>         上、右、下、左的填充都为10px;可以这么写 <br>             div{padding:10px;} <br>         上下填充一样为10px，左右一样为20px，可以这么写： <br>             div{padding:10px 20px;} <br> <br>     9、边界（盒模型） <br>         元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左 <br>             div{margin:20px 10px 15px 30px;} <br>         也可以分开写： <br>             div{ <br>                margin-top:20px; <br>                margin-right:10px; <br>                margin-bottom:15px; <br>                margin-left:30px; <br>             } <br>         如果上右下左的边界都为10px;可以这么写： <br>             div{ margin:10px;} <br>         如果上下边界一样为10px，左右一样为20px，可以这么写： <br>             div{ margin:10px 20px;} <br>         总结一下：padding和margin的区别，padding在边框里，margin在边框外。 <br> <br> 十、CSS布局模型 <br>     1、CSS布局模型 <br>         CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。 <br>             在网页中，元素有三种布局模型： <br>             1、流动模型（Flow） <br>             2、浮动模型 (Float) <br>             3、层模型（Layer） <br> <br>     2、流动模型 <br>         流动（Flow）是默认的网页布局模式 <br>         典型特征： <br>             第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置 <br>             第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。 <br> <br>     3、浮动模型 <br>         任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示 <br>         div{ <br>             width:200px; <br>             height:200px; <br>             border:2px red solid; <br>             float:left; <br>         } <br>         <div id="div1"></div> <br>         <div id="div2"></div> <br>         右浮动：float:right; <br>         一左一右：#div1{float:left;}   #div2{float:right;} <br> <br>     4、什么是层模型 <br>         CSS定义了一组定位（positioning）属性来支持层布局模型。 <br>         层模型有三种形式： <br>             1、绝对定位(position: absolute) <br>             2、相对定位(position: relative) <br>             3、固定定位(position: fixed) <br> <br>     5、绝对定位（层模型） <br>         想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。 <br> <br>         如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 <br>         div{ <br>             width:200px; <br>             height:200px; <br>             border:2px red solid; <br>             position:absolute; <br>             left:100px; <br>             top:50px; <br>         } <br>         <div id="div1"></div> <br> <br>     6、相对定位（层模型） <br>         想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。 <br> <br>         如下代码实现相对于以前位置向下移动50px，向右移动100px; <br>         #div1{ <br>             width:200px; <br>             height:200px; <br>             border:2px red solid; <br>             position:relative; <br>             left:100px; <br>             top:50px; <br>         } <br>         <div id="div1"></div> <br> <br>     7、固定定位（层模型） <br>         fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同 <br> <br>     8、Relative与Absolute组合使用 <br>         使用position:absolute可以实现被设置元素相对于浏览器（body） <br>         相对于其它元素进行定位 <br>             使用position:relative来帮忙，但是必须遵守下面规范： <br>         1、参照定位的元素必须是相对定位元素的前辈元素： <br>             <div id="box1"> <!--参照定位的元素--> <br>                 <div id="box2">相对参照元素进行定位</div> <!--相对定位元素--> <br>             </div> <br> box1 is the parent element of box2 (the parent element is of course also the predecessor element). <br> 2. Reference positioning elements must add position:relative; <br> #box1{ <br> width:200px; <br> height:200px; position:relative; <br> } <br> 3 , add position:absolute to the positioning element, and then you can use top, bottom, left, and right for offset positioning. <br>                                                                                                        >           } <br> <br> 11. CSS code abbreviation (occupies less bandwidth) <br> 1. Box model code abbreviation <br> In the box model, the margins (margin), padding (padding) and border (border) are set. The margins in the four directions of top, bottom, left and right are set in a clockwise direction: top Right lower left. <br>                                                                                                                                                                                                                                                The values ​​of top, right, bottom and left are the same, as shown in the following code: <br>                                                                                                    2. If the top and bottom values ​​are the same, The values ​​of left and right are the same, as shown in the following code: <br> margin:10px 20px 10px 20px; <br> abbreviated as: <br> margin:10px 20px; <br> 3. If the values ​​of left and right are the same, as shown below Code： Note: The abbreviations of padding and border are the same as margin. <br> 2. Color value abbreviation <br> When the color you set is a hexadecimal color value, if the value of each two digits is the same, you can abbreviate it by half. <br> p{color:#000000;} <br> Abbreviated as: <br> p{color: #000;} <br> <br> p{color: #336699;} <br> The abbreviation is: p{ color: #369;} <br> <br> 3. Font abbreviation <br> body{ <br> font-style:italic; <br> font-variant:small-caps; <br> font-weight :bold; <br> font-size:12px; <br> line-height:1.5em; font-family:"宋体",sans-serif; ： <br> body{ <br> font:italic small-caps bold 12px/1.5em "宋体",sans-serif; <br> } <br> <br> Note: <br>​ ​ ​ 1. To use this shorthand method, you must at least specify the font-size and font-family properties. If other properties (such as font-weight, font-style, font-varient, line-height) are not specified, the default values ​​will be used automatically. <br> 2. When abbreviating, add "/" diagonally between font-size and line-height.