CSS frá toppi til botns – þar á meðal CSS3

Birting: Stuðningur þinn hjálpar til við að halda vefnum í gangi! Við þénum tilvísunargjald fyrir sumar þjónusturnar sem við mælum með á þessari síðu.


Cascading Style Sheets, eða CSS, er tungumálið sem gerir vefinn fallegan. Samhliða HTML og JavaScript er það ein af tæknunum sem allir framendahönnuðir verða að ná tökum á.

Þó að vefurinn sé fullur af úrræðum til að hjálpa þér að læra CSS, ef þú ert byrjandi gætirðu átt erfitt með að aðgreina frábært fjármagn frá þeim sem eru bara í lagi.

Í þessari auðlindarhandbók veitum við grunn kynningu á því hvað CSS er, hvað hún er fær um, svo og aðgerðirnar sem rúllað er út í nýjustu útgáfunni: CSS3.

Byrjaðu með CSS

Ef þú ert tilbúinn að stökkva inn, þá er það sem þessi handbók nær til:

  • Kynning á CSS: ef þú ert nýr í CSS er þetta staðurinn til að byrja. Þessi hluti veitir grunn yfirlit yfir CSS og bendir þér á önnur frábær úrræði.
  • Hvað er nýtt í CSS3: ef þú vilt kanna einingarnar sem hafa verið rúllað út í CSS3 skaltu stefna að þessu efni þar sem þú munt læra um fyrirspurnir fjölmiðla, kassastærð, 3D umbreytingu, hreyfimyndir, margar skipulag dálka og fleira.
  • Að búa til móttækileg vefsíður með CSS: vefsíður í dag verða að birtast fallega í tæki af hvaða stærð sem er og CSS er tungumálið sem gerir það að verkum.
  • Hvernig á að búa til rennihurðarhnappa: grunnur að því að sameina jQuery og CSS til að skapa virkilega flott áhrif.
  • Allt um CSS litina: farðu upp og farðu með CSS liti. Þessi hluti inniheldur mikla tilvísun í lit..
  • Ritun duglegur CSS:: Að hafa hleðsluhlaðnar síður er mikilvægara en nokkru sinni fyrr. Þetta mun sýna þér hvernig á að skrifa CSS sem getur dregið úr álagstímum verulega.
  • Master CSS á netinu: þessi úrræði veita leið til CSS leikni. Ef þú kýst frekar að læra af framhaldsstíl er þessi hluti fyrir þig.
  • Ótrúleg verk CSS: að leita að innblæstri? Hér höfum við safnað nokkrum af ótrúlegustu CSS sköpun á vefnum.
  • Opinbert orð um CSS3: nú þegar þú þekkir einhverja CSS og hefur lært hvaða einingar voru settar út í CSS3, þá er það góð hugmynd að kynna þér W3C, samtökin sem knýja fram þróun CSS.
  • Mælt er með lestri: ef þú vilt læra með hjálp rafbókar eða pocketbók skaltu skoða lista yfir ráðlagðar bækur, þar sem þú ert viss um að finna titil sem vekur áhuga þinn.

Kynning á CSS

Kynning á CSS

CSS, eða Cascading Style Sheets, er tungumálið sem notað er til að ákvarða stíl og útlit vefsíðu.

Innihald vefsíðu, þar með talið hausum, málsgreinum og myndum, er hlaðið samkvæmt leiðbeiningum sem eru í HTML skjali og CSS segir vafranum þínum hvernig eigi að kynna hvern þátt í því HTML skjali.

CSS er notað til að gera hluti eins og staðsetningaratriði á vefsíðu og til að ákvarða hluti eins og bakgrunnslit, landamærastærð og stíl, bil milli eins hlutar og næsta, leturfjölskyldu og margt fleira.

Grunnávinningur CSS er sá sem skapar aðskilnað milli hönnunar vefsíðu og innihalds vefsíðunnar. Með því að aðgreina efni frá hönnun sópa má hönnunarbreytingar á heila vefsíðu með því að aðlaga nokkrar CSS reglur í einni CSS skrá.

Þrír staðir til að skrifa CSS reglur

Áður en þú getur skrifað eina línu af CSS þarftu að vita hvar á að skrifa hana og hvernig á að binda það við HTML innihaldið sem það hefur áhrif á. Það eru þrír mismunandi staðir sem þú getur skrifað CSS:

  • Ytri stílblað: Skjal sem eingöngu er búið til til að innihalda CSS reglur sem hægt er að beita á mörg HTML skjöl með LINK frumefni í HTML skjalhaus.
  • Innra stílblað: CSS stíll felldur beint inn í HTML skjalhaus á milli stílþáttamerkja.
  • Inline stíll: CSS stíl bætt við einn HTML frumefni með því að nota stíl eiginleika í HTML skjalinu.

Þó að það sé tími og tími til að nota innri stílblöð og inline stíl, er mikill meirihluti CSS stíl er best notaður með utanaðkomandi stílblaði.

Hægt er að tengja utanaðkomandi stílblöð við hvaða fjölda HTML skjala sem gerir þér kleift að stjórna útliti heillar vefsíðu úr einni CSS skrá.

Að tengja CSS reglur við sértæk HTML frumefni

CSS reglur eru smíðaðar af tveimur hlutum: völdum og yfirlýsingu. Hver yfirlýsing samanstendur einnig af tveimur hlutum: eign og verðmæti.

  • Val bera kennsl á, eða veldu HTML frumefnið sem CSS reglunni er beitt á.
  • Fasteignir eru nöfn sem lýsa eiginleikanum sem reglan mun taka á. Nokkrir CSS eiginleikar sem oft eru notaðir eru framlegð, kantur, bakgrunnslitur, textalínun og leturstíll.
  • Gildi lýsa því hvernig eign ætti að birtast. Ef viðkomandi eign er framlegð gæti sameiginlegt gildi verið 10 pixlar.

Val og sértæki

Oft hefur stílblaðið að geyma andstæðar reglur fyrir staka HTML frumefni. Hugmyndin um sértæki valsins mun ákvarða hvaða reglum er beitt á hvern HTML frumefni.

Til dæmis, ef listi yfir tengla er notaður við aðalleiðsögnina og viðbótarlistar eru kynntir í meginhluta síðu, þá þarf siglingalistann og listana í meginmálinu að setja mismunandi CSS reglur..

Að öðrum kosti gilda sömu CSS-reglur um siglingavalmyndina og listann í meginmál síðunnar.

Að skilja hvernig CSS valmenn vinna er lykillinn að því að skrifa reglur sem hafa áhrif á réttu HTML þætti.

Þrátt fyrir að algengustu CSS valin séu auðkenni, flokkur og merki eða þáttaval, þá er hægt að nota aðra valmenn eins og eiginleika, staðsetningarvelgjara, gervivísara og samsetningar valgreina til að búa til reglur með meiri sérstöðu..

Algengar notkun CSS

Það eru margir CSS eiginleikar sem eru notaðir á nánast alla HTML síðu. Að kynnast þessum sameiginlegu CSS eiginleikum gerir þér kleift að takast á við meirihluta stíl- og staðsetningarverkefna.

Styling letur

Hægt er að nota CSS til að búa til hvaða leturstíl sem óskað er. Hvort sem það er litur, stærð, þyngd, línuhæð, röðun, mál, leturgerðin sjálf, eða skreytingar eins og undirstrikanir og gegnumstrik sem þú vilt stjórna, þá er hægt að nota CSS eiginleika til að skapa tilætluð áhrif.

Með því að beita sérreglum er hægt að nota annan leturstíl á hvern HTML frumefni á síðu.

Kassamódelið

Rými í kringum hvert HTML frumefni er best skilið með því að hugsa um það sem vísað er til kassamódelsins:

