Let's talk about the basic usage and implementation methods of CSS

CSS (Cascading Style Sheets) is a language used to describe the layout and display effects of web pages. It can control the style, font, color, size, position, etc. of elements in HTML pages. This article will introduce the basic usage and implementation methods of CSS.

1. Basic usage of CSS

CSS is usually included in an HTML file or an external CSS file. CSS styles can be defined in the following two ways:

1. Internal style sheet: Write the CSS code directly in the tag of HTML style> tag, for example:

nbsp;html>

  
    <title>CSS 实现方法</title>
    <style>
      body {
        background-color: lightblue;
      }
      h1 {
        color: white;
        text-align: center;
      }
    </style>
  
  
    <h1 id="这是一个标题">这是一个标题</h1>
    <p>这是一个段落。</p>
  

In the above example, the background color of the

body element is set to light blue, h1 The text color of the element is white and it is centered.

External style sheet: Define the CSS style in a separate .css file, and then introduce it in the HTML file through the
2. tag, for example:

nbsp;html>

  
    <title>CSS 实现方法</title>
    <link>
  
  
    <h1 id="这是一个标题">这是一个标题</h1>
    <p>这是一个段落。</p>
  

In the above example, the

styles.css file contains all CSS style definitions.

2. CSS implementation methods

The following introduces some common CSS styles and their implementation methods.

Text-related styles

(1) Change the font size

Use the

font-size attribute to change the font size, for example :

p {
  font-size: 18px;
}

(2) Change the font color

Use the

color attribute to change the font color, for example:

p {
  color: red;
}

(3) Change the font style

Use the

font-style attribute to change the font style, for example:

p {
  font-style: italic;
}

Box model related styles

By modifying the box model Styles can control the size and position of each element on the page.

(1) Modify the size of the element

Use the

width and height attributes to change the width and height of the element, for example:

div {
  width: 200px;
  height: 100px;
}

(2) Change the position of the element

Use

position and left, right, top, bottom attribute to change the position of the element, for example:

div {
  position: absolute;
  left: 100px;
  top: 50px;
}

In the above example, the

position attribute is set to absolute, and then use left and top attributes to position the div element to the middle of the page.

Background related styles

By modifying the background style of elements, you can make the web page more beautiful.

(1) Modify the background color

Use the

background-color attribute to change the background color of the element, for example:

body {
  background-color: lightblue;
}

(2) Modify the background Image

Use the

background-image attribute to set the background image, for example:

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

There are many ways to implement CSS, and only some common styles are given above. and implementation methods. If you want to be an excellent web developer, you need to constantly master new CSS skills and implementation methods.

The above is the detailed content of Let's talk about the basic usage and implementation methods of CSS. For more information, please follow other related articles on the PHP Chinese website!