Kaskadinio stiliaus lapas (CSS) yra svetainių kodavimo sistema, leidžianti dizaineriams vienu metu manipuliuoti keliomis funkcijomis, priskiriant tam tikrus elementus grupėms. Pavyzdžiui, naudodami svetainės fono kodą, dizaineriai gali pakeisti fono spalvą ar vaizdą visuose svetainės puslapiuose, pakeisdami vieną CSS failą. Štai kaip sukurti CSS pagrindinei svetainei.
Žingsniai
1 dalis iš 4: Įterptosios CSS rašymas
Žingsnis 1. Įsitikinkite, kad turite pagrindinį supratimą apie HTML žymas
Turėtumėte žinoti, kaip veikia žymos ir
src
ir
href
atributus.
2 žingsnis. Sužinokite kai kurias pagrindines CSS ypatybes
Pamatysite, kad yra labai daug savybių. Tačiau nebūtina jų visų išmokti.
-
Yra keletas gerų pagrindinių CSS savybių, kurias reikia žinoti
spalva
ir
šrifto šeima
- .
3 žingsnis. Sužinokite apie kiekvienos nuosavybės vertes
Visoms savybėms reikia vertės. Už
spalva
nuosavybė, pavyzdžiui, galite įdėti
raudona
vertės.
Žingsnis 4. Sužinokite apie
stilius
HTML atributas.
Jis naudojamas tokiame elemente kaip
href
arba
src
. Jei norite jį naudoti, kabutėse po lygybės ženklo įveskite CSS atributą, dvitaškį ir tada nuosavybės vertę. Tai žinoma kaip CSS taisyklė.
Žingsnis 5. Supraskite, kad profesionalus žiniatinklio kūrėjas paprastai neįtraukia CSS į svetaines
Įterptas CSS gali pridėti nereikalingą netvarką prie HTML dokumento. Tačiau tai puikus būdas susipažinti su CSS veikimu.
2 dalis iš 4: Pagrindinės CSS rašymas
Žingsnis 1. Paleiskite programą, kurią norite naudoti
Tai turėtų leisti jums sukurti HTML ir CSS failus.
Jei neturite įdiegtos specialios programos, galite naudoti „Notepad“ar kitą teksto rengyklę. Tiesiog išsaugokite failą kaip tekstinį failą ir CSS failą
Žingsnis 2. Atidarykite savo svetainės HTML failą
Tai taip pat turėtumėte atidaryti naudodami HTML redaktorių, jei jį įdiegėte.
HTML redaktoriai leidžia redaguoti HTML ir CSS vienu metu
Žingsnis 3. Sukurkite žymą savo HTML antraštėje
Tai leis jums rašyti CSS be atskiro failo.
4 veiksmas. Pasirinkite elementą, prie kurio norite pridėti stilių, ir įveskite elemento pavadinimą, po kurio eina garbanotų skliaustų rinkinys ({})
Kad jūsų kodas būtų labiau įskaitomas, antrą garbanotą petnešą visada uždėkite ant savo eilutės.
Žingsnis 5. Tarp skliaustų įveskite savo CSS taisykles, kaip ir naudodami
stilius
atributas.
Kiekviena eilutė turi baigtis kabliataškiu (;). Kad jūsų kodas būtų įskaitomas, kiekviena taisyklė turėtų prasidėti savo eilutėje ir kiekviena eilutė turėtų būti įtraukta.
Labai svarbu pažymėti, kad šis stilius paveiks visus pasirinkto tipo elementus puslapyje. Tikslesnis stilius bus aptartas kitame skyriuje
3 dalis iš 4: Išplėstinė CSS
Žingsnis 1. Sukurkite CSS failą, o ne HTML failą, ir išsaugokite jį naudodami
.css
pratęsimas.
Taip pat atidarykite savo HTML failą.
Žingsnis 2. Sukurkite žymą savo HTML galvutėje
Taip galėsite susieti atskirą CSS failą su savo HTML dokumentu. Nuorodos žymai reikia trijų atributų:
rel
tipo
ir
href
-
rel
reiškia „ryšys“ir nurodo naršyklei, koks yra ryšys su HTML dokumentu. Čia jo vertė turėtų būti
"stiliaus lapas"
- .
-
tipo
nurodo, su kokio tipo žiniasklaida yra susieta. Čia jo vertė turėtų būti
"tekstas/css"
-
href
- čia naudojamas panašiai kaip elementas, tačiau čia jis turi būti susietas su CSS failu. Jei CSS failas yra tame pačiame aplanke kaip ir HTML failas, kabutėse reikia įrašyti tik failo pavadinimą.
Žingsnis 3. Pasirinkite skirtingų tipų elementus, prie kurių norite pridėti tą patį stilių
Pridėti
klasė
priskirkite šiems elementams atributą ir nustatykite juos lygius pasirinktam klasės pavadinimui. Tai suteiks jūsų elementams tą patį stilių.
Žingsnis 4. Priskirkite, kokį stilių klasė gaus
Įveskite klasės pavadinimą į savo CSS failą su tašku (.) Prieš jį (t. Y.
.klasė
).
5 žingsnis. Pasirinkite atskirus elementus, prie kurių norite pridėti ypatingą stilių, ir pridėkite
id
atributas.
ID yra sukurti CSS naudojant svaro simbolį (#), o ne tašką.
Id yra konkretesni nei klasės, todėl ID pakeis bet kokį klasės stilių, jei jis turi atributą, kurio vertė skiriasi nuo klasės
4 dalis iš 4: Sužinokite daugiau
Žingsnis 1. Aplankykite w3 mokyklas
Tai oficiali svetainė, skirta mokyti žiniatinklio kūrimo įgūdžių. „W3“turi daug nuorodų, išvardytų HTML ir CSS, taip pat kitomis žiniatinklio kalbomis.
2 žingsnis. Raskite kitų svetainių, skirtų mokytis ir mokyti HTML ir CSS
Tokios svetainės kaip CSS tricks.com yra skirtos mokyti CSS ir interneto dizaino įgūdžių. Patikimų šaltinių paieška padės jums mokytis.
Žingsnis 3. Susisiekite su interneto dizaineriais ir kūrėjais
Jų patirtis ir praktinė patirtis gali išmokyti jus vertingų žinių ir įgūdžių.
Žingsnis 4. Peržiūrėkite sutiktų svetainių šaltinio kodą
Peržiūrėję gerai išvystytų svetainių CSS, galite parodyti būdus, kaip kurti svetainių dalis. Jei nukopijuosite jį kaip praktiką ir užsiimsite kodu, tai padės išmokti naudoti skirtingus CSS atributus.
