Index of BlackHalt ImperiaLāpa

Krutums vēl ar tām BETA bļitkām! | / |
Meklis:
/_ Raksti //

CSS Background saīsinajumi (shorthand)

Diggot! Saveidojis BlackHalt šādā datumā: [ Ceturtdiena, 2007. gada 28. jūnijs , 07:29:48 ]
# Pastāvīgā saite (Permalink): http://neb.ija.lv/raksts343-1-1.html
« Mākslīgā migla |
Visi sadaļas ieraksti: Parādīt papildus rakstu izvēlni

Web 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

.piemers1

Background

Background

Citi saīsināti piemēri:

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

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

.piemers2

Background

Background

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

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

.piemers3

Background

Background

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

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

.piemers4

Background

Background

.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. */

.piemers5

Background

Background

.piemers6 {
background: #fff;

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

.piemers6

Background

Background

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

••
•• Raksti
~Tēmas:
• Drošība
• Mozilla
• None-LATNET
• PHP
• Linux
• Programmas
• Merkakis
• Undefined
•• Bildes
•• Book-m
•• Sviests
•• Ich
•• Piezīmes
•• Games
--
Arhīvs
RSS

^^^

Personal ToolBar

Get Firefox utf-8 GeoURL delicious

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

web design and code by BlackHalt

This Page Is Valid XHTML 1.0 Transitional!
This document validates as CSS!
[Valid RSS]
Time to render page: 0.056

200 boti un 100 zaglji

Ko darīt? - Interneto | Svilini Karsto Dzelzs Laika Termināli | Pieslēdzies internetam