Šioje pamokoje mokysiu jus tiesioginio CSS stilių redagavimo " Chrome" programuotojo įrankiuose pagrindų. Sužinosite, kaip atlikti stilių pakeitimus, kad iš karto gautumėte vaizdinį grįžtamąjį ryšį, ir sužinosite, kokiomis įvairiomis parinktimis galite daryti įtaką tinklalapio išdėstymui. Šie įgūdžiai pravers ne tik žiniatinklio kūrėjams, bet ir dizaineriams, norintiems geriau suprasti CSS stilius.
Pagrindinės žinios
- Tiesioginiai pakeitimai leidžia akimirksniu peržiūrėti CSS pritaikymus.
- Suprasti tokius elementus kaip margin, padding ir border yra svarbu maketavimui.
- Kūrėjo įrankiai leidžia tyrinėti, keisti ir pridėti konkrečias CSS taisykles.
Žingsnis po žingsnio vadovas
1. Prieiga prie kūrėjo įrankių
Norėdami dirbti su programuotojo įrankiais, tiesiog atidarykite "Google Chrome" ir įkelkite tinklalapį, kurį norite redaguoti. Dešiniuoju pelės klavišu spustelėkite puslapį ir pasirinkite parinktį "Explore" (tyrinėti) arba naudokite klavišų kombinaciją F12.
2. Pasirinkite ir keiskite elementus
Programuotojo įrankiuose galite matyti svetainės struktūrą. Pasirinkite elementą, kurio stilių norite pakeisti. Stilius galite peržiūrėti dešinėje pusėje esančiame skirtuke "Stiliai". Čia matysite margin, border ir padding skaičiavimo laukus, kuriuos galite koreguoti pagal savo pageidavimus. Pavyzdžiui, elemento maržą galite pakeisti redaguodami atitinkamą reikšmę.
3. Pakoreguokite maržą ir apvadą
Maržos ir apvado reikšmes galite keisti jas įvesdami tiesiogiai arba naudodami pelės ratuką. Spustelėjus lauką, jis tampa aktyvus, o pelės ratuku galima greitai padidinti arba sumažinti reikšmes.
4. keisti užpildą
Panašiai kaip ir maržą, taip ir užpildą galite reguliuoti. Paminkštinimas - tai atstumas tarp elemento turinio ir jo paraštės. Čia galite reguliuoti viršutinio, dešiniojo, apatinio ir kairiojo paddingo reikšmes, kad pasiektumėte vizualinių efektų.
5. Naudokite tiesioginę peržiūrą
Kai atliekate stilių pakeitimus, jie iš karto rodomi naršyklėje. Tai reiškia, kad, pavyzdžiui, pakeitus elemento apvadą, iš karto matysite, kaip keičiasi stilius.
6. keiskite elementus naudodami stilių taisykles
Norėdami atlikti pakeitimus ir redaguoti konkrečias CSS savybes, tokias kaip rodymas, spalva ar šrifto dydis, spustelėkite stiliaus taisyklę. Pavyzdžiui, norėdami laikinai paslėpti elementą, galite įvesti display: none.
7. išnagrinėti užvedimo efektus
Norėdami išbandyti "hover" efektus, turite įsitikinti, kad atitinkama būsena yra aktyvi CSS skydelyje. Tai galite padaryti pasirinkę taisyklę, pavyzdžiui, :hover, ir bandydami ją pakoreguoti.
8. atlikite spalvų pakeitimus
Jei norite pakeisti spalvą, galite tiesiogiai įvesti šešiaženklę vertę arba naudodamiesi integruotu spalvų rinkikliu pasirinkti norimą spalvą.
9. koreguoti teksto šešėlius
Jei norite pakeisti teksto šešėlį, galite jį reguliuoti grafiškai. Tai reiškia, kad galite vizualiai valdyti šešėlio padėtį ir išsklaidymą, todėl galite geriau kontroliuoti teksto išvaizdą.
10. pridėti naujų CSS klasių
Įdomi programuotojo įrankių funkcija yra galimybė pridėti naujų CSS klasių prie savo elemento. Atitinkamoje srityje galite tiesiog įvesti klasės pavadinimą ir tada apibrėžti tos klasės stiliaus taisykles.
11. pakeitimų išsaugojimas
Atlikę pakeitimus, galite juos nukopijuoti ir įklijuoti į redaktorių, kad visam laikui atnaujintumėte atitinkamus CSS failus. Kopijavimas atliekamas tiesiog paspaudus valdymo klavišą (Ctrl+C arba Cmd+C "Mac" kompiuteriuose).
12. Venkite dažniausiai pasitaikančių klaidų
Įsitikinkite, kad įvesdami reikšmes į laukus teisingai įvedate px, % ar kitus vienetus. Priešingu atveju gali kilti netikėtų maketavimo problemų.
Santrauka
Šiame vadove susipažinote su pagrindinėmis "Chrome" programuotojo įrankių, skirtų tiesioginiam CSS stilių redagavimui, funkcijomis. Dabar žinote, kaip pasirinkti elementus, tiesiogiai koreguoti jų stilius ir išsaugoti šiuos pakeitimus. Šie įrankiai yra būtini kuriant ir projektuojant svetaines, kad būtų galima kurti svetaines pagal naudotojo poreikius ir pageidavimus.
Dažniausiai užduodami klausimai
Kaip pakeisti tinklalapio CSS savybę? Galite atidaryti "Chrome" programuotojo įrankius ir pasirinkti norimą elementą, kad galėtumėte redaguoti CSS savybes skirtuke "Stiliai".
Kuo skiriasi margin ir padding? Margin - tai erdvė aplink elementą, o padding - tai erdvė tarp elemento turinio ir jo margin.
Ar galiu išsaugoti pakeitimus programuotojo įrankiuose? Taip, pakeitimus galite nukopijuoti ir įklijuoti į teksto redaktorių, kad atnaujintumėte tikruosius CSS failus.
Kas yra užvedimoefektas? Užvedimo efektas - tai vizualinis elemento pokytis, kai pelės žymeklis užvedamas ant jo. CSS galite apibrėžti užvedimo taisykles.
Kaip naudotis spalvų rinkikliu programuotojo įrankiuose? Spustelėkite spalvos lauką šalia spalvos taisyklės skirtuke "Stiliai", kad atidarytumėte spalvų rinkiklį ir pasirinktumėte spalvą.
