CSS bemutató kezdőknek 1
Ebben a fejezetben fogunk beszélni, hogyan kell használni a CSS rendelni a színe egy elem és annak háttere, valamint hogyan kell használni a képet, mint a háttér elem és ellenőrzés álláspontját.
Mielőtt közvetlenül a képzés, akkor kiad egy rövid kitérőt a következő témában: „A színek az interneten”
Színes CSS lehet meghatározni három módja van:
- Névérték, mint például: piros - piros.
- RGB értéket. pl: RGB (255,0,0) - ismét piros.
- Hexadecimális RGB értéket. pl: # FF0000 - mindegy piros.
Névleges szín érték minden tiszta fekete - fekete, zöld - zöld, olíva - olívaolaj, stb (Full paletta az alapszínek, azaz a színek számára fenntartott a névérték, lásd itt.)
Azonban nyilvánvaló okokból nem minden árnyalatú színek fenntartott egyedi nevet. Ha szükséges használni bármely „nem standard” színek meghatározására van szükség annak RGB érték, (vörös, zöld. Kék) kombinációja a vörös, zöld és kék színű számszerűsítve. Minden színárnyalat a primer színek az RGB rendszerben ki lehet fejezni egy számot 0 és 255.
Például a fekete színt kell beállítani, hogy 0,0,0 azaz hiányában színű. White - értéke 255.255.255 elméletileg ha keverednek az alapszínek kell fordulni fehér, de ez olyan, mint a klasszikus kék szín értéke 0,0,255 azaz „festőállvány” csak a kék van jelen. Az ábrán jól látszik, hogy mi történik a színek, ha összekeverjük, a keverési árnyalatú alapszín érhető el minden szín a látható spektrum.
Azonban a legtöbb esetben „Web színek” a kifejezése hexadecimális RGB decimális értékeket.
A hexadecimális számok 10-15 helyébe a latin ábécé számegyenesen a következő alakú:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Nagyobb számok 15ti hexadecimális kombinálásával kialakított két vagy több számot egy. Például, a 255 számot megfelel a decimális szám hexadecimális FF.
Így annak érdekében, hogy kifejezze a kívánt árnyalat hexadecimális, szükségünk van három pár szám, ahol az első pár - piros érték, a második pár értéke zöld, a harmadik pár kék. Például, ugyanaz a klasszikus kék hexadecimális nézett volna ki, mint ez: # 0000FF. A hash mark előtte kerül, jelezve, hogy ez a szám hexadecimális, például száma # 808000 latin betűkkel, de semmi jele a rács egyértelmű, hogy ez hexadecimális és hangot ad olíva színű.
És még egy. kifejező szín hexadecimális, meg tudod csinálni a három szám, amelyet aztán ismétlődik, mint a #DAF felvétel lesz rövidítve #DDAAFF.
Huhh. Én ütött ki egy részét a víz, hadd végre megtanulni CSS ..
Annak érdekében, hogy átfestés a szövegét, elem a kívánt színt, meg kell használni a szín tulajdonság, és amely azt a kívánt értéket - a tényleges színét.
Mint már említettük, a szín, a CSS a következő módszerekkel lehet adni:
- # FF0000 - RGB hexadecimális szín értékeket.
- piros - névértéke a színt.
- RGB (255,0,0) - RGB értéket.
De az ingatlan background-color - meghatározza a háttér színét az elem.
A háttér színe a következő értékeket:
- # FF0000 - RGB hexadecimális szín értékeket.
- piros - névértéke a színt.
- RGB (255,0,0) - RGB értéket.
- átlátszó - átlátszó háttérrel. (Alapértelmezett)
Minden olyan elem, hozzá lehet rendelni egy háttérképet a CSS tulajdonságok: background-image.
Lehetséges értékek: background-image:
- url - az utat a képfájlt.
- none - Nincs kép. (Alapértelmezett)
Annak érdekében, hogy némi háttérképet egy elem meg kell adnia az elérési útvonalát összhangban a következő szintaxis url (a fájl elérési út / fájlnév). A fájl elérési útja van megadva az esetben, ha a kép egy másik mappába.
Az alábbi példában, mint az alap háttér (elem test) használunk egy grafikus kép, és egy másik blokk div, a lehetőségét, hogy különböző háttérképeket a különböző oldalelemek képes megoldani szinte bármilyen tervezési ötleteket.
Ha a kép nem tölti ki a teljes hátterét egy elem, akkor lefektetett „csempe”.
Fix a háttérképet teszi az ingatlan background-attachment. amely akár két érték egyikét:
- fix - fix alapon.
- görgetés - mobil háttér (ez az alapértelmezett).
Mint már említettük, ha a kép nem tölti ki a teljes hátterét egy elem, ez ismétlődik, és szét „csempe”. Az ingatlan background-repeat - állítja az ismétlés egy háttérképet.
- no-repeat - megtiltják ismétlés, mutasd csak egy képet.
- Ismétlés - kép (alapértelmezett).
- repeat-x - megismételni csak vízszintesen.
- repeat-y - megismételni csak függőlegesen.
A CSS tulajdonságok background-position - akkor az ellenőrzés a helyzet a háttérképet az elemeit, ha be van állítva a background-image.
A helyzet a háttérképet, pontosabban a bal felső sarokban, be lehet állítani, százalékban pixel, valamint bármely más CSS egység segítségével a két érték, ahol az első érték lesz tolva a bal szélén egy elem és egy második érték el van tolva a felső elem határ .
Például az eredménye: background-position: 200px 100px; jelzi, hogy a háttérkép vízszintesen elmozdul a 200 pixel a bal szegély elem és a függőleges 100 pixeleket a felső szegély elem.
Használhatja a következő értékeket:
vízszintes:- balra - balra.
- központ - középre.
- jobb - a jobb oldalon.
- top - tetején elhelyezve.
- központ - középre.
- alul - a készülék alján található.
Ja, és mindezek tetejében a feje egy kicsit alaptulajdonságait háttérben.
Alapvonásaként, háttér egyszerre fogadni ezen vagy más értékeit tulajdonságai leányvállalatai:
- háttér-attachment
- background-color
- background-image
- background-position
- background-repeat
Mindezek a tulajdonságok néztük fent, úgy, hogy menjen be részletesen nincs értelme ..
A kívánt értékeket leányvállalatok tulajdonságok által jelzett helyet, bármilyen sorrendben, és szükség szerint.
Amikor egy háttérképet a background-image tulajdonságok ugyanakkor kitöltési minta alternatív színes háttér színét. Tehát, ha bármilyen okból nem fogja betölteni a háttérkép vagy a felhasználó szándékosan tiltva a böngésző beállításait, képek letöltése, háttér elem nem marad „csupasz”.