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

Source: Internet
Author: User
Tags border color border image

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.