Cascading Style Sheet (CSS) je sistem za kodiranje spletnih mest, ki oblikovalcem omogoča manipulacijo z več funkcijami hkrati z dodelitvijo določenih elementov skupinam. Oblikovalci lahko na primer z uporabo kode za ozadje spletnega mesta spremenijo barvo ozadja ali sliko na vseh straneh spletnega mesta z eno spremembo datoteke CSS. Tukaj je opisano, kako ustvariti CSS za osnovno spletno mesto.
Koraki
1. del od 4: Pisanje Inline CSS
Korak 1. Prepričajte se, da dobro poznate oznake HTML
Vedeti morate, kako oznake delujejo in
src
in
href
lastnosti.
Korak 2. Naučite se nekaterih osnovnih lastnosti CSS
Ugotovili boste, da je nepremičnin zelo veliko. Vsega pa se jih ni treba naučiti.
-
Nekatere dobre osnovne lastnosti CSS, ki jih morate poznati, so
barvo
in
družina pisav
- .
Korak 3. Spoznajte vrednosti za vsako lastnost
Vse lastnosti potrebujejo vrednost. Za
barvo
lastnino, lahko na primer postavite
rdeča
vrednost.
Korak 4. Spoznajte
slog
HTML atribut.
Uporablja se znotraj elementa, kot je
href
ali
src
. Če ga želite uporabiti, v narekovaje za znakom enakosti vnesite atribut CSS, dvopičje in nato vrednost lastnosti. To je znano kot pravilo CSS.
Korak 5. Zavedajte se, da vgrajeni CSS za spletna mesta običajno ne uporabljajo profesionalni spletni razvijalci
Inline CSS lahko dokumentu HTML doda nepotrebno nered. Vendar je to odličen način, da se seznanite z delovanjem CSS.
2. del 4: Pisanje osnovnega CSS
Korak 1. Zaženite program, ki ga želite uporabiti
Omogoča vam ustvarjanje datotek HTML in CSS.
Če nimate nameščenega posebnega programa, lahko uporabite Beležnico ali drug urejevalnik besedil. Preprosto shranite datoteko kot besedilno datoteko in datoteko CSS
Korak 2. Odprite datoteko HTML za svojo spletno stran
To morate odpreti tudi z urejevalnikom HTML, če je nameščen.
Urejevalniki HTML vam omogočajo urejanje HTML in CSS hkrati
Korak 3. Ustvarite oznako v glavi HTML
Tako boste lahko pisali CSS brez potrebe po ločeni datoteki.
Korak 4. Izberite element, ki mu želite dodati slog, in vnesite ime elementa, ki mu sledi niz kodrastih naramnic ({})
Če želite, da je vaša koda čitljivejša, vedno postavite drugo kodrasto oklepaj v njeno vrstico.
Korak 5. Med oklepaji vnesite pravila CSS, kot bi uporabili
slog
atribut.
Vsaka vrstica se mora končati s podpičjem (;). Da bo vaša koda čitljiva, se mora vsako pravilo začeti v svoji vrstici in vsaka vrstica mora biti zamaknjena.
Zelo pomembno je omeniti, da bo ta slog vplival na vse elemente izbrane vrste na strani. Podrobnejše oblikovanje bo obravnavano v naslednjem razdelku
3. del 4: Naprednejši CSS
Korak 1. Ustvarite datoteko CSS, ne datoteke HTML in jo shranite s pomočjo
.css
podaljšek.
Odprite tudi datoteko HTML.
Korak 2. Ustvarite oznako v glavi HTML
To vam bo omogočilo povezavo ločene datoteke CSS z vašim dokumentom HTML. Vaša oznaka povezave potrebuje tri atribute:
rel
tip
in
href
-
rel
pomeni "odnos" in brskalniku pove, kakšen je odnos do dokumenta HTML. Tu bi morala imeti vrednost
"slog"
- .
-
tip
pove, s katero vrsto medija so povezani. Tu bi morala imeti vrednost
"besedilo/css"
-
href
- tukaj se uporablja podobno kot v elementu, tukaj pa se mora povezati z datoteko CSS. Če se datoteka CSS nahaja v isti mapi kot datoteka HTML, je treba v narekovaje vnesti samo ime datoteke.
Korak 3. Izberite elemente različnih vrst, ki jim želite dodati isti slog
Dodajte a
razred
pripisati tem elementom in jih nastaviti enako imenu razreda po vaši izbiri. Tako bodo vaši elementi dobili enako obliko.
Korak 4. Določite, kakšen slog bo razred prejel
Vnesite ime razreda v datoteko CSS s piko (.) Pred njim (tj.
.razred
).
Korak 5. Izberite posamezne elemente, ki jim želite dodati poseben slog, in dodajte
id
atribut.
ID -ji so ustvarjeni v CSS -ju s simbolom funta (#) in ne s piko.
ID -ji so bolj specifični od razredov, zato bo id preglasil kateri koli slog razreda, če ima atribut z drugačno vrednostjo kot razred
4. del 4: Več o tem
Korak 1. Obiščite šole w3
To je uradna spletna stran, namenjena poučevanju veščin spletnega razvoja. W3 ima veliko referenc za HTML in CSS ter druge spletne jezike.
Korak 2. Poiščite druga spletna mesta, ki so posebej namenjena učenju in poučevanju HTML in CSS
Spletna mesta, kot je CSS tricks.com, so posebej namenjena poučevanju CSS in veščin spletnega oblikovanja. Iskanje uglednih virov vam bo pomagalo na vaši učni poti.
Korak 3. Stopite v stik s spletnimi oblikovalci in razvijalci
Njihove izkušnje in znanje vas lahko naučijo dragocenega znanja in spretnosti.
Korak 4. Oglejte si izvorno kodo spletnih mest, na katere naletite
Ogled CSS dobro razvitih spletnih mest vam lahko pokaže načine za oblikovanje delov spletnih mest. Če ga kopirate kot prakso in se poigravate s kodo, se lahko naučite uporabljati različne atribute CSS.
