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)