CSS nuo viršaus iki apačios – įskaitant CSS3

Atskleidimas: Jūsų palaikymas padeda išlaikyti svetainę! Mes uždirbame siuntimo mokestį už kai kurias paslaugas, kurias rekomenduojame šiame puslapyje.


Kaskadiniai stiliaus lapai arba CSS yra ta kalba, kuria žiniatinklis tampa gražus. Kartu su HTML ir „JavaScript“, tai yra viena iš technologijų, kurią privalo įsisavinti kiekvienas sąsajos kūrėjas.

Nors žiniatinklyje gausu išteklių, padedančių mokytis CSS, jei esate pradedantysis, jums gali būti sunku atskirti didelius išteklius nuo tų, kurie yra tinkami.

Šiame išteklių vadove pateikiame pagrindinį įvadą apie tai, kas yra CSS, ko ji gali, taip pat apie funkcijas, įdiegtas naujausioje versijoje: CSS3.

Darbo su CSS pradžia

Jei esate pasirengęs įšokti, štai šiame vadove aprašyta:

  • Įvadas į CSS: jei dar nesate CSS, tai yra vieta pradėti. Šiame skyriuje pateikiama pagrindinė CSS apžvalga ir nurodomi kiti svarbūs šaltiniai.
  • Kas naujo CSS3: jei norite ištirti modulius, kurie buvo išleisti CSS3, eikite į šią temą, kur sužinosite apie medijos užklausas, langelio dydį, 3D transformacijas, animaciją, kelis stulpelių išdėstymus ir dar daugiau.
  • Reaktyvių svetainių kūrimas naudojant CSS: Šiandien svetainės turi gražiai atvaizduoti bet kokio dydžio įrenginyje, o CSS yra kalba, dėl kurios tai įvyksta.
  • Kaip padaryti stumdomų durų mygtukus: „jQuery“ sujungimo su CSS pradmuo, kad būtų sukurti tikrai puikūs efektai.
  • Viskas apie CSS spalvas: keltis ir eiti su CSS spalvomis. Šiame skyriuje pateikiama puiki spalvų nuoroda.
  • Efektyvus CSS rašymas:: greičiau įkelti puslapius yra svarbiau nei bet kada. Tai parodys, kaip parašyti CSS, kuri gali žymiai sumažinti jūsų apkrovos laiką.
  • Pagrindinis CSS Online: šie ištekliai suteikia kelią į CSS įsisavinimą. Jei jums labiau patinka mokymasis atliekant mokymosi stilių, šis skyrius skirtas jums.
  • Nuostabūs CSS darbai: ieškote įkvėpimo? Čia surinkome keletą nuostabiausių CSS kūrinių internete.
  • Oficialus žodis CSS3: Dabar, kai žinote kai kuriuos CSS ir sužinojote, kurie moduliai buvo įdiegti CSS3, pravartu susipažinti su W3C – organizacija, kuri skatina CSS plėtrą..
  • Rekomenduojama literatūra: jei norite mokytis naudodamiesi el. knyga ar popieriniu viršeliu, peržiūrėkite mūsų rekomenduojamų knygų sąrašą, kur tikrai rasite pavadinimą, kuris jus sudomino.

Įvadas į CSS

Įvadas į CSS

CSS arba „Cascading Style Sheets“ yra kalba, naudojama nustatant svetainės stilių ir išvaizdą.

Svetainės turinys, įskaitant antraštes, pastraipas ir vaizdus, ​​įkeliamas pagal instrukcijas, pateiktas HTML dokumente, o CSS nurodo jūsų naršyklei, kaip kiekvieną elementą pateikti tame HTML dokumente..

CSS naudojama tokiems dalykams kaip elementų išdėstymas svetainėje ir tokiems dalykams nustatyti, kaip fono spalva, rėmelio dydis ir stilius, tarpai tarp vieno elemento ir kito, šriftų šeima ir daug daugiau..

Pagrindinis CSS pranašumas yra tas, kad sukuriamas skirtumas tarp svetainės dizaino ir jos turinio. Atskyrus turinį nuo plataus dizaino, visos svetainės dizainas gali būti pakeistas, pritaikant tik keletą CSS taisyklių viename CSS faile.

Trys vietos, kur rašyti CSS taisykles

Prieš rašydami vieną CSS eilutę, turite žinoti, kur ją rašyti ir kaip susieti ją su HTML turiniu, kuriam tai daro įtaką. Yra trys skirtingos vietos, kur galite rašyti CSS:

  • Išorinis stiliaus lapas: dokumentas, sukurtas tik CSS taisyklėms, kurias galima pritaikyti keliems HTML dokumentams, naudojant LINK elementą HTML dokumento antraštėje.
  • Vidinis stiliaus lapas: CSS stiliai, įterpti tiesiai į HTML dokumento antraštę, tarp stiliaus elementų žymų.
  • Įdėtiniai stiliai: CSS stiliai pridedami prie vieno HTML elemento, naudojant stiliaus atributą HTML dokumente.

Nors yra laikas ir vieta naudoti vidinius stiliaus lapus ir įdėtinius stilius, didžioji dauguma CSS stiliai geriausiai pritaikomi naudojant išorinį stiliaus lapą.

Išorinis stiliaus lapas gali būti susietas su daugybe HTML dokumentų, leidžiančių valdyti visos svetainės išvaizdą iš vieno CSS failo..

CSS taisyklių susiejimas su konkrečiais HTML elementais

CSS taisykles sudaro dvi dalys: selektorius ir deklaracija. Kiekviena deklaracija taip pat susideda iš dviejų dalių: turto ir vertės.

  • Rinktiniai identifikuokite arba pasirinkite HTML elementą (-us), kuriam (-iems) turi būti taikoma CSS taisyklė.
  • Savybės yra pavadinimai, apibūdinantys funkciją, kuriai bus skirta taisyklė. Keletas dažniausiai naudojamų CSS ypatybių yra paraštės, kraštinė, fono spalva, teksto derinimas ir šrifto stilius.
  • Vertybės aprašykite, kaip turėtų atsirasti nuosavybė. Jei nagrinėjama nuosavybė yra paraštė, bendra vertė gali būti 10 pikselių.

Parinkėjai ir specifiškumas

Dažnai stiliaus lape yra nesuderinamos vieno HTML elemento taisyklės. Sąvoka selektoriaus specifiškumas nustatys, kurios taisyklės taikomos kiekvienam HTML elementui.

Pvz., Jei pagrindiniam naršymui naudojamas nuorodų sąrašas, o pagrindiniame puslapio tekste pateikiami papildomi sąrašai, naršymo sąrašui ir sąrašams kūne reikės skirtingų CSS taisyklių rinkinių.

Priešingu atveju naršymo meniu ir sąraše, esančiame puslapio tekste, bus taikomos tos pačios CSS taisyklės.

Suprasti, kaip veikia CSS parinkikliai, yra rašant taisykles, turinčias įtakos reikiamiems HTML elementams, raktas.

Nors įprasti CSS parinkikliai yra ID, klasės ir žymos ar elemento parinkikliai, kiti selektoriai, tokie kaip atributai, padėties parinkėjai, pseudo selektoriai ir selektorių deriniai, gali būti naudojami kuriant didesnio tikslumo taisykles..

Įprasti CSS naudojimo būdai

Yra daugybė CSS ypatybių, kurios taikomos beveik kiekviename HTML puslapyje. Susipažinę su šiomis įprastomis CSS savybėmis, galėsite išspręsti daugumą stiliaus ir padėties nustatymo užduočių.

Stiliaus šriftas

CSS gali būti naudojama kuriant bet kurį norimą šrifto stilių. Nesvarbu, ar tai spalva, dydis, svoris, linijos aukštis, išlygiavimas, raidė, pats šrifto tipas ar dekoracijos, pavyzdžiui, pabraukimai ir perbraukimai, kuriuos norite valdyti, CSS savybės gali būti naudojamos norimam efektui sukurti..

Taikant specifiškumo principus, kiekvienam puslapio HTML elementui gali būti pritaikytas skirtingas šrifto stilius.

Dėžutės modelis

Erdvė aplink kiekvieną HTML elementą geriausiai suprantama pagalvojus apie tai, kas vadinama dėžutės modeliu:

