CSS properties (Common Properties collation)

Abstract : This is my study in the front-end process of some of the commonly used CSS properties, part of the CSS3 new, because of limited capacity, if there are errors in the text, welcome to put forward, I will promptly revise. Hope to help everyone!

CSS Properties

CSS Properties 1

1. CSS Color Properties 5

1.1. Font Color 5

1.2. Background Color 5

2. Page Layout Related Properties 5

2.1. Display 5

2.2. Position 6

2.2.1. position:relative 6

2.2.2. Position:absolute 6

2.2.3. position:fixed 7

2.2.4. Z-index:number 7

2.3. Clear 7

2.4. Float 8

2.5. Visibility 8

2.6. Overflow 8

2.6.1. Visible 8

2.6.2. Hidden 8

2.6.3. Auto 8

2.6.4. Scroll 9

2.7. Overflow-x 9

2.8. Overflow-y 9

2.9. Padding (padding property described) 9

2.10. Margin 9

2.10.1. Margin-left 9

2.10.2. Margin-top 9

2.10.3. Margin-right 9

2.10.4. Margin-bottom 9

2.10.5. Margin multiple Values 9

3. CSS Font Properties 10

3.1. font-family 10

3.2. Font-size 10

3.3. Font-weight 10

3.4. Font-style 10

3.5. Font-varient 10

3.6. Font Composite Property 10

4. CSS Text Properties 10

4.1. Word-spacing 10

4.2. letter-spacing 10

4.3. Text-align 11

4.4. Vertical-align 11

4.5. Line-height 11

4.6. Text-decoration 11

4.7. Text-indent 11

4.8. Word-wrap 11

4.9. Overflow-wrap 12

4.10. White-space 12

5. Dimension Properties 12

5.1. Width 12

5.2. Height 12

6. Border Properties 12

6.1. Border-style 12

6.2. Border-width 12

6.3. Border-color 13

6.4. Border Composite Properties 13

7. Inner Margin Properties 13

7.1. Padding-left 13

7.2. Padding-right 13

7.3. Padding-top 13

7.4. Padding-botom 13

7.5. Padding 13

8. Background Color Properties 14

8.1. Background-color 14

8.2. Background-image 14

8.3. Background-repeat 14

8.4. Background-position 14

8.5. Background-attachment 14

8.6. Background Composite Properties 14

8.7. background-size 15

9. Cursors Cursor 15

10. List-related CSS Properties 15

10.1. List-style-type 15

10.2. list-style-position 16

10.3. List-style-image 16

10.4. List-style: Composite attribute 16

11. Table-related CSS Properties 16

11.1. Table-layout 16

11.2. Border-collapse 16

11.3. border-spacing 16

11.4. caption-side 16

11.5. Empty-cells 17

CSS3 New Property 17

12.1. box-sizing 17

12.2. Outline 17

12.3. Opacity 17

12.4. Border-radius 18

12.4.1. Border-top-left-radius 18

12.4.2. Border-top-right-radius 18

12.4.3. Border-bottom-left-radius 18

12.4.4. Border-bottom-right-radius 18

12.5. Outline 18

12.5.1. Outline-style 18

12.5.2. Outline-color 18

12.5.3. outline-width 18

12.5.4. Outline Composite Properties 18

12.6. Box-shadow 19

12.7. Transform 19

12.7.1. Transform-origin 19

12.8. Transition 19

12.8.1. Transition-property 19

12.8.2. transition-duration 20

12.8.3. transition-timing-function 20

12.8.4. Transition-delay 20

12.8.5. Transition Composite Properties 20

12.9. Animation 20

12.9.1. Animation-name 20

12.9.2. animation-duration 20

12.9.3. animation-timing-function 20

12.9.4. Animation-delay 21

12.9.5. Animation-iteration-count 21

12.9.6. animation-direction 21

12.9.7. animation-play-state 21

12.9.8. Animation Composite Properties 21

Attach a mind map of the entire article

1. CSS Color Properties

1.1. Font Color

Font Color-related property settings:

Color:red

Color: #f90

Color:rgb (250,250,0)

Color:rgba (r,g,b, Transparency (0-1))

1.2. Background color

Background color related property settings:

