CSS
inline (written on the label inside the property)
Embedded (with)
(to introduce css file) Outreach
The priority is the principle of proximity: Inline Embedded higher than Outreach
(Class can have more) with .p call
(Id only one) call with #p
Pseudo object
css substantially selector
select all elements
style elements: *} {
The element type selection
style elements: {A}
body elements: fly school
The class elements selected
style elements: {} .class1
body elements:
Fly
The id element selected
style elements: ID1 # {}
body elements:
Fly
The attribute element selected
style element: [Herf] {}
body elements: fly
Action selector
style elements: a: hover {} When the mouse over
the body element: fly
Create border and background
border attribute
background property
border-radius: 10px / 10px; ( radius horizontal / vertical radius)
css set the text style
text-align: center; middle
direction: rtl; right Snap
(rtl and LTR) right to left
Letter-spacing: 10px; letter-spacing
word-spacing: 10px; word spacing
line-height: 10px; line the distance between the (high line)
text-indent: 50px; first line indent
text-decoration: underline; text-decoration
(common attributes line-through overline underline)
text-transform: capitalize; capitalize the first letter of each word in
text-transform : uppercase; all uppercase
text-transform: lowercase; all lowercase
font-family: in bold; font name
font-size: 40px; font size
font-style: italic; font style italic
font-variant: small-caps; fonts small caps display
font-weight: 900; bold font
text-shadow: 1px 10px 10px red ; ( parameters are horizontal offset, vertical offset, (blur), color)
css using a transition
P {
width: 100px; (broad)
height: 100px; (high)
background-Color: AntiqueWhite;
}
P: hover {(when the mouse pointer passes)
width: 200px; (broad)
height: 200px; (high)
color-background: White;
transition-delay: 150ms; (delay)
transition-DURATION: 500ms; (transient change time)
transition-property: color-background; (color is only limited by the foregoing delay control attributes)
transition-timing- function: ease; (as well as ease-in, ease-out, ease-in-out, linear) velocity converting animation
}
EASE EASE EASE-in-in-EASE-OUT OUT
Create Animation
P {
width: 100px;
height: 100px;
background-Color: AntiqueWhite;
}
P: hover {
Animation-Delay: 200ms;
Animation-DURATION: lS;
Animation-name: XX;
Animation-Iteration-COUNT: Infinite; ( infinite loop)
Animation-direction: Alternate; (forward run first second third reverse running forward run ...)
}
@keyframes XX {(key frames)
from {(first)
width: 100px;
height: 100px;
background-Color: White;
}
50% {
width: by 150px;
height: by 150px;
background-Color: Yellow;
}
to {(the last time)
width: 200px;
height: 200px;
background-Color: Black;
}
}
Transformation using
P {
width: 100px;
height: 100px;
background-Color: AntiqueWhite;
}
P: hover {
width: 100px;
height: 100px;
background-Color: AntiqueWhite;
Transform: Rotate (30deg); (clockwise in graphics center 30 degrees rotation)
Transform-Origin: Top right; (disposed rotation center)
Transform: scale (for 1.5); (scaling graphics four weeks)
Transform: scaleX (. 5); (magnified in the x-direction)
}
Supplementary:
Opacity Opacity
animation-fill-mode: forward; ( animation will not return to its original form)
