Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities
(1) Text modification
① Text-shadow: text shadow
Value:
None (no shadow);
Length (x axis offset direction, Y axis offset direction, shadow blur radius (imaginary) can be omitted, plus a color can be omitted will automatically use text color);
② Text-decoration: underline
Value:
None (unlined);
Underline;
Overline C.
Line-throught C.
Note: Three lines can exist at the same time, do not interfere with each other, separated by a space
(2) Text advanced Settings
(1) text-overflow: set text overflow
Clip: Default value
Ellipsis :(overflow part set to three points)
Note: Text-overflow :ellipsis needs to be used in conjunction with overflow:hidden and white-space:nowrap to indicate that there is no newline and that overflow will be automatically hidden with “…” Alternative.
② Cursor: Define mouse shape
Value:
[and] images
Auto Default, automatic processing
Default Mouse cursor,
None disappear
It helps me
Pointer type hand
Zoom – in a magnifying glass
Zoom – out narrow mirror
Move An icon with four directions
Example:
cursor:pointer; Specifies the hand type
cursor:url(xx.cur), pointer; Is specified as a picture or pointer if the picture is invalid
This refers to the change when the mouse moves over the target area
③inherit: Mandatory inheritance
When the argument of a CSS property is inherit, the value of the parent element is forcibly inherited.
The reason is that some CSS attributes, such as border, do not inherit from the parent element. Using border:inherit in a child element forces the child element to use the border attribute of the parent element
(3) Alignment
(1) the text – align: value
Left (left aligned);
Right (right aligned);
Center;
Justify (requires more than one line, and does not justify the last line. Chinese characters change the spacing, and English adjusts the space between words);
②vertical-align
Value:
Baseline alignment;
Sub;
Super;
Top (align to the highest point of the current line);
Text-top (the highest point of text);
Middle (vertical center);
Buttom and text-buttom (corresponding to the above);
Percentage :(see line height, baseline);
Length :(e.g. 10px, baseline, 10px, negative, down)
③text-indent: first line indent
Value:
Length (1em is a text size, usually 2em; It can also be 10px, which means the indent is fixed. 10px is usually not used. If it is negative, it moves out of the container. If it is large, it leaves the browser.
Percentage specifies the width of the container. 20% is used to indent 20% of the width of the container.
④ White-space: space, line feed, TAB, whether to automatically wrap
Value:
Normal: Normal (determined by the browser). Usually, line breaks, tabs, and Spaces are combined into one space, which is automatically wrapped.
Nowrap: on the basis of normal, no line breaks (if a line does not fit, it will exceed);
Pre: Line breaks will be reserved, Spaces and tabs will be reserved, no automatic line breaks (completely reserved in the code format);
Pre-wrap: Allows automatic line wrapping based on the pre.
Pre-line: preserves line breaks, combines Spaces and tabs, and allows automatic line breaks.
⑤ Word-wrap: word wrap (but words remain intact)
Values: normal (no word wrapping), break-word (word wrapping is allowed);
Effect: If this line doesn’t fit, put it on the next line
⑥word-break: word wrap (word not intact)
Values: normal (unchanged), keep-all (similar to normal), break-all (any two letters are allowed to break).
Effect: If the line does not fit, the line is full, and the remaining letters are placed on the next line