Background: #f90;

Background:rgb (255,255,0);

background:red;

Background:rgba ()

2. Page layout-related properties

2.1. Display

Display

Block set element to block element

<div>, <p>,

Inline set element is inline (also called inline)

<span>, <a>, <label>, <input>, , <strong>, and <em> are typical inline elements (inline elements)

Inline-block combines both

Some HTML elements, the default is Inline-block (IMG, input, textarea, td,th)

None hides the element is not displayed, nor does it occupy space

2.2. Position

2.2.1. position:relative

Relative positioning

Setting elements as relative positioning elements by position:relative

element is set to relative positioning, it is not detached from the document flow and does not affect other elements

Positions can be set for relatively positioned elements by left, top, right, bottom

Positioning elements: Locating according to the original default position

2.2.2. Position:absolute

Absolute positioning

Set absolute positioning with Position:absolute

After an element is absolutely positioned, it is detached from the document stream, affecting the subsequent elements. Width is open by default

Positions can be set for absolutely positioned elements by left, top, right, bottom

Positioning rules: Based on the first positioned ancestor element, if there are no anchored ancestor elements, according to the HTML element. Ancestor elements can be any location

2.2.3. position:fixed

position:fixed;

Left/top/right/bottom: unit of length;

Positioning according to the screen

Out-of-document flow (width default becomes content-free)

When the element is set to fixed or absolute positioning, it becomes a block element

2.2.4. Z-index:number

Vertical height, z is pointing to its own direction, mainly to adjust the height of the float

In order for the following elements to float above

2.3. Clear

Eliminates the effect of elements on subsequent elements, set clear:both/left/right in the following elements

<div style= "border:2px solid red;" >

<div style= "float:left;width:80px;height:80px;border:1px solid blue;" >test div</div>

<div style= "Clear:both;" ></div>

</div>

Behind the Clear:both, in fact, the use of clear floating to the outer div open, so sometimes, we will set the internal div to float, we will find that the outer div background is not shown, because the outer div is not open, too small, so you can see the background is limited to a line.

2.4. Float

1, floating elements will be automatically set to block-level elements, equivalent to the element set Display:block (block-level elements can be set and high, and the elements in the row can not).

2, floating element behind the non-floating element display problem.

3. Multiple floating-oriented elements use flow arrangement, at which point you should pay attention to the height of the floating element.

4, the child elements are all floating elements of the element height adaptive problem.

2.5. Visibility

Visibility:visible/hidden

Specifies whether the element is visible, and even if it is not visible, the element still occupies a space.

2.6. Overflow

Overflow:hidden/auto/scroll/visible

Specifies what happens when the content overflows the element box.

2.6.1. Visible

The default value. The content is not trimmed and is rendered outside the element box.

2.6.2. Hidden

The content is trimmed and the rest is not visible

2.6.3. Auto

If the content is trimmed, the browser displays a scroll bar to view the rest of the content

2.6.4. Scroll

The content is trimmed, but the browser displays scroll bars to see the rest of the content.

2.7. Overflow-x

Horizontal direction

2.8. Overflow-y

Vertical direction

2.9. Padding (padding properties described)

2.10. Margin

2.10.1. Margin-left

Left margin

2.10.2. Margin-top

2.10.3. Margin-right

2.10.4. Margin-bottom

2.10.5. Margin Multiple values

margin: value; Up or down

Margin: value 1 value 2; up or down

Margin: value 1 value 2 value 3; Up or down

Margin: value 1 value 2 value 3 value 4, upper right lower left rear to add unit px.

3. CSS Font Properties

3.1. font-family

Font-family:arial,sans-serif;

3.2. Font-size

Font-size:2em

3.3. Font-weight

Font-weight:bold

3.4. Font-style

Font-style:italic (Italic)

3.5. Font-varient

Font-variant:small-caps

3.6. Font Composite Properties

Font:italic Bold 12px/30px Georgia, serif;

4. CSS Text properties

4.1. word-spacing

Spacing of words, identified by spaces

4.2. letter-spacing

Alphabetic interval, can be negative

4.3. text-align

Text-align:left/right/center Horizontal Arrangement

Text-align:center

To center text horizontally

