CSS Base Style Summary

Use of colors and units

1. Color
   • Color is the name of the color, such as: red
   • Presentation with 16 notation example: #FF0000
   • RGB value for color, RGB (red, green, blue), each value is between 0-255
     Color is generally used in 16 notation
2. Unit
   • PX: pixels, related to resolution settings.
   • % relative to the percentage of the browser, you can set the width widths, can not be set to height

Text Style

1. Color: Set Text color
2. Text-align: Setting text alignment
   • Center
   • Left
   • Right
3. Letter-spacing: Word spacing/letter Spacing
4. Word-spacing: Word spacing, there are spaces on the set, Chinese see space.
5. Line-height: Row height (row height of second row = bottom of first row to top of third row)
6. Text-indent: General 30px is 2
7. Text-decoration: Text Decoration
   • Underline: Underline
   • Overline: Underline
   • Line-through: Strikethrough
   • Blink flashing (not used)
8. Text-transform: Case Conversion
   • Uppercase: All caps
   • Lowercase: all lowercase
   • Capitalize: Each word starts with a capital letter
9. Text-shadow: Create Text Shadow (horizontal offset px, vertical offset px, blur degree px, shadow color), blur degree px value is more blurred.
10. To set the font:

• Font-style: Font style italic,oblique italic
• Font-size: Setting the size of the font
• Font-weight: Sets the weight of the font, bolder the most coarse
• font-family: Set text font, italic, script, etc.
• Font Shorthand properties: Style weight size family (space) order must be in this format, generally use the shorthand attribute after the line spacing letter-spacing placed behind the Font property, otherwise it will be overwritten.

Borders and backgrounds

2. Apply a border to an element
   • Border-width: Border Width
   • Border-style: Border Style
     None No Border
     Dashed dashed line
     Solied Solid Line
     Double Two-wire
     Groove Groove Line
     Dotted dot line border
     Inset embedded outset outer convex
     Ridge Ridge Line Border
   • Bolder-color: Border Color
   • Abbreviated form border:width style color has no precedence
4. Set a border individually
   • Border-top/bottom/left/right-width/style/color
   • Abbreviated form: Border-top{width,style,color}
6. Apply rounded border (x-radius, y-radius, XY is the same when writing one is OK)
   • Border-top/bottom-left/right-radius
   • Abbreviation: Border-radius
8. Set the element background
   • margin-right:0px; margin-bottom:0px; padding-top:0px; padding-right:0px; padding-bottom:0px; List-style:disc; " >background-image:{url ("")} Background image address
   • Background-repeat: Background map repeating mode, General No-repeat
   • Background-size: Background Map size
   • Background-position: Background Map position
   • Shorthand: Background:color image repeat position, size does not write, conflict
10. Create a Box shadow
    • Box-shadow: Horizontal offset vertical offset blur value shadow extension radius shadow color 10px 10px 5px 0px red;
    • Add multiple shadows, immediately after the first one with a comma continue to write the second, the first set to an integer, the second shadow is set to a negative number
12. Setting outlines
    • Differences between borders and outlines: outlines do not belong to the page and do not adjust the layout of the page because they apply outlines
    • The bounding box occupies the actual size, the contour does not occupy
    • When setting hover hover, the contour-decorated div does not shift, and the border is decorated with displacement
    • Outline-color: Contour Color
    • Outline-style: Contour Style
    • Outline-width: Contour Width
    • Outline-offset: offset of outline distance element border
    • Abbreviation: Outline

Other styles (table, list, transparency, cursor)

1. Form
   • Border-collapse adjacent cell border processing, merging tables =collapse
   • Border-spacing: Adjacent cell spacing
   • Caption-side: Title Position
   • Empty-cells: Whether empty cells are displayed

2. List

   • List-style-tyle: Marker style dot in front of list, square dot, etc.
   • List-style-image: List image marker
   • Shorthand: List-style:none All properties of the Cancel list are generally used for navigation
   • Landscape Navigation: Li{display:inline}

