After learning css2.0, make a summary of what you have learned and thought.
This is the first time I have learned to use the Markdown editor to edit articles
1. Introduction and function of css
1.1 introduction to CSS
Cascading style sheets
Is a computer language used to represent file styles such as HTML (an application of the standard universal markup language) or XML (a subset of the standard universal markup language). CSS can statically decorate web pages and dynamically format the elements of web pages with various scripting languages.
2. css focus
2.1 six attributes of box model
1)Content area width height 2)Inner filled area padding 3)frame border 4)Outer filled area margin 5)background <img /> You can also give img Add background picture
2.2 block level elements are displayed side by side:
1)float float 2)flex 3)location 4)Inline block
2.3css attributes:
Layout:
Box settings
Floating setting
Positioning settings
Beautification:
Font settings
Text settings
List settings
Table setup
3. Three methods of css introduction
1) Inline style
<div style="width: 100px;height: 100px;border: 2px solid purple;"></div>
2) Internal style
<style>
div {
width: 100px;
height: 100px;
border: 2px solid purple;
}
</style>
3} External style
Add the path of css file after link (the content of css file is the same as above)
<link rel="stylesheet" href="mode.css">
4. Selector overview and classification
summary
CSS selectors are required to implement one-to-one, one to many or many to one control of elements in HTML pages using CSS. Elements in HTML pages are controlled through CSS selectors.
classification
Note: the following first code area is html code, and the second code area is css code.
1) Category selector
Class selector selects by class name
<div class="one">Using the class selector</div>
.one{
width: 100px;
height: 100px;
border: 2px solid purple;
}
2) Label selector
A complete HTML page is composed of many different tags, and the corresponding css style can be determined by using the tags
<h1>tag chooser </h1>
h1{color: blue;}
3) ID selector
The ID selector can specify a specific style for HTML elements marked with a specific ID, and the ID is unique.
<div id="two">ID selector</div>
#two{
width: 100px;
height: 100px;
border: 2px solid purple;
}
4) Descendant selector
The descendant selector, also known as the include selector, is used to select the descendants of a specific element or element group. The parent element is placed in the front, the selection of child elements is placed in the back, and a space is added in the middle to separate them. There can be more than two elements in the descendant selector. For multi-level ancestor descendant relationships, multiple spaces can be used to separate them. For example, for three elements with IDS a, B and C, the descendant selector can be written in the form of \a \b \c{}. As long as the selection of ancestor elements is separated by spaces before and in the middle of the descendant elements.
<p class="father">
Father defaults to black
<label class="child">(Child) offspring selector set to blue </label>
</p>
.father .child{
color:blue;
}
4) Pseudo class selector
You need to use conditions other than the document to apply element styles, such as mouse over. At this point, we need to use pseudo classes.
<a href="#"> when the mouse hovers here, the color is gold</a>
a:hover{color: gold;}
5) Universal selector
Universal selectors are represented by *.
*{ font-size: 12px;}
Indicates that the font size of all elements is 12px;
Universal selectors can also be combined with descendant selectors.
p *{......}
This style is applied to all elements that represent descendants of all p elements.
6) Group selector
css file
p, td, li { line-height:20px; color:blue; }
Indicates that the row height of the three labels P, TD and Li is 20px and the color is blue.
7) Intersection selector
<div class="one">First div</div> <div class="two">Second div </div>
div.two { color:blue }
Will select to the second div
8) Attribute selector
[id] {} all tags with ID attribute are selected
<div class="one">First div</div> <div class="two">Second div </div>
background-color: gold;
Both boxes have a gold background
5. Font settings
1. Font style: set whether the font is tilted ----- attribute value normal Italic
Em: font style: normal EM default tilt
2. Font weight: set whether the font is bold ----- attribute value normal bold border 100200300
H1: font weight: normal H1 bold by default
3. Font size: set the font size. By default, Google Chrome is 16px. 12px and 14px are used at most
It can be very large but not very small. The minimum is 12px
4. Font family: setting font type is also related to the font set on the user's computer
font-family:A,B,C,D
5. font: composite attribute of the above 5 attributes
font:font-style font-weight font-size/line-height font-family
Where: font style font weight can be switched without writing
Font size / line height font family must write interchangeable positions
6. Color: set font color
Note:
Inheritability: if it is set for the parent element, the child element can also inherit to
Apply: set font related attributes for body.
For the a tag, you need to select the a tag.
6. Text settings
1. Text align: sets the position attribute of text center center left align right align right.
text-align: center
1) Center text in box
2) Center inline elements or inline block elements in a box (you can treat inline elements or inline block elements as text)
2. Text indent: set the indent of the first line of the text. There are two values: px or EM (1em is the width of a Chinese character).
3. Line height: set the attribute of the height occupied by a line of text. By default, it is the same as the font size. If you want to center a single line of text in the container, just make the value of height equal to the value of line height.
1) If the sub label is a male label, the row height can support the height of the sub label
2) If the sub label is a female label, the row height cannot support the height of the sub label
4. Text decoration: the meaning of text decoration. You can set whether the text has an underline, an upper dash, and a middle dash. The values are underline, overline, and line through respectively.
7. Box settings
Classification of boxes
Male box: male label, block level element
Female box: female label, inline element
Inline elements:
1)Full inline elements:
2)Inline block element: img input Except that it can be displayed side by side, other features are the same as the male box.
1. Content area of box: width and height
1. Content area: width and height
Set the width and height of the box
2. Inner filling area of box: padding
2. Inner filled area: padding
It is used to set the inner fill, also known as padding, to indicate the distance between the content area and the border
Four directions: more used
padding-top: padding-right: padding-bottom: padding-left:
padding can also be followed by one value, two values, three values and four values:
One value: padding:10px padding in all four directions is 10px
Two values: padding:10px 20px; 10px up and down, 20px around
Three values: padding:10px 20px 30px; 10px above, 20px below
Four values: padding:10px 20px 30px 40px; Upper right lower left
Note:
1)Some labels have defaults padding as ul ol... One size fits all *{ padding:0; }
2)For inline elements, padding It does not affect the row height in the vertical direction, and the effect seems to be padding，
however padding Not really padding，Or for a female box, padding Invalid in vertical direction.
3)For block level elements, up and down padding Can support the height of the male box.
3. Inner filling area of box: padding
3. Borders: border
Border width
Style border style
Color border color
In general, border is not set separately. It is a composite attribute
Notes:
1) Border:1px solid red; There is no order for the attributes after border. Generally, border width is written first, then border style, and finally border color.
2) Thickness in most cases, the unit is px. You can also use words. When using words, the thickness is different in different browsers
3) The border styles are also very versatile. There are a lot of them: solid solid dotted dotted dotted dashed dashed none no line
4) The color of the border sets whether the word is in hexadecimal or rgb function
5) You can also set the border border top in a certain direction separately: 1px solid red;
4. Outside filled area of box: margin
4. Outer filled area: margin
Indicates that the outer margin the distance between boxes is outside the border, and the interval between boxes is outside the border
Four directions:
margin-top
margin-right
margin-bottom
margin-left
margin can also be followed by a value, two values, three values and four values:
One value: margin:10px margin in all four directions is 10px
Two values: margin:10px 20px; 10px up and down, 20px around
Three values: margin:10px 20px 30px; 10px above, 20px below
Four values: margin:10px 20px 30px 40px; Upper right lower left
Note:
1)With this tag, there is a default margin One size fits all *{ margin:0; padding:0; }
2)For inline elements, margin Invalid in vertical direction
3)margin Can be set auto. Indicates as large as possible div{ margin:0 auto; }
4)margin Negative values can be set
5)For block level elements, margin Overlap problem (collapse problem)
5. Box background
5. background
Background color: sets the background color of the box. The background color can be filled with padding or border
Background image: set the background image of the box img label is also a box. You can also set the background image for the IMG box
take care
A box is exactly the same size as the background image: just fit in
One box is larger than the background image: by default, the x and y Axes are tiled
A box is smaller than the background image: only part of the background image will be displayed, and the upper left corner of the background image is aligned with the upper left corner of the box
The upper left corner refers to the pddding At first, but border Pictures will also be filled in
background-repeat: Controls whether to tile
repeat-x Tile only x axis repeat-y Tile only y axis repeat x and y Axes are tiled
no-repeat x and y Axes are not tiled background-position:
A large background image in a small box and a small background image in a large box can be used background-position Positioning.
The collapse of the box and its solution
For the block level elements of margin, the margin has an overlap problem (collapse problem):
1) Overlapping between sibling elements
2) Overlap between parent and child elements
Overlap between sibling elements:
Overlap between sibling elements:
<div class="box7">box7</div>
<div class="box8">box8</div>
.box7{ width: 200px;height: 200px;background-color: gold; margin-bottom: 150px;}
.box8{ width: 200px;height: 200px;background-color: skyblue; margin-top: 100px;}
According to theory: between two boxes margin It should be 250 px
Implementation: 150 px
This phenomenon is called: margin Collapse of
margin Premise of collapse: 1) male label 2) vertical direction
margin How much is it: the principle of taking the largest
margin Premise of collapse: 1) male label 2) vertical direction
After collapse margin How much is it: the principle of taking the largest
How to avoid collapse? Answer: only one box margin.
Overlap between parent and child elements
Overlap between parent and child elements:
<div class="box9">
<p class="box10">I am a paragraph</p>
</div>
.box9{
background-color: pink;
margin-top: 50px;
}
.box9 .box10{
background-color: gold;
margin-top: 30px;
}
Arguably: p There should be 80 on the label px of margin
Only 50 px margin
This phenomenon is called: between parent and child elements margin overlap
Solution:
1)Add to parent element border
2)Add to parent element padding Add only one 0 px No
8. Float
8.1 purpose of floating
In order to achieve the word surround effect of news.
8.2 characteristics of floating elements
1)If both of them float in the same direction, the two floating elements will stick closely together. If the space behind them is not enough, it will automatically wrap. 2)Wrapping if it is a male box, its width will be as small as possible as long as it floats without setting the width 3)All elements within an element float. If the parent element does not have a height set, its height will become 0, which means that the height of the parent element collapses. 4)If a female box floats, you can set the width and height. At this time, the female box will become a male box.
8.3 impact of floating
1)Effect on parent element The height of the parent element collapses 2)The influence on the following sibling elements will overlap
8.4 elimination of floating effect
1)overflow:hidden 2)Heightening method When floating, the following elements will drill up, but the text will not, and the text will form a character surround effect. It affects sibling elements. Clearing this effect is called clearing floats. Professional: clear: left/right/both clear:both clear:both It can only be written on the first affected element. It is useless to write on the parent element.
8.5 other floating problems
Question: can a floating element in a div be separated from a div.
A: the floating cannot be separated from the parent element. It can affect the height of the parent element. It must run to other boxes.
Q: can two floating elements overlap?
Answer: no
Q: when can I make two boxes overlap:
Answer: 1) one box is floating, the other is not floating 2) positioning, positioning is completely separated from the standard document flow
Q: do floating elements float upward first?
A: Yes
Q: where does the floating element float first?
A: if the boundary of the floating parent box is body, and the height of the body is not set, it will also affect the body, and the height of the body will collapse,
Use overflow:hidden; Floating cannot be cleared, so do not run naked in the body directly.
Q: is the body a box?
Answer: Yes
Mainly refer to the teacher's lectures.