Dėžutės modelio schema

Dėžutės modelį sudaro trys CSS savybės: paminkštinimas, kraštas ir paraštė. Šios savybės gali būti pritaikytos bet kuriam HTML elementui. Šias tris savybes lengviausia suprasti kaip pavyzdį.

Apsvarstykite šį HTML pastraipos elementą:

Teksto pastraipa.

Koks būtų šios CSS taisyklės parašymo poveikis?

p {
paminkštinimas: 10 taškų;
kraštas: kietas 1px;
paraštė: 10 taškų;
}

Atrodytų, kad pastraipa supa:

  • Pirmiausia 10 pikselių padėklo (tuščios vietos) iš visų pastraipos teksto pusių,
  • Antra, 1 pikselio pločio tvirtas kraštas aplink pastraipą ir paminkštinimas,
  • Trečia, 10 taškų paraštė (tuščia vieta) tarp kraštinės ir bet kurio gretimo elemento.

Tai vadinama dėžutės modeliu. Kiekvienas elementas yra pažymėtas tuščia erdve, vadinama užpildymu, šalia krašto ir galiausiai tuščia vieta, vadinama paraštėmis.

Plūdės naudojimas

Plūdės yra naudojamos HTML elementams siųsti į kairę arba į dešinę nuo pagrindinio elemento, neišskiriant jų iš bendro HTML dokumento srauto. Be to, kad jų seserų nuosavybė yra aiški, jie yra vienas iš geriausių būdų sukurti tinklalapių išdėstymą.

Nors mes nesistengsime aprėpti visko, kas yra žinoma apie plūdes, labai svarbu turėti pagrindinį supratimą apie tai, kaip jie veikia, kai pradedate mokytis CSS.

Plūdres lengviausia suprasti teksto redagavimo priemonės dokumente. Apsvarstykite vaizdą tekstiniame dokumente.

Paprastai kiekvienas atvaizdas bus išdėstytas iki galo į dešinę, o tekstas tekės kairėje vaizdo pusėje, arba visas į kairę, o tekstas tekės dešinėje vaizdo pusėje. Tinklalapyje ši išvaizda atliekama naudojant plūdės savybes.

Plūdės savybė turi keturias priimtinas reikšmes: kairę, dešinę, nėra ir paveldi. Aukščiau pateiktame pavyzdyje:

  • Jei atvaizdui taikoma CSS taisyklė, kurios ypatybė yra plūduriuojanti, o kairiosios vertės – ji bus pastatyta kairėje pirminio elemento pusėje, o tekstas teka dešinėje pusėje.
  • Teisinga vertė veiktų taip, kaip tikėjotės.
  • Nei vienas elementas netrukdytų plūduriuoti bet kuria kryptimi.
  • Paveldėjimas lems, kad elementas paveldės pirminiam elementui taikomą plūdės vertę.

Plūdės dažniausiai naudojamos kuriant svetainės naršymo meniu. Paprastai svetainės naršymo meniu sudaro HTML netvarkytas sąrašas, kurio kiekvienas sąrašo elementas svyruoja į kairę arba į dešinę, todėl sąrašo elementai rodomi vienas šalia kito, o ne sudedami į sąrašus su ženklu..

Pvz., Tipiškas naršymo meniu HTML gali atrodyti taip:

  • Namai

  • Mūsų parduotuvė

  • Apie mus

  • Susisiekite su mumis.

Be jokių CSS taisyklių, šis meniu būtų rodomas kaip sąrašas su ženkleliais, o kiekvienas elementas būtų rodomas naujoje eilutėje. Kad kiekvienas elementas būtų rodomas vienoje horizontalioje eilutėje, pradedant nuo kairiosios puslapio pusės, galėtų būti naudojama ši CSS taisyklė:.

li {
plūdė: kairė;
}

Atminkite, kad šio pavyzdžio supaprastinimui CSS parinkikliu naudojome sąrašo elemento žymą li. Realybėje tai niekada nebus padaryta. Paprastai klasė būtų priskiriama pačiam sąrašui arba kiekvienam sąrašo elementui, o ta klasė būtų naudojama kaip atranka.

Išvalykite plūdę

Kita savybė, dažnai naudojama kartu su plūdėmis, yra aiški savybė. Kai vienas elementas plūduriuoja, visi paskesni elementai slenka aukštyn ir sulygiuoja šalia plūduriuojančio elemento.

Tais atvejais, kai norite, kad paskesni elementai prasidėtų žemiau slankiojo elemento, o ne šalia jo, galite naudoti aiškią savybę, kad priverstumėte juos pradėti naują eilutę..

Mes ką tik išsiaiškinome, ką galima padaryti su plūdėmis ir aiškiomis savybėmis, tačiau radome šį puikų CSS-Tricks straipsnį, kuriame išsamiai išnagrinėta ši tema..

Vietos nuosavybės naudojimas

CSS pozicijos ypatybė yra dar vienas metodas, dažnai naudojamas kuriant svetainių išdėstymą. Skirtingai nuo slankiosios savybės, padėties ypatybė dažnai naudojama norint išnaikinti elementus iš natūralaus HTML dokumento srauto ir labai tiksliai apibūdinti jų padėtį..

Pozicijos ypatybei gali būti naudojamos dvi vertės: santykinė ir absoliuti. Pritaikius vieną iš šių verčių, galima panaudoti papildomas savybes, tokias kaip viršuje, apačioje, kairėje ir dešinėje, kad paveiktas elementas būtų išdėstytas labai konkrečiai..

Naudodamiesi padėties ypatybe maketams kurti, jūs nerizikuojate. Skirtingai nei plūduriuojanti nuosavybė, pozicijos ypatybės išdėstyti elementai sutaps su kitais elementais, sukurdami daugiau kryžminių naršyklių ir peržiūros srities dydžio problemų potencialą..

Tačiau tai yra plačiai naudojama savybė CSS kūrimo pasaulyje, ir jums būtų gerai išmokti pozicijos ypatybių naudojimo pagrindus..

Kas naujo CSS3

Kas naujo CSS3

Nors CSS2 buvo viena specifikacija, CSS3 buvo suskaidyta į daugiau nei penkiasdešimt skirtingų modulių, kurių kiekvienas kūrimo ir priėmimo etapas buvo skirtingas..

Vykdantį darbą su CSS3 tvarko pasaulinis žiniatinklio konsorciumas arba W3C, jie siūlo centralizuotą vietą, kurioje galite sekti visus vykstančius CSS3 standartizacijos darbus..