Skýringarmynd af kassamódelinu

Kassamódelið samanstendur af þremur CSS eiginleikum: padding, border og margin. Þessum eiginleikum er hægt að nota á hvaða HTML frumefni sem er. Auðveldast er að skilja þessar þrjár eiginleika með dæmi.

Hugleiddu eftirfarandi HTML málsgreinareining:

Málsgrein texta.

Hvaða áhrif hefði það að skrifa eftirfarandi CSS reglu?

p {
padding: 10px;
landamæri: solid 1px;
framlegð: 10px;
}

Málsgreinin birtist umkringd:

  • Í fyrsta lagi 10 pixlar padding (tómt rými) á öllum hliðum texta málsgreinarinnar,
  • Í öðru lagi er 1 pixla breiður fastur jaðar kringum málsgreinina og padding,
  • Í þriðja lagi, 10 punktar af framlegð (tómt rými) milli landamæranna og hvaða aðliggjandi þætti.

Þetta er það sem er þekkt sem kassamódelið. Hvert frumefni er fyrst í hnefaleikum með tómu rými sem kallast padding, næst með landamærum og loks með tómu rými sem kallast framlegð.

Notkun fljóta

Flotar eru notaðir til að senda HTML þætti til vinstri eða hægri af foreldrahlutanum án þess að brjóta þá út úr heildarflæði HTML skjalsins. Ásamt því að eignir systur þeirra eru skýrar eru þær ein besta leiðin til að búa til vefsíðuskipulag.

Þó við ætlum ekki að reyna að ná yfir allt sem er að vita um fljóta, þá er mikilvægt að hafa grunnskilning á því hvernig þeir vinna þegar þú byrjar að læra CSS.

Auðveldast er að skilja fljóta í tengslum við ritvinnslu skjal. Hugleiddu mynd í textaskjali.

Venjulega verður hver mynd annaðhvort staðsett alla leið til hægri, með texta sem flæðir framhjá vinstri hlið myndarinnar, eða alla leið til vinstri, með texta sem flýtur fram til hægri á myndinni. Á vefsíðunni er þessu útliti náð með því að nota fljótaeignina.

Flotareignin hefur fjögur viðunandi gildi: vinstri, hægri, enginn og erfa. Ef um er að ræða dæmi okkar hér að ofan:

  • Ef myndin er háð CSS reglu þar sem eign fljóta og gildi vinstri verður hún staðsett vinstra megin foreldrahlutans og texti flæðir til hægri.
  • Gildisrétturinn myndi skila sér eins og þú bjóst við.
  • Enginn myndi koma í veg fyrir að frumefnið flýti í hvora áttina.
  • Erfðir myndu valda því að frumefnið erfir flotgildið sem notað er á móðurhlutinn.

Flotar eru oft notaðir til að búa til valmyndir á vefsvæðum. Venjulega samanstendur vafravalmynd af HTML-lista sem er ekki skipulögð, þar sem hvert listaratriði flýtur til vinstri eða hægri, sem leiðir til listalista sem birtast við hliðina á hvor öðrum, frekar en að stafla saman í punktalista.

Til dæmis gæti dæmigerð siglingarvalmynd virst svona í HTML:

  • Heim

  • Verslunin okkar

  • Um okkur

  • Hafðu samband við okkur.

Án einhverra CSS-reglna myndi þessi valmynd birtast sem punktalisti og hvert atriði birtist á nýrri línu. Til þess að láta hvert atriði birtast í einni lárétta línu sem byrjar frá vinstri hlið á síðunni væri hægt að nota eftirfarandi CSS reglu.

li {
fljóta: vinstri;
}

Athugaðu að í því skyni að einfalda þetta dæmi höfum við notað listamerki li sem CSS val. Í raun og veru væri þetta aldrei gert. Venjulega væri bekknum úthlutað á listann sjálfan, eða á hvern listahlut, og sá flokkur yrði notaður sem val.

Hreinsaðu flotið

Önnur eign, sem oft er notuð í tengslum við fljóta, er skýr eign. Þegar einn þáttur er settur á flot renna allir síðari þættirnir upp og samræma sig við hliðina á flotta hlutanum.

Í tilfellum þar sem þú vilt að síðari þættir hefjist undir fljótandi hlutnum, frekar en við hliðina á því, geturðu notað skýru eignina til að þvinga þá til að byrja á nýrri línu.

Við höfum rétt klórað yfirborðið á því sem hægt er að gera með flotum og skýrum eignum, en við fundum þessa frábæru grein frá CSS-Bragðarefur sem veitir ítarlega skoðun á þessu efni.

Notkun staðsetningareignarinnar

CSS stöðueignin er önnur aðferð sem oft er notuð til að búa til vefsíður. Ólíkt flotareigninni er staðueignin oft notuð til að brjóta þætti úr náttúrulegu flæði HTML skjals og til að ákvarða afstöðu sína mjög sérstaklega.

Hægt er að nota tvö gildi með staðsetninguareiginleikanum: afstætt og algilt. Eftir að hafa notað eitt af þessum gildum er hægt að nota viðbótareiginleika eins og topp, botn, vinstri og hægri til að staðsetja viðkomandi hlut mjög.

Að nota stöðueignina til að búa til skipulag er ekki án áhættu. Ólíkt flotareigninni munu þættir sem eru staðsettir af staðareigninni skarast aðra hluti og skapa möguleika á fleiri málum yfir vafra og skoðunarstærð.

Hins vegar er það mikið notuð eign innan CSS þróunarheimsins og þú myndir gera vel við að læra grundvallaratriðin í því að nota stöðueignina.

Hvað er nýtt í CSS3

Hvað er nýtt í CSS3

Þó CSS2 hafi verið ein forskrift hefur CSS3 verið skipt í meira en fimmtíu mismunandi einingar, hver á mismunandi stigi þróunar og samþykkis..

Áframhaldandi vinnu við CSS3 er stjórnað af World Wide Web Consortium, eða W3C, og þau bjóða upp á miðlægan stað þar sem þú getur fylgst með öllu áframhaldandi CSS3 stöðlunarstarfi.

