CSS 笔记一（Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width）

Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width

CSS Introduction：

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media

CSS Syntax

CSS selector

CSS Comments

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

Example

1  p {
2     color: red;
3     /* This is a single-line comment */
4     text-align: center;
5 }
6 
7 /* This is
8 a multi-line
9 comment */

CSS Selectors

The element Selector
The id Selector
The class Selector
Grouping Selectors

Example

 1 /* The element Selector */
 2 p {
 3     text-align: center;
 4     color: red;
 5 } 
 6 /* The id Selector */
 7 #para1 {
 8     text-align: center;
 9     color: red;
10 } 
11 /* The class Selector */
12 .center {
13     text-align: center;
14     color: red;
15 }
16 p.center {
17     text-align: center;
18     color: red;
19 } 
20 /* Grouping Selectors */
21 h1, h2, p {
22     text-align: center;
23     color: red;
24 }

Three Ways to Insert CSS

External style sheet
Internal style sheet
Inline style

CSS Backgrounds

background-color
background-image
background-repeat
background-attachment
background-position

1> Background Color

A color is most often specified by:

a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a valid color name - like "red"

2> Background Image

1 body {
2     background-image: url("bgdesert.jpg");
3 }

3> Background Repeat

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Value	Description	Play it
repeat	The background image will be repeated both vertically and horizontally. This is default	Play it »
repeat-x	The background image will be repeated only horizontally	Play it »
repeat-y	The background image will be repeated only vertically	Play it »
no-repeat	The background-image will not be repeated	Play it »
initial	Sets this property to its default value.	Play it »
inherit	Inherits this property from its parent element.

4> Background Attachment：

background-attachment: scroll|fixed|local|initial|inherit;

Value	Description
scroll	The background scrolls along with the element. This is default
fixed	The background is fixed with regard to the viewport
local	The background scrolls along with the element's contents
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

5> Background Position：

background-position: value;

Property Values:

[left/center/right] [top/center/bottom]
x% y%
xpos ypos (any CSS units)
initial
inherit

6> Background - Shorthand property

1 body {
2     background: #ffffff url("img_tree.png") no-repeat right top;
3 }

The order of the property values:

background-color
background-image
background-repeat
background-attachment
background-position

CSS Borders

1> Border Style

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Example

 1 p.dotted {border-style: dotted;}
 2 p.dashed {border-style: dashed;}
 3 p.solid {border-style: solid;}
 4 p.double {border-style: double;}
 5 p.groove {border-style: groove;}
 6 p.ridge {border-style: ridge;}
 7 p.inset {border-style: inset;}
 8 p.outset {border-style: outset;}
 9 p.none {border-style: none;}
10 p.hidden {border-style: hidden;}
11 p.mix {border-style: dotted dashed solid double;}

Result

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

2> Border Width

A specific size (in px, pt, cm, em, etc)
Three pre-defined values: thin, medium, or thick.

3> Border Color

4> Border - Shorthand Property

The border property is a shorthand property for the following individual border properties:

border-width
border-style (required)
border-color

Example

1 p {
2     border: 5px solid red;
3 }

CSS Margins

The CSS margin properties are used to generate space around elements.
The margin properties set the size of the transparent space OUTSIDE the border.

property values

auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element

Note: It is also possible to use negative values for margins; to overlap content.

CSS Padding

The CSS padding properties define the white space between the element content and the element border.
The padding clears an area around the content (inside the border) of an element.

property values

length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent elemen

??Note: The padding is affected by the background color of the element!

CSS Height and Width Dimensions

The height and width properties are used to set the height and width of an element.

1> width，min-width，max-width

2> height，min-height，max-height