Kol vyksta darbas su įvairiais CSS3 moduliais, daugelis modulių jau yra plačiai priimami ir yra plačiai naudojami daugelyje svetainių. Čia yra dešimt svarbiausių CSS3 ypatybių, kurios jau sulaukė plataus pripažinimo ir kurias palaiko visos šiuolaikinės naršyklės.

  • Nors galimybė sukurti paprastą animacijos ilgą laiką buvo įmanomas naudojant „JavaScript“, CSS animaciją dabar galima sukurti naudojant paprastesnę CSS sintaksę.
  • skaičiavimas funkcija, dabar prieinama su CSS3, yra labai naudinga kuriant reaguojančius išdėstymus. Jis gali būti naudojamas sudėti, atimti, padauginti arba padalyti, o skaičiavimo rezultatas vėliau naudojamas kaip turto vertė.
  • Įvairių pažangūs selektoriai buvo pridėtos prie CSS3, leidžiančios padidinti specifiškumą renkantis CSS taisyklių elementus.
  • Papildymas nuolydžiai kaip fono tipas įgalino CSS kūrėjus sukurti įspūdingus fonus, kurie greitai atsisiunčiami ir rodomi.
  • Elementui pritaikytose pločio ir aukščio savybėse nėra padėklo, kraštinės ir paraštės. Dėl to paminkštinimas, paraštė ir kraštas padidina elemento dydį, viršijantį nurodytą plotį ir aukštį. Tai jau seniai nuvylė CSS kūrėjus, kurie naudojasi sudėtinga matematika, kad patobulintų tinklalapių išdėstymą. Tačiau naudojant naują langelio dydžio savybę, vertės ribą galima pritaikyti, verčiant užpildymą, kraštą ir paraštę neviršyti nurodyto pločio ir aukščio apribojimų, taip supaprastinant tinklalapių išdėstymo dizainą..
  • CSS gali būti naudojama bet kokiam HTML elementui pritaikyti kraštines, o turint paveikslėlio „border“ ypatybę, sukurti ir naudoti pasirinktinį kraštą yra lengviau nei bet kada. Pačios nuosavybės sintaksė yra gana sudėtinga, tačiau kai tik ją užkabinsite, galėsite greitai sukurti unikalias ribas bet kuriam svetainės elementui..
  • Žiniasklaidos užklausos nustatyti, ar prieigos prie svetainės naudojamo įrenginio peržiūros sritis atitinka tam tikras nurodytas savybes. @Media CSS3 modulis yra vienas iš pagrindinių įrankių, naudojamų kuriant reaguojančias svetaines. Naudodamas daugialypės terpės užklausas, CSS kūrėjas gali sukurti CSS taisykles, kurios bus taikomos tik tada, kai tenkinamos tam tikros laikmenos funkcijos, tokios kaip peržiūros srities plotis ir aukštis bei spalvų rodymo galimybės. Tokiu būdu CSS kūrėjai, remdamiesi medijos užklausos rezultatais, gali pakeisti elementų dydį arba pakeisti jų dydį arba juos visus paslėpti..
  • Naudojant daugialypiai fonai sukurti CSS3 yra lengviau nei bet kada anksčiau. Naudojant fono ypatybę, bet kurį elementą galima pritaikyti kelis fono paveikslėlius, spalvas ir nuolydžius.
  • Naudojant stulpelius sukurti CSS3 stulpelių ypatybę yra lengviau nei bet kada sukurti laikraščių įkvėptą maketą. Savybė gali būti naudojama norint lengvai nustatyti stulpelių skaičių ir plotį, sukuriant konteinerį, kuriame turinys lengvai teka iš vienos kolonėlės į kitą. Stulpeliai taip pat naudingi kuriant lanksčius naršymo meniu.
  • 3D transformacijos yra įmanomi CSS3. Tai sudėtingas dalykas, kurį reikia išmokti, ir jums bus gera pradėti, kai perskaitysite apie CSS transformacijas ir atliksite keletą mokymų..

Reaktyvių svetainių kūrimas naudojant CSS

Reaktyvių svetainių kūrimas naudojant CSS

Kasdien prieigai prie interneto naudojama šimtai, jei ne tūkstančiai skirtingų įrenginių ekranų dydžių ir skiriamųjų gebos skirtumų, todėl nebeužtenka vienos pilno dydžio svetainės ir vieno ar dviejų mažesnių įrenginių dizaino..

Šiandien jūsų svetainė turi būti matoma dideliuose ekranuose, mažuose įrenginiuose ir kiekviename peržiūros srities dydyje.

Norėdami tai padaryti, jūsų svetainės CSS turi atitikti tris reaguojančio interneto dizaino pagrindinius principus.

  • Pirmiausia, stuburas arba tinklelis, apibūdinantis jūsų bendrą išdėstymą, turi būti neskaidrus.
  • Antra, vaizdų dydis turi būti automatiškai pakeistas, kad gražiai juos būtų galima atkurti bet kuriame įrenginyje.
  • Trečia, norint išsklaidyti originalų skysčio dizainą, reikia naudoti žiniasklaidos užklausas.

Artėjant prie naujo interneto dizaino projekto, daugelis patyrusių dizainerių pradeda nuo pirmiausia mobilusis technika. Šiuo metodu sukurta svetainė prasideda nuo paprasčiausio dizaino, skirto mažiausioms peržiūros juostoms, o didėjant peržiūros srities dydžiui, pridedami papildomi stiliai..

Pirmoji mobilioji technika turi du pastebimus pranašumus:

  • Pirma, ji verčia dizainerį nustatyti pagrindines svetainės funkcijas ir naudoti jas kaip pagrindą svetainės dizainui. Gana dažnai viso dydžio svetainėje yra turinio, pvz., Valdiklių, meniu ir tokio, kuris nėra svetainės dalis, kai žiūrima mobiliajame įrenginyje. Pirmasis mobilusis požiūris padeda užtikrinti, kad pagrindinis svetainės tikslas ir funkcionalumas tampa svarbiausiu visų peržiūros srities dydžių.
  • Antra, svetainės lankytojai, pasiekiantys svetainę iš mobiliojo telefono, atsisiunčia mažiau CSS taisyklių ir svetainės išteklių. Jei pirmoji įkeliama visa svetainė, mobilusis vartotojas atsiųs daug daugiau išteklių, nei reikia. „Pirmasis mobilusis“ metodas į mobilųjį įrenginį įkelia tik atitinkamus elementus, išsaugodamas brangius lankytojo duomenis ir sukurdamas „snappier“ svetainės įkėlimo patirtį..

Mokymasis reaguoja į dizainą

Vienas geriausių būdų mokytis reaguojančio projektavimo technikos yra paprastas, praktiškas reaguojančio dizaino projektas. Sukūrę savo pirmąjį interaktyvų svetainės dizainą, jūs geriau suprasite sąvokas, apie kurias mes kalbėjome.

Augant stulpelių stiliaus išdėstymo populiarumui, svetainių dizaineriams iškilo naujas iššūkis: iššūkis pritaikyti stulpelių išdėstymą bet kokio dydžio įrenginiams..

Laimei, yra išteklių, skirtų padėti CSS pradedantiesiems ir patyrusiems kūrėjams išmokti dirbti su šia nauja CSS ypatybe reaguojančioje aplinkoje..

Kitas puikus būdas suprasti, kaip geriausi CSS kūrėjai adaptuoja svetaines, yra pažvelgti į reaguojančią svetainę, įvairių dydžių, viena šalia kitos. Medijos užklausos yra viena svetainė, kurioje viename ekrane galite pamatyti šimtus reaguojančių svetainių dizainų, įvairių dydžių.

Kaip padaryti stumdomų durų mygtukus

Kaip padaryti stumdomų durų mygtukus

Tiesiog naudodamiesi CSS galite sukurti puikiai atrodančius ir galingus mygtukus. Naudodami „jQuery“ galite padaryti dar daugiau.

Žemiau parodysime, kaip nufotografuoti paprastus mygtukų vaizdus ir juos nustatyti kaip naudoti kaip bet kokio dydžio perjungiamus mygtukus visoje jūsų svetainėje. Galų gale sukursite daugkartinio naudojimo mygtukų kodą, kurį galėsite naudoti generuodami tokius mygtukus.

Spustelėkite paveikslėlį, kad perjungtumėte animaciją.

Stumdomų durų mygtukai 1 pavyzdys

Vaizdų kūrimas

Technika, kurią naudosime kurdami šiuos mygtukus, vadinama „stumdomų durų“ CSS. Norėdami nustatyti šiuos mygtukus, mums reikia dviejų paveikslėlių kiekvienai mygtuko versijai – mūsų atveju du juodo mygtuko vaizdai ir du mėlynos spalvos mygtukų vaizdai, iš viso keturi vaizdai..

Norėdami sukurti šiuos vaizdus, ​​pradedame nuo tvirtų mygtukų vaizdų.

Mėlynas mygtukas
Juodas mygtukas

Mes turime padalyti kiekvieną mygtuką į du paveikslėlius:

  • Kairiosios pusės vaizdas bus kiek įmanoma siauresnis, kol bus užfiksuotas visas mygtuko kampų spindulys.
  • Dešinės pusės vaizdas bus kiek įmanoma platesnis, iš tikrųjų norėsime naudoti manipuliavimo atvaizdais programą, kad keletą kartų nukopijuotų mygtuko kūną, kad galėtume sukurti tikrai ilgus mygtukus su atvaizdu..

Pateikiame vaizdus, ​​kuriuos baigsime juos supjaustyti tinkamais dydžiais:

Mėlynas mygtukas kairėjeMėlynas mygtukas dešinėjeMėlynas mygtukas dešinėje
Juodas mygtukas kairėjeJuodas mygtukas dešinėjeJuodas mygtukas dešinėje