Þó að vinna við ýmsar CSS3-einingar sé í gangi, hafa margar einingar nú þegar breitt samþykki og eru þær mikið notaðar af mörgum vefsíðum. Hér eru tíu mikilvægustu CSS3 eiginleikar sem hafa þegar fengið breiða staðfestingu og eru studdir af öllum nútíma vöfrum.

  • Þó að geta til að búa til einfalt fjör hefur verið hægt í langan tíma með JavaScript, nú er hægt að búa til CSS fjör með einfaldari CSS setningafræði.
  • The útreikning Aðgerðin sem nú er fáanleg með CSS3 er mjög gagnleg til að búa til móttækilegar skipulag. Það er hægt að nota til að bæta við, draga frá, margfalda eða deila og niðurstaða útreikningsins er síðan notuð sem fasteignaverðmæti.
  • Margvísleg háþróaður val var bætt við með CSS3, sem gerir kleift að auka sérhæfni þegar val á þætti fyrir CSS reglur.
  • Viðbótin við halla þar sem bakgrunnsgerð hefur gert CSS-hönnuðum kleift að búa til glæsilegan bakgrunn sem er hlaðið niður og birtist fljótt.
  • Breiddar- og hæðareiginleikar sem notaðir eru á frumefni innihalda ekki padding, border og margin. Fyrir vikið auka padding, framlegð og landamæri stærð einingar umfram tiltekna breidd og hæð. Þetta hefur lengi svekktur CSS verktaki sem grípur til flókinna stærðfræði til að fínstilla vefsíðuskipulag. Hins vegar, með nýju eigninni fyrir stærð stærð kassa, er hægt að nota gildi landamerkjakassans, þvinga padding, border og margin innan takmarkana á breidd og hæð sem tilgreind er, og þannig einfalda hönnun vefsíðuskipta.
  • CSS er hægt að nota til að beita landamærum á hvaða HTML frumefni sem er og með eigninni landamæramynd er auðveldara en nokkru sinni að búa til og nota sérsniðna landamæri. Setningafræði eignarinnar sjálfs er nokkuð flókin, en þegar þú hefur náð tökum á henni geturðu fljótt búið til eins konar landamæri fyrir hvaða þætti sem er á vefsíðu.
  • Fyrirspurnir fjölmiðla ákvarða hvort útsýni tækisins sem notað er til að fá aðgang að vefsvæði uppfylli ákveðin tilgreind einkenni. @Media CSS3 einingin er eitt af helstu tækjum sem notuð eru til að búa til móttækilegar vefsíður. Notkun fjölmiðlafyrirspurna getur CSS verktaki búið til CSS reglur sem aðeins er beitt þegar tilteknum fjölmiðlaaðgerðum, svo sem breidd og hæð útsýnis og litaskjámöguleikum, er uppfyllt. Á þennan hátt geta CSS-verktaki endurstillt og breytt stærð þeirra, eða falið þá alla saman, byggt á niðurstöðum fjölmiðlafyrirspurnarinnar.
  • Að nota margfeldi bakgrunnur Að búa til sérstök bakgrunnsáhrif er auðveldara en nokkru sinni fyrr með CSS3. Með því að nota bakgrunnseiginleikann er hægt að nota margar bakgrunnsmyndir, liti og halla á hvaða þætti sem er.
  • Að nota dálkar Það er auðveldara en nokkru sinni að búa til dagblaðsskipulag með dálkareigninni í CSS3. Hægt er að nota eignina til að stilla fjölda dálka og breiddina og búa til ílát þar sem innihald flæðir auðveldlega frá einum dálki til næsta. Súlur eru einnig gagnlegar til að búa til sveigjanlegar flakkvalmyndir.
  • 3D umbreytingar eru gerðar mögulegar með CSS3. Þetta er flókið viðfangsefni til að ná góðum tökum og þú munt byrja vel á því að byrja að lesa um CSS umbreytingar og vinna þig síðan í gegnum nokkrar námskeið.

Að búa til móttækileg vefsíður með CSS

Að búa til móttækileg vefsíður með CSS

Það eru hundruðir, ef ekki þúsundir, af mismunandi skjástærðum og upplausnum tækisins sem notaðar eru á hverjum degi til að fá aðgang að vefnum og fyrir vikið er það ekki lengur nóg að hafa eina vefsíðu í fullri stærð og eitt eða tvö hönnun fyrir smærri tæki..

Í dag þarf vefsíðan þín að vera sýnileg á stórum skjám, litlum tækjum og öllum skjástærðum þar á milli.

Til að gera þetta verður CSS vefsíðan þín að fylgja þremur akstursreglum um móttækilegan vefhönnun.

  • Í fyrsta lagi verður burðarás, eða rist, sem skilgreinir heildarskipulag þitt að vera fljótandi.
  • Í öðru lagi verða myndir að breytast sjálfkrafa til að mynda fallega á hvaða tæki sem er.
  • Í þriðja lagi verður að nota fyrirspurnir fjölmiðla til að takast á við þau atriði þar sem upprunalega vökvahönnunin brotnar niður.

Þegar nálgast nýtt vefhönnunarverkefni byrja margir reyndir hönnuðir með a farsíma fyrst tækni. Vefsvæði hannað með þessari tækni byrjar á einfaldasta hönnuninni sem er ætluð fyrir minnsta útsýni og viðbótarstíll er bættur eftir því sem útsýni stærð stækkar.

Fyrsta farsíma tækni býður upp á tvo athyglisverða kosti:

  • Í fyrsta lagi neyðir það hönnuðinn til að bera kennsl á nauðsynlegar aðgerðir vefsíðunnar og nota þær sem grunn fyrir hönnun vefsins. Oft inniheldur vefsíða í fullri stærð efni, svo sem búnaður, valmyndir og þess háttar, sem eru ekki hluti af vefnum þegar það er skoðað í farsíma. Fyrsta farsímaaðferð hjálpar til við að tryggja að megin tilgangur og virkni vefsins miði yfir allar skoðunarstærðir.
  • Í öðru lagi sækja gestir á vefsíðu sem nálgast vefinn úr farsíma niður færri CSS reglur og vefsíður. Ef öll vefsíðurnar eru fyrstu til að hlaða mun farsímanotandi hlaða niður miklu meira fjármagni en nauðsyn krefur. Fyrsta farartækið hleður aðeins viðeigandi hlutum í farsímann, sparar nokkur dýrmæt gögn gesta og býr til upplifari upplifun af vefhleðslu.

Að læra móttækileg hönnun

Ein besta leiðin til að læra móttækileg hönnunartækni er með einföldu móttækilegu hönnunarverkefni. Með því að búa til fyrstu móttækilegu vefhönnun þína munt þú öðlast betri skilning á hugtökunum sem við höfum talað um.

Með vaxandi vinsældum skipulag dálka stíl, hefur ný áskorun komið fram fyrir hönnuðir vefsins: áskorunin um að laga dálkaskipulag að tækjum í öllum stærðum.

Sem betur fer eru til úrræði til að hjálpa CSS byrjendum og reyndum forriturum að læra hvernig á að vinna með þessa nýju CSS eign í móttækilegu umhverfi.

Önnur frábær leið til að byrja að skilja hvernig bestu CSS hönnuðir laga að síður er að skoða móttækilegan vef, í ýmsum stærðum, hlið við hlið. Media Fyrirspurnir er ein síða þar sem þú getur séð hundruð móttækilegra vefsíðugerða í ýmsum stærðum allt á einum skjá.

Hvernig á að búa til rennihurðarhnappana

Hvernig á að búa til rennihurðarhnappana

Bara að nota CSS geturðu búið til flotta og öfluga hnappa. Þú getur gert meira með smá jQuery.

Hér að neðan sýnum við þér hvernig á að taka einfaldar hnappamyndir og setja þær upp til að nota sem hægt er að skipta um hnappa af öllum stærðum á vefsíðunni þinni. Í lokin muntu framleiða einnota hnappakóða sem þú getur notað til að búa til hnappa eins og þessa.

Smelltu á mynd til að skipta um hreyfimynd.

Rennihurðarhnappar Dæmi 1

Að búa til myndir þínar

Tæknin sem við ætlum að nota til að búa til þessa hnappa kallast „rennihurð“ CSS. Til að setja upp þessa hnappa þurfum við tvær myndir fyrir hverja útgáfu af hnappnum – í okkar tilfelli, tvær svartar hnappamyndir og tvær bláar hnappamyndir, fjórar myndir í heildina.

Til að búa til þessar myndir byrjum við á traustum hnappamyndum.

Blái hnappurinn
Svarti hnappurinn

Það sem við þurfum að gera er að skipta hverjum hnappi í tvær myndir:

  • Myndin til vinstri verður eins þröng og mögulegt er meðan enn er tekin fullur radíus hnappahornanna.
  • Hægri myndin verður eins breið og mögulegt er, reyndar viljum við nota myndstjórnunarforrit til að afrita meginhluta hnappsins nokkrum sinnum svo við getum búið til virkilega langa hnappa með myndinni.

Hérna eru myndirnar sem við munum enda með eftir að hafa klippt þær niður í viðeigandi stærðir:

Blái hnappurinn vinstriBlái hnappurinn til hægri
Svartur hnappur vinstriSvartur hnappur til hægri

