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 Comments

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

Example

 p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */ 

CSS Selectors

• The element Selector
• The id Selector
• The class Selector
• Grouping Selectors

Example

/* The element Selector */
p {
    text-align: center;
    color: red;
} 
/* The id Selector */
#para1 {
    text-align: center;
    color: red;
} 
/* The class Selector */
.center {
    text-align: center;
    color: red;
}
p.center {
    text-align: center;
    color: red;
} 
/* Grouping Selectors */
h1, h2, p {
    text-align: center;
    color: red;
}

 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

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

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

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

The order of the property values:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. 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

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
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

p {
    border: 5px solid red;
}

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