CSS Background Property - Short for Long Form

Question

As I understand it, when using the shorthand property, the backgroundbrowser first sets all the background properties to default values, and then enters the values ​​that you declare. Is it better to use background-color:white; instead of background:white? Does this change when you add more values ​​like background position or background image? Or is it always better to declare attributes individually?

I think there must be some tipping point when savings in bytes balance processing time determined by individual attributes. However, I could be completely wrong - that is why I ask here.

Answer 1

I hear from you about best practices, but as already mentioned, processing differences and even loading times are not significant. There is no best practice for using these rules, other than what makes sense in your stylesheet. The real difference is that they affect inherited properties in different ways. The setting background-color: white;will only overwrite the rule background-color(regardless of whether it was originally set with backgroundor background-color), but backgroundwill overwrite the any / all rule set background, thus potentially killing background images and related images background-repeat, etc. Here is an example:

.box {
    background: url(star.png); // set with just background instead of background-image
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
}
.box1 {
    background-color: blue;
}
.box2 {
    background: green;
}

With HTML like:

<div class="box1 box"></div>
<div class="box2 box"></div>

.box1 star.png( , ), .box2 , . , CSS , . , , background / , , , background-color, background-image ..

Answer 2

CSS . - , , .

background: color background-color: color .

, . , . ( font), , .

, , . , margin padding -top, -right, -bottom -left, border border-width, border-color border-style, border-[direction]-[attribute]. border - , 11 .