Let's talk about the basic usage and implementation methods of CSS-Front-end Q&A-php.cn

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

PHPz

Release： 2023-04-13 10:36:44

Original

547 people have browsed it

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:

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

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

Copy after login

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.

tag, for example:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS 实现方法</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
  </body>
</html>

Copy after login

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.

(1) Change the font size

Use the

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

p {
  font-size: 18px;
}

Copy after login

(2) Change the font color

Use the

color attribute to change the font color, for example:

p {
  color: red;
}

Copy after login

(3) Change the font style

Use the

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

p {
  font-style: italic;
}

Copy after login

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;
}

Copy after login

(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;
}

Copy after login

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.

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;
}

Copy after login

(2) Modify the background Image

Use the

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

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

Copy after login

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!