CSS Background saīsinajumi (shorthand)

Mazliet par CSS Background īpašību (property) un CSS koda saīsināšanu.

Background aprakstīšanai tiek izmantota šāda shēma ( CSS Background Properties ) :

kaut_kaads_elements {
background-color: color | #hex | (rgb / % | 0-255);
background-image: url(URI) | none;
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
background-attachment: scroll | fixed;
background-position: X Y | (top|bottom|center) (left|right|center);
}

Dažas CSS īpašības (properties) var saīsināt (pierakstīt saīsināti) vienā īpašībā.
Nesaīsināts piemērs:

.piemers1 {
background-color: #ffff00;
background-image: url(css/guru.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 10px;

color: #777777;
}

Augstāk minētās background-* īpašības var saīsināt vienā - background īpašībā.
Tas pats kods saīsināti:

.piemers1 {
background: #ff0 url(css/guru.png) no-repeat 50% 10px;

color: #777;
}
/* Ja kāda īpašība iztrūkst, tad tiek ņemta tās noklusētā vērtība. */

Krāsu kodus arī var saīsināt: CSS: Use Shorthand Hex Colors - hexadecimal shorthand notation optimize css

Citi saīsināti piemēri:

.piemers2 {
background: #0ff url(css/guru.png) repeat-x;

color: #777;
}
/* Atkārto bildi pa X asi. */

.piemers3 {
background: #f0f url(css/guru.png) no-repeat top right;

color: #777;
}
/* Neatkārto bildi. Bildi ieliek augšējā labajā stūrī. */

.piemers4 {
background: #00f url(css/guru.png) no-repeat bottom left;

color: #777;
}
/* Neatkārto bildi. Bildi ieliek apakšējā kreisajā stūrī. */

.piemers5 {
background: #f0f url(css/guru.png);

color: #777;
}
/* Noklusēti bilde tiek ielikta kreisajā augšējā stūrī un atkārtota pa X un Y asīm. */

.piemers6 {
background: #fff;

color: #777;
}
/* Bildes nav. Ir tikai balta fona krāsa. */

background-attachment: fixed; efektu var apskatīties te (video bilde kreisajā malā paliek uz vietas).

Saīsināt var arī: Font, Border, Margin, Padding, List-style īpašības. Par to - citreiz. css shorthand - Google meklēšana, CSS Formatter and Optimiser/Optimizer (based on CSSTidy)

1 Komentāri

X

^^^

Personal ToolBar

© 2004 - 2007, 2012 programma-robots BlackHalt [PGP Public Key]

web design and code by BlackHalt