CSS There are specific routines for the beautification of page elements. We need to memorize some common CSS properties to quickly and elegantly implement complex styles. This video will introduce you to some style properties that are often used in CSS.
Text and paragraphs
First of all, let's look at the attributes related to text and paragraphs. These are very important, because whether it is a website or an app, information is transmitted through content, and the quality of the text style directly affects the efficiency of information transmission.
"Load local fonts"
In CSS, loading local fonts uses the font-family attribute, which is usually defined in order from special to general, because CSS will start from the first in the list Start looking for supported fonts. For example, the English font on the website uses Arial, and the Chinese font uses Microsoft Yahei. Then the Chinese font needs to be placed at the back, because Microsoft Yahei also includes English fonts. If it is placed first, it will not use Arial font anymore. . It should be noted that if there is a space in the middle of the font name, double quotes are required. Finally, a guarantee option is usually set, such as sans-serif, using the default sans-serif font.
"Load web font"
In addition to loading local fonts, CSS can also load web fonts, use the @font-face directive, and then specify the font name and url path in it, which can be local or On the Internet, you can use font-family to load this font in other styles.
@font-face {
font-family: 'webfont';
src: url('webfont.woff');
}
font-family: 'webfont';
< strong >Color
Set the font color using the color attribute.
"Size"
Set the font size using the font-size attribute.
"Character spacing"
Set character spacing using the letter-spacing attribute.
"Text Direction"
Set the text direction using the writing-mode attribute, you can use vertical-rl to set it to the vertical direction, read from right to left, combined with text- orientation Attribute, you can keep the text vertical or slanted.
"Text Styles"
To set the text style, you can use the text-decoration attribute, such as setting to none to cancel the underline of the hyperlink. In addition, you can also set overline Overline, line-through Middle line, and you can set multiple. You can also set the shape and color of the line.
Let's look at paragraph styles, which apply to multi-line text.
"Line Spacing"
Set line spacing using the line-height attribute.
"Indent"
Indentation can be set using the text-indent attribute.
"Wrap line"
You can use the white-space attribute to control text wrapping, and nowrap means not wrapping.
"Omit"
To set text omission, you need to set white-space to nowrap without wrapping, and then set overflow to hidden to hide the excess. Finally set text-overflow to display ellipsis for ellipsis.
"Alignment"
You can use the text-align attribute to set the text alignment, which can be left-aligned, right-aligned, center-aligned and justified at both ends.
Background
Set Background Color
Set the background color using the background-color attribute, you can set the hexadecimal color, you can also use the color function rgb, rbga (with transparency), linear -gradient (gradient color) set the color (should be set in background-image or background short form).
"Load background image"
Load the background image using the background-image attribute to load a local or remote image through the url function.
"Adjust background size"
To adjust the background size, you can use the background-size attribute. If the size is smaller than the container, it will be tiled automatically.
"Adjust background fill"
Use the background-repeat attribute to adjust the background image filling style, no-repeat means no repeated tiling, and can also be set separately repeat-x, repeat-y to set tiling in horizontal or vertical direction.
"Adjust background position"
After the background image is loaded, you can set the position of the image through the background-position attribute, which can be up, down, centered, or you can set a specific value , and multiple values can be set. Sprite maps are usually implemented using this property.
"Adjust background stretching"
You can use the background-size attribute to adjust image stretching, set it to contain to scale the image to fill the entire container, And there will be no distortion or cropping, but there may be white space. Setting it to cover will also make the image fill the entire container as much as possible, but will crop the part beyond the container.
The last of these attributes can be set in the background shorthand form.
Overflow
The width and height of the element will be automatically adjusted according to the content by default , if the width and height of the element are fixed, if you want to hide the overflow content or display the scroll bar, you can use the overflow attribute to set the display mode of the overflow content. The default is visible display, even if it exceeds Maximum width or height. hidden is not displayed. scroll will display the scrollbar. In addition, you can set the overflow-x and overflow-y attributes respectively to set the content representation beyond the fixed width or fixed height.
Border
You can use the short form of border to set borders for elements. You can set border-width border width and border-style border style respectively, which can be solid Solid line, dotted dashed line, border-color border color. In addition, you can also use border-top , border-top-style to set the style of a single border respectively.
shadow
You can use the box-shadow attribute to set the shadow on the element, and the values behind it are horizontal offset, vertical offset, blur radius, and diffusion radius. Alternatively multiple shadows can be set separated by commas.
pointer
You can use the cursor attribute to set the pointer, pointer is the shape of a small hand, wait is the waiting effect, and some other built-in pointers. In addition, you can also use the url function to load a custom pointer image, and set the x, y coordinates to determine the pointer area.
list
To change the style of the unordered list, you can set the list-style attribute, which can be set to a square square, or use the url() function to load a custom image.
Okay, these are the style attributes commonly used in CSS. Now you know what they are. When you see the design draft, you should know how to implement a certain style . Next, you can check their more detailed usage on w3schools or MDN to achieve more complex styles.
If it helps, please pay attention, thanks!
Click to read the original text/scan the code to view the supporting video text, technical tutorials, practical courses, resource navigation and gadgets of station B! https://zxuqian.cn
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Animated%20explanations%20of%20CSS%20common%20style%20properties%20quickly%20master%20all.html
支付宝扫一扫 
评论列表（196条）
测试