Sukūrę visus keturis vaizdus, ​​esate pasirengę pradėti kodavimą.

Mygtuko HTML

Mūsų mygtuką HTML sudarys trys komponentai: išorinis „Div“ įvyniojimas, tvirtinimo elementas ir „span“ elementas.

Mygtuko tekstas

Aukščiau esančiame kodų bloke visi trys elementai yra suskaidyti į atskiras eilutes, kad galėtumėte lengviau pamatyti, kas vyksta.

Tačiau praktikoje tikriausiai norėsite, kad jie visi išliktų sąsajoje, ypač jei naudojate turinio valdymo sistemą (CMS), pvz., „WordPress“, kuri įterps pastraipų žymas po kiekvienos eilutės pertraukos.

Mygtukų vaizdų pridėjimas

Šiuo metu, jei pateikiate šiek tiek HTML iš aukščiau pateikto pavyzdžio, viskas, ko gausite, yra nuoroda „Mygtuko tekstas“. Kitas žingsnis, kurio norėsime atlikti, yra mygtuko paveikslėlio pridėjimas prie savo kodo.

Tačiau prieš tai padarydami, pridėkime šiek tiek stiliaus į išorinį „Div“ įvyniojimą, kad pamatytume, kas vyksta šiek tiek aiškiau.

.stumdomas mygtukas {
ekranas: intarpas;
plotis: auto;
paraštė: 20 taškų;
}

Šis truputis kodo tiesiog pridės šiek tiek vietos aplink mūsų mygtuką ir privers turinį div susitraukti iki nuorodos ir teksto dydžio. Dabar esame pasirengę pridėti savo mygtukų vaizdus.

.stumdomas saitas {
fono vaizdas: url (‘mėlynas mygtukas-dešinė.png’);
fono dydis: automatinis 100%;
fono padėtis: dešinė;
foninis pakartojimas: nekartoti;
}
.stumdomas tekstas {
fono vaizdas: url (‘mėlynas mygtukas-kairė.png’);
fono dydis: automatinis 100%;
fono padėtis: kairė;
foninis pakartojimas: nekartoti;
}

Taigi dabar mes pridėjome savo mygtuko vaizdą. Deja, kol kas nelabai ką reikia pažvelgti. Be to, jei priartinsite ir atidžiai pažiūrėsite, pastebėsite, kad kairės pusės vaizdas iš tikrųjų yra tiesiog dešinės pusės viršuje. Ne tas efektas, kurio siekiame.

Blogas mygtukas

Mygtuko stilius

Pridėkime šiek tiek padėklo aplink tekstą. Tokiu būdu mūsų mygtukas atrodys labiau panašus į mygtuką. Be to, turėsime pakeisti atraminių elementų ir inkaro elementų ekraną į „inline-block“, kad abu juos reaguotų į polsterį ir pažymėtų taip, kaip mes norime.

.stumdomas saitas {
ekranas: intarpas;
}
.stumdomas tekstas {
paminkštinimas: 20 taškų;
ekranas: intarpas;
}

Šis kodas suteiks mūsų mygtukui tam tikrą dydį. Tačiau vis dar turime probleminį kairiojo ir dešiniojo atvaizdų sutapimo klausimą. Tai, ką turime padaryti, yra naudoti paraštę, norėdami šiek tiek pajudinti dešinės pusės vaizdą į dešinę, o tada pritaikyti tą pačią neigiamą paraštę kairiajame paveikslėlyje..

.stumdomas saitas {
paraštė-kairė: 17 taškų;
}
.stumdomas tekstas {
paraštė-kairė: -17 taškų;
}

17 pikselių vertė taikoma mūsų konkrečių mygtukų vaizdams. Jei naudojate skirtingus vaizdus, ​​turėsite patikslinti šią vertę bandydami ir suklysdami, kol mygtukas atrodys tinkamai.

Prieš pradėdami judėti, taip pat eikime į priekį ir pridėkite šiek tiek stiliaus mūsų mygtuko tekste.

.stumdomas tekstas {
spalva: #fff;
šrifto dydis: 14pt;
šriftų šeima: „Open-Sans“, „Arial“, „sans-serif“;
teksto transformacija: didžiosios raidės;
šrifto svoris: paryškintas;
suderinti tekstą: centre;
}

Šiuo metu mūsų mygtukas iš tikrųjų atrodo kaip mygtukas!

Geras mygtukas

Mygtuko užvedimo efektas

Šiuo metu, jei užveskite pelę virš mygtuko, nėra jokių ženklų, rodančių, kad pelė yra virš mygtuko. Pataisykime tai pridėdami užvedimo efektą.

.stumdomas tekstas: užveskite pelės žymeklį, .slankusis tekstas: aktyvus {
dėžutė-šešėlis: įdėta 0 0 0 1000px rgba (255,255,255, .2);
}

Nors tai tikrai veikia, jis yra šiek tiek grubus. Pirma, užveskite pelės žymeklį per žiauriai. Antra, jei uždėsite mygtuką ant tamsaus fono, pastebėsite, kad užvedimo efektas tęsiasi už užapvalintų mygtuko kampų..

Abi šias problemas galime išspręsti pridėdami keletą kodų eilutės, įtrauktos į jungimo elementą.

.stumdomas tekstas {
-internetinis rinkinys-perėjimas-nuosavybė: dėžutė-šešėlis; / * „Safari“ * /
-internetinio rinkinio perėjimo trukmė: .2s; / * „Safari“ * /
perėjimo savybė: dėžutė-šešėlis;
perėjimo trukmė: .2s;
sienos spindulys: 12 taškų;
}

Dabar mūsų užvedimo efektas pereis į vidų ir į išorę per du šimtus sekundės sekundžių – nedidelis palengvėjimas, bet pakankamas, kad perėjimas jaustųsi sklandžiai. Antra, kraštinės spindulio taisyklė užapvalins pelės žymeklio efekto kampus, kad atitiktų vaizdą.

Atminkite, kad 12 taškų vertė, kurią pritaikėme kraštinės spinduliui, būdinga mūsų mygtuko atvaizdui. Jei naudojate kitą vaizdą, turėsite patikslinti šią vertę.

Mygtukų vaizdų perjungimas

Šiuo metu galime pridėti URL prie inkaro elemento „href“ atributo, o mūsų mygtukai puikiai veiks kaip nuorodos. Tačiau šio įrašo viršuje buvo gifas, kuris demonstravo perjungimo efektą, kuris pakeitė mygtuko vaizdą. Apžvelgsime perjungimo mygtukų kūrimo procesą dabar.

Pirmiausia turėsime pridėti naują vaizdą prie mygtukų. Kaip tai padarysime, pridėsime mygtuko vaizdus į naują klasę ir paspausdami mygtuką paspauskite mygtuką „jQuery“, kad įjungtumėte ir išjungtumėte mygtuką..

Pradėkime nuo CSS.

.dabartinis mygtukas .sliding-link {
fono vaizdas: url (‘juodas mygtukas-dešinė.png’);
}
.dabartinis mygtukas .slidinis tekstas {
fono vaizdas: url (‘juodas mygtukas-kairė.png’);
}

Šiuo metu perjungimo efektas neveikia. Tačiau jei rankiniu būdu pridėsite klasės dabartinį mygtuką prie mygtuko konteinerių skyriaus, pamatysite antrąją mygtuko versiją.

Norėdami perjungti vieną iš mygtuko paspaudimo versijų iš vienos versijos į kitą, turėsite naudoti „jQuery“, kad įjungtumėte ir išjungtumėte mygtuko „dabartinis mygtukas“ klasę..

Tačiau prieš tai darydami turėsime nuspręsti, kuriuos mygtukus norime naudoti perjungimo mygtukais. Tai galime padaryti pridėdami klasę prie bet kokių mygtukų, kuriuos norime naudoti kaip perjungimo mygtukus. Naudokime šiam tikslui klasės perjungimo mygtuką.

Taigi, norėdami bet kurį mygtuką priskirti perjungimo mygtukui, mes tiesiog pridėsime tą klasę prie išorinio „Div“ įvyniojimo įrankio:

Dabar mes galime naudoti „jQuery“, kad įjungtume ir išjungtume esamą mygtuko klasę.