Þegar allar fjórar myndirnar eru búnar til ertu tilbúinn að byrja að kóða.

Hnappur HTML

HTML hnappinn okkar mun samanstanda af þremur íhlutum: ytri div umbúðir, akkeri frumefni og span frumefni.

Hnappatexti

Í kóða reitnum hér að ofan eru allir þrír þættirnir brotnir út í aðskildar línur svo að þú getir auðveldara séð hvað er að gerast.

Hins vegar, í reynd, munt þú líklega vilja halda þeim öllum í röð, sérstaklega ef þú ert að nota efnisstjórnunarkerfi (CMS) eins og WordPress sem setur inn málsgreinamerki eftir hvert lína brot.

Bæti hnappamyndum

Núna, ef þú gerir hluti af HTML úr dæminu hér að ofan, er allt sem þú færð tengil sem segir „Hnappatexti.“ Næsta skref sem við viljum taka er að bæta hnappamyndinni við kóðann okkar.

En áður en við gerum það skulum við bæta smá stíl við ytri div umbúðirnar svo að við getum séð hvað er að gerast aðeins skýrara.

.rennihnappur {
sýna: inline-block;
breidd: farartæki;
framlegð: 20px;
}

Sá hluti kóða mun einfaldlega bæta við einhverju rými í kringum hnappinn okkar og neyða div sem inniheldur til að skreppa saman niður á stærð hlekksins og textans. Nú erum við tilbúin að bæta við hnappamyndunum okkar.

.rennihlekkur {
bakgrunnsmynd: url (‘blá-hnappur-réttur.png’);
bakgrunnsstærð: sjálfvirkt 100%;
bakgrunnsstaða: rétt;
bakgrunnur-endurtaka: engin endurtaka;
}
.renna-texti {
bakgrunnsmynd: url (‘blá-hnappur-vinstri.png’);
bakgrunnsstærð: sjálfvirkt 100%;
bakgrunnsstaða: vinstri;
bakgrunnur-endurtaka: engin endurtaka;
}

Svo núna höfum við bætt við hnappamyndinni okkar. Því miður er ekki mikið að skoða ennþá. Ef þú aðdráttar þig og lítur náið muntu taka eftir því að vinstri myndin er í raun bara að sitja efst á hægri myndinni. Ekki áhrifin sem við erum að fara í.

Slæmur hnappur

Hnappastíll

Við skulum bæta við svolítið padding kringum textann. Þetta mun fá hnappinn okkar til að líta meira út eins og hnappur. Að auki verðum við að breyta skjánum á spannaranum og festingarhlutunum í inline-block til að fá þá báða til að svara padding og spá eins og við viljum að þeir geri.

.rennihlekkur {
sýna: inline-block;
}
.renna-texti {
padding: 20px;
sýna: inline-block;
}

Sá kóði gefur hnappinum okkar smá stærð. Samt sem áður höfum við erfiða skörunarmál milli vinstri og hægri myndar. Það sem við þurfum að gera er að nota spássíu til að færa hægri myndina aðeins til hægri og beita síðan nákvæmlega sömu neikvæðu framlegð á vinstri myndina..

.rennihlekkur {
framlegð-vinstri: 17px;
}
.renna-texti {
framlegð-vinstri: -17px;
}

17 pixla gildi eiga við um ákveðna hnappamyndir okkar. Ef þú notar mismunandi myndir þarftu að fínstilla þetta gildi með prufu og villu þar til hnappurinn lítur rétt út.

Áður en haldið er af stað skulum við halda áfram að bæta smá stíl við hnappatexta okkar.

.renna-texti {
litur: #fff;
leturstærð: 14pt;
font-family: ‘Open-Sans’, Arial, sans-serif;
text-umbreyting: hástafi;
leturvigt: feitletrað;
texta-samræma: miðja;
}

Á þessum tímapunkti, hnappurinn okkar lítur út eins og hnappur!

Góður hnappur

Áhrif á hnappinn

Núna, ef þú sveymir músina yfir hnappinn, þá er engin sjónræn vísbending um að músin sé yfir hnappinum. Við skulum laga það með því að bæta við sveimaáhrifum.

.renna-texti: sveima,. renna-texti: virkur {
kassaskuggi: innskot 0 0 0 1000px rgba (255,255,255, .2);
}

Þó að þetta virki vissulega er það svolítið gróft. Í fyrsta lagi, sveimaáhrifin breytast of mikið inn og út. Í öðru lagi, ef þú setur hnappinn á dökkan bakgrunn, muntu taka eftir því að sveimaáhrifin ná út fyrir hringlaga horn hnappsins.

Við getum lagað bæði þessi mál með nokkrum línum af kóða bætt við spanþáttinn.

.renna-texti {
-webkit -skipti-eign: kassaskuggi; / * Safari * /
-webkit-breyting-lengd: .2s; / * Safari * /
breytingareign: kassaskuggi;
umbreytingartími: .2s;
landamæri radíus: 12px;
}

Nú munu sveimaáhrif okkar breytast inn og út í gegnum tvöhundruðustu sekúndu – lítil slökun, en nóg til að umskiptin líði vel. Í öðru lagi mun reglan um landamæra radíus slá af hornum sveimaáhrifanna til að passa við myndina.

Athugaðu að 12 pixla gildi sem við notuðum við landamæri radíusins ​​er sérstaklega við hnappamynd okkar. Ef þú notar aðra mynd þarftu að fínstilla þetta gildi.

Skipt um hnappamyndir

Núna getum við bætt við URL til akkeriþáttarins href eiginleiki og hnapparnir okkar virka frábærlega sem hlekkir. Efst í þessari færslu var hinsvegar gif sem sýndi fram á skiptingaráhrif sem breyttu hnappamyndinni. Við skulum ganga í gegnum ferlið við að búa til hnappana.

Í fyrsta lagi verðum við að bæta nýju myndinni við hnappana. Hvernig við gerum það er með því að bæta hnappamyndunum í nýjan flokk og nota síðan jQuery til að kveikja og slökkva á bekknum þegar hnappurinn er smellt á.

Byrjum á CSS.

.núverandi hnappur. renna-hlekkur {
bakgrunnsmynd: url (‘svartur-hnappur-réttur.png’);
}
.núverandi-hnappur. renna-texti {
bakgrunnsmynd: url (‘svartur-hnappur-vinstri.png’);
}

Núna virka virkni skiptanna ekki. Hins vegar, ef þú bætir bekknum núverandi hnappi handvirkt við hnappinn ílát div, þá sérðu seinni útgáfu hnappsins.

Til að skipta á milli tveggja útgáfa af hnappinum við smellt verður þú að nota jQuery til að kveikja og slökkva á núverandi hnappaflokki fyrir hnappinn.

En áður en við gerum það verðum við að ákveða hvaða hnappa við viljum vera til að skipta um hnappa. Við getum gert þetta með því að bæta bekknum við hvaða hnappa sem við viljum nota sem valtakkar. Við skulum nota skiptihnappinn í þessum tilgangi.

Svo til að tilgreina hvern hnapp sem veltihnapp, myndum við bara bæta þeim flokki við ytri div umbúðirnar:

Nú getum við notað jQuery til að kveikja og slökkva á núverandi hnappaflokki fyrir þann hnapp.

$ (‘. toghle-hnappinn’). smelltu (fall () {
$ (þetta) .toggleClass (‘núverandi hnappur’);
snúa aftur ósatt;
});

Það eru nokkur atriði í gangi í þeim kóða. Við skulum ganga í gegnum það.

Í fyrsta lagi hlaðum við jQuery frá Google Hosted Libraries. Ef vefsíðan þín notar nú þegar jQuery, þá geturðu sleppt fyrsta handritinu.

