CSS (font, text, margin, border, shadow, background, gradient, multiple backgrounds, list)

Multiple names can be used, separated by commas, and browsers use the available fonts in sequence

P {font-family: ' song Body ', ' blackbody ', ' Arial ';}

Font-size Setting the font size

length specifies the size of the text with a value that does not allow negative values

Percentage specifies the text size in percent, which is based on the size of the font in the parent object, and does not allow negative values

Font-weight Controlling font weight

Normal font, equivalent to a numeric value of 400

Bold bold, equivalent to a numeric value of 700

100~900 defines the font from thin to thick

Font-style controls whether the font is tilted

normal specifies that the text font style is the correct font

italic specifies that the text font style is italic

Oblique specifies that the text font style is italic

Difference: Italic is italic using text, oblique is to tilt text without italic property

p{Font-style:italic;　　Font-weight:bold;　　font-size:14px;　　line-height:22px; Font-family: ' The song Body ';}
abbreviation:p {font:italic bold 14px/22px ' Arial ';}

Color text Colors

• English words, such as: Red,yellow,green ...
• Hexadecimal notation, #开头, a combination of 6 hexadecimal characters or numbers, such as: #FFFFFF, #000000 ...
• RGB mode, Red 0-255, Green 0-255, Blue 0-255, for example: RGB (120,33,234) ...
• Rgba mode, for example: Rgba (255,0,0,0.5), and the last a for transparency 50%

Opacity transparency

A decimal value between 0.0-1.0

div{opacity:0.5;}

ie6-ie8:div{Filter:alpha (opacity=50);}

Text-decoration text Decoration

None specifies no decoration for text

Underline the decoration of the specified text is underlined

Overline the decoration of the specified text is underlined

Line-through the decoration of the specified text is through line

Blink the decoration of the specified text is blinking

Text-shadow Text Shadow

H-shadow the position of the horizontal shadow, allowing negative values

V-shadow the position of the vertical shadow, allowing negative values

Blur Blur radius of shadows, negative values are not allowed

The color of a color shadow

h1{text-shadow:2px 2px 5px Red;}

Use commas to separate multiple shadows when specifying multiple shadows

h1{text-shadow:10px 10px 5px Orange, 40px 35px 5px skyblue, 70px 60px 5px Greenyellow;}

width [length | percenta | auto]

Height [length | percenta | auto]

Margin margin [length | percenta | auto]

padding inner margin [length | percenta]

Margin/padding-top Setting the top margin

Margin/padding-bottom Setting the bottom margin

Margin/padding-left Setting the left margin

Margin/padding-right Setting the right margin

Abbreviation:

Margin/padding: Top margin right margin bottom margin left margin

Margin/padding: Bottom margin and left and right margin

Margin/padding: Top margin left and right margin bottom margin

Border-style border Style

none | Hidden | Dotted | Dashed | Solid |  Double |    Groove |   Ridge |  Inset | Outset

Borderless hidden border dotted border dashed border solid border double line border 3D Groove border 3D convex slot border 3D concave edge border 3D convex edge border

Border-top-style setting the top border line

Border-bottom-style setting the bottom border line

Border-left-style set left border line

Border-right-style set the right border line

Border-width Border Width

Medium defines the bounding rectangle of the default thickness, calculated as 3px

Thin defines a border that is thinner than the default thickness, and calculates a value of 1px

Thick defines a border that is thicker than the default thickness and calculates a value of 5px

Length defines the thickness of the bounding rectangle with a long value and does not allow negative values

Border-top-width Setting the top border width

Border-bottom-width Setting the bottom border width

Border-left-width setting the left border width

Border-right-width Setting the right border width

Border-color Border Color

Transparent default value, border color is transparent

Border-top-color setting the top border color

Border-bottom-color Setting the bottom border color

Border-left-color setting the left border color

Border-right-color set the right border color

Border-radius Border rounded corners

