Frage zu CSS schreibweise

[Orac]

Hallo,
gibt es einen bestimmten Grund warum man einmal so schreibt in CSS

background: rgb(215, 215, 219) ;

und dan nwieder so
background: red ;

oder so
background:-color: red ;

für mich macht es alles das selbe

vielen Dank

 

[Aaron3219]

background: rgb(215, 215, 219) ;

und dan nwieder so
background: red ;

Nun ja, rgb erlaubt einem auch Farben auszuwählen, welche nicht vordefiniert ist.
Man könnte fragen, warum es dann überhaupt vordefinierte Farben gibt, wenn ich diese doch auch mit rgb darstellen kann.

Ich weiß es nicht genau, aber es könnte sein, dass sie aus reiner Bequemlichkeit hinzugefügt wurden oder (und das halte ich für wahrscheinlicher) es könnte auch sein, dass die vordefinierten Farben in den ganz frühen Zeiten hinzugefügt wurden. Irgendwann später kam die rgb Funktion und die vordefinierten Farben wurden einfach nie entfernt. Es gibt schließlich auch keinen Grund sie zu entfernen.

oder so
background:-color: red ;

Der Unterschied zu background ist, dass background allgemeiner gehalten ist (sowas nennt man auch shorthand). In dieser Funktion kannst du nämlich nicht nur eine Farbe einstellen, sondern auch noch viele andere background properties, wie zum Beispiel background-size, background-position, background-color, background-image, etc.. Das könnte dann z.B. so aussehen:

background: #ededed url("your_image.png") no-repeat right top;

anstatt:

  background: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;

Warum dann nicht immer den shorthand nutzen?

Stell dir zum Beispiel vor, du musst (aus irgendwelchen Gründen) dein shorthand ständig ändern.

.myClass {
    background: #ededed url("your_image.png") no-repeat right top;
}

.myClass:hover {
    background: #ededed url("your_image2.png") no-repeat right top;
}

.myClass:active {
    background: #ededed url("your_image3.png") no-repeat right top;
}

.myClass.secondclass {
    background: #ededed url("your_image4.png") no-repeat right top;
}

.myClass#changed {
    background: #ededed url("your_image5.png") no-repeat right top;
}

Es ändert sich also nur das Hintergrundbild, welches abhängig von den anderen Klassen/IDs oder mouse events ist. Wenn du dich jetzt aber entscheidest, z.B. das Hintergrundbild doch von no-repeat auf repeat zu stellen, müsstest du es für jeden einzelnen Fall ändern. Hier mag es noch übersichtlich sein, aber bei größeren Projekten mit vielen CSS files wird das schon schwieriger.

Aus diesem Grund macht das hier mehr Sinn:

.myClass {
    background: #ededed url("your_image.png") no-repeat right top;
}

.myClass:hover {
    background-image: url("your_image2.png");
}

.myClass:active {
    background-image: url("your_image3.png");
}

.myClass.secondclass {
    background-image: url("your_image4.png");
}

.myClass#changed {
    background-image: url("your_image5.png");
}

Es gibt übrigens auch noch viele andere shorthands, wie z.B. padding oder margin.

 

[Orac]

besten Dank für die erklärung
Das mit padding und margin kenn ich ein wenig, nur mit dem background noch nicht.