Common CSS font attributes: introduction to background-origin and background-clip

(1) Commonly used fontsAttributes:

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　font-weight: Attribute value 100-900 400 is equal to normal 700 is equal to bold, the larger the value, the stronger Thick

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　duct number , the unit can be px or %

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Italic italic normal ʻNormal ʻ font-variant:sm

all

-caps will Letters are converted into smaller letters 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　credular: All attributes can also be written through one attribute of font, for example:

　　　　　　 Font: italic bold 75%/1.8 'Microsoft Yahei',sans- serif, the order of writing: font-style font-variant font-weight font-size line-height font-famiyl, multiple styles are separated by spaces, they must be written in this order , font-size and line-height must be separated by /

(2) Font color: color: attribute value can be written in color English, for example: red

　　　　or rgb(0-255 ,0-255,0-255);　　　　Or rgba(0-255,0-255,0-255,0-1);0 means transparent, 1 means opaque　　　opacity :0-1; also means transparency. The difference with rgba() is that this attribute will act on descendant tags, while rgba() will not

(3) Line spacing and alignment

　　　　 Line-height (line height): a. Pixels Unit, such as 48px b. Without px multiples of normal line height c. Percentage is the same as b (Adjust

Control

The way to vertically center Chinese text, the height of the control = the line-height of the control)

　　　　

text-align

(Alignment): Horizontal alignment of text in block-level elements

left

center right

　　　letter -spacing (character spacing): the distance between words　　　text-decoration (text modification): underline underline

delete

line-through Overline overline none (you can remove the underline of hyperlink)

　　　　overflow: Control the display mode of out-of-range text, auto automatically displays the scroll bar according to the amount of text, scroll always displays the scroll bar, and hidden out-of-range text is hidden. You can also set the horizontal and vertical directions through overflow-x, overflow-y

　　　　text-overflow : Set the display method of excess text, clipCut it off, ellipsis, (emphasis is, let each line of excess text display ellipsis, a.white-spacing:nowrap b.overflow:hiddern text- overflow:ellipsis)　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　creduce another 4 attribute values ​​​​: (4 attribute values: horizontal shadow distance, vertical shadow distance, blur distance, shadow color) The shadow of the text, the first 2 attribute values ​​​​cannot be omitted. The larger the horizontal shadow distance, the shadow moves to the right. The greater the vertical shadow distance, the shadow moves downward. Shadow blur distance. The larger the value, the blurr the shadow. The default is 0, no blur. Shadow color, selectable, default is black

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　#　　　　　　　　・ number by the number ▲| Thickness, stroke color　　　　　white-space:nowarp Set the Chinese line to be displayed continuously at the end (Chinese defaults to automatic line wrapping, English will not automatically wrap, and will automatically wrap according to spaces)

　　　　word-break: The browser breaks lines at spaces by default. When the length of a word exceeds the range, it will be displayed continuously. break-all allows line breaks within words

( 5) Background style:

Picture): url (the address of picture), the background picture and the background color exist at the same time, the background picture will cover the background color

　　　　　　background-repeat（Background picture repetition method ): no-repeat (non-tile) repeat-x (horizontal tile) repeat-y (vertical tile) repeat tile (default)

　　　　　　　background-position(position coordinates, Offset has 2 attribute values: horizontal and vertical): Specify position: left/center/right, you can write pixels or percentages, only write one attribute value, the default is horizontal direction, the other direction defaults to vertical center (Note: When using pixels, the actual distance that the upper left corner of the image moves in each direction. When using percentages, it is recommended not to use negative numbers, which represent the distribution ratio of the remaining blank distance after removing the image, for example: background-positon: 30% removed in the horizontal direction After the picture, the remaining area is 3:7 minutes) 　　　　

top

/center/bottom When only one attribute value is written, the other one will be centered by default

　　　　　background-clip :border-box (Start from the outer edge of the border)

padding

-box (Start from the inner edge of the border) content-box (Start from the text content, Background images or background colors that are not in the display area will be cropped and not displayed)　　　　　　background-origin: starting point of positioning border-box (starting from the outer edge of the border) padding-box (starting from the outer edge of the border) Inner edge of the border) content-box (starting from the text content area)

　　　　　　　background-size: The size of the background image generally has two attributes: width and height. When there is only one attribute value, the default Scale the width and height proportionally How to write width and height: a. Directly write pixels b. Write percentage (percentage of parent container width and height)

The above is the detailed content of Common CSS font attributes: introduction to background-origin and background-clip. For more information, please follow other related articles on the PHP Chinese website!