Seinni handritsþátturinn inniheldur einfaldan jQuery aðgerð.

Aðgerðin fylgist með hvaða þætti sem er með stýrihnappnum. Þegar smellt er á einhvern þátt í þeim flokki er aðgerð hleypt af stað til að kveikja eða slökkva á núverandi hnappi bekkjarins fyrir smellt þáttinn.

Að lokum skilar aðgerðin gildinu ósatt sem kemur í veg fyrir sjálfgefna hegðun hlekkja, sem er að endurhlaða síðuna þar sem akkeriþátturinn okkar href eiginleiki verður tómur á hnappinum.

Með þessum kóða er bætt við getum við skipt hnappinum í hjarta okkar.

Smelltu á mynd til að skipta um hreyfimynd.

Dæmi um rennihurð

Kóðinn í heild sinni

Ef þú hefur fylgst með, skref fyrir skref, muntu nú þegar hafa búið til fulla útgáfu af frumkóðanum fyrir þessa hnappa. Hins vegar, ef þú hefur ekki fylgst með, geturðu náð í allan kóðann fyrir hnappinn í þessari einkatími með því að afrita kóðann hér að neðan í HTML skjal.

Rennihurðarhnappar

.rennihnappur {
sýna: inline-block;
breidd: farartæki;
framlegð: 20px;
}
.rennihlekkur {
bakgrunnsmynd: url (‘blá-hnappur-réttur.png’);
bakgrunnsstærð: sjálfvirkt 100%;
bakgrunnsstaða: rétt;
bakgrunnur-endurtaka: engin endurtaka;
sýna: inline-block;
framlegð-vinstri: 17px;
}
.renna-texti {
bakgrunnsmynd: url (‘blá-hnappur-vinstri.png’);
bakgrunnsstærð: sjálfvirkt 100%;
bakgrunnsstaða: vinstri;
bakgrunnur-endurtaka: engin endurtaka;
sýna: inline-block;
padding: 20px;
framlegð-vinstri: -17px;
litur: #fff;
leturstærð: 14pt;
font-family: ‘Open-Sans’, Arial, sans-serif;
text-umbreyting: hástafi;
leturvigt: feitletrað;
texta-samræma: miðja;
-webkit -skipti-eign: kassaskuggi; / * Safari * /
-webkit-breyting-lengd: .2s; / * Safari * /
breytingareign: kassaskuggi;
umbreytingartími: .2s;
landamæri radíus: 12px;
}
.renna-texti: sveima,. renna-texti: virkur {
kassaskuggi: innskot 0 0 0 1000px rgba (255,255,255, .2);
}
.núverandi hnappur. renna-hlekkur {
bakgrunnsmynd: url (‘svartur-hnappur-réttur.png’);
}
.núverandi-hnappur. renna-texti {
bakgrunnsmynd: url (‘svartur-hnappur-vinstri.png’);
}


Skiptu um hnapp

Hnappur á hlekk

$ (‘. toghle-hnappinn’). smelltu (fall () {
$ (þetta) .toggleClass (‘núverandi hnappur’);
snúa aftur ósatt;
});

Að nota hnappinn til góðs notkunar

Síðasta stykkið af þrautinni er að nýta nýju hnappana þína. Hér eru nokkrar hugmyndir til að koma þér af stað:

  • Bættu vefslóð við akkeriþáttinn href eigindina og notaðu hnappinn til að tengjast hvaða vefsíðu sem er. Athugaðu að til að gera þetta þarftu að sleppa skiptihnappnum úr umbúðum hnappahlutans.
  • Notaðu viðbótar jQuery eða JavaScript til að birta eða fela viðbótarupplýsingar þegar skipt er á hnappinn.
  • Ef þér líður virkilega metnaðarfullt skaltu nota hnappana til að vafra um síðuna og nota jQuery til að ákvarða hvort núverandi blaðsíða passi við URL hnappsins og kveikja á núverandi hnappaflokki ef þeir tveir samsvara.

Allt um CSS liti

Allt um CSS liti

Eitt það mikilvægasta – og hugsanlega ruglingslegt – sem hægt er að tilgreina með CSS er litur. Næstum allir þættir á vefsíðu geta verið litaðir með CSS.

CSS litareiginleikarnir

Eitt smáatriðið sem oft fer í gegnum nýja framhlið forritara er CSS litareignin. Það sem gerir það ruglingslegt er að litur stjórnar ekki frumefninu sjálfum, heldur textanum í frumefninu.

Litur frumefnis sjálfs (kassinn) verður venjulega stjórnað af bakgrunnslit, rammalit eða styttu bakgrunns- og landamærareiginleikum, sem innihalda upplýsingar um lit. Þú getur einnig stillt lit á kassaskugga.

Venjulega nær bakgrunnslitur frumefnis yfir innihald frumefnisins, padding og landamærasvæði. Þetta er venjuleg hegðun ímyndaður af höfundum CSS staðalsins. Hins vegar eru leiðir til að gera bólstrunina og innihaldið mismunandi litum.

Litayfirlýsingar

Til viðbótar við mismunandi CSS eiginleika sem hægt er að nota til að tilgreina lit, eru þrjár mismunandi leiðir til að bera kennsl á lit í CSS: RGB, hex gildi eða nafn.

/ * Öll þessi þrjú verða í sama lit. * /

.rauð-rgb {
bakgrunnslitur: rgb (255, 0, 0);
}

.rauðhex {
bakgrunnslitur: # ff0000;
}

.rauðheiti {
bakgrunnslitur: rauður;
}

Annað (álöggildi) er algengast en við byrjum á RGB vegna þess að álöggildi eru ekki skynsamleg nema þú skiljir hvernig RGB virkar.

RGB gildi

Tölvuskjáir, sjónvarpsskjár og aðrir svipaðir skjáir eru með pixlum. Á litskjám er hverri pixla skipt í þrjá undirpixla: rauða, græna og bláa.

Þetta eru svokallaðir „aðal litir ljóss.“ Hægt er að nota sambland af þessum þremur litum með mismunandi styrkleika til að búa til hvaða lit sem augað manna er fær um að sjá. Þetta er þekkt sem „aukefni í litablöndun.“

(Það er þess virði að vita að þetta hefur allt með mannlegt auga að gera en ekki ljósið sjálft.)

Mismunandi skjáir hafa mismunandi getu hvað varðar styrkleika sem hver undirpixel getur framleitt. Mjög einföld skjár gæti aðeins haft tvo styrkleika fyrir hvern lit (slökkt eða slökkt), en mjög vandað skjár gæti haft mörg fleiri stig.

Sem staðalbúnaður nota tölvur á bilinu frá núlli (0 – alla leið burt) til 255 (alla leið á) fyrir hvern undirprik (til dæmis 128 er hálfnaður á). Þetta er 256 möguleg styrkleiki fyrir hvern undir pixil, sem þýðir að hægt er að geyma gildi hvers undir pixils sem 8 bita bæti (2 8 = 256).

Þar sem það eru þrír litir, hver fulltrúi með 8 bita, er heildarfjöldi litanna sem hægt er að tákna með þessum hætti yfir 16 milljónir (256 3 = 16,777,216).

Hægt er að tákna þetta litasvið með því að taka einfaldlega gildi hvers undir pixils, eins og þetta:

rgb (0, 128, 255)

Í því dæmi er rauði undir pixlarinn alveg frá, græni undirpixillinn er hálfnaður og blái undirpixillinn er alla leið á. Sá litur lítur svona út:

Í þessu kerfi er hvítt (allir litir alla leið) rgb (255, 255, 255) og svartur (allir litir slökkt) er rgb (0, 0, 0).

