CSS's Properties section

This writing is today's study to the attribute, altogether 20.

The property is more, but it will be used, and it will be remembered when it is used, in order to serve the purpose that we need.

Style properties

1, border

CSS border properties allow you to specify the style and color of an element's border.

Border Style Border-style

property to define the style of the border

None: Default No Border

Dotted:dotted: Defining a Point wireframe

Dashed: Define a dashed box

Solid: Define Solid line boundaries

Double: defines two boundaries. The width of the two boundaries is the same as the Border-width value

Groove: Defines the 3D groove boundary. The effect depends on the color value of the boundary

Ridge: Defines a 3D ridge boundary. The effect depends on the color value of the boundary

Inset: Defines an embedded border of 3D. The effect depends on the color value of the boundary

Outset: Defines a 3D highlighted border. The effect depends on the color value of the boundary

Example:

Border-style:solid;

Border Width border-width

border-width:5px;

Border Color Border-color

The colors you can set:

• Name-Specifies the names of the colors, such as "Red"
• RGB-Specify RGB values, such as "RGB (255,0,0)"
• Hex-Specify 16 binary values, such as "#ff0000"

You can also set the border color to "transparent".

Note: Border-color alone is not working, you must first use Border-style to set the border style.

Border-color: #98bf21;

Borders-Set each side individually

Example:

Border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted;border-left-style:solid;

Border-shorthand property

border:5px solid red;

Border-radius

Adds a rounded border to the element.

semicircle Example:

div{        width:50px;        height:100px;        border-radius:50px 0 0 50px;        background:red;    } < Div ></ Div >

The four RADIUS values are the upper-left, upper-right, lower-right, and lower-left corners, clockwise

Set the vertical and horizontal 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

This rounded corner makes the box model rich, before only the shape of the rectangle, which now has a more curved shape.

Border-image

The border style is populated with an image.

Border-image:url (image address);

Box-shadow

Add a shadow to a box

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

box-shadow:2px 2px 5px 1px rgba (0, 0, 0,. 6) Inset;

Line-height

Control the height of each line in a paragraph

line-height:25px;

Row height is centered because it has its own calculation, first it gets the size of the font-size, and then uses the line-height minus Font-size

(line-height-font-size) Gets the value divided by half assigned to the top and bottom of the font to achieve centering, but line-height less than font-size is not

Affects the size of the font.

Text-indent

Controls the first line indent of a paragraph

p {text-indent:2em;}

Text-align

Control paragraph alignment, not only text, but also other inline or inline-block elements in the object can be set by text-align alignment.

Text-align:left | Right | Center | Justify

p {text-align:center;}

Letter-spacing

Control the distance between text in a paragraph

p {letter-spacing:5px;}

Text-overflow

Controls the style of the overflow part of the text content

Text-overflow:clip | Ellipsis

Clip when the inline content overflows the block container, the overflow is trimmed off.

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

However, Text-overflow is only used to illustrate how the text overflows when displayed, to achieve the effect of ellipsis when overflow,

Also define mandatory text to be displayed on one line (white-space:nowrap) and overflow content as hidden (Overflow:hidden),

This is the only way to achieve an overflow text display ellipsis effect.

White-space

Text in a specified paragraph does not wrap

The White-space property sets how to handle whitespace within an element.

This property declares how to handle whitespace in elements during layout creation.

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

Example :

div,input{    Overflow:hidden;    /* Condition 1: Out-of-section hidden */    white-space:nowrap;/* Condition 2: Force display all text in the same line */    text-overflow:ellipsis;/* out of section display ... */}

Word-wrap

Whether to break a line when the content exceeds the bounds of the container

Normal allows the content to open or overflow the specified container boundary.

Break-word content will wrap within the boundary. If necessary, word breaks are allowed inside words.

Word-wrap:break-word;

Background-color

Background color

background-color:transparent | Color body {background-color: #CCCCCC;}

RGBA

Color:rgba (r,g,b,a) above R, G, B three parameters, positive integer value range is: 0-255.

The value of the percentage value range is: 0%-100%. Values that are out of range will be up to their nearest value limit.

Not all browsers support the use of percent values. A is a transparency parameter, and the value is between 0~1 and not negative.

Border-color:rgba (255, 0, 0,. 7);

Linear-gradient

CSS3 Gradient are divided into linear gradients (linear) and radial gradients (radial). Because different rendering engines implement a different syntax for gradients,

Here we are only for the linear gradient of the standard syntax to analyze its usage, the rest of you can check the relevant information. The Grammar of the Consortium has

Supported by browsers such as ie10+, firefox19.0+, chrome26.0+ and opera12.1+.

The first parameter represents the direction of the linear gradient, top is from top to bottom, left to right, and if it is defined as

The upper-left corner to the lower-right corner. The second and third parameters are the start and end colors, respectively. You can also insert more parameters between them.

Number that represents a gradient of multiple colors.

Background-image:linear-gradient (to left, Red 30%,blue);

Background-image

Background image

Background-image:none | URL (url) body {background-image:url (images/bg.gif);}

Background-repeat

Background Tiling method

Background-repeat:repeat | No-repeat | Repeat-x | Repeat-y

body {background-repeat:repeat-x;}    

Background-position

Background positioning

Background-position: Align Left alignment

body {Background-position:left Bottom;}

Background style abbreviations

Background: Background color background image background tile style background positioning

Body {background: #EDEDED URL (images/bg.png) no-repeat 50% 30px;}

Knowledge Expansion:

There is a merger of margins in the

Http://www.w3school.com.cn/css/css_margin_collapsing.asp

Standard flow refers to the arrangement rules of various elements when you do not use other special CSS rules related to alignment and positioning.

Inline and block-level elements are a node in the DOM tree. From the DOM point of view, block-level elements and inline elements

There is no difference, is a node in the tree, and from the perspective of CSS, there is a big difference between the block-level elements have

Own area, the inline element is not.

Continue with the problem of negative margin yesterday:

：

Code:

#div1 {        width:50px;        height:100px;        border:2px solid #000;            }    . div2{        width:30px;        height:30px;        border:2px solid #333;        margin-left:-10px;     }     <  ID= "Div1">        <class  = "Div2"></div>    </div> 

From the code can see that they are father and son, but the child is out of the scope of the parent, in our impression should only position this

Properties can do this, but margin can do it, which is related to the previous writing formula, because mathematically it is reasonable,

So it doesn't count as a violation.

CSS's Properties section