Day 4 - Style Changes

一、背景（background：background-color  background-image  background-position  background-repeat  background-attaachment）：

• background-color: Set a solid color.
• background-image: Background image: static image - url (address where the image is located);
•                                          Gradient - lilnear-gradient (to bottom left, one color, another color 40% - the percentage can be added or not, indicating when to gradient);
• background-position: Background position (horizontal position vertical position, write only one for horizontal position):                     
• • Absolute values ​​like px - eg  background-position: 200px 25px.
  • Relative values ​​like rems - eg  background-position: 20rem 2.5rem.
  • Percentage - eg  background-position: 90% 25%.
  • Keywords - eg  background-position: right center. These two values ​​are intuitive and can take values ​​such as  left, center,  rightand  top, center,  respectively bottom.
• background-repeat: Background repeat (tiling): no-repeat, repeat-x (horizontal repeat), repeat-y (vertical repeat).
• background-attachment: scroll:
• • scroll: This will modify the background to the page view, so it will scroll as the page scrolls. If you scroll the element where the actual background is set, not the page, the background will not scroll.
  • fixed: This fixes the background on the page's position, so when the page scrolls, it doesn't scroll, it stays in the same position whether you scroll the page or the element the background is set to.
  • local: sets the background to the background of the element it's set to, so when you scroll the element, the background scrolls with it.
    
• background-size: Allows dynamic resizing of background images: available px, percentage, rem.

Second, the border (border):

• border： border-width（宽度 1px）  border-style（样式 solid dotted等）  border-color；
• border-radius: border radius, px, rem, %, similar to 10px when the size and height are equal, it is a circular border, similar to 10px/20px is an ellipse.

• border-image：border-image-source     border-image-slice      border-image-repeat；边界图像：

1. border-image-source: url (image address); set the image.
2. border-image-slice: 40; Set the slice size.
3. border-image-repeat：

• stretch: Default; the side image is stretched to fill the border. This usually looks bad and pixelated, so it's not recommended.
• repeat: The edge image is repeated until the border is filled. Depending on the situation, this might look fine, but you might see some ugly image fragments.
• round: The image of the edges is repeated until the border is filled, they are all stretched slightly so that there is no fragmentation.
• space: The edge image is repeated until the border is filled, adding a small amount of space between each copy so that no fragments appear.

3. List ul/ol:

• list-style-type: Set the symbol type, such as square or circular bullets for unordered lists, or numbers, letters, or Roman numerals for ordered lists.
• list-style-position: Set position: inside or outside (default) .
• list-style-image: custom image: url().

Additional rules:

1. <ol start="4">Starting from 4, the numbers are 4,5,6...
2. <ol start="4" reversed> The countdown starts from 4, and the numbers are 4, 3, 2...
3. <li value="4">Custom value.

4. Links:

• Link (unvisited) : This is the default state of a link, when it is not in any other state, it can use a :link pseudo-class to apply styles.
• Visited : The link has been visited (existing in the browser's history), it can be  :visited styled using a pseudo-class.
• Hover : When the user's mouse cursor is just over this link, it can use a  :hover pseudo-class to apply styles.
• Focus : When a link is selected (such as by  Tab  moving the keyboard to the link, or using a programmatic method to select the link  HTMLElement.focus()) it can use  :focus pseudo-classes to apply styles.
• Active : When a link is activated (eg when clicked), it can use a  :active pseudo-class to apply styles.

LoVe Fears HAte.