Einnig er hægt að tilgreina RGB liti sem prósentur, nota aukastaf sem er ekki með einum stöfum:

rgb (0,0, 50,0, 100,0)

Þessi notkun er ekki mjög algeng.

Hex gildi

Nákvæmari leið til að skrifa sömu nákvæmu upplýsingar er að nota álöggildi. Hex lit gildi er skrifað með kjötkássa (pund) tákn, á eftir sex sextánskum stöfum, í þremur pörum, svona:

# 0080ff

Fyrsta parið táknar rauða gildið, annað parið táknar græna gildið og þriðja parið táknar bláa gildið. Í þessu dæmi þýðir 00 alls ekki rautt, 80 þýðir grænt á miðri leið og ff þýðir blátt alla leið einn. Svo þetta er í sama lit og rgb (0, 128, 255).

Þetta kann að virðast svolítið ruglingslegt ef þú ert ekki notaður til sextánskur tala. Í venjulegu aukastafakerfi okkar getur hver tölustaf haft 10 gildi (0-9). Í tölfræði sextánskum hefur hver tölustaf 16 möguleg gildi (0-9, a-f).

Þetta gerir það mögulegt að tákna öll gildi 0-255 í tveimur tölustöfum, 0-ff. Sjá þessa sextánskur námskeið fyrir frekari upplýsingar.

Í þessu kerfi er hvítt #ffffff og svartur er # 000000.

Hex litargildi eru algengasta leiðin til að tilgreina liti í CSS.

CSS litanöfn

Loka leiðin til að tilgreina ákveðinn lit er að nota eitt af fyrirfram skilgreindum litanöfnum. W3C viðheldur og uppfærir stundum lista yfir opinber litanöfn sem hægt er að nota í stað númeraðra litakóða. Til dæmis er hægt að nota svart í staðinn fyrir # 000000.

Fyrstu daga vefsins hjálpuðu þessir nafngreindu litir við að skilgreina lítið, óopinbert sett af „veföryggum litum“ sem voru vel studdir í flestum vöfrum og skjámyndum.

Í dag er stærsti kosturinn við að hafa litanöfn að það er auðveldara að muna það. Til dæmis er ljósblátt auðveldara að muna (og slá rétt inn) en ígildi þess, # add8e6 eða rgb (173, 216, 230).

Listi yfir nafna CSS

Litanafn
Hex gildi
Litadæmi
aliceblue# f0f8ff
fornöld# faebd7
vatn# 00ffff
fiskabúr# 7fffd4
azurblátt# f0ffff
beige# f5f5dc
bisque# ffe4c4
svartur# 000000
blanchedalmond# ffe4c4
blár# 0000ff
bláfjólublá# 8a2be2
brúnt# a52a2a
burlywood# deb887
kadetblá# 5f9ea0
chartreuse# 7fff00
súkkulaði# d2691e
kórall# ff7f50
kornblómablús# 6495ed
cornsilk# fff8dc
Hárauður# dc143c
dökkblátt# 00008b
darkcyan# 008b8b
darkgoldenrod# b8860b
dökk grár# a9a9a9
dökkgrænn# 006400
dökk grár# a9a9a9
darkkhaki# bdb76b
darkmagenta# 8b008b
darkolivegreen# 556b2f
darkorange# ff8c00
darkorchid# 9932cc
dökkrauður# 8b0000
darksalmon# e9967a
darkseagreen# 8fbc8f
darkslatbláa# 483d8b
darkslategray# 2f4f4f
darkslategrey# 2f4f4f
darkturquoise# 00ced1
dökkviolet# 9400d3
deeppink# ff1493
deepskyblue# 00bfff
dimmur# 696969
dimgrey# 696969
dodgerblue# 1e90ff
slökkviliðsmaður# b22222
blómahvítt# fffaf0
skógrækt# 228b22
fuchsia# ff00ff
gainboro#dcdcdc
draugahvít# f8f8ff
gull# ffd700
Goldenrod# daa520
grátt# 808080
grænt# 008000
grænn gulur# adff2f
grátt# 808080
Honeydew# f0fff0
hotpink# ff69b4
indianred# cd5c5c
indigo# 4b0082
fílabeini# fffff0
kaki# f0e68c
lavender# e6e6fa
lavenderblush# fff0f5
grasflöt# 7cfc00
sítrónu chiffon#fffacd
ljósblár# add8e6
ljósakóral# f08080
létti# e0ffff
ljósgoldenrodyellow# fafad2
ljósgrátt# d3d3d3
ljós grænn# 90ee90
ljósgrár# d3d3d3
ljós bleikur# ffb6c1
ljósalón# ffa07a
ljósavír# 20b2aa
ljósblá# 87cefa
ljósategund# 778899
ljósategri# 778899
ljóssteinsblá# b0c4de
ljósgul# ffffe0
límóna# 00ff00
límónu grænn# 32cd32
hör# faf0e6
maroon# 800000
miðlungs kvamarín# 66cdaa
meðalblá# 0000cd
miðlungsþurrkur# ba55d3
meðalstór# 9370db
miðlungssvæna grænn# 3cb371
miðlungs blaðið# 7b68ee
meðalgrænn# 00fa9a
miðlungs grænblár# 48d1cc
miðlungsljós# c71585
miðnættisbláa# 191970
mintcream# f5fffa
mistyrose# ffe4e1
mokkasín# ffe4b5
navajowhite#ffdead
sjóher# 000080
oldlace# fdf5e6
ólífuolía# 808000
olivedrab# 6b8e23
appelsínugult# ffa500
orangered# ff4500
brönugrös# da70d6
palegoldenrod# eee8aa
palegreen# 98fb98
paleturquoise#afeeee
palevioletred# db7093
papayawhip# ffefd5
ferskjupúða# ffdab9
peru# cd853f
bleikur# ffc0cb
plóma# dda0dd
duftblá# b0e0e6
fjólublátt# 800080
rebeccapurple# 663399
rauður# ff0000
rósrauðbrún# bc8f8f
kóngablár# 4169e1
hnakkabrún# 8b4513
lax# fa8072
sandbrún# f4a460
sjávargrænn# 2e8b57
skeljar# fff5ee
sienna# a0522d
silfur# c0c0c0
himinblátt# 87ceeb
slateblue# 6a5acd
slategray# 708090
slategrey# 708090
snjór#fffafa
vorgrænn# 00ff7f
stálblá# 4682b4
sólbrún# d2b48c
flísar# 008080
þistill# d8bfd8
tómat# ff6347
grænblár# 40e0d0
fjólublátt# ee82ee
hveiti# f5deb3
hvítur#ffffff
hvíta reyk# f5f5f5
gulur# ffff00
gulgrænn# 9acd32

Önnur CSS litarefni

  • CSS litakennsla frá W3Schools er fljótt yfirlit yfir efnið, með viðbótardæmum.
  • CSS Color Converter er nettæki sem tekur hvaða litasnið sem er og breytir því í alla hina, auk þess sem hægt er að velja um litatöflu.
  • CSS litarvísun frá Mozilla Developer Network er einn besti staðurinn til að fá upplýsingar um hina ýmsu litastaðla og forskrift.
  • Litir, bakgrunnur og halli: Bæti einstaklingseinkennum við CSS (2015), eftir Eric A Meyer, er frábær bók sem fjallar um CSS-liti í smáatriðum.

Ritun duglegur CSS

Ritun duglegur CSS

Það er ótrúlega mikilvægt að skrifa skilvirkt CSS. Netnotendur dagsins í dag eru mjög stuttir athyglisverðir, svo því lengri tíma sem vefsvæði þitt tekur að hlaða, því meiri líkur eru á því að þeir muni ýta á bakhnappinn.

