I hope I can grow up with everyone in CSDN. If there are mistakes, please criticize and advise!
The full name of CSS is Cascading Style Sheet in English, and it is translated as "Cascading Style Sheet" in Chinese. Based on HTML, CSS provides a wealth of functions, such as font, color, background control and overall layout, etc., and different styles can be set for different browsers. I learned the font style properties in CSS and CSS3 Basic Knowledge (1) (click to review), now let's learn CSS text appearance properties together!
1.color: text color
There are three ways to select values: predefined color names: such as red, green, etc.
Hexadecimal, such as #ff000, etc.
RGB code, such as red can be expressed as rgb(255,0,0) or rgb(100%,0,0), namely red, green and blue.
2.letter-sapcing: word spacing
The attribute value can be a numerical value in different units, negative values are allowed, and the default is normal.
3.word-spacing: word spacing
It is used to define the spacing between English words and is invalid for Chinese characters. The attribute value can be a numerical value in different units, negative values are allowed, and the default is normal.
4.line-height: line spacing
Line spacing is the distance between lines, that is, the vertical distance of characters
5.text-transform: text transformation
Used to control the case of English characters, the attribute values are as follows:
none: no conversion
capitalize: capitalize the first letter
uppercase: convert all characters to uppercase
lowercase: convert all characters to lowercase
6.text-decoration: text decoration
It is used to set the underline, overline, strikethrough and other decorative effects of the text. The available attribute values are as follows:
none: no decoration
underline: underline
overline: overline
line-through: strikethrough
*If you want the text to have both underline and strikethrough effects, you can write underline and line-through at the same time after the attribute.
p{text-decoration:underline line-through;}
7.text-align: horizontal alignment
Used to set the horizontal alignment of the text content, which is equivalent to the align attribute in HTML. The available attribute values are as follows:
left: Left alignment (default)
right: Right aligned
center: center aligned
8.text-indent: text indent
Used to set the indentation of the first line of text. Its attribute value can be a value in different units, a multiple of the em character width, or a percentage relative to the width of the browser window. Negative values are allowed. It is recommended to use em as the setting unit.
*The text-indent attribute is only applicable to block-level elements and is invalid for inline elements (block-level and inline elements will be added in future blogs)
9.white-space: White space handling
*When you make a web page in HTML, no matter how many spaces you write, the browser will only display one at the end. All we need to set the white-space processing method of CSS white-space, its attribute values are as follows:
normal: Spaces and blank lines in the text are invalid, and automatically wrap after full lines
pre: pre-format, keep spaces and blank lines as they are according to the writing format of the document
nowrap: Spaces and empty lines are invalid, and the forced text cannot be wrapped unless it encounters a newline tag<br/>. *The content will not wrap if it exceeds the label boundary, and the scroll bar will automatically increase if it exceeds the browser page
10.text-shadow: shadow effect
Used to add shadow effects to the text on the page, the basic syntax format is as follows:
Selector {text-shadow:h-shadow (horizontal shadow distance) v-shadow (vertical shadow distance) blur (blur radius) color (shadow color)}
Give a chestnut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影效果</title>
<style type="text/css">
.one{
font-size: 60px;
text-shadow:10px 5px 10px #6600ff;
}
</style>
</head>
<body>
<p class="one">这就是阴影效果</p>
</body>
</html>
****Note: When the horizontal and vertical distance parameters of the set shadow are both positive, the projection direction of the shadow is in the lower right corner. When it is negative, it is in the upper left corner. The shadow blur radius parameter can only be a positive value, and the larger the value, the larger the outward blur range of the shadow.
11.text-overflow: indicates the overflow of text in the object
Used to indicate the overflow of the text in the object, the available attribute values are as follows:
ellipsis: Use the ellipsis tag "..." to mark the constructed text, and the position where the ellipsis tag is inserted is the last character
clip: Construct overflow text without displaying the omitted tag "..."