Hoe om css te skep

`N Cascading stylblad (CSS) is `n stelsel vir webwerf-kodering wat ontwerpers toelaat om verskeie funksies gelyktydig te manipuleer deur sekere elemente aan groepe toe te ken. Byvoorbeeld, deur die gebruik van `n kode vir die webwerf agtergrond, kan ontwerpers die agtergrondkleur of beeld op alle bladsye van die webwerf verander met een verandering in die CSS-lêer. Hier is hoe om CSS te skep vir `n basiese webwerf.

Stappe

Deel 1 van 4:
Skryf inline CSS
  1. Beeld getiteld Skep CSS Stap 1
1. Maak seker dat jy `n basiese begrip van HTML-etikette het. Jy moet weet hoe etikette werk en van die sr en href eienskappe.
  • Beeld getiteld Skep CSS Stap 2
    2. Leer `n paar van die Basiese CSS Properties. U sal vind dat daar baie eiendomme is. Dit is egter nie nodig om hulle almal te leer nie.
  • Sommige goeie basiese CSS-eiendomme om te weet is kleur en Font familie.
  • Beeld getiteld Skep CSS Stap 3
    3. Leer oor waardes vir elke onderskeie eiendom. Alle eiendomme het `n waarde nodig. Vir die kleur Eiendom, byvoorbeeld, kan jy die rooi waarde.
  • Beeld getiteld Skep CSS Stap 4
    4. Leer oor die styl Html attribuut. Dit word binne `n element gebruik href of sr. Om dit te gebruik binne die aanhalingstekens na die gelyke teken, sit die CSS-kenmerk, `n kolon en dan die waarde van die eiendom. Dit staan ​​bekend as `n CSS-reël.
  • Beeld getiteld Skep CSS Stap 5
    5. Verstaan ​​dat inline CSS gewoonlik nie vir webwerwe gebruik word deur professionele webontwikkelaars nie. Inline CSS kan onnodige rommel by `n HTML-dokument voeg. Dit is egter `n goeie manier om bekend te stel aan hoe CSS werk.
    • Deel 2 van 4:
    Skryf basiese CSS
    1. Beeld getiteld Skep CSS Stap 6
    1. Begin die program wat u verlang om te gebruik. Dit moet jou 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 eenvoudig jou lêer sowel as `n tekslêer en `n CSS-lêer.
  • Beeld getiteld Skep CSS Stap 7
    2. Maak die HTML-lêer oop vir jou webwerf. U moet dit ook met `n HTML-redakteur oopmaak, as u een geïnstalleer het.
  • HTML-redakteurs laat jou toe om HTML en CSS op dieselfde tyd te wysig.
  • Beeld getiteld Skep CSS Stap 8
    3. Skep `n merker in jou HTML-kop. Dit sal jou toelaat om CSS te skryf sonder die behoefte aan `n aparte lêer.
  • Beeld getiteld Skep CSS Stap 9
    4. Kies `n element Jy wil stilering byvoeg en tik die naam van die element gevolg deur `n stel krullerige hakies ({ }). Om jou kode meer leesbaar te maak, sit altyd die tweede krullerige stut op sy eie lyn.
  • Beeld getiteld Skep CSS Stap 10
    5. Tik tussen die hakies, tik jou CSS-reëls soos wat jy die styl attribuut. Elke lyn muf eindig met `n semikolon (-). Om u kode leesbaar te maak, moet elke reël op sy eie lyn begin en elke lyn moet ingedruk word.
  • Dit is baie belangrik om daarop te let dat hierdie stilering sal beïnvloed almal Elemente van die gekose tipe op die bladsy. Meer spesifieke stilering sal in die volgende afdeling gedek word.
    • Deel 3 van 4:
    Meer gevorderde CSS
    1. Beeld getiteld Skep CSS Stap 11
    1. Skep `n CSS-lêer, nie `n HTML-lêer nie en stoor dit met behulp van die .css aanbousel. Maak ook jou HTML-lêer oop.
  • Beeld getiteld Skep CSS Stap 12
    2. Skep `n Tag in jou HTML kop. Dit sal jou toelaat om `n aparte CSS-lêer te koppel aan jou HTML-dokument. Jou skakel tag benodig drie eienskappe: rel, tipe, en href.
  • rel beteken "verhouding" en vertel die blaaier wat die verhouding is vir die HTML-dokument. Hier moet `n waarde van "styleheet".
  • tipe vertel watter tipe media gekoppel word aan. Hier moet `n waarde van "Teks / CSS"
  • href hier word soortgelyk aan 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, moet slegs die lêernaam binne die aanhalingstekens geskryf word.
  • Beeld getiteld Skep CSS Stap 13
    3. Kies elemente van verskillende tipes wat u wil byvoeg, dieselfde stilering aan. Voeg `n klas kenmerk aan hierdie elemente en stel hulle gelyk aan `n klas naam van u keuse. Dit sal jou elemente dieselfde styling gee.
  • Beeld getiteld Skep CSS Stap 14
    4. Ken die styl van `n klas toe. Tik die klas naam in u CSS-lêer met `n tydperk (.) wat dit voorafgaan (i.e. .klas).
  • Beeld getiteld Skep CSS Stap 15
    5. Kies enkelelemente wat jy wil byvoeg en voeg `n id attribuut. ID`s word in CSS geskep deur `n pond simbool te gebruik (#) eerder as `n tydperk.
  • ID`s is meer spesifiek as klasse, dus `n ID sal enige klasstyl ignoreer as dit `n kenmerk het met `n ander waarde as die klas.
    • Deel 4 van 4:
    Leer meer
    1. Beeld getiteld Skep CSS Stap 16
    1
    Besoek die W3-skole. Dit is `n amptelike webwerf wat daarop gemik is om webontwikkelingsvaardighede te onderrig. Die W3 het baie verwysings vir HTML en CSS, sowel as ander webtaal.
  • Beeld getiteld Skep CSS Stap 17
    2. Vind ander webwerwe wat spesifiek daarop gemik is om HTML en CSS te leer en te onderrig. Webwerwe soos CSS Tricks.mededelbaan is spesifiek daarop gemik om CSS en webontwerpvaardighede te onderrig. Om betroubare bronne te vind, sal u help op u leerreis.
  • Beeld getiteld Skep CSS Stap 18
    3. Kom in kontak met webontwerpers en ontwikkelaars. Hul ervaring en know-how kan u waardevolle kennis en vaardighede leer.
  • Beeld getiteld Skep CSS Stap 19
    4. Bekyk die bronkode van webwerwe wat jy kry. Kyk na die CSS van goed ontwikkelde webwerwe kan jou maniere wys om dele van webwerwe te ontwerp. Kopieer dit af as oefening en fiddling met die kode kan jou help om te leer hoe om verskillende CSS-eienskappe te gebruik.

    • Video

    Deur hierdie diens te gebruik, kan sommige inligting met YouTube gedeel word.

    Wenke

    Daar is baie verskillende eienskappe wat jy met CSS kan manipuleer. Vind `n webwerf met `n styl wat jy wil en bekyk die bronlêer. As daar `n CSS-lêernaam gekoppel is aan die bokant in die kopmerke, kan u daarop klik om die verskillende eienskappe en waardes wat aan die elemente toegewys is, te sien.

    Waarskuwings

    Direk kopieer html en css kodering kan u help om te leer, maar u moet u eie ontwerp idees gebruik. Neem iemand anders se ontwerp is diefstal en plagiaat.
    Deel op sosiale netwerke:
    Soortgelyk