css-background-gradient-text formatting

1. Background
1. Background color
Property: Background-color
Value: A valid color value
Note: The background color and background picture are initially populated from the border position by default
2. Background image
Property: Background-image
Value: URL (the path to the image);
Ex
Background-image:url (a.jpg);
3. Background image tiling
Property: Background-repeat
Value:
1.repeat Tiling
2.no-repeat uneven, show only once
3.repeat-x only in horizontal tiling
4.repeat-y only in Portrait tile
4. Background image size
Property: Background-size
Value:
1.value1 (W) value2 (h)
2.x% y%
3.cover zooms in on the background image until the background map is completely covered in all areas of the element.
4.contain zooms in on the background image until the background image touches an edge of the element.
5. Fixing the background image
Property: Background-attachment
Value:
1.scroll Default value, scrolling
2.fixed fixed
6. Background image positioning
Function: Change the position of the background in the element
Property: Background-position
Value:
1.x y
X: Offset distance of background graph in horizontal direction
Value is positive, move right
Negative value, move left
Y: Offset distance of background graph in vertical direction
Value is positive, move down
Value is negative, move up
2.x% y%
0% 0% background in upper left corner
100% 100% background in the lower right corner
50% 50% background in positive middle
3. Key words
X:left/center/right
Y:top/center/bottom
7. Shorthand Properties for backgrounds
Specify multiple property values in one property
Background:color URL () repeat attachment position;
Ex
background:red;
Background:url (a.jpg) no-repeat Fixed Center Center;
2. Gradients
1. What is a gradient
A gradient refers to a display effect that varies in a variety of colors.
2. The main factor of the gradient
1. Color Label: a color and where it appears
A gradient consists of multiple color labels (at least two)
3. Classification of gradients
1. Linear gradient
Fills the gradient in the direction of a line
2. Radial gradient
Fills the gradient in a circular way
3. Repeating gradients
Implement a gradient fill several times by repeating a linear or radial gradient
4. Linear gradient
Property: Backgrond-image
Value: Linear-gradient (Angle,color-point1,color-point2,...);
Angle: Indicates the direction or angle of the gradient fill
Value:
1. Key words
To top fills the gradient from the bottom up
To bottom fill gradient from top to bottom
To left fills gradient from right
To right fill gradient from left
2. Angle value
0deg from bottom up (equivalent to top)
180deg from top to bottom (equivalent to bottom)
Color-point: Color Standard
Represents a color and its location
Values: the color and position of the group and, in the middle with spaces separated.
Ex
Red 0px;
Blue 100px;
Green 200px;
5. Radial Gradient
Property: Background-image
Value: radial-gradient ([size at Position],color-point1,color-point2,...);
Size: Radius, number in px
Position: Center Position
1.x y: Specific numbers
2.x% y%: Ratio of element width to height
3. Key words
X:left/center/right
Y:top/center/bottom
6. Repeating gradients
1. Repeating linear gradients
Background-image:repeating-linear-gradient (Angle,color-point,...);
Color-point: The position must give the absolute value (px), do not use the percentage.
2. Repeating the radial gradient
Backgrond-image:repeating-radial-gradient ([size at position],color-point);
Practice:
Set aspect each 400px for a Div, and then set the repeating linear gradient background color.
7. Browser compatibility
New versions of each browser support gradient properties
For unsupported browser versions, you can increase the browser prefix to allow the browser to support gradients.
firefox:-moz-
chrome&safari:-webkit-
ie:-ms-
opera:-o-
Ex
Background-image:-webkit-linear-gradient ();

Www.caniuse.com
3. Text Formatting properties
1. Font properties
1. Specify the font
Property: font-family
Value: Separate the list of font names with commas
Ex
Font-family: "Microsoft Jas Black", "blackbody", Arial;
2. Font size
Property: Font-size
Value: The value in PX or PT
3. Font Bold
Property: Font-weight
Value:
1.bold Bold (b mark)
2.normal Normal
3.value hundred times the number 400-900
4. Font style
Property: Font-style
Value:
1.italic Italic (I mark)
2.normal Normal
5. Small Caps
The lowercase characters are capitalized, but the size is the same as lowercase characters.
Property: Font-variant
Value:
1.normal Normal
2.small-caps Small Uppercase characters
Practice:
Define a DIV element in the Web page and set the value ID to main, the content is arbitrary, Chinese and English combine
Set the following format:
1. Font: Microsoft Ya-Black
2. Text Size: 24px
3. Bold and Italic display text
4. Convert all lowercase characters to small uppercase characters
6. Shorthand method for font properties
Property:
Font:style variant weight size family;
Note: When you use shorthand, you must set the value of family, otherwise it is not valid.
ex:font:24px;//Error
Font:24px "Microsoft Jas Black";//Correct
2. Formatting of text
1. Text color
Properties: Color
Value: A valid color value
2. Text arrangement
Function: Specifies the alignment of the text (inline, inline block) in the horizontal direction.
Property: Text-align
Value: left/center/right/justify (Justified)
3. Line Decoration
Property: Text-decoration
Value:
1.none without any line decoration
2.underline Underline
3.overline Dash
4.line-through Delete Line
4. Row height
Effect: The height of a row of data
If the row is taller than the size of the font itself, the line text will appear vertically centered within the specified row height.
Property: Line-height
Value: The value in PX units
5. Indent text in the first line
Property: Text-indent
Value: The value in PX units
6. Text Shadows
Property: Text-shadow
Value: H-shadow v-shadow blur color;
Practice:
On the basis of the above text practice, add the following effect:
1. Text is aligned in both ends
2. The text is decorated as an underscore
3. Set the row height to 100px and observe the text effect after setting the line height
4. Text shadow, horizontal and vertical offset 0px, blur distance of 3px, color red
4. Forms
1. Common Properties of tables
1. Margin Properties: Padding
2. Border properties: Border
3. Dimension properties: Width,height
4. Text Formatting properties: Font-*,text-*,line-height
5. Background properties: Color, picture, gradient
6.vertical-align
Function: Specifies the vertical alignment of cell data
Value:
Top: Align Top
Middle: Center Alignment
Bottom: Bottom Align

css-background-gradient-text formatting