Get the App
SLTechnology News&Howtos  ›  Development  › 

How to define multiple styles in CSS

Shulou Source: shulou.com Published: 2022-06-01 04:19:12 10月04日 Update

Next, please follow the editor to study!

Or define multiple formats for a border, such as:

P.aside {border-style: solid dotted dashed double;}

The following provision defines four border techniques for a paragraph named aside: the top border of the solid line, the left border of the dotted line, the lower border of the dotted line, and a double left border.

We also see that the values here take the measures of top-right-bottom-left, and we have also seen this in the case of using multiple values to configure unsuitable inner margins.

Defining unilateral techniques

If you want to set up a border pattern for one of the edges of the element box, instead of configuring all four border patterns, you can use the following one-sided border pattern attributes:

Border-top-style

Border-right-style

Border-bottom-style

Border-left-style

So these two methods are equivalent:

P {border-style: solid solid solid none;} p {border-style: solid; border-left-style: none;}

Hope: if you want to apply the second door path, you must put the unilateral attribute after the abbreviated attribute. Because if you put a unilateral attribute before border-style, the value of the abbreviated attribute will mask the unilateral value none.

At this point, the study of "how to define multiple styles in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Tags: Borders attributes variety styles learning multiple more abbreviations patterns help configuration utility next elements solid lines measures furnishings articles methods rules and regulations Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno macOS Linux OPPO Reno NVidia Shulou Tech Info