Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
HTML + CSS common attributes
bold
<strong> Bold </strong><b> Bold </b>
italics
Text < em > < / em >< / I > < I > words
The underline
< < ins > words/ins >The text < u > < / u >
Delete the line
< del > text < del >
superscript
< sup > [number] < / sup >
The subscript
< sub > [number] < / sub >
Background properties
Background color property
Background-color:
Rgba (R, G,b,alpha) —->alpha is between 0 and 1 (0: fully transparent, 1: fully opaque)
Use: p {
Background-color :rgba(255,0,0,0.5)
}
Background image properties
Background-image:
Opacity is set with :opacity
Use: body {
Background - image: url (path)
}
Background image size Settings
- When the size of the background image is too small to fill an incomplete page, the image will be repeated by default to fill the whole page. In this case, use:
Background-repeat:no-repeat(You can also choose to repeat horizontally or vertically only). background-size:cover(Cover the entire page without destroying the original scale of the image).
Background image position
background-position:x,y
- X is greater than 0 and we move down,x is less than 0 and we move up
- Y >0 goes to the right,y<0 goes to the left
Css3 gradient property
The following properties create classes to be implemented in div
Linear gradient: background-image:liner-gradient(Gradient Angle, 1, 2… Color n) [Gradient Angle is in deG]
Use: background-image:liner-gradient(90deg, PINK, YELLOW)
Radial gradient: background-image:radial gradient(Radial shape, center position, color 1, color 2… Color n) [Gradient shape: Circle, ellipse]
Use: background-image:radial-gradient((circle at center,yellow 50%,white 75%)
Repeated linear gradient image: background-image: repeating-Linear-gradient ()
Repeated radial gradient image: background-image: repeating-radial radial gradient()
Set the rounded border: border-radius:10px 20px 30px 40px