CSS3 Study Notes and css3 notes

CSS3 Study Notes and css3 notes

Lesson 1:
Background-attachment: fixed background image not scrolling
Background-image: url (""); repeat allowed by default
Background-repeat: no-repeat-x repeat-y
Background-position: right; // = right and center
Background-position: 0px 0px more or percent

CSS3 background
Background-size:
Background-origin
Background-clip

Lesson 2: Text
Text-indent: indent the first line
Text-transform: capitalize; upper-case lowercase: all lower-case letters
Uppercase; all uppercase

Text-shadow: 5px 5px 5px # The distance between the ffo shadow and the top left corner
Definition color

Text-wrap: normal; automatic line feed

Lesson 3: font
Font-family
Font-size
Font-weight

Improvement of CSS3
@ Font-face {
Font-family: Name yourself
Src: url ();
}
Next direct reference

Lesson 4: Links
A: link
A: visited
A: hover
A: active

Text-decoration: none;
Background-color: the background color of the link.

Lesson 5: List
List-style:
List-style-image: url ("")
List-style-postion: inside; move to the inside edge
List-style-position: outside; go to the outer edge
Border-collapse: collapse; merge border

Lesson 6: CSS outlines
Outline
Outline-color
Outline-style: groove dotted... highlighted
Outline-width: width

Lesson 7: basic syntax
If the value is greater than one word, add ""

Lesson 8: Box Model
Width and height are part of the content;

Border Style
Border-style: double; dotted

Single border Style
Border-top-style:

Border-width:
Border-top-width: single border width
Border-color: border color

Border-radius: rounded border
Box-shadow: border shadow
Border-image: border image

Margin:
Accept any length unit and percentage

Lesson 9: positioning
Position: relative layout of relative z-index
Absolute layout does not occupy the position z-index
Fixed relative to Browser
Static offset does not work
Z-index: 1 who overwrites the value

Lesson 9: Floating
Float:
Inherit inherits floating attributes from the parent

Clear: removes floating attributes.

Height: auto Adaptive

Lesson 10: Selector

A. class {}
. Class. class {}

Id Selector
The id selector cannot be used in combination.
Id required for js

[Title] {} attribute selector [title = ""] {}
[Title ~ = ""] {} Contains words based on partial attribute values

A [href = ""] {}

Child element Selector
H1> strong {color: red}

Li + li {} adjacent sibling elements can be selected immediately after
The element after the other element, and the two have the same parent Element

Lesson 11th:
Line-height: normal
Percentage

Max-width satisfies the condition that words are not split into line breaks
Min-width

Cursor: Set the mouse pointer for auto, such as the default cell.

Horizontal or vertical display in the display list
Display: inline

Visibility: hidden visible effect

Lesson 12th: navigation bar
A: linked, a: visited {text-decoration: none; font-weight: bold ;}
A: active, a: hover {backgroundcolor: red ;}
Vertical navigation bar

 

Horizontal navigation bar
Li {display: inline ;}

Image transparency opacity: 0 completely transparent 1 completely opaque

Lesson 13th: CSS Animation

2D 3D conversion: transform: browser notes
2D conversion method:
Translate ()
Transform: translate (100px, 100px;) the moving distance of the first X axis, and the second y
-Webkit-transform: translate (100px, 100px); supported by chrome safary
-Ms-transform: translate (100px, 100px); supported by IE
-O-transform: translate (100px, 100px); supported by operabrowser
-Moz-transform: translate (100px, 100px); supported by Firefox

Rotate :() rotate
Transform: rotate (180deg );
Scale () Scaling
Transform: scale (). The first one is the second-to-high ratio of width.
Skew () skew
Transform: skew (20deg, 20deg) first X axis second Y axis
Matrix () matrix effect

3D conversion method:
RotateX
Transform: rotateX (120deg)
RotateY

Lesson 2: animation transition
Transition: width 2 s, height 2 s, transform 2 s;
-Webkit-transition: width 2 s, height 2 s,-webkit-transform 2 s;

Transition-delay: 2 s; delayed execution

Lesson 15th: Animation
Animation frequency
Animation name
Anim 5S;
-Webkit-animation: anim 5S;

@ Keyframes anim {
0% {background: red; left: 0px; top: 0px}
25% {background: blue; left: 2px; top: 0px}
}
@-Webkit-keyframes anim {
0% {background: red; left: 0px; top: 0px}
25% {background: blue; left: 2px; top: 0px}
}

Lesson 16th: multiple columns
Colume-count: 3;
-Webkit-colume-count: 3; 3 columns
Colume-gap: 50px; spacing
Colume-rule: 5px outset # FF0000; spacing

Lesson 2: waterfall stream
Colume-width: 250px; single column width ///