Front-end development-CSS-Summary

CSS: Cascading style sheets (cascading style Sheets)

Characteristics of the 1.CSS
Introduction of 2.CSS
3. Selector
4. Pseudo-Class selectors
5. Pseudo element Selector
6. Font style Text style background properties
7. Box model border margin padding
8.display Visibility Properties
9.float Properties
10.position Z-index Properties
11. Page Layout


First, the characteristics of CSS:
    The 1.CSS solves two problems:
        1. Detach the contents of the HTML page from the style.
        2. Improve the productivity of web development.
    Advantages of 2.CSS:
        1. Separation of content and performance
        2. Web page performance is unified, easy to modify
        3. Rich style, make the page layout more flexible
        4. Reduce the amount of Web page code, increase the speed of web browser, save network bandwidth
        5. The use of the independent page of CSS, conducive to Web pages indexed by search engines
    3.CSS Syntax:
        1. selector; 2. Declaration = attribute + value;
        /* This is a comment */
        

second, the introduction of CSS:
1. Built-in
Generally do not write in-line, the future is not good maintenance
<H1 style= "Font-size:10px;color:yellow" > I am H1 luffy Learning City 2. Inner Chain type
<style type= "Text/css" >
h2{font-size:30px;color:red;}
</style>
3. Outer chain type
LINK Type
Link CSS loaded at the same time!
<link rel= "stylesheet" type= "Text/css" href= "./css/index.css" >
Import type
The actual use of very little, first load HTML, in the loading CSS
Import is css2.1 specific and is not valid for browsers that are incompatible with css2.1 eg:ie5 the following
<style type= "Text/css" >
@import url ('./css/index.css ');
</style>
Note: the @import URL () must be written at the beginning of the file.
The difference between a link and an import:
1. <link/> tag is XHTML, @import is attribute css2.1
2, the use of <link/> linked CSS files loaded into the Web page, and then compile the display
3, using @import imported CSS file, the client display HTML structure, and then load the CSS file into the Web page
4, @import belong to CSS2.1 unique, for incompatible CSS2.1 browser is invalid

Priority: inline > Inner chain > Outer chain

Third, selector:
1. Wildcard Selector
*{
padding:0;
margin:0;
color:red;
}
2. Tag Selector
h1{
color:red;
}
img{
width:900px;
}
3.id Selector (parent box does not set height, child content fills)
#container {
width:900px;
margin:0 Auto;
            
}
4. Class Selector
. content{
width:900px;
background-color:red;
}
5. Descendant selector (> between selectors)
ul>li{
color:red;
}
6. Descendant selector (with spaces between selectors)
UL a{
Color:green;
}
7. Group selector (intermediate,)
. title,.content,.footer{
width:900px;
margin:0 Auto;
background-color:red;
border:1px solid red;
}
8. Intersection selector (there can be no spaces between selectors, the first label must be a tag Selector, the second tag can be an ID or a class selector)
p.p1{
color:red;
}
p#title1{
font-size:30px;
color:red;
}
9. Adjacent selector (selector with + tag followed by H3 title)
h3+p{
color:red;
}
10. Brother Selector (with ~ between selectors)
h3~p{
color:red;
}
11. Property selector (^ with ... Begin with, $ to ... End, * contains ..., ~ There are multiple values in one of them)
[class= "Baidu"] {
color:red;
}
[class^= "BTN"] {
Color:yellow;
font-size:12px;
}
[class$= "Ault"] {
font-size:12px;
color:red;
}
[Class] {
color:red;
}
[class*= ' Baidu '] {
color:red;
}
[class~= ' Baidu '] {
color:red;
}
input[input= "Text"]{
background-color:red;
}
CSS style precedence:
Inline style > Internal style sheet > external style sheet
ID selector > class selector > tag Selector

four, Pseudo-class selector
a:link{Background-color:blue;} State when a hyperlink is not being accessed
a:hover{Color:green;} State when hovering over a mouse
a:visited{Color:yellow;} State when the mouse is clicked
a:active{Color:blue;} The state of the mouse does not let go
input:focus{background-color:red;} The state when the focus is taken

v. Pseudo element selector:
p:first-letter{font-size:30px;} P paragraph sets a special style for the first letter of the text
p:before{for inserting new content in front of the content of an element
Content: "Beginning";
color:red;
}
P:after{used to insert new content after the content of an element
Content: "End";
Color:green;
}

six, font style text style background properties
1. Font style:
Default font Size: 16px = 1em 12px = 0.75em
font-size:30px;
Note:
Text size: If set to inherit, represents the font size value that inherits the parent element.

Font-style:oblique;
Note:
Style of the text: italic also denotes italic;
Recommended to use oblique when setting italic

