CSS 学习笔记

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

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;

4> Background Attachment：

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

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:

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

 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

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

CSS 学习笔记

原文：http://www.cnblogs.com/hzj680539/p/5076011.html