Ef þú ert að byggja upp einfalda vefsíðu skiptir skilvirk CSS ekki svo miklu máli. En slíkar vefsíður eru meira og sjaldgæfari. Ef þú ert að byggja stóra og flókna síðu ættirðu að hafa áhyggjur af skilvirkni CSS þinnar.

Hér að neðan vekjum við athygli á því hvers vegna skilvirk CSS er mikilvæg, hvernig á að skrifa skilvirkari val og bjóða nokkur tæki sem geta hjálpað þér að fínstilla kóðann þinn enn frekar.

Af hverju skilvirkar CSS mál

Að taka ekki tillit til CSS-skilvirkni þegar þú skrifar kóðann þinn getur skaðað alvarlegan árangur síðunnar. Og það síðasta sem þú vilt er að hafa vefsíðu fyrir hæga hleðslu.

Markmið þitt er að gera það eins auðvelt og mögulegt er fyrir vafrann að láta kóðann þinn í té – jafnvel vafra sem keyra minna skilvirkt.

Það hafa verið færð rök fyrir því að það sé ekki starf höfundar að hafa áhyggjur af því að fínstilla valmennina, það ætti að vera starf vélarinnar sem er að setja saman kóðann. Þó að þetta sé að vissu leyti satt, þá eru ekki allir notendur að nota nútíma vafra.

Enn eru notendur um allan heim sem hafa aðeins aðgang að eldri tölvum og vöfrum. Þú vilt hata að refsa þessum notendum, bara af því að þeir hafa ekki aðgang að nýjustu tækni. Kannski með tímanum mun þetta breytast.

En að hafa notendur í huga þegar þú ert að skrifa kóða er alltaf góð hugmynd.

Val eru mikilvægust

Einn mikilvægasti þátturinn í því að skrifa skilvirkt CSS er að skilja hvernig vafrar lesa og setja saman það. Stóra hlutinn að skilja er að þeir lesa frá hægri til vinstri.

Það byrjar með takkavalinu og færist til vinstri til að leita að forfeðrunum í vali reglunnar. Síðan heldur það áfram að fara til vinstri þar til reglunni er lokið, eða það leiðir af sér misvægi.

Svo ef kóðinn þinn er lesinn ul > li a img, þá er það fyrsta sem verður túlkað img.

Lykillinn er síðasti hlutinn sem við höfum úthlutað til loka valsins.

Fjórar tegundir af CSS völdum

Það eru fjórar tegundir af CSS völdum sem þú þarft að vera meðvitaður um og nota réttu leiðina til að CSS kóðinn þinn sé skilvirkur. Valirnir hér að neðan eru pantaðir miðað við skilvirkni þeirra. Þeir sem eru efstir eru hagkvæmastir og neðstir minnstu.

ID val

Auðkenni ID vísar til ákveðins HTML frumefnis með ID eigindinni og lítur út eins og eftirfarandi:

# aðalleiðsögn

Í HTML væri þetta notað á eftirfarandi hátt:

Flokkaval

Bekkjarinn velur þætti innan ákveðins bekkjaeiningar og lítur út eins og eftirfarandi:

.miðja

Í HTML væri þetta notað á eftirfarandi hátt:

Merkjaval

Merkimiðar eru minna duglegur en kennitölur og flokkar, þannig að þeir ættu að nota sparlega. En þær geta samt verið áhrifaríkar við réttar kringumstæður. Merkimiðar velja almennt svona:

ul

Í HTML verður merkið einfaldlega stílað eins og ráðist er af CSS hvenær sem merkið er notað (ul í þessu tilfelli).

Alhliða val

Hægt er að nota alhliða valinn á hvaða þætti sem er í skjalinu. Til að skrifa skilvirkt CSS ættirðu að forðast að nota alhliða val þegar það er mögulegt. Alhliða valtakurinn er tilnefndur af eftirfarandi:

*

Duglegar CSS reglur til að hafa í huga

Það eru nokkrar lykilreglur sem hafa ber í huga sem munu hjálpa þér að skrifa skilvirkari CSS. Með því að taka þessum reglum innilega hleður CSS kóðinn þinn mun hraðar og skilar betri árangri í öllum vöfrum.

Ekki nota afkomandi val

Afkomuvaldur er hvaða tveggja val sem er ekki aðskilinn með combinator. Afkomandinn er minnsti duglegur valinn og getur raunverulega haft neikvæð áhrif á afköstin.

Nokkur dæmi um val á afkomendum sem þú ættir ekki að nota, eru:

haus h3

fót á bls

.líkamsskipting

Ekki merkja skilríki

Þar sem kennitölur geta aðeins átt við einn þátt, þá er ekki skynsamlegt að fá þá með því sérstaka merki sem þeir verða notaðir með. Til dæmis,

li # vinstri-flakk

Það er ekki nauðsynlegt að segja vafranum hvaða merki valinn verður notaður á. Í staðinn er þetta skilvirkara:

# vinstri-flakk

Athugið að það sama gildir um flokka, en í minna mæli. Svo ekki hæfa námskeið heldur.

Notaðu CSS erfðir eins mikið og mögulegt er

Fasteignasala er mikilvægur hlutur til að ná tökum á. Kynntu þér hvaða eiginleikar verða gefnir niður frá frumefni til frumefnis og láttu þá vinna starf sitt.

Til dæmis er leturstærð í arf. Svo ef þú stillir það fyrir meginmál skjalsins, þá er það ekki nauðsynlegt að setja það fyrir p og li merkin.

Takmarkaðu reglur þínar

Með því að bæta of mörgum reglum við merkin þín mun það hægja á CSS kóðanum þínum og flækja samsvörunarferlið til muna.

Til dæmis

líkami. widget-left #widget

Þetta er lélegur kóða. Það er bara of mikið í gangi. Á hinn bóginn:

#widget

.búnaður-vinstri

Þetta eru miklu skilvirkari.

Innleiðing ofangreindra ráð mun hjálpa til við að gera CSS kóðann þinn mun skilvirkari. Ef þú ert að leita að prófa kóðann þinn eða finna enn fleiri leiðir til að gera hann duglegan skaltu skoða nokkur af tækjunum sem auðkennd er hér að neðan.

Verkfæri til að bæta CSS þinn

Ef þú hefur ofangreindar reglur í huga verður CSS kóðinn þinn mun skilvirkari.

En ef þú ert að leita að því að fínstilla CSS kóðann þinn enn frekar, þá eru til tæki sem hjálpa þér að komast þangað. Hér að neðan höfum við prófíl nokkur verkfæri sem munu hjálpa til við að þjappa CSS þinni, skilgreina valda og jafnvel búa til skilríki fyrir þig.

  • CSS streituprófun: þetta er flott að því leyti að það gerir smáaðlögun á vefsvæðinu þínu, eins og að skruna, aðdráttar, breyta stærð og fleira. Plús það gerir þetta allt á innan við 30 sekúndum. Það sendir þér síðan skýrslu um skilvirkni CSS þinnar.
  • Skilgreindu CSS auðkenni: CSS-hleðslutæki vefpakkans er mjög gagnlegt tæki. Það getur hjálpað til við að tilgreina flokka og auðkenni og getur jafnvel gert CSS fínstillingu fyrir þig.
  • Draga úr CSS valunum þínum: þetta sýnir alla CSS valina sem eru til staðar ásamt þeim þáttum sem valin eru að nota. Þetta gerir þér kleift að fækka valjunum sem þú notar svo þú getir dregið úr heildarminnisálaginu. Með þessu tæki geturðu tengt hvaða URL sem er, svo þú getur líka kynnt þér aðrar síður.
  • Minnka CSS kóðann þinn: minnkaðu núverandi CSS kóða. Því minni sem þú þarft að setja saman því betra. Það býður upp á „á undan“ og „eftir“ skjámynd, svo þú getur séð breytingarnar sem þetta tól gerði.
  • Þjappaðu CSS skrárnar þínar: með því að þjappa CSS skrám þínum mun hjálpa til við að hreinsa þær upp. Þannig getur það hjálpað til við að draga úr heildarstærð HTTP svarsins og þar með viðbragðstíma netþjónsins.

