CSS two classes share one CSS
CSS Two classes share one CSS
When developing web pages, you often encounter situations where multiple elements need to share the same set of CSS styles. To improve code reusability and reduce repetitive work, we can group these elements into the same class and then define unified CSS styles for this class. This article will detail how to use CSS to share the same CSS style between two classes.
CSS Basics
Before understanding how to share the same CSS style between two classes, you need to first understand some CSS basics. CSS (Cascading Style Sheets) is a style sheet language used to control the layout and appearance of web pages. CSS style rules consist of selectors and declaration blocks. The selectors specify the HTML elements to which the styles are applied, while the declaration blocks contain the style attributes and values to be applied.
/* Basic structure of CSS style rules */
Selector {
Property 1: Value 1;
Property 2: Value 2;
...
}
Two classes share the same CSS style
If you want two classes to share the same CSS style, separate them with a comma. This will apply the defined CSS style to the elements represented by both classes.
/* Two classes share the same CSS style */
.class1, .class2 {
Property 1: Value 1;
Property 2: Value 2;
...
}
The following example illustrates how to share the same CSS style between two classes.
<!DOCTYPE html>
<html>
<head>
<style>
.button1, .button2 {
padding: 10px 20px;
background-color: #f00;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="button1">Button 1</button>
<button class="button2">Button 2</button>
</body>
</html>
In the example above, we defined two classes, .button1 and .button2, that share the same CSS style. Both buttons use these classes, and their styles behave identically.
Inheriting and Overriding Styles
In the previous example, we assigned two classes to the same CSS style. However, sometimes, we want an element to inherit the shared style and make some minor adjustments, which requires overriding some of the styles. In CSS, you can use descendant and child selectors to achieve this effect.
/* Inherit styles and override some styles */
.button1 {
padding: 10px 20px;
background-color: #f00;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button1.special {
background-color: #00f;
}
In the example above, the .button1.special selector specifies that when an element has both the .button1 and .special classes, specific styles are applied. This achieves the effect of inheriting common styles and overriding some styles in specific situations.
Summary
Through this article, we’ve learned how to share the same CSS stylesheet between two classes, achieving the effect of inheriting shared styles while overriding some of them. In actual web development, the proper use of CSS styles can improve code reusability and development efficiency.