A Cascading Style Sheet (CSS) is 'n stelsel vir webwerf -kodering waarmee ontwerpers verskeie funksies tegelyk kan manipuleer deur sekere elemente aan groepe toe te ken. Deur byvoorbeeld 'n kode vir die webwerf -agtergrond te gebruik, kan ontwerpers die agtergrondkleur of -beeld op alle bladsye van die webwerf verander met een verandering in die CSS -lêer. Hier is hoe u CSS vir 'n basiese webwerf kan skep.
Stappe
Deel 1 van 4: Inline CSS skryf
Stap 1. Maak seker dat u 'n basiese begrip van HTML -etikette het
U moet weet hoe etikette werk en van die
src
en
href
eienskappe.
Stap 2. Leer 'n paar van die basiese CSS -eienskappe
U sal vind dat daar baie eiendomme is. Dit is egter nie nodig om hulle almal te leer nie.
-
'N Paar goeie basiese CSS -eienskappe wat u moet ken, is
kleur
en
Font familie
- .
Stap 3. Leer meer oor waardes vir elke onderskeie eiendom
Alle eiendomme benodig 'n waarde. Vir die
kleur
eiendom, byvoorbeeld, kan u die
rooi
waarde.
Stap 4. Leer meer oor die
styl
HTML -eienskap.
Dit word gebruik in 'n element soos
href
of
src
. Om dit te gebruik, plaas die aanhalingstekens na die gelyke teken die CSS -kenmerk, 'n dubbelpunt en dan die waarde van die eiendom. Dit staan bekend as 'n CSS -reël.
Stap 5. Verstaan dat inline CSS gewoonlik nie vir webwerwe deur professionele webontwikkelaars gebruik word nie
Inline CSS kan onnodige warboel by 'n HTML -dokument voeg. Dit is egter 'n uitstekende manier om kennis te maak met hoe CSS werk.
Deel 2 van 4: Basiese CSS skryf
Stap 1. Begin die program wat u wil gebruik
Dit moet u toelaat om HTML- en CSS -lêers te skep.
As u nie 'n spesiale program geïnstalleer het nie, kan u Notepad of 'n ander teksredakteur gebruik. Stoor u lêer eenvoudig as 'n tekslêer en 'n CSS -lêer
Stap 2. Maak die HTML -lêer vir u webwerf oop
U moet dit ook met 'n HTML -redakteur oopmaak as u een geïnstalleer het.
Met HTML -redakteurs kan u HTML en CSS op dieselfde tyd wysig
Stap 3. Skep 'n merker in u HTML -kop
Hiermee kan u CSS skryf sonder dat 'n aparte lêer nodig is.
Stap 4. Kies 'n element waaraan u styl wil voeg en tik die naam van die element, gevolg deur 'n stel krulhakies ({})
Om u kode leesbaarder te maak, moet u altyd die tweede krulhouer op sy eie lyn plaas.
Stap 5. Tik tussen u hakies u CSS -reëls soos u sou gebruik
styl
kenmerk.
Elke reël moet eindig met 'n kommapunt (;). Om u kode leesbaar te maak, moet elke reël op sy eie reël begin en elke reël moet ingekeep word.
Dit is baie belangrik om daarop te let dat hierdie styl alle elemente van die geselekteerde tipe op die bladsy sal beïnvloed. Meer spesifieke styl sal in die volgende afdeling behandel word
Deel 3 van 4: Meer gevorderde CSS
Stap 1. Skep 'n CSS -lêer, nie 'n HTML -lêer nie, en stoor dit met die
.css
uitbreiding.
Maak ook u HTML -lêer oop.
Stap 2. Skep 'n merker in u HTML -kop
Hiermee kan u 'n aparte CSS -lêer aan u HTML -dokument koppel. U skakelmerker benodig drie eienskappe:
t.o.v.
tipe
en
href
-
t.o.v.
beteken 'verhouding' en vertel die blaaier wat die verhouding met die HTML -dokument is. Hier moet dit 'n waarde van
"stylblad"
- .
-
tipe
vertel met watter tipe media gekoppel word. Hier moet dit 'n waarde van
"teks/css"
-
href
- hier word op dieselfde manier gebruik as hoe dit in 'n element gebruik word, maar hier moet dit skakel na 'n CSS -lêer. As die CSS -lêer in dieselfde gids as die HTML -lêer geleë is, hoef slegs die lêernaam binne die aanhalingstekens geskryf te word.
Stap 3. Kies elemente van verskillende tipes waaraan u dieselfde styl wil voeg
Voeg 'n
klas
ken hierdie elemente toe en stel dit gelyk aan 'n klasnaam van u keuse. Dit gee u elemente dieselfde styl.
Stap 4. Gee aan watter styl 'n klas sal ontvang
Tik die klasnaam in u CSS -lêer met 'n tydperk (.) Vooraf (d.w.s.
.klas
).
Stap 5. Kies enkele elemente waaraan u 'n spesiale styl wil voeg en voeg 'n
id
kenmerk.
ID's word in CSS geskep met behulp van 'n pond -simbool (#) eerder as 'n tydperk.
ID's is meer spesifiek as klasse, so 'n ID sal enige klasstyl oorheers as dit 'n kenmerk met 'n ander waarde as die klas het
Deel 4 van 4: Meer leer
Stap 1. Besoek die w3 -skole
Dit is 'n amptelike webwerf wat daarop gemik is om vaardighede in webontwikkeling aan te leer. Die w3 bevat baie verwysings vir HTML en CSS, sowel as ander web tale.
Stap 2. Soek ander webwerwe wat spesifiek daarop gemik is om HTML en CSS te leer en te onderrig
Webwerwe soos CSS tricks.com is spesifiek daarop gemik om CSS- en webontwerpvaardighede aan te leer. Om betroubare bronne te vind, sal u help met u leerreis.
Stap 3. Kom in aanraking met webontwerpers en ontwikkelaars
Hulle ervaring en know-how kan u waardevolle kennis en vaardighede leer.
Stap 4. Bekyk die bronkode van webwerwe wat u teëkom
As u die CSS van goed ontwikkelde webwerwe bekyk, kan u wys hoe u dele van webwerwe kan ontwerp. As u dit as 'n oefenprogram kopieer, kan u leer hoe u verskillende CSS -eienskappe kan gebruik.