Font-weight:bolder; The weight of the font
Note:
Text weight: Normal default value, standard weight
Bord Bold Body
Border more coarse
Lighter more fine
100~900 set the specific thickness, 400 equals normal, and 700 equals the bold
Inherit inherit the weight value of the parent element font

Font-family: "Microsoft Jas Black";
Font-family: "Microsoft Yahei", "Microsoft Jas Black", "Arial", "Sans-serif";
Note:
Type of text:
If the browser does not support the first font, it will try the next one. The browser uses the first value that it can recognize.
If set to inherit, the font that inherits the parent element is represented.

color:red;
Note:
Text color: Supports three color values: #FF0000 RGB (255,0,0) Red

2. Text style:
Text-decoration:underline;
Note:
Line: Overline on Line-through underline
None No (default definition of standard text)
Inherit inherits the value of the parent element's Text-decoration property.
text-indent:20px;
Note:
First Line indent: 20px

Text-align:center;
Note:
Text alignment can be centered horizontally: Left (default) right center justify (justify only in English)

text-shadow:10px 10px 0.5px #fff;
Note:
Shadows: Around, up and down, 0-1, color

Cursor:pointer;
Note:
Mouse shape: pointer pointer, cell cross, default mouse

height:200px;
line-height:200px;
Note:
Text vertically centered: height = line-height

3. Background properties:
background-color:red;
Note:
Background color.
Background-image:url ("./images/***.png");
Note:
Background image
background-size:300px 300px;
Note:
The size of the background image

Background-repeat:no-repeat;
Note:
How to repeat a background image
Repeat default. The background image repeats in both vertical and horizontal directions.
The repeat-x background image will be repeated in the horizontal direction.
The repeat-y background image will be repeated in the vertical direction.
The no-repeat background image will be displayed only once.
Inherit specifies that the settings for the Background-repeat property should be inherited from the parent element.

background-attachment:fixed;
Note:
Whether the background image is fixed or scrolling
Scroll the default value. The background image moves as you scroll through the rest of the page.
Fixed the background image does not move when the rest of the page scrolls.
Inherit specifies that the settings for the Background-attachment property should be inherited from the parent element.

background-position:10px 20px;
Note:
The location of the background image
Top left if only one keyword is set, then the second value is "center".
Top Center
Top Right
Center left
Center Center
Center Right
Bottom Left
Bottom Center
Bottom right

X y% The first value is a horizontal position and the second value is the vertical position. Default value: 0% 0%.
The upper-left corner is 0% 0%. The lower right corner is 100% 100%.
If only one value is set, the other value is 50%.

Xpos Ypos The first value is a horizontal position, and the second value is the vertical position.
The upper-left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit.
If only one value is set, the other value is 50%.
You can mix% and position values.

Background:green;
Background:url ("./homesmall1.png") no-repeat 10px 12px red;
Background:url ("./homesmall1.png") no-repeat Center red Fixed;
Note:
Shorthand

Seven, box model border margin padding
Each element in the HTML document is depicted as a rectangular box that describes its footprint through a model called a box model.
    

1.border
border-top-width:5px;
border-bottom-width:10px;
border-left-width:15px;
border-right-width:20px;

border-top-color:red;
Border-bottom-color:yellowgreen;
Border-left-color:yellow;
Border-right-color:blue;

Border-top-style:solid; Solid line
border-bottom-style:dashed; Rectangular dashed border
border-left-style:dotted; Dot dotted border
border-right-style:double; Two solid lines

Four values on the lower right left
Border-style:dotted dashed double solid;
border-width:5px 10px 15px 20px;
Border-color:blue Red Yellow slateblue;
Three values up or down
Border-style:dotted double solid;
border-width:5px 10px 20px;
Border-color:blue Yellow Slateblue;
Two values up or down
Border-style:dotted solid;
border-width:5px 20px;
Border-color:blue Yellow;
A value up or down
border-style:dotted;
border-width:20px;
Border-color:blue;
Shorthand:
Border:none No Border
border:10px solid yellow;

2.margin
Margin: Controls the distance between elements and elements
Note: Margin changes the actual size, the background color does not render to the margin area this area is displayed in blank, but also belongs to the box part.
margin-top:20px;
margin-left:40px;
margin-bottom:20px;
margin-right:40px;

Upper right Down left
margin:20px 30px 40px 50px;
Up or down
margin:20px 30px 40px;
Up or down
margin:20px 40px;
Up or down
margin-bottom:50px;
Center the Box element horizontally
margin:0 Auto;

Particularity:
The horizontal direction does not have this characteristic, the vertical direction particularity;
When two vertical margins meet, a margin is formed, known as the margin merge, is a large benchmark!!
Explain:
The margin of all adjacent two or more box elements will be merged into a margin share (with the largest benchmark).