$ (‘. perjungimo mygtukas’). spustelėkite (function () {
$ (this) .toggleClass (‘dabartinis mygtukas’);
grąžinti klaidingą;
});

Tame kodekse yra keletas dalykų. Eikime per ją.

Pirmiausia įkeliame „jQuery“ iš „Google“ priglobtų bibliotekų. Jei jūsų svetainė jau naudoja „jQuery“, tada galite praleisti pirmąjį scenarijaus elementą.

Antrame scenarijaus elemente yra paprasta „jQuery“ funkcija.

Funkcija stebi bet kurį elementą naudodama klasės perjungimo mygtuką. Kai paspaudžiamas bet kuris tos klasės elementas, funkcija suaktyvinta, įjungiant arba išjungiant paspaudimo elemento klasės dabartinį mygtuką..

Galiausiai funkcija grąžina klaidingą reikšmę, kuri neleidžia numatytai susieti saito, tai yra iš naujo įkelti puslapį, nes mūsų inkaro elemento „href“ atributas perjungimo mygtuke bus tuščias.

Pridėję tuos kodo bitus, galime perjungti mygtuką į savo širdies turinį.

Spustelėkite paveikslėlį, kad perjungtumėte animaciją.

Stumdomų durų mygtukas 2 pavyzdys

Visas šaltinio kodas

Jei sekėte žingsnis po žingsnio, tada jau būsite sukūrę pilną šių mygtukų šaltinio kodą. Tačiau jei jūs dar nesekėte, galite sugriebti visą šiame vadove esančio mygtuko šaltinio kodą, nukopijuodami žemiau esantį kodą į HTML dokumentą.

Stumdomų durų mygtukai

.stumdomas mygtukas {
ekranas: intarpas;
plotis: auto;
paraštė: 20 taškų;
}
.stumdomas saitas {
fono vaizdas: url (‘mėlynas mygtukas-dešinė.png’);
fono dydis: automatinis 100%;
fono padėtis: dešinė;
foninis pakartojimas: nekartoti;
ekranas: intarpas;
paraštė-kairė: 17 taškų;
}
.stumdomas tekstas {
fono vaizdas: url (‘mėlynas mygtukas-kairė.png’);
fono dydis: automatinis 100%;
fono padėtis: kairė;
foninis pakartojimas: nekartoti;
ekranas: intarpas;
paminkštinimas: 20 taškų;
paraštė-kairė: -17 taškų;
spalva: #fff;
šrifto dydis: 14pt;
šriftų šeima: „Open-Sans“, „Arial“, „sans-serif“;
teksto transformacija: didžiosios raidės;
šrifto svoris: paryškintas;
suderinti tekstą: centre;
-internetinis rinkinys-perėjimas-nuosavybė: dėžutė-šešėlis; / * „Safari“ * /
-internetinio rinkinio perėjimo trukmė: .2s; / * „Safari“ * /
perėjimo savybė: dėžutė-šešėlis;
perėjimo trukmė: .2s;
sienos spindulys: 12 taškų;
}
.stumdomas tekstas: užveskite pelės žymeklį, .slankusis tekstas: aktyvus {
dėžutė-šešėlis: įdėta 0 0 0 1000px rgba (255,255,255, .2);
}
.dabartinis mygtukas .sliding-link {
fono vaizdas: url (‘juodas mygtukas-dešinė.png’);
}
.dabartinis mygtukas .slidinis tekstas {
fono vaizdas: url (‘juodas mygtukas-kairė.png’);
}


Perjungimo mygtukas

Nuorodos mygtukas

$ (‘. perjungimo mygtukas’). spustelėkite (function () {
$ (this) .toggleClass (‘dabartinis mygtukas’);
grąžinti klaidingą;
});

Tavo mygtuko panaudojimas

Paskutinis galvosūkio gabalas – tinkamai panaudoti naujus mygtukus. Štai keletas idėjų, kaip pradėti:

  • Pridėkite URL prie inkaro elemento „href“ atributo ir naudokite mygtuką, kad susietumėte su bet kuriuo tinklalapiu. Atminkite, kad jei norite tai padaryti, norėsite praleisti mygtuko perjungimo mygtuką iš klavišo „Div Div“.
  • Naudokite papildomą „jQuery“ arba „JavaScript“, jei norite rodyti arba slėpti papildomą informaciją, kai mygtukas yra perjungiamas.
  • Jei tikrai jaučiatės ambicingi, naudokitės mygtukais naršydami svetainėje ir naudokite „jQuery“, kad nustatytumėte, ar dabartinis puslapis atitinka mygtuko URL, ir perjunkite dabartinio mygtuko klasę, jei dvi atitiktys.

Viskas apie CSS spalvas

Viskas apie CSS spalvas

Vienas iš svarbiausių ir galinčių painioti dalykų, kuriuos galima nurodyti naudojant CSS, yra spalva. Beveik visus tinklalapio elementus galima nuspalvinti naudojant CSS.

CSS spalvų savybės

Viena detalė, dažnai kelianti naujus vartotojus, yra CSS savybė. Stebina tai, kad spalva kontroliuoja ne patį elementą, o tekstą elemento viduje.

Pačio elemento (dėžutės) spalvą paprastai kontroliuoja fono spalva, kraštinės spalva arba sutrumpintos fono ir kraštų savybės, į kurias įeina informacija apie spalvas. Taip pat galite nustatyti dėžutės šešėlio spalvą.

Paprastai elemento fono spalva padengia elemento turinį, apmušalą ir kraštinę. Tai yra įprastas elgesys, kurį įsivaizduoja CSS standarto kūrėjai. Tačiau yra būdų, kaip pamušalą ir turinį padaryti skirtingomis spalvomis.

Spalvų deklaracijos

Be skirtingų CSS savybių, kurios gali būti naudojamos spalvai nurodyti, yra trys skirtingi būdai, kaip atpažinti spalvą CSS: RGB, šešioliktainė reikšmė arba vardas.

/ * Visi trys bus tos pačios spalvos. * /

.raudonas-rgb {
fono spalva: rgb (255, 0, 0);
}

.raudonasis šešiakampis {
fono spalva: # ff0000;
}

.raudonas vardas {
fono spalva: raudona;
}

Antrasis (šešioliktainė reikšmė) yra labiausiai paplitęs, tačiau mes pradėsime nuo RGB, nes šešioliktainės vertės neturi prasmės, nebent jūs suprantate, kaip veikia RGB.

RGB vertės

Kompiuterių monitoriai, televizijos ekranai ir kiti panašūs ekranai turi taškus. Spalvotuose ekranuose kiekvienas pikselis yra padalintas į tris pikselius: raudoną, žalią ir mėlyną.

Tai yra vadinamosios „pagrindinės šviesos spalvos“. Šių trijų spalvų derinys skirtingu intensyvumu gali būti naudojamas kuriant bet kokią spalvą, kurią žmogaus akis gali pamatyti. Tai vadinama „papildomu spalvų maišymu“.

(Verta žinoti, kad tai turi viską bendra su žmogaus akimi, o ne su pačia šviesa.)

Skirtingi ekranai turi skirtingas galimybes, atsižvelgiant į intensyvumo diapazoną, kurį gali sudaryti kiekvienas pikselis. Labai paprastas ekranas gali turėti tik du kiekvienos spalvos ryškumus (išjungtas arba įjungtas), tuo tarpu labai aukštos kokybės ekranas gali turėti daug daugiau gradacijų.

Paprastai kompiuteriai kiekvienam pikseliui naudoja diapazoną nuo nulio (nuo 0 iki galo) iki 255 (iki galo įjungtas) (pavyzdžiui, 128 yra pusiau įjungtas). Tai yra 256 galimi kiekvieno pikselio intensyvumai, tai reiškia, kad kiekvieno pikselio reikšmė gali būti saugoma kaip 8 bitų baitas (2 8 = 256).

Kadangi yra trys spalvos, iš kurių kiekviena vaizduojama po 8 bitus, bendras spalvų skaičius, kurį galima pavaizduoti, yra daugiau kaip 16 milijonų (256 3 = 16 777 216)..

Šį spalvų diapazoną galima pavaizduoti paprasčiausiai pažymėjus kiekvieno pikselio vertę, kaip aprašyta toliau:

