CSS： Tutorial

2024-04-01 16:43:10

1、Three Ways to Insert CSS

With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The example below shows how to change the color and the left margin of a <h1> element:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

backgroud color 、 text color 、border color

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

Same as color name "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

The CSS background properties are used to define the background effects for elements.

CSS background properties:

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

body {
  background-image: url("paper.gif");
}

By default, the background-image property repeats an image both horizontally and vertically.

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for background is background:

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