css/Property Manipulation

(1) CSS text

Text color: Color

Color properties are used to set the color of the text

Colors are most often specified by CSS:

* Hexadecimal values-such as: #FF0000

* An RGB value---such as: rgb (255,0,0)

* The name of the color---such as: red

line-height:200px; Text line High-popular speaking, text height plus text up and down the white space height 50%: Based on the percentage of font size

VERTICAL-ALIGN:-4PX sets the vertical alignment of element content, valid only for inline elements, invalid for block-level elements

The Text-decoration:none Text-decoration property is used to set or remove decorations for text. Mainly used to remove the underline of the link

font-family: ' Lucida Bright '

font-weight:lighter/bold/border/

Font-style:oblique Italic Body

text-indent:150px; First Line indent 150px

letter-spacing:10px; Letter Spacing

word-spacing:20px; Word spacing

Text-transform:capitalize/uppercase/lowercase; Text conversion, for all words to be uppercase or lowercase letters, or the first letter of each word capitalized

(2) Background properties

Background-color

Background-image

Background-repeat

Background-position

Background-color:cornflowerblue

Background-image:url (' 1.jpg ');

Background-repeat:no-repeat; (repeat: Tiled full)

Background-position:right Top (20px 20px);

(3) Border properties

Border-width

Border-style (required)

Border-color

Border-style:solid;

Border-color:chartreuse;

border-width:20px;

(4) List properties

List-style-type sets the type of the list item flag.

List-style-image sets the image to the list item flag.

List-style-position sets the position of the list item flags in the list.

The List-style shorthand property. Used to set all properties used for the list in a declaration

(5) Dispalay Property

None

Parent-Child Integrated display: (using the suspension hover method)

When the parent class is suspended, the child class does not display

Display:none can hide an element, and hidden elements do not occupy any space. That is, the element is not only hidden, but also the space that the element originally occupies will disappear from the page layout.

Attention:

The difference from Visibility:hidden:

Visibility:hidden can hide an element, but the hidden element still needs to occupy the same space as it did before it was hidden. That is, although the element is hidden, it still affects the layout.

Block

Inline cannot set length width

(6) Inline

Set to inline

Inline-block

Existing inline does not occupy a single row, but also has block-level settings for long-width properties

Inline-block can do List layout

(7) margin (Margine) and inner margin (padding)

Margine (margin): Used to control the distance between elements and elements, the basic use of Margine is to control the space around the elements, from a visual angle to achieve the purpose of separation.

Margine-top: Top margin

Margine-bottom: Bottom Margin

Margine-right: Right margin

Margine-left: Left Margin

margin:10px 20px 20px 10px;

Top margin is 10px

Right margin is 20px

Bottom margin is 20px

Left margin is 10px

margin:10px 20px 10px;

Top margin is 10px

Left and right margin is 20px

Bottom margin is 10px

margin:10px 20px;

Up and down margin is 10px

Left and right margin is 20px

margin:25px;

All 4 margins are 25px

Center Application:

margin:0 Auto

Padding (inner margin): Used to control the distance between the content and the border;

Using the Fill property alone can change the padding around the top and bottom. The abbreviation Fill property can also be used once everything changes.

Set to Margine;

Border (border): a border around the inside margin and outside the content;

Content: The contents of the box, displaying text and images.

(8) Float property

The floating element determines whether the previous element floats, if it floats, clings to it, otherwise, keeps the vertical distance from the previous element

How block elements and inline elements are arranged in the document flow

The block element is usually separated by a single line, with the block element being a new row, and the default block element width automatically fills its parent element width. The block element can set the Width,height,margine,padding property;

The inline element does not have a single row, and multiple adjacent inline elements are arranged in the same row until one line is not arranged before a new line is changed, and its width varies with the contents of the element. Inline element Setting Width,height property is invalid

The so-called document flow: refers to the element layout process, the elements will automatically from left to right, from the top down the flow of the arrangement.

Out-of-document flow: That is, the elements are removed from the normal layout, and other boxes are positioned as if the elements of the document flow are not present.

Clear floating

Clear syntax:

Clear:none|left|right|both

Value:

None: Default value. Allowed to have floating objects on both sides

Left: does not allow floating objects

Right: Do not allow floating objects

Both: Floating objects are not allowed

It is important to note that the clear property only works on itself and does not affect other elements. If there is a floating object on the right side of an element, and this element is set to not allow floating objects on the right, that is, clear:right, then this element will automatically move down one cell to the right of this element without a floating object.

(9) Position (positioning property) precise positioning using

Static: Default values are positioned according to normal document flow

Relative:1. Reference is the position of the element before the document flow

2. The element is not detached from the document stream (the previous space position still exists)

Absolute:1. Reference is a parent element that has been positioned

2. Element out of document flow

Summary:

Parent element: Position:relative

Child element: Position:absolute

Out-of-document flow: Flat Position:absolute fixed

css/Property Manipulation