„rgb“ (0, 128, 255)

Tame pavyzdyje raudonas antrinis pikselis visiškai neveikia, žalias pikselis yra pusiau įjungtas, o mėlynasis pikselis yra visiškai įjungtas. Ta spalva atrodo taip:

Šioje sistemoje balta (visos spalvos įjungtos) rgb (255, 255, 255) ir juoda (visos spalvos išjungtos) yra rgb (0, 0, 0)..

RGB spalvas taip pat galima nurodyti procentais, naudojant dešimtųjų skaičių, o ne su vienu skaitmens pabaiga:

„rgb“ (0,0, 50,0, 100,0)

Šis naudojimas nėra labai dažnas.

Hex vertės

Kompaktiškesnis būdas rašyti tą pačią tikslią informaciją yra naudoti šešioliktaines reikšmes. Šešioliktainė spalvos reikšmė užrašoma maišos (svaro) ženklu, po kurio eina šeši šešioliktainiai ženklai, susidedantys iš trijų porų:

# 0080ff

Pirmoji pora žymi raudonąją vertę, antroji pora žymi žaliąją vertę, o trečioji pora žymi mėlynąją vertę. Šiame pavyzdyje 00 reiškia, kad raudonos spalvos visai nėra, 80 reiškia žalią pusiaukelę, o ff reiškia mėlyną visą pusę. Taigi tos pačios spalvos kaip ir rgb (0, 128, 255).

Tai gali atrodyti šiek tiek painu, jei nesinaudojate šešioliktainiais skaičiais. Įprastoje dešimtainėje dešimtainėje sistemoje kiekvienas skaitmuo gali turėti 10 reikšmių (0–9). Šešioliktainis numeracija kiekvienas skaitmuo turi 16 galimų verčių (0–9, a – f).

Tai leidžia atvaizduoti visas reikšmes nuo 0 iki 255 dviem skaitmenimis, 0-ff. Norėdami gauti daugiau informacijos, skaitykite šį šešioliktainį mokymą.

Šioje sistemoje balta yra #ffffff, o juoda yra # 000000.

Šešiakampės spalvos vertės yra labiausiai paplitęs būdas nurodyti spalvas CSS.

CSS spalvų pavadinimai

Paskutinis būdas nurodyti tam tikrą spalvą yra naudoti vieną iš anksto nustatytų spalvų pavadinimų. W3C tvarko ir retkarčiais atnaujina oficialių spalvų pavadinimų, kurie gali būti naudojami vietoje sunumeruotų spalvų kodų, sąrašą. Pvz., Juoda gali būti naudojama vietoje # 000000.

Pirmosiomis interneto dienomis šios įvardytos spalvos padėjo apibrėžti nedidelį, neoficialų „saugių žiniatinklio spalvų rinkinį“, kurį gerai palaikė dauguma naršyklių ir ekranų..

Šiandien didžiausias spalvotų pavadinimų pranašumas yra tas, kad juos lengviau atsiminti. Pvz., „Lightblue“ lengviau atsiminti (ir teisingai įvesti) nei jo atitikmenis, # add8e6 arba rgb (173, 216, 230)..

CSS spalvų vardų sąrašas

Spalvos pavadinimas
Hex vertės
Spalvų pavyzdys
aliceblue# f0f8ff
senoviniai balti# faeb7
akva# 00ffff
akvamarinas# 7fffd4
žydrus# f0ffff
smėlio spalvos# f5f5dc
biskvitą# ffe4c4
juoda# 000000
blanchedalmond# ffe4c4
mėlyna# 0000ff
mėlynakis# 8a2be2
ruda# a52a2a
burwudas# deb887
kadetbliuzas# 5f9ea0
chartreuse# 7fff00
šokoladas# d2691e
koralas# ff7f50
rugiagėlių mėlynė# 6495ed
cornsilk# fff8dc
raudonas# dc143c
tamsiai mėlyna# 00008b
tamsiaodis# 008b8b
tamsusis auksorodis# b8860b
tamsiai pilka# a9a9a9
tamsiai žalia# 006400
tamsiai pilka# a9a9a9
darkkhaki# bdb76b
tamsiažiedė# 8b008b
tamsiai gelsvai žali# 556b2f
darkorange# ff8c00
darkorchidas# 9932cc
tamsiai raudona# 8b0000
darksalmon# e9967a
tamsiai žali# 8fbc8f
tamsusis šleifas# 483d8b
darkslategray# 2f4f4f
darkslategrey# 2f4f4f
tamsiažiedė# 00ced1
tamsiaplaukė# 9400d3
giliau# ff1493
deepskyblue# 00bfff
neryškios spalvos# 696969
blyški# 696969
Dodgerblue# 1e90ff
ugnies plyta# b22222
gėlių balta# fffaf0
miško žolė# 228b22
fuksija# ff00ff
Gainsboro#dcdcdc
vaiduoklis baltas# f8f8ff
auksas# ffd700
auksakalys# daa520
pilka# 808080
žalias# 008000
žaliaspalvis# adff2f
pilka# 808080
medunešis# f0fff0
ryški rausva spalva# ff69b4
indėnas# cd5c5c
indigo# 4b0082
dramblio kaulo# fffff0
chaki# f0e68c
levandų# e6e6fa
levandų skaistalai# fff0f5
vejos žali# 7cfc00
citrinšifonas#fffacd
šviesiai mėlynas# add8e6
šviesolaidis# f08080
švyturys# e0ffff
šviesaus aukso stilius# fafad2
šviesiai pilka# d3d3d3
šviesiai žalia# 90ee90
šviesiai pilka# d3d3d3
šviesiai rožinė# ffb6c1
žiburėlis# ffa07a
šviesiai žalios spalvos# 20b2aa
šviesos žiburėlis# 87cefa
šviesiai pilka spalva# 778899
žibintai# 778899
žiburių mėlyna# b0c4de
Šviesiai geltona# ffffe0
kalkių# 00ff00
žaliaskarė# 32cd32
Linas# faf0e6
kaštonas# 800000
mediumaquamarine# 66cdaa
vidutinio mėlynumo# 0000cd
mediumorchid# ba55d3
vidutinio purpurinio# 9370db
vidutinio žali# 3cb371
vidutiniškai mėlyna# 7b68ee
vidutiniškaižaliažalia# 00fa9a
vidutinio turkio spalvos# 48d1cc
vidutinio ryškumo# c71585
vidurnakčio mėlyna# 191970
mėtų kremas# f5fffa
misirozė# ffe4e1
mokasinas# ffe4b5
navajowhite#ffdead
karinis jūrų laivynas# 000080
senis# fdf5e6
alyvuogių# 808000
alyvuogių košė# 6b8e23
oranžinė# ffa500
oranžine spalva# ff4500
orchidėja# da70d6
palegoldenrodas# eee8aa
palegrenas# 98fb98
paleturquoise#afeeee
paleoletai# db7093
papajų santykiai# ffefd5
persiko# ffdab9
peru# cd853f
rožinis# ffc0cb
slyva# dda0dd
miltelinis melsvas# b0e0e6
violetinė# 800080
rebeccapurple# 663399
raudona# ff0000
rožinis augalas# bc8f8f
karališkai mėlyna# 4169e1
balnas# 8b4513
lašiša# fa8072
smėlio spalvos# f4a460
jūržolė# 2e8b57
kriauklė# fff5ee
sienna# a0522d
sidabras# c0c0c0
mėlynas dangus# 87eeb
šiferio mėlyna# 6a5acd
šiferis# 708090
slategrey# 708090
sniegas#fffafa
pavasarinis žali# 00ff7f
plieno mėlyna# 4682b4
įdegis# d2b48c
arbatžolė# 008080
usnis# d8bfd8
pomidorų# ff6347
turkis# 40e0d0
violetinė# ee82ee
kvieciai# f5deb3
balta#ffffff
baltaodis# f5f5f5
geltona# ffff00
Geltona žalia# 9acd32

