How to use div css-Front-end Q&A-php.cn

How to use div css

PHPz

Release： 2023-05-14 22:36:07

Original

1027 people have browsed it

div is one of the most commonly used tags in HTML, which is used to create web page layouts. CSS (Cascading Style Sheets) can be used to control the style of divs. In this article, we will explore how to control the styling of divs using CSS.

First, we need to understand some CSS properties, which can be used to control the appearance and behavior of divs. The following are some common CSS properties:

background-color: used to set the background color of the div.
color: used to set the color of text.
border: used to set the style, color and width of the border.
width and height: used to set the width and height of the div.
margin and padding: used to set margins and padding.

Here is an example showing how to use CSS to style a div:

<div style="background-color: yellow; color: blue; border: 1px solid black; width: 200px; height: 200px; margin: 20px; padding: 10px;">
这是一个div
</div>

Copy after login

In the above example, we used the style attribute to style the div. We set the background color to yellow, the text color to blue, and the border to 1 pixel, solid, black. The width and height are set to 200 pixels each, the margins are set to 20 pixels, and the padding is set to 10 pixels. Finally, we added some text "This is a div".

Although you can add CSS styles directly in HTML using the style attribute, this is not a recommended way because it will cause code duplication and be difficult to maintain. A better way is to define the CSS style in a separate CSS file and then reference it in the HTML. Here is a sample CSS file:

/* 定义div样式 */
div {
  background-color: yellow;
  color: blue;
  border: 1px solid black;
  width: 200px;
  height: 200px;
  margin: 20px;
  padding: 10px;
}

Copy after login

In the above example, we defined a div style and then referenced it in the HTML. The following is a sample HTML code:

<!DOCTYPE html>
<html>
<head>
  <title>使用CSS控制div样式</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div>
    这是一个div
  </div>
</body>
</html>

Copy after login

In the above HTML code, we have referenced the CSS file through the tag in the tag. Inside the

tag, we did not add a style attribute, but used the style previously defined in the CSS file.

To sum up, using CSS can effectively control the style of divs. Whether you use the style attribute or define the style in a CSS file, you can make the code clearer and easier to maintain.

The above is the detailed content of How to use div css. For more information, please follow other related articles on the PHP Chinese website!