Að skrifa skilvirka CSS er góð hugmynd

Hvort þú velur að fínstilla CSS þinn eða ekki, er undir þér komið. Það er ekki alveg nauðsynlegt með nútíma vafra í dag. Hins vegar, ef þú ert að búa til flókna síðu, þá er það vel þess virði að gera það.

Það sem meira er, þú gætir samt haft notendur sem eru með eldra skipulag og það er snjöll hugmynd að koma til móts við þarfir þeirra líka. Vonandi mun þessi hluti hjálpa þér að gera einmitt þetta og skrifa skilvirkari CSS.

Master CSS á netinu

Master CSS á netinu

Það eru margir staðir á netinu þar sem þú getur horft á myndbönd, lokið námskeið og jafnvel kóða í vafra þegar þú lærir CSS. Þó að það séu tugir, ef ekki hundruðir, af auðlindum í boði, eru hér nokkur af uppáhalds ókeypis stöðunum okkar til að læra um CSS.

Ef þú ert virkilega glæný hjá CSS, Ekki óttast internetið er byrjendavæn myndbandaröð sem kynnir bæði CSS og HTML. Ef þú ert að byrja frá grunni, þá er þetta vel framleidd röð sem ekki hræða þá sem eru bara að fara í ferð sína til að læra CSS.

Ef þú hefur aldrei skrifað stílblað áður er góður staður til að skrifa fyrsta þinn CSS einkatími frá World Wide Web Consortium (W3C). Þessi kennsla veitir ekki miklar skýringar, svo ef þú ert handhægur námsmaður gæti þetta verið kjörinn staður til að byrja.

Að skrifa HTML og CSS þarf að nota textaritara, vista skrár með réttu sniði og hausum og nota vafra til að skoða verkin þín. Ef þú vilt frekar fara í gegnum forrit sem gerir þér kleift að breyta skrám beint í vafranum þínum, Codecademy er nákvæmlega það sem þú ert að leita að.

Önnur úrræði sem nær yfir mikið af sama grunni og Codecademy, en þau sem krefjast þess að þú læri hvernig á að nota textaritil og hvernig á að vista skrár með réttu sniði Lærðu að kóða HTML og CSS eftir Shay Howe. Þegar þú hefur náð góðum tökum á grunnatriðunum er einnig fáanlegt forrit.

Að stjórna blaðsíðuuppsetningum er eitt af erfiðustu og mikilvægustu verkefnunum sem unnin eru með CSS. Ef þú ert í vandræðum með að ná tökunum á að stjórna skipulagi, kennsluefnið frá Lærðu skipulag er bara það sem þú þarft.

Mozilla Developer Network býður upp á námskeið í CSS sem nær yfir allar helstu aðgerðir CSS á þann hátt sem mun undirbúa þig til að halda áfram að krefjandi efni.

Ef þú vilt hafa traustan grunn sem þú getur vaxið úr í fullgildum CSS verktaki gætirðu gert miklu verra en MDN CSS námskeiðið.

Að síðustu, enginn listi yfir auðlindir væri heill án þess að nefna skipulag sem knýr þróun CSS.

Þó að vissulega sé ekki auðveldasta námskeiðið á þessum lista, er það yfirgripsmikið og ítarlegt. Ef markmið þitt er að læra smá CSS, þá er þetta ekki einkatími fyrir þig, en ef þú ert að fara í ferðina til að verða fullgildur CSS verktaki, þá er þetta góð kennsla til að komast undir beltið.

Innblástur í hönnun

Ótrúleg verk CSS

Ef þú ert að leita að innblástur í hönnun, eða vilt fá betri skilning á því hvað CSS getur gert, eru hér nokkrir staðir til að skoða sýnd verk CSS.

  • Creative Bloq hefur dregið saman þennan sýningarlista yfir tuttugu og tvö glæsileg CSS teiknimyndir. Þegar þú lítur í gegnum þau, hafðu í huga að mörg af þessum hreyfimyndum nota líka JavaScript til viðbótar við CSS.
  • CSS Design Awards bjó til þennan lista yfir tíu teiknimyndir með kynningum og námskeiðum svo þú getir beitt hugtökunum í eigin verkefni.
  • MDN DemoStudio er staður þar sem þú getur skoðað hundruð CSS kynningar flokkaðar annað hvort eftir vinsældum, fjölda skoðana, stefnuskrá eða með því að skoða nýjustu kynningarnar fyrst.
  • Mörg teiknimyndanna sem valin voru fyrir fyrri listana eru hýst á Code Pen, og með því að fara beint á pennana gefur þér aðgang að miklum fjölda glæsilegra teikninga sem smíðaðar eru með HTML, CSS og JavaScript.
  • Ef þú hefur séð öll snjallt teiknimyndir sem þér þykir vænt um að sjá, og vilt í staðinn sjá hvernig hægt er að nota CSS til að breyta algjörri vefsíðu án þess að gera eina breytingu á HTML, skaltu skoða þessa glæsilegu vefsíðuhönnun sem leggja áherslu á kraft CSS.

Opinbera orðin um CSS3

Opinbera orðin um CSS3

W3C er stofnunin sem knýr þróun vefstaðla, þar á meðal CSS3 einingar. Þegar þú lærir CSS og jafnar færni þína, ættir þú að kynna þér W3C og tæknigögn sem þeir bjóða.

W3C CSS heimasíðan er sjósetningarpúðinn fyrir alla hluti CSS á W3C. Frá þessari síðu er hægt að finna upplýsingar um áframhaldandi stöðluð þróunarvinna.

Mælt er með lestri

Mælt er með lestri

Ein áhrifaríkasta leiðin til að þróa dýpri skilning og þekkingu með CSS3 er að nota margar heimildir og aðferðir við kennslu.

Ef þú hefur prófað námskeið eða tvo og vilt prófa viðbótaraðferð, eða ef þú vilt bara vinna úr skrifuðum texta, þá eru hér nokkrir af bestu CSS textunum á markaðnum:

  • CSS3 fyrir vefhönnuðir (2010), eftir Dan Cedarholm: Með formáli eftir Jeffrey Zeldman, stofnanda A List Apart, og áritanir frá Chris Coyier hjá CSS-Tricks, og Eric Meyer, höfundur nokkurra bóka um CSS, þennan texta eftir Dan Cedarholm, meðstofnandi Dribbble, er gullstaðallinn fyrir CSS3 texta.
  • HTML og CSS: Hannaðu og smíðaðu vefsíður (2011), eftir Jon Duckett: Þessi texti inniheldur bæði HTML og CSS og er ein vinsælasta og virtasta kynningin á báðum efnum.
  • Lærðu CSS á einum degi og lærðu það vel (2015), eftir Jamie Chan: Ef þú ert byrjandi á CSS og vilt ná snöggum grunnatriðum, þá er þessi bók fyrir þig.
  • CSS: The Missing Manual (2015), eftir David Sawyer McFarland: Þessi texti er ekki eingöngu ætlaður byrjendum, heldur fjallar hann um háþróað efni eins og Flexbox og notkun Sass. Ef þú ert tilbúinn til að jafna þig frá byrjendastöðu mun þessi texti hjálpa þér að komast þangað.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me