How to change css div style

In web development, CSS is a very important tool. It can be used to control the style and layout of web pages. The div element is an integral part of web page layout. When using the div element, we can change its style through CSS to achieve the effect we want.

1. Style change method

1. Change the style through the class name

We can change the style of the div element by specifying its class name, as shown below:

<div class="mydiv">这是一个div元素</div>

Add a style to the class name in CSS:

.mydiv {
    background-color: #f7f7f7;
    padding: 10px;
}

In this way, the background color of the div element will become light gray, and the padding value will also be increased. Class names can be used for multiple elements and can easily be styled to a web page.

2. Change the style by ID name

We can also change the style of the div element by specifying its ID name, as follows:

<div id="mydiv">这是一个div元素</div>

In CSS Add a style to the ID name:

#mydiv {
    background-color: #f7f7f7;
    padding: 10px;
}

The background color and padding value of the div element will also change. It should be noted that the ID name should be unique within the web page, so it can only be used for one element.

3. Change the style through the tag name

We can also change the style of the div element by directly using the tag name, as shown below:

<div>这是一个div元素</div>

In CSS, it is Add a style to this tag name:

div {
    background-color: #f7f7f7;
    padding: 10px;
}

This will affect all div elements in the web page, so it needs to be used with caution.

2. Method of changing style attributes

In addition to using class, ID and tag name to change the style of div elements, we can also directly modify the style attributes in CSS to achieve this.

1. Background color setting

We can use the background-color attribute to set the background color of the div element, as shown below:

div {
    background-color: #f7f7f7;
}

This will set the background color of the div element Color is set to light gray.

2. Border setting

We can use the border attribute to set the border style of the div element, as shown below:

div {
    border: 1px solid #ccc;
}

This will set the border of the div element to 1px Thick solid border.

3. Rounded corner settings

We can use the border-radius attribute to set the rounded corner style of the div element, as shown below:

div {
    border-radius: 5px;
}

This will make the div element's rounded corner style All four corners are set to 5px rounded corners.

4. Shadow settings

We can use the box-shadow attribute to set the shadow style of the div element, as shown below:

div {
    box-shadow: 2px 2px 5px #888;
}

You can adjust the position and shadow of the div element as needed color.

3. Conclusion

The above are some commonly used CSS methods, which can help us easily achieve various web page layout effects. In practice, we need to choose an appropriate method to change the style of div elements according to the actual situation. After mastering these basic knowledge, we can better develop web pages and improve work efficiency.

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