How to set div style with css

CSS (Cascading Style Sheets) is an integral part of front-end development. Through CSS, we can set the style of web pages, including fonts, colors, layout, borders, etc. Among them, setting div style is one of the most common operations, because div is one of the most commonly used elements in web pages.

1. Basic understanding of div

In HTML, div is a container element, which can be used to contain other elements to implement web page layout. Generally, we will set a class or id attribute for the div element to control its style through CSS. The following is a code example of a simple div element:

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

2. Methods of setting div styles

There are many ways to set div styles. Here we introduce some of the commonly used methods.

1. Set styles using class names

In CSS, we can set styles through class names. First, set a class name for the div element in HTML:

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

Then, set the style for the class name in CSS:

.example {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    padding: 10px;
}

In the above code, we set the class name for example The div element sets the background color, borders, and padding.

2. Set style using ID

In addition to the class name, we can also use id to set div styles. Unlike class names, ids are unique and are only allowed to appear once in an HTML page. Therefore, using id to set styles is more targeted. The following is a sample code that uses id to set styles:

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

#example {
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    padding: 10px;
}

In the above code, we set the background color, border and padding for the div element with the id of example. It should be noted that the setting methods of id and class are different, and id needs to be marked with the # symbol in HTML.

3. Use sub-element selectors to set styles

In addition to setting styles through class names and ids, we can also use sub-element selectors (sub-element selectors refer to The relationship between sub-elements) to set the div style. The following code example demonstrates how to use the child element selector to set styles:

<div class="container">
    <h2>一个标题</h2>
    <p>这是div容器中的文本</p>
</div>

.container p {
    color: red;
}

In the above code, we set the color to red for the p element in the div element with the class container attribute. The child element selector is used here to control the style of the p element. This is a practical method that can be flexibly applied as needed.

4. Use pseudo-classes to set styles

Pseudo-classes in CSS can add special style effects to elements. Common pseudo-classes include:hover, :active, :focus, etc. The following is a sample code that uses pseudo-classes for styling:

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

.example:hover {
    background-color: yellow;
}

In the above code, we use the :hover pseudo-class to set the background color to yellow when the mouse is hovering over the div element.

3. Summary

Through the introduction of this article, we have learned about several common methods of setting div styles, including using class names, ids, sub-element selectors and pseudo-classes. For front-end development, mastering CSS styles is very important, as it allows us to develop web pages more efficiently.

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