Home > Developer > JavaScript
CSS knowledge Summary (3) and css knowledge Summary
Common CSS styles
1. Font Style
1)Font-family)
Font-family: <family-name>
Set the text name. You can use multiple names orCommaSeparated, and the browser uses available fonts in sequence.
If the font name contains spaces or Chinese characters, useQuotation marks.
Example source code:
/* CSS Code */p {font-family: "", "";}
<! -- HTML code --> <body> <p> text, which is a symbol that carries the language. </P> </body>
Effect:
Text is the symbol that carries the language.
2)Font-size)
Set the text size
Font-size: <length >|< percentage>
<Length>: Specify the text size with the length value. Negative values are not allowed.
<Percentage>: Specify the text size by percentage. The percentage value is based on the font size of the parent object and a negative value is not allowed.
Example source code:
/* CSS Code */. length {font-size: 20px;}. percentage {font-size: 20px;}. percentage span {font-size: 60% ;}
<! -- HTML code --> <body> <p class = "length"> text is a symbol that carries the language. </P> <p class = "percentage"> text, <span> is the symbol that carries the language. </Span> </p> </body>
Effect:
Text is the symbol that carries the language.
Text is the symbol that carries the language.
3)Font-weight)
Control font width
Font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
Normal: normal font, equivalent to 400 digits
Bold: bold, equivalent to 700 digits
Bolder: defines a value that is heavier than the inherited value.
Lighter: defines a value that is lighter than the inherited value.
** We recommend that you use "bold ".
Example source code:
/* CSS Code */. normal {font-weight: normal;}. bold {font-weight: bold ;}
<! -- HTML code --> <body> <p class = "normal"> This is a normal font </p> <p class = "bold"> This is a bold font </p> </body>
Effect:
This is a normal font
This is a bold font.
4)Font-style)
Determines whether the font is skewed.
Font-style: normal | italic | oblique
Normal: Specifies the text font style as a normal font.
Italic: specifies that the text font style is italic.
Example source code:
/* CSS Code */. normal {font-style: normal;}. italic {font-style: italic ;}
<! -- HTML code --> <body> <p class = "normal"> This is a normal font </p> <p class = "italic"> This Is A italic font </p> </body>
Effect:
This is a normal font
This is an italic font.
5)Font)
Font: font-style | font-variant | font-weight | font-size |/line-height | font-family
For example:
/* CSS Code */p {font-style: italic; font-weight: bold; font-size: 14px; line-height: 22px; font-family: "";}
Abbreviation:
/* CSS Code */p {font: italic bold 14px/22px ""}
6)Font color (color)
Color: <color>
Color Attribute values are divided into three formats:
1. English words, such as red, yellow, green...
2. hexadecimal representation, starting with #, with a combination of six hexadecimal characters or numbers, for example: # FFFFFF
3. RGB mode, red 0-255, green 0-255, and blue 0-255, for example, RGB (, 34, 56)
RGBA mode. The last A indicates transparency, for example, RGBA (0.5, 0)
Example source code:
/* CSS Code */p {color: red ;}
<! -- HTML code --> <body> <p> text, which is a symbol that carries the language. </P> </body>
Effect:
Text is the symbol that carries the language.
7)Text-decoration)
Control text decoration lines
Text-decoration: none | underline | blink | overline | line-through
Underline: underline
Overline: dashes
Line-through: strikethrough
Example source code:
/* CSS Code */. sup {text-decoration: overline;/* dashes */}. del {text-decoration: line-through;/* strikethrough */}. sub {text-decoration: underline;/* underline */}
<! -- HTML code --> <body> <p class = "sup"> This is an upper line </p> <p class = "del"> This Is A strikethrough line </p> <p class = "sub"> This is an underline </p> </body>
Effect:
This is an upper line
This is a strikethrough.
This is an underline.
8)Text-shadow)
Controls the shadow part of a text
Text-shadow: h-shadow v-shadow blur color;
H-shadow: required. The position of the horizontal shadow. A negative value is allowed.
V-shadow: required. Vertical shadow position. Negative values are allowed.
Blur: Optional. Fuzzy distance.
Color: (optional) color of the shadow.
Example source code:
/* CSS Code */. shadow {font-size: 20px; font-weight: bold;/* color: transparent; * // * transparent font */text-shadow: 3px 3px # b28118; /* Horizontal Distance Vertical Distance fuzzy distance color */}
<! -- HTML code --> <body> <p class = "shadow"> shadow </p> </body>
Effect:
Shadow
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