3. Transparency

   • Opacity: Set transparency (values between 0-1)

4. Cursor shape

   • Cursors: Sets the cursor shape, when the cursor is placed on top of a Div, set the wait, hand shape and so on.

Box model

The box model is divided into elements, padding, borders, margins,

1. Set elements of a certain size

1). width:设置元素宽度2). height:设置元素高度

2. Set the inner margin

• Padding-top/bottom/right/left
• padding: Shorthand form

3. Set the margin (border to the edge of the browser or the distance to the next box)

• Margin-top/bottom/left/right
• Margin: Shorthand form

4. Set the minimum and maximum dimensions (when the width is set to a percentage, the browser is enlarged or scaled down or replaced with a large or small screen display, preventing elements from being mangled or overflowing)

• Min-width: Minimum value is two div width addition value
• Max-width: Maximum Value

5. Handling element Content Overflow

• Overflow-x/y:x or y-Axis overflow
• Overflow: Short form: Scroll set scroll bar (overflow processing mode)

6. Changing the element type

1). The element type is divided into:

• Inline elements: cannot be set to a wide height in the page, nor is it exclusive to a single line, B,span
• Inline-block inline block-level element: cannot have a single row, but can set the width height. img element
• Block-level elements: Exclusive row, can be set to the width of high, p,div elements

2). Change the element type display:

• Element types can be converted to each other, and the nature of the elements changes after conversion.
• Div is generally not converted into inline elements, will be discarded, can not set high

3). Hidden elements: Display:none

7. Floating and blocking element stacking

• Floating: Float:left/right
• Eliminate elements stacked together: Clear:both (both left and right removed)

8. Case:

The construction of Baidu page:

• Tip: To get the div centered, direct margin:0 auto;
• In order to initially do not perform browser default features: *{margin:0px; padding:0px}
• To prevent div block overflow, set the maximum minimum value. The minimum value is the left and right div additions
• Text vertically centered: Line-height
• Do navigation, link a tag to the outside of the LI tag

Layout style 1. Positioning mode Position

• Static: Default, elements are normal elements, document flow is positioned, top to bottom
• Relative (relative): The position of the element is relative to the location of the normal position, the position before the other elements can not be used, generally do not make too much change, the location of an element to fine-tune, only use top,left I feel that he is moving relative to his previous position

• Fixed: Relative to the browser window to locate, commonly used!!! , displacement before the position will not be occupied, up and down can be used, small ads commonly used techniques , the scroll bar constantly shifting, his position is unchanged, he will be out of the document flow, floating in the document flow top, He's up and down relative to the edge of the position, such as: top50px not move up 50px, but the element relative to the top border distance 50px settings Buttom also can be used, and the pull scroll bar will not change position

• Absolute (absolute): an ancestor element whose relative position value is not static, the stator element varies according to the ancestor element, the ancestor element cannot be static based on who changes, who cannot be static (default is static), occurs in a parent or Displacement positioning between ancestor elements and descendant elements

  2. Positioning the layout

  Top/bottom/left/right

  3. Z-index

  To set the number of display layers for elements and elements, positive negative numbers can be
  Must be used in conjunction with position

  Transition, deformation 1. Transition transition: An element is gradually changed from one style to another
  Property:
• Transition-delay: Set the delay before the transition
• Transition-duration: Setting Transition time
• Transition-property: Setting Properties for transition participation
• Transition-timing-function: Transition rate (linear constant)

• Transition: Abbreviated form (property duration timing-function delay)

  Reverse transition:

  Hover set in the, paste into the div, you can

2. Deformation

• Transform: Specify how to Deform
• transform:scalex/y (1.5) zoom 1.5 times times
• Transform:rotate (360deg) rotation 360 degrees Deg represents the degree, with the transition time effect is very good
• Transform:skew (x-axis angle, y-axis angle) tilt angle
• Transform:translate (x-axis distance, y-axis distance) moving distance

CSS Base Style Summary