A weboldal vizuális stílusát és elrendezését a CSS vagy a Cascading Style Sheets határozza meg. Ezek azok a dokumentumok, amelyek egy weboldal HTML-jelölését képezik, és a webböngészők rendelkezésére bocsátják az adott jelölésből származó oldalak megjelenítésével kapcsolatos utasításokat. A CSS kezeli az oldal elrendezését, valamint a színeket, háttérképeket, tipográfiát és még sok minden mást.
Ha megnézed a CSS fájlt, látni fogod, hogy mint bármely jelölő vagy kódoló nyelv, ezeknek a fájloknak van egy konkrét szintaxisa nekik. Minden stíluslap több CSS szabályból áll. Ezek a szabályok, ha teljes egészében megragadják, azok a stílusok.
A CSS szabályainak részei
A CSS-szabály két különálló részből áll - a választó és a nyilatkozat. A választó meghatározza, hogy mi van az oldalon egy stílusban, és a nyilatkozat hogyan kell stílusban formálni. Például:
p {
szín: # 000;
}
Ez egy CSS-szabály. A választó rész a "p", amely az "bekezdések" elemválasztója. Éppen ezért kiválasztaná az összes bekezdést egy webhelyen, és megadja nekik ezt a stílust (kivéve, ha vannak olyan bekezdések, amelyeket a CSS dokumentum más területein találtak).
A szabály, amely a "color: # 000;" az úgynevezett nyilatkozat. Ez a nyilatkozat két darabból áll - a tulajdon és az érték.
Az ingatlan e nyilatkozat "színes" része. Azt határozza meg, hogy a választó melyik aspektusa változik vizuálisan.
Az érték az, amire a választott CSS tulajdonság megváltozik. Példánkban a # 000 hex értéket használjuk, amely a CSS rövidítése a "fekete" kifejezésnek.
Tehát ennek a CSS-szabálynak a használatával az oldalunkon fekete-fehér betűk jelenhetnek meg.
CSS tulajdon alapjai
Amikor CSS tulajdonságokat írsz, akkor nem egyszerűen csak úgy készíted őket, ahogy látod. Példák esetén a "szín" egy tényleges CSS tulajdonság, így használhatja. Ez a tulajdonság határozza meg az elem szövegszínét. Ha a "text-color" vagy a "font-color" szót CSS-tulajdonságként próbálta használni, ezek nem sikerülnek, mert nem a CSS-nyelv tényleges része.
Egy másik példa a "háttér-kép" tulajdonság. Ez a tulajdonság egy olyan képet állít be, amelyet háttérként lehet használni:
.logo {
háttér-kép: url (/images/company-logo.png);
}
Ha "background-picture" vagy "background-graphic" mint tulajdonságot próbált használni, akkor nem sikerül, mert még egyszer ezek nem tényleges CSS-tulajdonságok.
Néhány CSS tulajdonság
Számos olyan CSS-tulajdonság található, amelyek segítségével webhelyet formázhat. Néhány példa:
- Szegély (beleértve a szegéllyel, a szegéllyel és a szegéllyel)
- Padding (beleértve a padding-top, padding-jobb, padding-bottom, és padding-left)
- Margó (beleértve a margó-felső, a margó-jobb, a margó alsó és a margó-bal oldali)
- Betűtípus család
- Betűméret
- Háttérszín
- Szélesség
- Magasság
Ezek a CSS tulajdonságok nagyszerűek példaként, mivel mind nagyon egyszerűek és még akkor is, ha nem ismeri a CSS-t, valószínűleg azt hiszi, hogy mit csinálnak a nevük alapján.
Vannak más CSS tulajdonságok is, amelyekkel találkozni is lehet, ami nem feltétlenül olyan nyilvánvaló, hogy a nevük alapján működnek:
- Úszó
- Egyértelmű
- Túlcsordulás
- Text-transzformáció
- Z-index
Ahogy mélyebbre esik a webdesign, akkor találkozni (és használni) ezeket a tulajdonságokat és így tovább!
Tulajdonságok szükséges értékek
Minden alkalommal, amikor egy ingatlanot használ, értéket kell adnia - és bizonyos tulajdonságok csak bizonyos értékeket fogadhatnak el.
A "szín" tulajdonságunk első példájánál színértéket kell használni. Ez lehet hexadecimális érték , RGBA érték, vagy akár színes kulcsszó . Az ilyen értékek közül bármelyik működni fog, azonban ha ezt a tulajdonságot használja a "kopár" szóval, akkor semmit sem tehet, mert mivel leíró jellegű, mint ez a szó, ez nem egy elismert érték a CSS-ben.
Másik "háttérkép" példánkban egy képpályát kell használni a tényleges kép lekéréséhez a webhely fájljairól. Ez a szükséges érték / szintaxis.
Minden CSS tulajdonságnak olyan értékei vannak, amelyeket elvárnak. Például:
- A határszín színértéket vár
- A határméret elvárja a méretezési értéket, például a képpontokat vagy százalékokat
- A határoló stílusok elvárják, hogy az adott tulajdonsághoz használt fenntartott stílusok egyike, például a "szilárd"
Ha átkerül a CSS tulajdonságok listáján, akkor rájössz, hogy mindegyiknek meghatározott értékei vannak, amelyeket használni fognak a létrehozni kívánt stílusok létrehozásához.
Szerkesztette Jeremy Girard