Brother Keung CSS Learning notes

HTML Nested CSS styles:
1. External (recommended)
2. Internal
3. Inline (not recommended)

CSS Precedence
1. Inline
2.id Selector
3.class Selector
4. Tags

CSS Length units:
1.px
2.em (14PX)

CSS selector:
Common selectors
Basic Selector
Hierarchy Selector
Pseudo class Selector
Property Selector

Common selectors:
1. Tags
2.id
3.class
4. Association
. Div1. imgcls{

}

5. Combination
. div1. Imgcls,.div2. imgcls{

}

Basic selector:
1.:first-child
2.:first-letter First character
3.:first-line First Line
4.:last-child
5.:nth-child (2)

Hierarchy selector:
A, B and
A B Select Descendants
A>b Selecting a subset
A+b a followed by B

Pseudo-Class selectors:
: Hover across the top
: Focus Gets the spotlight
:: Selection Select

Property selector:
[ID] contains attributes
The [Id=use1] property equals
[Name*=us] contains US
[name|=en] begins with en
[name^=en] begins with en
[name$=en] End with EN

Common style properties and values:
1. Fonts and Colors
2. Background
3. Text
4. Border
5. Mouse cursor
6. List
7. Positioning
8. Internal and external margins
9. Float and Clear float
10. Scroll bar
11. Show and Hide

Font:
Font
Font-size: Font Size
Font-family: Font type
Font-style: Font style (italic italic)
Font-weight: Font weight (bold bold)

Text:
letter-spacing Word Spacing
word-spacing Word Spacing
Text-decoration None|underline|overline|line-through Horizontal Line
Text-align left|center|right Text Alignment
Text-indent First Letter Indent
Line-height Line Height
Color colors
Word-break Automatic Line Wrapping

Background:
Background
Background-color background Color
Background-image background image
Background-repeat whether the background picture is duplicated (tiled)
Background-attachment background map with content scrolling (used on body, other not applicable)
Background-position

Border:
1.border-style solid solid line dotted small dash dashed dash double double line groove concave Ridge convex inset groove outset convex groove
2.border-width
3.border-color
4.border-left Right Bottom top

Mouse:
Cursor:crosshair Cross pointer small hand text wait waiting for default help

List:
List-style-type

1.none empty |desc solid round |circle Hollow round |square solid block |decimal digital |lower-roman lowercase roman numerals |upper-roman uppercase |lower-alpha lowercase letters |UPPER-ALPHA uppercase letters
2.list-style-type:none; The option icon in front of the list is canceled
3.text-decoration:none; A label underline cancel

Size:
Height
Max-width:
Max-height:

Text box:
TextArea
Width
Height
Resize

Style inheritance:
Text-related styles will inherit
Font-size:
Font-family:
Font-style:
Color
Line-height:
Font-weight:
Word-spacing:
such as

Form:
Border-collapse:collapse Border Merge |separate not merged
Border-spacing: Pitch

Positioning:
1.position:absolute absolute positioning |relative relative positioning
2.top
3.left
4. Positioning
5.z-index Z-Axis

Absolute positioning and relative positioning:
1. The same point:
Out of the document flow, above the document flow
2. Different points
The coordinate system is different, the absolute coordinate system is in the upper left corner of the browser, relative coordinate system in the upper left corner
Placeholder
Absolute non-occupying, relative-occupying

Div is absolutely centered:
1. Father Div:position:relative;
2. Sub-Div:position:absolute

Outer margin:
Margin-right:
Margin-left:
Margin-top:
margin-bottom:10px;
If only one is provided, it will be used for all four sides.
If two is provided, the first one is for top-down, and the second is for left-right.
If three is provided, the first one is used on, the second one is for left-right, and the third is for the next.
If you provide all four parameter values, the upper-right-bottom-left order is used for four-sided.

Inner margin:
Padding

Floating:
Float

Clear (block) float
Clear Left|right|both
Can effectively prevent the box retraction
<div style= ' Clear:both ' ></div>

Scroll bar:
Overflow:hidden Hidden |auto auto |scroll scroll bar appears

Show and Hide:
1.display:none hidden |block block display |inline line display
2.visibility:visible Show |hidden Hidden

Border Style:
1.border-radius
The first value is a horizontal radius.
If the second value is omitted, it is equal to the first value, when the corner is a one-fourth fillet.
If any of the values is 0, the corner is a rectangle and will not be rounded.
Value is not allowed to be negative.
2.box-shadow <length> Horizontal offset <length> vertical offset <length> shadow Blur value <length> Shadow epitaxial value | | <color> Color
box-shadow:5px 5px 5px 0px #999;
None: No shadows
<length>①: The 1th length value is used to set the shadow horizontal offset value of an object. Can be a negative value
<length>②: The 2nd length value is used to set the shadow vertical offset value of an object. Can be a negative value
<length>③: A 3rd length value is used to set the shadow blur value of the object. Negative values are not allowed
<length>④: A 4th length value is used to set the shadow Epitaxy value of the object. Can be a negative value
<COLOR>: Sets the color of the object's shadow.
Inset: Sets the shadow type of the object to be an inner shadow. When the value is empty, the shadow type of the object is an outer shadow

3.border-image:
Border-image:url (' b.png '), round;
Stretch | Repeat| Round | Space
Stretch: Specifies that the border background image is filled with a stretch.
Repeat: Specifies that the border background map is populated with tiling. When the picture touches the border, it is truncated if it is exceeded.
Round: Specifies that the border background map is populated with tiling. The picture dynamically adjusts the size of the picture according to the size of the border until it fills the entire border.
Space: Specifies a tiled way to fill the border background. The picture dynamically adjusts the spacing between the pictures according to the dimensions of the border until the entire border is exactly covered.

4.background-size: attribute specifies the size of the background image
5.background-origin: attribute specifies the location area of the background image
Border-box border Area
Padding-box Inner Margin Area
Content-box Active Area

6.text-shadow Text Shadow
text-shadow:3px 3px 3px #f00;
7.word-wrap:break-word; Word Wrapping
Similar Word-break
8. Font style
@font-face
{
Font-family:my;
Src:url (' My.ttf ');
}

Style:
1.translate () Mobile
2.rotate () changes the coordinate system
3.scale () ratio

3D Style:
1.rorateX (30DEG);
2.rorateY (30DEG);

Multi-column style:
Column-count
Column-gap
Column-rule

User interface:
1. Contour Style
Outline-offset

Brother Keung CSS Learning notes