Note: Parent-child box nesting set margins create margin merges that affect page layout.
Workaround:
(parent of child debt)
1. Parent or child elements use floating or absolute positioning absolute, floating or absolute positioning does not participate in the folding of margin.
2. Parent-Overflow:hidden
3. Parent set padding (destroys non-whitespace collapsed condition)
4. Parent Settings Border

3.padding
padding: Controls the distance from the content to the border, and the inner margin expands the area where the element is located, width+padding;
Note: Setting the padding for an element only affects itself and does not affect other elements, padding does not support negative values.
padding-left:20px;
padding-top:30px;
padding-right:40px;
padding-bottom:40px;

padding:10px 20px 30px 40px;
padding:10px 30px 50px;
padding:10px 20px;
padding:10px;

viii. Display Visibility Properties
1. Controlling the display and hiding of HTML elements
2. Conversion of block-level elements to inline elements
Display:none;
Note:
None
Control element hiding does not occupy position
An element exists in an HTML document, but does not appear in the browser. Typically used in conjunction with JavaScript code.
Block
Block-level element exclusive row, can be set wide height (div p h ul ol Li)
Fills the entire page width by default, and if the specified width is set, the remainder is populated with margin.
Inline-block
Inline block elements are displayed in a row and can be set to a wide height (img input)
Features both inline and block-level elements.
Inline
Inline elements are displayed within a row, not set wide (a span label)
The width, height, and margin-top of the element will not have any effect.

So so:
The inner block elements are transformed into block-level elements;
The inline elements are transformed into block-level elements/inline block elements;

Visibility:hidden;
Note:
Control element hiding occupies position affects the layout of the back box

Nine, float property
Document Flow: Refers to the element layout process, the elements will automatically from left to right, from the top down the flow of the arrangement.
Floating effect: Floats allow elements to be arranged in the specified direction until the boundary of the parent element is encountered or another floating element stops.

Float:left; Left floating left for start, from left to right in order
Right Right-floating right-start, arranged from right to left
None

Floating effect:
1. Floating can leave the element out of the document flow, not occupy the position
Out of the document stream, which is to take the elements away from the normal layout,
When the other boxes are positioned, they are positioned as if the element that is out of the document stream does not exist.
2. Float will raise the element level
3. Floating allows the elements to be arranged in a row, without setting the width height, you can adapt the element to the content
4. Float allows the inline element to support a wide height
Floating Instructions:
If a DIV element A is floating, if the previous element of a element is also floating,
Then the a element follows the previous element (if the two elements are not placed on one line, the a element is squeezed to the next line);
If the previous element of the A element is an element in the standard flow, the relative vertical position of a is not changed, meaning that the top of a is always aligned with the bottom of the previous element.
In addition, the block element element after the floating box will assume that the box does not exist, but the text in it will still make a position for the element.
The inline element after the floating box will be vacated for this box and then sorted in order.

Problems arising from floating:
When the parent element does not set a height, the child element is set to float and does not open the height of the parent element, at which point the parent box has no height. Because the child element does not occupy the position!
If there is a standard flow box underneath the parent box, it will affect the layout of the page. ------Clear Floating
Workaround:
1. Set a fixed height for the parent box; disadvantage: not flexible;
2. Add an empty block-level element to the floating element, and the element is not floating Float:none, set Clear:both, will open the box.
Cons: Structural redundancy
3. Official recommendation: Recommended use:
. wrap:after{
Content: '. ';
Display:block;
height:0;
Visibility:hidden;
Clear:both;
}
4. Recommended use: Add Overflow:hidden to parent element eg:. Warp{overflow:hidden;}

10. Position Z-index Properties
1.position
Position:absolute;
top:20px;
bottom:10px;
left:20px;
right:0px;

Static: Default value
Relative: Relative positioning
1. There is no effect on the element when the offset is not set.
2. Relative positioning can improve hierarchical relationships.
3. Relative positioning is relative to its own positioning.

Absolute: Absolute Positioning
1. You can promote hierarchical relationships.
2. Detach the document stream.
3. When no parent element is positioned, the upper-left corner of the browser is positioned as a datum.
4. In the case of a parent, the parent setting is relative positioning, the subset setting is absolutely positioned, and the parent box is positioned.
(Father Shangzi) to adjust the position

Fixed: Stationary positioning (can be used to advertise!) )

2.z-index
border-radius:50%; # Set Circle
border-radius:10px 20px 30px 40px; # set Corner

Position:absolute;
Z-index:3;
z-index:1000;
Note:
The larger the number, the more the outer layer!

11. Page Layout
Page layout:
Upper and lower structure
Upper and lower structure
Upper left and right structure: 1-2-1 structure
Upper left middle right bottom structure: 1-3-1 structure
So so:
First of all:
*{padding:0;margin:0;}
Ul>li{list-style:none;}
A{text-decoration:none;}
. Wrap{width:100%;background-color:gray;}
. header{}
. content{}
. footer{}
...
...

Front-end development-CSS-summary