All corners use rounded corners with a radius of 10px: div{border-radius:10px;} The four RADIUS values are the upper-left, upper-right, lower-right, and lower-left corners, clockwise: div{border-radius:5px 4px 3px 2px;   Set the horizontal and vertical radii of each corner, separated by a slash, the first parameter represents the horizontal radius at which the upper-left corner starts clockwise, and the second parameter represents the vertical radius at which the upper-left corner starts clockwise: div{border-radius:10px 20px 30px 40px  /  5px 10px 15px 20px;} Circle: div{border-radius:50%;}

Border-image Border Picture

When Border-image is set, Border-style does not display

Border-image-source the path of the picture border

Border-image-slice picture border Inward offset, is a number or percentage, no unit required

Border-image-width width of picture border

Border-image-outset border image area exceeds the amount of border

Border-image-repeat whether the image border should be tiled (repeated) full (rounded) stretched (stretched)

div{    height:300px;    width:300px;    border:10px solid gray;    Border-image:url (31111.jpg) 10/10px;}

Box-shadow Box Shadow

H-shadow the position of the horizontal shadow, allowing negative values

V-shadow the position of the vertical shadow, allowing negative values

Blur shadow distance, negative value not allowed

Spread the size of the shadow

The color of a color shadow

Inset to change an outer shadow (outset) to an inner shadow

Usage: Box-shadow: [x-axis offset] [y offset] [shadow blur radius] [shadow expansion radius] [shadow color] [projection mode];

<div class= "Demo" ></div><style>    . demo{        width:100px;        height:100px;        Background: #ccc;        box-shadow:5px 5px 5px Rgba (0,0,0,0.5);    }    . demo:active{        box-shadow:5px 5px 5px rgba (0,0,0,0.5) inset;    } </style>

Line-height set the distance between rows (row height)

p {line-height:25px;}

p {line-height:150%;}

Text-indent the indentation of the first line in a text block

p {text-indent:2em;}

Text-align the horizontal alignment of the text in the specified element

Left to arrange the text

Right, arrange the text to the left.

Center arranges text in the middle

Justify the effect of aligning the two ends

Vertical-align Vertical alignment of elements

Baseline default, elements are placed on the baseline of the parent element

Sub-subscript for vertical aligned aligned

Super Vertical aligned alignment

Top aligns the top of the element with the top of the highest element in the row

Text-top aligns the top of the element with the top of the parent element's font

Middle place this element in the middle of the parent element

Bottom aligns the top of the element to the top of the lowest element in the row

Text-bottom aligns the bottom of the element with the bottom of the parent element's font

letter-spacing increase or decrease whitespace between characters (character spacing)

p {letter-spacing:5px;}

Text-overflow Specifies what happens when the text overflows the containing element

Clip when inline content overflows a block container, cuts out the overflow part

Ellipsis when the inline content overflows the block container, replace the overflow part with the (... ）

Text-overflow is only used to illustrate the text overflow in what way display, to achieve overflow when the effect of ellipsis, you must also define the force text in a row (white-space:nowrap) and overflow content is hidden (Overflow:hidden), This is the only way to achieve an overflow text display ellipsis effect

Word-wrap to control whether a long word breaks when the URL address exceeds the bounds of the specified container
Normal: Allows to top open or overflow specified container boundaries
Break-word: Content wraps inside the boundary, allowing line breaks within the word
How to handle whitespace within a white-space element
Normal: Default processing mode
Pre: Displays preformatted text in equal-width font, does not combine white space between text, and does not wrap when text is out of bounds
NoWrap: Forces all text to be displayed in the same row, merging extra white space between text until the end of the text or encountering a BR object
Pre-wrap: Displays preformatted text in equal-width font, does not combine white space between text, and wraps when text touches a boundary
Pre-line: Preserves text wrapping, does not preserve white space between text, and wraps when text touches a boundary
Background-color background Color
Transparent default, background color is transparent
Background-image background image
Body {background-image:url (images/bg.gif);}
Background-repeat Background Tiling method
Repeat default, the background image will repeat vertically and horizontally
Repeat-x background image will be repeated in horizontal direction
Repeat-y background image will repeat in vertical direction
No-repeat background image will be displayed only once
Background-position Background image positioning
Percentage: Specifies the position of the background image fill with a percentage, which can be negative
Length: Specifies the position of the background image fill with a value, which can be negative
Center: Background image is centered horizontally and vertically
Left: Background image fills in landscape orientation
Right: The background image fills in the landscape, starting from the left
Top: The background image is filled vertically, starting at the top
Bottom: The background image is filled vertically, starting at the bottom
body {Background-position:left Bottom;}
body {background-position:30% 20px;}
Background-attachment whether the background image is scrolled or fixed with the object content
Fixed: Background image is pinned relative to form
Scroll: The background image is fixed relative to the element, that is, the background image does not scroll when the element content scrolls, because the background image always follows the element itself, but scrolls along with the element's ancestor element or form
Local: The background image is fixed relative to the element content, which means that the background image scrolls when the element scrolls with the element, because the background image always follows the content
Background-origin Background origin
Sets the original starting position of the element's background picture. You must ensure that the background is background-repeat to no-repeat this property will take effect
Specifies where the background-position attribute is positioned relative to
Padding-box background image starting from padding area (including padding)
Border-box background image starting from border area (including border)
Content-box displaying background images from the content area
Background-clip the display area of the background
Sets the area of the background image to be cropped out
Padding-box the background from the padding area (excluding padding)
Border-box the background from the border area (excluding border)
Content-box to crop the background from the content area
Background-size Background Image size
Length: Specifies the size of the background image with a value that does not allow negative values
Percentage: Specifies the background image size as a percentage and does not allow negative values
Auto: True size of background image
Cover: The background image is scaled to a fully covered container, and the background image may be out of the container
Contain: The background image is always included in the container when the background image is equal to or greater than the width or height of the container.
Gradient gradient Color
Linear-gradient linear Gradient
Repeating linear gradient: repeating-linear-gradient
Supports transparency Rgba (0 for full transparency, 1 for full opacity), and can be used to create effects that weaken the fade
<div class= "Demo1" > </div><div class= "Demo2" > </div><div class= "Demo3" > </div> <style>.demo1{    width:300px;    height:200px;    Display:inline-block;    Background:repeating-linear-gradient (to right, red, yellow 10%, Green 20%);}. demo2{    width:300px;    height:200px;    Display:inline-block;    Background:linear-gradient (To-right, Rgba (255,0,0,0), Rgba (255,0,0,1));}. demo3{    width:300px;    height:200px;    Display:inline-block;    Background:linear-gradient (to left, Red 30%, blue);} </style>
Radial-gradient Radial Gradient
Repeating radial gradient: repeating-radial-gradient
The shape parameter defines the shapes. Circle represents a circle, and Ellipse represents an ellipse. The default value is ellipse
<div class= "Demo1" > </div><div class= "Demo2" > </div> <div class= "Demo3" > </div> <style>.demo1{    width:300px;    height:200px;    Display:inline-block;    Background:radial-gradient (red, yellow, green);}. demo2{    width:300px;    height:200px;    Display:inline-block;    Background:radial-gradient (circle, red, yellow, green);}. demo3{    width:300px;    height:200px;    Display:inline-block;    Background:repeating-radial-gradient (red, yellow 10%, Green 15%);}
</style>
Multiple backgrounds
<div class= "Demo" ></div><style>    . demo{        width:800px;        height:500px;        Background:url (1.jpg) no-repeat center center/300px, url (2.jpg) no-repeat Center center/800px;        border:10px solid #ccc;        Background-origin:content-box;        Transition:all 1s;    }    . demo:active{        Background:url (1.jpg) no-repeat center center/800px, url (2.jpg) no-repeat center center/800px;    } </style>
List-style-type List Style
Disc: Solid Circle
Circle: Hollow Circle
Square: Solid block
Decimal: Arabic Numerals
Lower-alpha: lowercase English alphabet
Upper-alpha: Uppercase English alphabet
Lower-roman: Lowercase roman numerals
Upper-roman: Uppercase Roman Numerals
None: bullets are not used
List-style-image to define a list symbol with a picture
UL {List-style-image:url (images/1.jpg)}
List-style-position the position of the list symbol
Outside the default value. List item markers are placed outside the text, and wrapping text is not aligned with the tag
Inside list item markers are placed within text, and wrapping text is aligned according to the tag
CSS (font, text, margin, border, shadow, background, gradient, multiple backgrounds, list)