Home > Article > Web Front-end > Let's talk about the basic usage and implementation methods of CSS

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

PHPzOriginal: 2023-04-13 10:27:40548browse

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>

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>

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

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

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.

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!

css html 样式表 position background

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use HTML and CSS to control the display and hiding of elementsNext article：How to use HTML and CSS to control the display and hiding of elements

See more

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

Related articles