Inline elements (inline and Inline-block)

4.4. Vertical-align

Vertical-align:middle/top/bottom Vertical Alignment

4.5. Line-height

Line-height set the distance between rows

Line-height

Centers a line of text vertically. The value of Line-height equals the height of the element

inline element (inline Inline-block)

4.6. Text-decoration

Text-decoration:underline (underscore)/overline (dash)/Line-through (crossing)/None (default = None)

4.7. Text-indent

text-indent:50px

Set the first line of text indent

4.8. Word-wrap

Word-wrap:break-word/overflow-wrap allow long words or URL addresses to be changed to the next line

4.9. Overflow-wrap

With Word-wrap

4.10. White-space

White-space:pre/pre-wrap

How to deal with whitespace

The white-space:nowrap text does not wrap, and the text continues on the same line until the <br> tag is encountered.

White-space:pre blank will be reserved by the browser. It behaves like a <pre> tag in HTML.

White-space:pre-wrap preserves a sequence of whitespace characters, but wraps normally.

5. Dimension Properties

5.1. Width

Width:max-width min-width Setting the maximum width and setting the minimum width

5.2. Height

Height:max-height Min-height

6. Border Properties

6.1. Border-style

Border-style border Style

Solid solid line/dotted dot line/dashed dash/double double/None set border: No border

6.2. Border-width

Border-width Border Width

6.3. Border-color

Border-color Border Color

border-color:red;

Border-color: #ff6700;

Border-color:rgb ();

Border-color:rgba ();

6.4. Border Composite Properties

Border Composite Properties

border:1px solid #ff6700;

7. Padding Properties

7.1. Padding-left

Left inner margin

7.2. Padding-right

7.3. Padding-top

7.4. Padding-botom

7.5. Padding

padding: value; Up or down

padding: value 1 value 2; up or down

padding: value 1 value 2 value 3; Up or down

padding: value 1 value 2 value 3 value 4, upper right lower left rear to add unit px.

8. Background Color Properties

8.1. Background-color

Background-color background Color "> Transparent)

8.2. Background-image

Background image URL ()

8.3. background-repeat

Background-repeat background image tiling repeat/no-repeat (not repeating tiles)

Repeat-x (repeat horizontally in horizontal direction) repeat-y (repeat tile Vertically)

8.4. background-position

Background-position background Image position 10px,10px display specific picture position according to coordinates

The origin of the coordinates is the upper left corner of the box.

Background-position:right Center (middle right)/center Center

8.5. Background-attachment

background-attachment background picture Fixed scroll/fixed

Scroll---Rolling fixed--fixing

8.6. Background Composite Properties

Background: #ccc URL () no-repeat 10px 10px;

Background:color URL postion/size repeat attachment;

8.7. background-size

Specify the size of the background image (CSS3 new)

background-size:cover/contain/400px 300px/100% 100%

Cover:background-size:cover; Priority is filled with elements. Extra pictures cut off the guaranteed original proportions

Contain:background-size:contain; Priority ensures that the picture is complete and that the elements may not be covered. Guarantee the original proportion

9. Cursors cursor

Pointer/move/no-drop

Cursor:move indicates that an object can be moved

Cursor:pointer indicates that the linked pointer is a hand

Cursor:no-drop cannot be released is usually a prohibition symbol.

10. List-related CSS properties

For <ol> and <ul> can also be set to <li>

10.1. List-style-type

List-style-type:disc/circle/square.../none symbols in front of list items

None Common (remove the front icon)

10.2. list-style-position

List-style-position:outside/inside

Add a border to see the obvious effect inside the front dot in the border

10.3. List-style-image

List-style-image:url ()

Turn the symbol into a picture preferably a small picture that can be displayed intact.

10.4. List-style: Composite Properties

UL li:first-child{

List-style:circle inside;

}

11. Table-Related CSS Properties

11.1. Table-layout

Table-layout:auto/fixed

Column width fixed (equal)

11.2. Border-collapse

Border-collapse:separate/collapse

Collapse: Merging cell borders

Seperate: Separating cell borders

11.3. border-spacing

border-spacing: Length; Gaps between cells and cells

You can set the border-spacing if the cell cannot be merged

