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 笔记一(Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width)

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

1 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

上一篇:如何使用SAE的Storage


下一篇:洛谷 P3749: LOJ 2146: [SHOI2017]寿司餐厅