Vizualni slog in postavitev spletnega mesta narekujeta CSS ali Cascading Style Sheets. To so dokumenti, ki oblikujejo oznako spletne strani spletne strani, s čimer nudijo spletnim brskalnikom navodila za prikaz strani, ki izhajajo iz te oznake. CSS obravnava postavitev strani, barvo, slike ozadja, tipografijo in še veliko več.
Če pogledate datoteko CSS, boste videli, da imajo te datoteke, kot vsak jezik označevanja ali kodiranja, določeno sintakso. Vsak slogovni list sestavlja več pravil CSS. Ta pravila, če so v celoti sprejeti, so tisto, kar sloge spletno stran.
Deli pravila CSS
Pravilo CSS sestavljajo dva različna dela - selektor in izjava. Izbirnik določi, kaj je na strani napisano, in deklaracija je, kako naj bo oblikovana. Na primer:
p {
barva: # 000;
}
To je pravilo CSS. Izbirni del je "p", ki je izbirnik elementov za "odstavke". Zato bi v vseh spletnih mestih izbrali VSE odstavke in jim zagotovili ta slog (razen če ne obstajajo odstavki, na katere ciljajo bolj specifični slogi drugje v vašem dokumentu CSS).
Del pravila, ki pravi "barva: # 000;" je tisto, kar imenujemo deklaracija. Ta izjava je sestavljena iz dveh delov - lastnine in vrednosti.
Lastnost je "barva" dela te izjave. Narekuje, kateri vidik selektorja bo vizualno spremenjen.
Vrednost bo spremenjena v izbrano lastnost CSS. V našem primeru uporabljamo hex vrednost v višini # 000, kar je CSS skrajšano za "črno".
Z uporabo tega pravila CSS bi naša stran imela odstavke, ki so prikazani v črni barvi pisave.
CSS lastnosti osnove
Ko napišete lastnosti CSS-ja, jih ne morete preprosto narediti, kot se vam zdi primerno. Za primere je "barva" dejanska lastnost CSS, zato jo lahko uporabite. Ta lastnost določi barvo besedila elementa. Če ste poskušali uporabiti "barvo besedila" ali "barva pisave" kot lastnosti CSS, bi to neuspešno, ker niso dejanski deli jezika CSS.
Drug primer je lastnost "background-image". Ta lastnost nastavi sliko, ki jo lahko uporabite za ozadje, na primer:
.logo {
ozadje-slika: url (/images/company-logo.png);
}
Če ste poskusili uporabiti "ozadje" ali "ozadje-grafika" kot lastnost, ne bi uspeli, ker to še enkrat niso dejanske lastnosti CSS.
Nekatere CSS lastnosti
Obstaja več lastnosti CSS, ki jih lahko uporabite za oblikovanje spletnega mesta. Nekaj primerov je:
- Meja (vključno z mejnim stilom, barvo obrobka in širino meje)
- Obloge (vključno z oblazinjenjem, obloga-desno, dnom za oblaganje in levo za oblazinjenje)
- Robovi (vključno z robnim robom, desnim robom, dnom robov in levim robom)
- Družina pisav
- Velikost pisave
- Barva ozadja
- Premer
- Višina
Te lastnosti CSS so odlične za uporabo kot primeri, saj so vse zelo enostavne in, čeprav ne poznate CSS, lahko verjetno uganite, kaj delajo na podlagi njihovih imen.
Obstajajo tudi druge lastnosti CSS, s katerimi se boste srečali, ki morda ne bodo tako očitne, kako delujejo na podlagi njihovih imen:
- Plavaj
- Počisti
- Prelivanje
- Besedilo-preoblikovanje
- Z-indeks
Ko boste globlje v spletno oblikovanje, boste naleteli (in uporabili) vse te lastnosti in še več!
Lastnosti zahtevane vrednosti
Vsakič, ko uporabljate nepremičnino, mu morate dati vrednost - in nekatere lastnosti lahko sprejmejo samo določene vrednosti.
V našem prvem primeru lastnosti "barve" moramo uporabiti barvno vrednost. To je lahko hex vrednost , vrednost RGBA ali celo barvne ključne besede . Katera koli od teh vrednosti bi delovala, če pa ste uporabili besedo "mračni" s to lastnostjo, to ne bi storilo ničesar, ker je to opisno kot ta beseda, to ni priznana vrednost v CSS.
Naš drugi primer »ozadja« zahteva, da se uporabljena pot do slike uporabi za pridobivanje dejanske slike iz datotek vašega spletnega mesta. To je vrednost / sintaksa, ki je potrebna.
Vse lastnosti CSS imajo vrednosti, ki jih pričakujejo. Na primer:
- Barvna meja pričakuje barvno vrednost
- Obmejna velikost pričakuje velikost, na primer pik ali odstotkov
- Slogi obrobe pričakujejo, da bo eden od rezerviranih stilov, uporabljenih za to znamko, kot je "trdna"
Če greste po seznamu lastnosti CSS, boste ugotovili, da ima vsak od njih določene vrednosti, ki jih bodo uporabili za ustvarjanje slogov, za katere so namenjeni.
Uredil Jeremy Girard