This is the fourth day of my participation in Gwen Challenge
Here is a summary of the CSS properties used in the work, and organized into a table:
The text
| The property name | describe |
|---|---|
font-size |
Setting text size |
font-family |
Setting the text font |
font-style |
Setting text Styles |
font-weight |
Set the text thickness |
font-variant |
Sets the text small uppercase style |
color |
Set the text color |
line-height |
Sets the text line height |
text-decoration |
Set the text modifier |
text-align |
Sets the text alignment |
text-transform |
Setting the text case |
text-indent |
Sets the indentation of the first line of text |
font |
Sets the text compound property |
font-sizeattribute
font-sizeAttribute values |
Attribute value description | The instance |
|---|---|---|
Positive px. |
Fixed value size pixels | font-size: 30px; |
Positive % |
Based on the size of the parent object text | font-size: 150%; |
font-familyattribute
font-familyAttribute values |
Attribute value description | The instance |
|---|---|---|
The name of the font |
In order of priority.Separate, if the font name contains Spaces, use parentheses |
Font-family: Consolas, Regular script, "Century Gothic", Serif; |
font-styleattribute
font-styleAttribute values |
Attribute value description | The instance |
|---|---|---|
normal |
Default value, normal text | font-style: normal; |
italic |
In italics. For special text without italic variables, oblique is applied | font-style: italic; |
oblique |
Sloped text | font-style: oblique; |
font-weightattribute
font-weightAttribute values |
Attribute value description | The instance |
|---|---|---|
normal |
The default value is normal thickness | font-weight: normal; |
bold |
The bold | font-weight: bold; |
bolder |
thanboldMore thick |
font-weight: bolder; |
lighter |
The thin body | font-weight: lighter; |
100-900. |
Define text from thin to thick,400Is equivalent tonormal ， 700Is equivalent tobold |
font-weight: 500; |
font-variantattribute
font-variantAttribute values |
Attribute value description | The instance |
|---|---|---|
normal |
Default value to display standard text | The font - variant: normal; |
small-caps |
Displays text in small uppercase letters | The font - variant: small - caps; |
colorattribute
colorAttribute values |
Attribute value description | The instance |
|---|---|---|
The color of |
Specifies the color of this color name | color: red; |
rgb() |
Specifies the RGB format color | Color: RGB (44,44,144); |
rgba() |
Specifies the RGBA format color | Color: rgba (44,44,144,0.8); |
#eddd22 |
Specifies the color in hexadecimal format | font-style: #ed22cc; |
line-heightattribute
line-heightAttribute values |
Attribute value description | The instance |
|---|---|---|
normal |
Default value, default line height | line-height: normal; |
Positive px. |
Specifies how many pixels the row height is | line-height: 30px; |
A positive number |
Specifies that the line height is a multiple of the text size | The line - height: 1.5; |
text-decorationattribute
text-decorationAttribute values |
Attribute value description | The instance |
|---|---|---|
normal |
Default value, no decoration | text-decoration: normal; |
underline |
The underline | text-decoration: underline; |
line-through |
Through the line | text-decoration: line-through; |
overline |
On the line | text-decoration: overline; |
text-alignattribute
text-alignAttribute values |
Attribute value description | The instance |
|---|---|---|
left |
Default, left justified | text-align: left; |
center |
Align center | text-align: center; |
right |
Align right | text-align: right; |
text-transformattribute
text-transformAttribute values |
Attribute value description | The instance |
|---|---|---|
none |
The default value is not converted | text-transform: none; |
capitalize |
Capitalize the first letter of each word | text-transform: capitalize; |
uppercase |
Convert to uppercase | text-transform: uppercase; |
lowercase |
Lower case | text-transform: lowercase; |
text-indentattribute
text-indentAttribute values |
Attribute value description | The instance |
|---|---|---|
Positive px. |
How many pixels to indent the first line | text-indent: 60px; |
Positive em |
How many characters to indent the first line | text-indent: 2em; |
fontattribute
fontAttribute values |
Attribute value description | The instance |
|---|---|---|
font-style font-variant font-weight font-size/line-height font-family |
Sets the compound properties of the text (note the positional order of the property values, exceptfont-size 和 font-familyAny other attribute values can be omitted.) |
Font: italic small-caps bolder 20px/100px 宋体; |
font-size font-family |
Same as above | Font: 20px in black; |
background
| The property name | describe |
|---|---|
background-color |
Set the background color |
background-image |
Setting the background image |
background-repeat |
Set the background image tiling mode |
background-position |
Sets the background image position |
background-attachment |
Sets the background image scroll position |
background |
Sets the background compound properties |
background-colorattribute
background-colorAttribute values |
Attribute value description | The instance |
|---|---|---|
transparent |
Default value, background color transparent | background-color: transparent; |
#ae8686 |
Specify the background color | background-color: #ae8686; |
background-imageattribute
background-imageAttribute values |
Attribute value description | The instance |
|---|---|---|
none |
Default value, no background image | background-image: none; |
url() |
Specifies the absolute or relative background image URL | background-image: url(".. /images/qt_06_background-image1.jpg"); |
background-repeatattribute
background-repeatAttribute values |
Attribute value description | The instance |
|---|---|---|
repeat |
Default, background image in combination landscape and portrait tiling | background-repeat: repeat; |
no-repeat |
Background image not tiled | background-repeat: no-repeat; |
repeat-x |
The background image is only tiled horizontally | background-repeat: repeat-x; |
repeat-y |
The background image is tiled vertically only | background-repeat: repeat-y; |
background-attachentattribute
background-attachentAttribute values |
Attribute value description | The instance |
|---|---|---|
scroll |
By default, the background image scrolls as the page moves | background-attachment: scroll; |
fixed |
When the page scrolls, the background image does not scroll | background-attachment: fixed; |
background-positionattribute
background-positionAttribute values |
Attribute value description | The instance |
|---|---|---|
X-axis px,left,center,right Y-axis PX,top,center,bottom |
Specifies the position of the background image, tiled asno-repeat |
background-position: 30px center; |
backgroundattribute
backgroundAttribute values |
Attribute value description | The instance |
|---|---|---|
color image repeat attachment position |
Set all background properties | background: #ae8686 url(".. /images/im1.jpg no-repeat fixed center center"); |