First, the text style: 1. Text-index: Indent text
- To indent the first line of the paragraph.
- Value: Text-index:2em (twice times the parent element); 10% (10;10px of the parent width;
- Can be used only for block-level elements, not for inline elements, image elements. If the first row of a block-level element has an image, it moves with the text.
- Use a negative value to achieve "hanging indent".
2. Text-align: Horizontal Alignment
- Value:
- Left: Right-aligned, default value.
- Right: Align to the left.
- Center: Center.
- Justify: Justify on both sides.
3. Word-spacing: Word (Word) interval
- Value: Normal: Regular interval, default value, its value and set 01 like.
- The value can be positive and negative, increasing the interval at positive time, and narrowing the interval when negative.
4. Letter-spcing: Letter Spacing
- The interval between characters or letters is modified.
- The value is the same as the word-spcing.
5.text-transform: Character conversion.
- Value:
- None: Default value, no change.
- Uppercase: Convert all caps.
- Lowercase: convert all lowercase.
- Capitalize: Capitalize the first letter of each word.
6.text-decoration: Text decoration.
- Value:
- None: Default value.
- Underline: Add underline.
- Overline: The text is underlined at the top.
- Line-through: Through line.
- Blink: Text flashes.
- Different decorations Act on the same element, and their values are replaced without accumulating.
7. Direction: Text Direction
- Indicates in which direction the text begins to appear.
- Value:
- LTR: Left-to-right, default value.
- RTL: Right-to-left.
8. Color: Text Colors
- Value:
- Color name (Color-name): such as red.
- 16 binary color (hex-number): #ff0000
- RGB color: rgb (255,0,0)
9. Line-height: Row Height
- Value:
- Normal: Default, reasonable line spacing
- Number (set digit): The number is multiplied by the font size to set the line spacing.
- Length: Fixed line spacing can also be set, such as 20px;
- %: The percent line spacing based on the current font size.
Vertical-align: Vertical Alignment
- Value:
- Top,bottom: To the top line to align, the bottom line;
11.text-shadow: Text Shadow
- Syntax: text-shadow:10px 20px 30px Red;
- Where: 10px represents the horizontal extension distance. The 20px represents the vertical extension distance. 30px represents the Blur value.
Second, the background style 1. Background-color: Background color
- Value: The same as the color value. The difference is that the default value is transparent (transparent).
2.background-image: Background image
- Value:
- None: Default
- Background-image:url ("path") Setting the background
3.background-repeat: Image Tiling
- Premise: When the background map is smaller than the label
- Take value
- No-repeat: No repetition
- Repeat-x: Repeat in horizontal direction
- Repeat-y: Repeat in vertical direction
- Repeat: Repeat all (default)
4. Background-position: Background positioning
- Changes the position of the image in the background.
- Value: Top bottom left right length value and so on.
5. Background-attachment: Background correlation
- Value:
- Fixed: Background invariant, does not move with text movement
- Scroll: Moves with text scrolling
- Local: With text scrolling, the background will gradually fade out after the background.
6.background-size: Background Image size
- Value:
- Cover: Enlarges the image to cover the background area (some out-of-section cannot be displayed)
- Contain: Scaling the image to fit the content area
- Auto: Keep the original image size
- Values, such as background-size:80px 60px; where 80px is wide and 60px is high
- %
7.background-origin: Refers to where the image is positioned relative to, setting the background rendering area
- Value:
- Content-box: Content Area
- Padding-box: Filled box area
- Border-box: Border Box Area
8. Background gradient ① linear gradient: background:linear-gradient (to top,green,red,.. ）
- Among them, to top: from the bottom to the top, indicating direction, you can also take values: to bottom, or with degrees: such as 45deg (ie 45 degrees)
- Repeating gradients: repeating-linear-gradient (to Top,green 10%, Red 15%,blue 20%)
- Where it represents green to the red gradient region, and 15–20% represents red to the blue gradient region
② Radial Gradient:
- Syntax: background:radial-gradient (center,shape size 5%,start-color 10%,....,last-color)
- Where: Shape defines shapes, values: Circle Circle, Eclipse: ellipse (default)
Three, font style 1. Font-style: Text italic settings
- Value:
- Normal: Regular font
- Italic: Italic
- Obligue: Make text italic (for fonts without italic characters)
2. Font-variant: Defines whether the text of an element is a small uppercase letter
- Value:
- Normal: OK
- Small-caps: Small Caps
3.font-weight: Font weight
- Value:
- normal:400
- Bold: Boldface, equivalent to 700
- Bolder: Heavier than inherited values
- Lighter: Lighter than inherited values
- In numerical notation, the value is 100 200 300 400 500 600 700 800 900
4.font-size: Font Size
5.font-family: Font Name
- Value:
- Font Name: If the name is in Chinese or white space, enclose it in quotation marks
- Font sequence Name
- Reference font:
font-face{
font-family: "F53"; F53 Custom Name
Src:url ("path");} font file path
- Liner Body: serif: With pen flicks
- Non-liner body: sans serif no pen flicks
Four, border style 1. Border-width: Border Width
- Value:
- Length value, cannot be negative
- Medium: Default Border, 3px
- Thin: 1px thinner than the default
- Thick: 5px Thicker than default
2.border-style: Border Style
- Value:
- None: No contour
- Hidden: Hide Border
- Dotted: dot-shaped contour
- Dashed: Dashed outline
- Solid: Solid Line
- Double: two-wire
- Groove:3d Groove Profile
- Ridge:3d Spit Groove Contour
- INSET:3D Concave Edge
- Outset:3d Convex Edge
- To draw a triangle with a border:
{width:0px; height:0px; border-top:30px solid transparent; border-left:30px solid transparent; border-right:30px solid red; border-bottom:30px solid transparent;} 3.border-color: Border color 4.box-shadow: Shadow
- Value:
- None: No shadows
- Inset: Inner shadow, otherwise outer shadow
- box-shadow:10px 10px 20px 5px darkgray inset;
- The first length value defines the shadow horizontal offset, positive value is right, negative value is left
- The second length value defines the shadow vertical offset, the positive value is the bottom, the negative is the top
- The third length value defines the shadow blur value radius, and the larger the value, the greater the blur, and the negative values are not allowed
- The fourth length value defines the shadow Epitaxy value, and the positive values are four-sided, and negative values shrink inward.
5. Border-radius: Defining rounded borders
- Value:
- Length value: Defines the circle radius or ellipse half-length axis, half-short axis, non-negative value
- Percentage percent, width of element in horizontal direction, height of contrast element in vertical direction
{width:50px;height:50px; border:5px solid red; Border-radius:50%;} V. List style 1.list-style: Setting list-related content
- Syntax: List-style:type position image;
2.list-style-type: Setting list Markers
- Value:
- Disc: Solid Circle
- Circle: Hollow Circle
- Square: Solid block
- Decimal: Arabic Numerals
- Lower-roman: Lowercase roman numerals
- Upper-roman: Uppercase Roman Numerals
- Lower-alpha: lowercase English alphabet
- Upper-alpha: Uppercase English alphabet
- None: Tag Not applicable
3. List-style-image: Set the image of the list tag
- Value:
- URL ("Address"): Specify the list tag image with absolute or relative address
- None: No image specified
4. List-style-position: Set how list items are arranged according to text
- Value:
- Outside: List item markers are placed outside of text and wrap around text, not aligned according to tags
- Inside: List item markers are placed inside text and wrap around text, aligned according to marker
5. List: ① unordered list: UL is unorder List② has sequence table: OL is Order list<ol> <li> </li></ol><ul> <li> </li></ul>③ Custom list: DL<dl> <dt></dt> title <dd></dd> text </dl> ④ Table Tags: table<table> <caption></caption> caption Table title <tr> TR Representative line <td><.td> TD represents cells for each row </tr><table>
<TD Colspan="4" >0 </td> This cell occupies 4 columns <TD Rowspan="2" >0</td> This cell occupies 2 rows
-Table Header:
<thead> <th></th> </thead>
- List semantic format: table>caption+ (thead>th) + (TBODY>TR>TD) + (TFOOTER>TR>TD)
Vi. Other
- Anti-jitter when hover:
- ① change Box-sizing:border-box;
- ② first put the underscore, occupy position, set transparent, hover when the appearance
- ③ set high and wide enough for the parent
- Delay Effect:
- Transition: Specify excessive detail (unit ms)
- Delay time after transition-delay:hover to start
- Transition-duration: Duration from the beginning to the end
- Transition-property: Delay attribute, specifying the property to transition (required setting)
- Bidirectional delay: Set the Delay property in the original Style tab, and set the delay under hover.
CSS style Grooming