11.4. Caption-side

Caption-side:top/bottom the location of the title

11.5. Empty-cells

Empty-cells:hide/show empty cells show/hide cells cannot be merged

CSS3 New Properties

12.1. box-sizing

To reset the rules of the box model

Box-sizing:content-box (default)/Border-box (width/height box width height)

Border-box:

Allows you to define specific elements that match an area in a specific way.

For example, if you need to place two boxes with borders side-by, you can set box-sizing to "Border-box". This allows the browser to render a box with the specified width and height, and place the border and padding into the box.

Any padding and borders that you specify for an element are drawn within the set width and height.

The width and height of the content can be obtained by subtracting the border and padding from the set width and height.

Content-box:

Draw the inner margin and border of an element outside the width and height

12.2. Outline

The outer contour is not a box outside the border.

Outline

Outline-style

Outline-color

Outline-width

12.3. Opacity

Opacity

Opacity 0~1 Decimal

12.4. Border-radius

Rounded corners with values above a certain range turn round

12.4.1. Border-top-left-radius

Upper left corner set fillet

12.4.2. Border-top-right-radius

Rounded corners in top right corner

12.4.3. Border-bottom-left-radius

Lower left corner set rounded corners

12.4.4. Border-bottom-right-radius

Lower right corner set rounded corners

12.5. Outline

Outer Contour

12.5.1. Outline-style

12.5.2. Outline-color

12.5.3. Outline-width

12.5.4. Outline Composite Properties

OUTLINE:1PX Solid #ccc

12.6. Box-shadow

Shadow

Box-shadow: Horizontal offset vertical offset; Offset can be negative

Box-shadow: Horizontal offset vertical offset color;

Box-shadow: Horizontal offset vertical offset blur value color; /* The most common */

Box-shadow: Horizontal offset vertical offset fuzzy value epitaxial value color;

12.7. Transform

Transform

Here are the property values:

Translatex () moves horizontally, in parentheses in length units

Translatey () move in a vertical direction

Translate (x, y) move vertically after horizontal

Rotate () brackets: angle deg

For example: Transform:rotate (60deg) Flip

SKEWX () the unit angle in brackets deg

Skewy ()

Skew (x, Y) twist

12.7.1. Transform-origin

Transform-origin:left top;

Set the top left corner as the transformation origin.

The origin of the Transform-origin transformation. There is no point in translate. Great influence on rotate

12.8. Transition

12.8.1. Transition-property

TRANSITION-PROPERTY specifies that the attributes to be transitioned are separated. Default is All

12.8.2. transition-duration

Transition-duration Transition Duration

12.8.3. transition-timing-function

Transition-timing-function transition Linear Effect default ease

12.8.4. Transition-delay

Transition-delay transition Delay

12.8.5. Transition Composite Properties

Transition:property timing-function Duration Delay

12.9. Animation

12.9.1. Animation-name

Animation-name Specify the name of the animation

Specifies the name of the keyframes that needs to be bound to the selector

12.9.2. animation-duration

Animation-duration the execution time of the animation

Specifies the amount of time, in seconds or milliseconds, that the animation will take to complete.

12.9.3. animation-timing-function

Animation-timing-function Execution Effect Speed

Specifies the speed curve of the animation.

Linear: The speed of the animation is the same from beginning to end.

Ease: Default. The animation starts at low speed, then accelerates and slows down before it ends.

12.9.4. Animation-delay

Animation-delay delay

Specifies the delay before the animation begins.

12.9.5. Animation-iteration-count

Animation-iteration-count

Number of cycles infinite (infinity)

Specifies the number of times the animation should play.

12.9.6. animation-direction

Animation-direction:alternate (forward reverse alternating) \ reverse (reverse)

Specifies whether the animation should be rotated in reverse.

12.9.7. animation-play-state

Animation-play-state:running/paused

Specify the playback state of the animation

12.9.8. Animation Composite Properties

animation:myanimate 2s linear 2s alternate;

Myanimate is the keyframes name bound to the selector

2s is the time required to complete the animation

Linear animation constant Speed playback

2s delay before start of animation

Alternate alternating forward and reverse play

CSS properties (Common Properties collation)