Kiti CSS spalvų ištekliai

  • „W3Schools“ CSS spalvų mokymo programa yra trumpa temos apžvalga su papildomais pavyzdžiais.
  • CSS Spalvų keitiklis yra internetinis įrankis, kuris pasirenka bet kokį spalvų formatą ir konvertuoja jį į visus kitus, plius suteikia galimus spalvų paletės pasirinkimus..
  • CSS spalvų nuoroda iš „Mozilla Developer Network“ yra viena geriausių vietų gauti informacijos apie įvairius spalvų standartus ir specifikacijas.
  • Spalvos, fonai ir gradientai: Ericos Meyerio pridedama individualybė naudojant CSS (2015) yra puiki knyga, kurioje išsamiai aprašytos CSS spalvos.

Efektyvus CSS rašymas

Efektyvus CSS rašymas

Efektyvus CSS rašymas yra nepaprastai svarbus. Šiandieniniai interneto vartotojai turi labai trumpą dėmesį, todėl kuo ilgiau jūsų svetainė įkeliama, tuo didesnė tikimybė, kad jie paspaus atgal mygtuką..

Jei kuriate paprastą svetainę, efektyviam CSS tai nėra labai svarbu. Tačiau tokios svetainės yra vis retesnės. Jei kuriate didelę ir sudėtingą svetainę, turėtumėte susirūpinti savo CSS efektyvumu.

Žemiau pabrėžiame, kodėl svarbu efektyvi CSS, kaip rašyti efektyvesnius selektorius, ir siūlome keletą įrankių, kurie gali padėti toliau optimizuoti savo kodą.

Kodėl efektyvus CSS

Neatsižvelgę ​​į CSS efektyvumą rašydami kodą, galite rimtai pakenkti bendram jūsų puslapio našumui. Ir paskutinis dalykas, kurio norite, yra lėto įkėlimo svetainė.

Siekiate, kad naršyklė kuo lengviau pateiktų jūsų kodą – net ir mažiau efektyvios naršyklės.

Buvo išsakyta argumentų, kad autoriaus darbas nėra jaudintis dėl selektorių optimizavimo, o variklio, kuris sudeda kodą, darbas. Nors tam tikra prasme tai tiesa, ne kiekvienas vartotojas ketina naudoti modernią naršyklę.

Visame pasaulyje vis dar yra vartotojų, kurie turi prieigą tik prie senesnių kompiuterių ir naršyklių. Jūs nenorėtumėte bausti tų vartotojų vien dėl to, kad jie neturi prieigos prie naujausių technologijų. Galbūt laikui bėgant tai pasikeis.

Visada verta atsižvelgti į savo vartotojus, kai rašote kodą.

Atrinkėjai yra patys svarbiausi

Vienas iš svarbiausių efektyvaus CSS rašymo aspektų yra supratimas, kaip naršyklės ją skaito ir komponuoja. Svarbu suprasti, kad jie skaito iš dešinės į kairę.

Jis prasideda klavišo parinkikliu ir juda į kairę ieškoti protėvių taisyklės parinkiklyje. Tada jis toliau juda į kairę, kol taisyklė bus baigta, arba atsiranda neatitikimas.

Taigi, jei jūsų kodas yra ul > li a img, tada pirmas dalykas, kuris bus aiškinamas, yra img.

Raktų rinkiklis yra paskutinė dalis, kurią skyrėme rinkiklio gale.

Keturių tipų CSS selektoriai

Yra keturi pagrindiniai CSS pasirinkimo tipai, kuriuos turite žinoti ir teisingai naudoti, kad CSS kodas būtų efektyvus. Žemiau esantys selektoriai yra paskirstyti atsižvelgiant į jų efektyvumą. Tie, kurie viršuje, yra efektyviausi, o apatiniai – mažiausiai.

ID parinkiklis

ID parinkiklis nurodo konkretų HTML elementą, naudojant ID atributą, ir atrodo taip:

# pagrindinis-navigacija

HTML tai bus naudojama taip:

Klasės parinkėjas

Klasės parinkėjas parinks elementus pagal tam tikrą klasės priskyrimą ir atrodo taip:

.centre

HTML tai bus naudojama taip:

Žymų parinkiklis

Žymų parinkikliai nėra tokie veiksmingi kaip ID ir klasės, todėl jie turėtų būti naudojami saikingai. Tačiau tinkamomis aplinkybėmis jie vis tiek gali būti veiksmingi. Žymų parinkikliai paprastai atrodo taip:

ul

HTML žyma bus naudojama kaip CSS diktuojama forma, kai naudojama žyma (šiuo atveju, ul).

Universalus selektorius

Universalųjį rinkiklį galima pritaikyti bet kuriam dokumento elementui. Jei norite rašyti efektyvią CSS, turėtumėte kiek įmanoma vengti naudoti universalųjį rinkiklį. Universalus selektorius žymimas taip:

*

Veiksmingos CSS taisyklės, kurių reikia nepamiršti

Reikia atsiminti keletą pagrindinių taisyklių, kurios padės jums parašyti efektyvesnę CSS. Jei atsižvelgsite į šias taisykles, jūsų CSS kodas bus įkeltas daug greičiau ir bus veiksmingesnis visose žiniatinklio naršyklėse.

Nenaudokite palikuonių selektorių

Palėpės selektorius yra bet kuris du selektoriai, neatskiriami kombinatoriaus. Nusileidimo selektorius yra mažiausiai efektyvus, ir jis tikrai gali neigiamai paveikti našumą.

Keletas pavyzdžių, kai neturėtumėte naudoti atrankos rinkėjų, yra šie:

antraštė h3

poraštės p

.kūno div

Netikėkite pažymėjimo ir pažymėkite, kad turite ID

Kadangi ID gali nurodyti tik vieną elementą, nėra prasmės jiems priskirti konkrečią žymą, su kuria jie bus naudojami. Pavyzdžiui,

li # kairėn naršymas

Nebūtina naršyklei pasakyti, kokia žyma bus taikoma. Vietoj to, tai yra veiksmingiau:

# kairėn naršymas

Atminkite, kad tas pats pasakytina ir apie klases, bet mažesniu mastu. Taigi nekvalifikuokite klasių.

Kiek įmanoma, naudokite CSS paveldėjimą

Turto paveldėjimas yra svarbus dalykas, kurį reikia įvaldyti. Sužinokite, kurios savybės bus perduodamos iš vieno elemento į kitą, ir leiskite jiems atlikti savo darbą.

Pavyzdžiui, šrifto dydis yra paveldimas. Taigi, jei nustatysite tai dokumento tekstui, nebūtina jo nustatyti p ir li etiketėms.

Apribokite savo taisykles

Pridėję per daug taisyklių savo žymas sulėtinsite CSS kodą ir labai apsunkinsite atitikimo procesą.

Pavyzdžiui

body .widget-left #widget

Tai prastas kodas. Tiesiog vyksta per daug. Iš kitos pusės:

# valdiklis

.valdiklis kairėje

Tai yra daug efektyvesni.

Aukščiau pateiktų patarimų įgyvendinimas padės jūsų CSS kodą padaryti daug efektyvesnį. Jei norite išbandyti savo kodą ar rasti dar daugiau būdų, kaip jį efektyvinti, tada patikrinkite keletą toliau paryškintų įrankių.

Jūsų CSS tobulinimo įrankiai

Jei atsiminsite aukščiau pateiktas taisykles, jūsų CSS kodas bus daug efektyvesnis.

Bet jei dar labiau norite optimizuoti savo CSS kodą, yra įrankių, kurie padės jums ten patekti. Žemiau aprašome keletą įrankių, kurie padės suspausti jūsų CSS, apibrėžti parinkiklius ir netgi sukurti jums jūsų ID.

  • CSS testavimas nepalankiausiomis sąlygomis: tai yra šaunu tuo, kad jis daro jūsų svetainės mikroreguliacijas, pvz., Slenka, didina, keičia dydį ir dar daugiau. Be to, visa tai padaroma per 30 sekundžių. Tada jis atsiųs jums ataskaitą apie jūsų CSS efektyvumą.
  • Apibrėžkite CSS ID: žiniatinklio paketo CSS įkėlėjas yra labai naudingas įrankis. Tai gali padėti nurodyti klases ir ID ir netgi gali šiek tiek optimizuoti CSS už jus.
  • Sumažinkite CSS parinkiklius: tai rodo visus šiuo metu galiojančius CSS parinkiklius kartu su elementais, kuriuos naudoja parinkikliai. Tai leidžia sumažinti naudojamų selektorių skaičių, taigi galite sumažinti bendrą atminties kiekį. Naudodamiesi šiuo įrankiu galite prijungti bet kurį URL, taigi galite tyrinėti ir kitas svetaines.
  • Susitraukite iš CSS kodo: sumažinkite esamą CSS kodą. Kuo mažiau kodo turėsite sudaryti, tuo geriau. Jame yra ekrano kopija „prieš“ ir „po“, todėl galite pamatyti šio įrankio pakeitimus.
  • Suspauskite savo CSS failus: čipą CSS rinkmenos padės išvalyti. Taigi tai gali padėti sumažinti bendrą HTTP atsakymo dydį, taigi ir serverio reakcijos laiką.

Efektyvi CSS rašymas yra gera idėja

Jūs nuspręsite, ar norite optimizuoti CSS, ar ne. Tai nėra visiškai būtina šiuolaikinėse naršyklėse. Tačiau jei kuriate sudėtingą svetainę, ją verta padaryti.

Be to, vis dar gali būti vartotojų, turinčių senesnius nustatymus, ir tai yra protinga idėja patenkinti ir jų poreikius. Tikimės, kad šis skyrius padės jums tai padaryti ir parašyti efektyvesnę CSS.

„Master CSS Online“

„Master CSS Online“

Internete yra daugybė vietų, kur, mokydamiesi CSS, galite žiūrėti vaizdo įrašus, išsamius vadovus ir netgi koduoti naršyklėje. Nors yra keliolika, jei ne šimtai išteklių, čia yra keletas mūsų mėgstamiausių nemokamų vietų sužinoti apie CSS.

Jei tikrai esate visiškai naujas CSS, Nebijok interneto yra pradedantiesiems draugiška vaizdo įrašų serija, pristatanti tiek CSS, tiek HTML. Jei pradedate nuo nulio, tai yra gerai sukurtas serialas, kuris negąsdins tų, kurie tik pradeda savo kelionę mokytis CSS.

Jei niekada anksčiau nerašėte stiliaus lapo, verta parašyti savo pirmąjį yra CSS vadovėlis, kurį pateikė internetinis konsorciumas (W3C). Šis mokymas nepateikia daug paaiškinimų, taigi, jei esate praktinis mokinys, tai gali būti ideali vieta pradėti.

Norint rašyti HTML ir CSS, reikia naudoti teksto rengyklę, išsaugoti failus tinkamu formatavimu ir antraštėmis, o darbui peržiūrėti naudokite naršyklę. Jei jūs verčiau naudojatės programa, leidžiančia redaguoti failus tiesiai naršyklėje, Kodekademija yra būtent tai, ko jūs ieškote.

Kitas šaltinis, apimantis beveik tą patį pagrindą kaip ir Codecademy, tačiau kuris reikalauja išmokti naudotis teksto rengykle ir išsaugoti failus tinkamu formatu, yra Išmokite koduoti HTML ir CSS pateikė Shay Howe. Įgiję pagrindus, taip pat galite naudotis išplėstine programa.

Puslapių išdėstymo valdymas yra viena sudėtingiausių ir svarbiausių CSS užduočių. Jei kyla problemų norint sustabdyti maketų valdymą, pamoka iš Sužinokite išdėstymą yra tik tai, ko jums reikia.

„Mozilla“ kūrėjų tinklas siūlo CSS mokymo programą, apimančią visas pagrindines CSS funkcijas taip, kad paruoštų jus pereiti prie sudėtingesnių temų.

Jei norite tvirto pagrindo, iš kurio galėtumėte tapti visaverčiu CSS kūrėju, galėtumėte padaryti daug blogiau nei „MDN CSS“ pamoka.

Galiausiai, nė vienas išteklių sąrašas nebus pilnas, jei nebus paminėta organizacija, kuri vadovauja CSS plėtrai.

Nors tai nėra pats lengviausias vadovėlis šiame sąraše, jis yra išsamus ir išsamus. Jei jūsų tikslas yra išmokti šiek tiek CSS, tai nėra jums skirtas pamoka, tačiau jei jūs pradedate kelionę, kad taptumėte visaverčiu CSS kūrėju, tai yra geras mokymas patekti į diržą..

Dizaino įkvėpimas

Nuostabūs CSS darbai

Jei ieškote dizaino įkvėpimo ar norite geriau suprasti, ką CSS gali padaryti, čia yra keletas vietų, kur galite pamatyti demonstruojamus CSS darbus..

  • „Creative Bloq“ sudarė šį kurtą dvidešimt dviejų įspūdingų CSS animacijų sąrašą. Peržiūrėdami juos atminkite, kad daugelyje šių animacijų, be CSS, naudojama ir „JavaScript“.
  • „CSS Design Awards“ sukūrė šį dešimties animacijų sąrašą su demonstracinėmis versijomis ir mokymo programomis, kad galėtumėte pritaikyti koncepcijas savo projektuose..
  • „MDN DemoStudio“ yra vieta, kur galite peržiūrėti šimtus CSS demonstracinių variantų, surūšiuotų pagal populiarumą, peržiūrų skaičių, tendencijų būseną arba pirmiausia peržiūrėdami naujausias demonstracines versijas..
  • Daugybė ankstesniems sąrašams pasirinktų animacijų yra talpinamos „Code Pen“, o nukreipus tiesiai į rašiklius, jums bus suteikta prieiga prie daugybės įspūdingų animacijų, sukurtų naudojant HTML, CSS ir „JavaScript“..
  • Jei matėte visas išgalvotas animacijas, kurias jums svarbu pamatyti, o užuot norėję sužinoti, kaip CSS gali būti naudojama visiškai pakeisti visą svetainę nepadarius nė vieno HTML pakeitimo, peržiūrėkite šiuos elegantiškus svetainių dizainus, pabrėžiančius CSS.

Oficialus žodis CSS3

Oficialus žodis CSS3

W3C yra organizacija, kurianti žiniatinklio standartus, įskaitant CSS3 modulius. Kai išmoksite CSS ir pakelsite įgūdžių lygį, turėtumėte susipažinti su W3C ir jų siūloma technine dokumentacija..

„W3C CSS“ pagrindinis puslapis yra visų dalykų CS3 paleidimo padėtis W3C. Šiame puslapyje galite rasti informacijos apie vykdomą standartų kūrimo darbą.

Rekomenduojamas skaitymas

Rekomenduojamas skaitymas

Vienas iš efektyviausių būdų gilinti CSS3 supratimą ir žinias yra naudoti kelis šaltinius ir mokymo metodus.

Jei išbandėte du ar du vadovus ir norite išbandyti papildomą metodą arba jei tiesiog norite dirbti iš parašyto teksto, čia pateikiami keli geriausi CSS tekstai rinkoje:

  • „CSS3 interneto dizaineriams“ (2010 m.), Danas Cedarholmas: „A List Apart“ įkūrėjo Jeffrey Zeldmano pratarmėje ir Chriso Coyierio iš CSS-Tricks pritarimų bei Erico Meyerio, kelių knygų apie CSS autoriaus, šį tekstą pateikė Danas Cedarholmas, „Dribbble“ įkūrėjas, yra auksinis CSS3 tekstų standartas.
  • HTML ir CSS: „Kurk ir kurk internetines svetaines“ (2011 m.), Autorius Jonas Duckettas: Šie tekstai apima ir HTML, ir CSS bei yra vienas populiariausių ir gerbiamiausių abiejų temų įvadų..
  • Sužinokite CSS per vieną dieną ir išmokite to gerai (2015 m.), Autorius Jamie Chan: Jei esate CSS pradedantysis ir norite greitai įsiminti pagrindus, ši knyga skirta jums.
  • CSS: „Dingęs vadovas“ (2015 m.), Autorius Davidas Sawyeris McFarlandas: Šis tekstas nėra skirtas tik pradedantiesiems, o apima išsamias temas, tokias kaip „Flexbox“ ir „Sass“ naudojimas. Jei esate pasirengęs pakilti nuo pradedančiojo statuso, šis tekstas padės jums ten patekti.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map