CSS no augšas uz leju – ieskaitot CSS3

Atklāšana: Jūsu atbalsts palīdz vietnei darboties! Mēs nopelnām nodošanas maksu par dažiem pakalpojumiem, kurus mēs iesakām šajā lapā.


Kaskādes stila lapas jeb CSS ir valoda, kas tīmekli padara skaistu. Kopā ar HTML un JavaScript, tā ir viena no tehnoloģijām, kas jāapgūst katram priekšējā izstrādātājam.

Kamēr tīmeklis ir pilns ar resursiem, kas palīdzēs apgūt CSS, ja esat iesācējs, jums var būt grūti atdalīt lielus resursus no tiem, kas ir vienkārši ok.

Šajā resursu ceļvedī mēs sniedzam pamata ievadu par to, kas ir CSS, uz ko tā ir spējīga, kā arī par funkcijām, kas ieviestas jaunākajā versijā: CSS3.

Darba sākšana ar CSS

Ja esat gatavs ieiet iekšā, lūk, kas šajā rokasgrāmatā ir apskatīts:

  • Ievads CSS: ja esat iesācējs CSS, šī ir vieta, kur sākt. Šajā sadaļā sniegts pamata CSS pārskats un norādīts uz citiem lieliskajiem resursiem.
  • Kas jauns CSS3: ja vēlaties izpētīt moduļus, kas ir ieviesti CSS3, dodieties uz šo tēmu, kur uzzināsit par multivides vaicājumiem, lodziņa lielumu, 3D transformācijām, animācijām, vairākiem kolonnu izkārtojumiem un citu..
  • Reaģējošu vietņu izveidošana, izmantojot CSS: vietnēm mūsdienās ir skaisti jāattēlo jebkura lieluma ierīcēs, un CSS ir valoda, kas to izraisa.
  • Kā padarīt bīdāmo durvju pogas: sākums jQuery apvienošanai ar CSS, lai radītu patiešām lieliskus efektus.
  • Viss par CSS krāsām: piecelties un doties ar CSS krāsām. Šajā sadaļā ir lieliska atsauce uz krāsu.
  • Efektīva CSS rakstīšana:: ātra lapu ielāde ir svarīgāka nekā jebkad agrāk. Tas parādīs, kā rakstīt CSS, kas var ievērojami samazināt jūsu ielādes laiku.
  • Master CSS Online: šie resursi nodrošina ceļu uz CSS apgūšanu. Ja jūs dodat priekšroku mācīšanās darbam stilam, šī sadaļa ir paredzēta jums.
  • Pārsteidzoši CSS darbi: meklē iedvesmu? Šeit mēs esam apkopojuši dažus no pārsteidzošākajiem CSS darbiem tīmeklī.
  • Oficiālais vārds CSS3: Tagad, kad jūs zināt kādu CSS un esat uzzinājis, kuri moduļi tika ieviesti CSS3, ir laba ideja iepazīties ar W3C – organizāciju, kas virza CSS.
  • Ieteicamais lasījums: ja vēlaties mācīties, izmantojot e-grāmatu vai papīra formātu, pārbaudiet mūsu ieteikto grāmatu sarakstu, kur esat pārliecināts, ka atrodat virsrakstu, kas rada jūsu interesi.

Ievads CSS

Ievads CSS

CSS jeb Cascading Style Sheets ir valoda, ko izmanto, lai noteiktu vietnes stilu un izskatu.

Vietnes saturs, ieskaitot galvenes, rindkopas un attēlus, tiek ielādēts saskaņā ar HTML dokumentā ietvertajiem norādījumiem, un CSS norāda jūsu pārlūkprogrammai, kā katru elementu parādīt šajā HTML dokumentā..

CSS tiek izmantots, lai veiktu tādas lietas kā vietņu izvietošana vietnē un noteiktu tādas lietas kā fona krāsa, apmales lielums un stils, atstarpe starp vienu un nākamo, fontu saime un daudz kas cits..

CSS galvenais ieguvums ir tas, ka tiek nodalīts vietnes dizains un vietnes saturs. Atdalot saturu no dizaina, plašas dizaina izmaiņas var veikt visā vietnē, vienā CSS failā pielāgojot tikai dažus CSS noteikumus.

Trīs vietas, kur rakstīt CSS noteikumus

Lai varētu rakstīt vienu CSS rindu, jums jāzina, kur to rakstīt un kā to sasaistīt ar HTML saturu, kuru tā ietekmē. CSS rakstīšanai var būt trīs dažādas vietas:

  • Ārējā stila lapa: dokuments, kas izveidots tikai tāpēc, lai saturētu CSS kārtulas, kuras var izmantot vairākiem HTML dokumentiem, izmantojot HTML dokumenta galvenē LINK elementu.
  • Iekšējā stila lapa: CSS stili, kas iegulta tieši HTML dokumenta galvenē starp stila elementu tagiem.
  • Iekļautie stili: CSS stili, kas pievienoti vienam HTML elementam, izmantojot stila atribūtu HTML dokumentā.

Lai gan ir laiks un vieta, kur izmantot iekšējās stila lapas un iekļautos stilus, vairums CSS stilus vislabāk var izmantot, izmantojot ārēju stila lapu.

Ārēju stila lapu var saistīt ar neierobežotu skaitu HTML dokumentu, kas ļauj kontrolēt visas vietnes izskatu no viena CSS faila.

CSS noteikumu saistīšana ar noteiktiem HTML elementiem

CSS noteikumi sastāv no divām daļām: selektora un deklarācijas. Katru deklarāciju veido arī divas daļas: īpašums un vērtība.

  • Atlasītāji identificēt vai atlasīt HTML elementu (-us), uz kuru (-iem) jāpiemēro CSS noteikums.
  • Īpašības ir nosaukumi, kas apraksta funkciju, kurai kārtula pievērsīsies. Daži parasti izmantotie CSS rekvizīti ir piemales, apmale, fona krāsa, teksta izlīdzināšana un fonta stils.
  • Vērtības aprakstiet, kā vajadzētu parādīties īpašumam. Ja attiecīgais īpašums ir rezerve, kopējā vērtība varētu būt 10 pikseļi.

Atlasītāji un specifika

Bieži vien stila lapā ir pretrunīgi noteikumi par vienu HTML elementu. Jēdziens selektora specifika noteiks, kuri noteikumi tiek piemēroti katram HTML elementam.

Piemēram, ja galvenajā navigācijā tiek izmantots saišu saraksts un lapas galvenajā daļā tiek parādīti papildu saraksti, navigācijas sarakstam un pamatteksta sarakstiem būs nepieciešami dažādi CSS noteikumu komplekti.

Pretējā gadījumā uz navigācijas izvēlni un lapu lapas pamatdaļā attieksies tie paši CSS noteikumi.

Izpratne par to, kā darbojas CSS atlasītāji, ir atslēga noteikumu rakstīšanai, kas ietekmē pareizos HTML elementus.

Lai gan visbiežāk sastopamie CSS atlasītāji ir id, klases un tagu vai elementu atlasītāji, citus atlasītājus, piemēram, atribūtus, pozicionālos atlasītājus, pseido selektorus un selektoru kombinācijas, var izmantot, lai izveidotu noteikumus ar lielāku specifiku.

CSS parastie lietojumi

Ir daudz CSS rekvizītu, kas tiek izmantoti praktiski visās HTML lapās. Iepazīstoties ar šīm kopīgajām CSS īpašībām, jūs varēsit tikt galā ar lielāko daļu veidošanas un pozicionēšanas uzdevumu.

Ieveidošanas fonts

CSS var izmantot, lai izveidotu jebkuru vēlamo fonta stilu. Neatkarīgi no tā, vai tā ir krāsa, lielums, svars, līnijas augstums, izlīdzinājums, burts, pats fonta tips vai rotājumi, piemēram, pasvītrojumi un pārsvītrojumi, kurus vēlaties kontrolēt, CSS rekvizītus var izmantot, lai izveidotu vēlamo efektu.

Piemērojot specifiskuma principus, katram lapas HTML elementam var piemērot atšķirīgu fonta stilu.

Kārbas modelis

Telpu ap katru HTML elementu vislabāk saprot, domājot par to, kas tiek saukts par lodziņa modeli:

Kārbas modeļa diagramma

Kastītes modelis sastāv no trim CSS īpašībām: polsterējums, apmale un maliņa. Šīs īpašības var izmantot jebkuram HTML elementam. Visvieglāk ir saprast šos trīs īpašumus kā piemēru.

Apsveriet šo HTML rindkopas elementu:

Teksta rindkopa.

Kādas būtu sekas, uzrakstot šo CSS noteikumu?

p {
polsterējums: 10 pikseļi;
apmale: ciets 1px;
rezerve: 10 pikseļi;
}

Šķiet, ka rindkopu ieskauj:

  • Pirmkārt, 10 pikseļi polsterējuma (tukša vieta) visās rindkopas teksta pusēs,
  • Otrkārt, 1 pikseļa plata cieta apmale ap rindkopu un polsterējumu,
  • Treškārt, 10 pikseļu robeža (tukša vieta) starp malu un jebkuru blakus esošo elementu.

Tas ir tas, kas ir pazīstams kā kastes modelis. Katru elementu vispirms iezīmē ar tukšu vietu, ko sauc par polsterējumu, pēc tam ar apmali, un, visbeidzot, ar tukšu vietu, ko sauc par malu.

Izmantojot pludiņus

Pludiņus izmanto, lai nosūtītu HTML elementus pa kreisi vai pa labi no vecāka elementa, neizslēdzot tos no kopējās HTML dokumenta plūsmas. Kopā ar māsas īpašumu, kas ir skaidrs, tie ir viens no labākajiem veidiem, kā izveidot vietņu izkārtojumus.

Lai gan mēs nemēģināsim aptvert visu, kas ir jāzina par pludiņiem, ir svarīgi, lai jūs sāktu mācīties CSS, lai būtu pamatzināšanas par to darbību..

Vieglāk ir saprast pludiņus tekstapstrādes programmas kontekstā. Apsveriet attēlu teksta dokumentā.

Parasti katrs attēls tiks novietots līdz galam pa labi, ar tekstu plūstot pa kreisi attēla pusē, vai arī pa kreisi, ar tekstu, kas plūst pa labi attēla pusē. Vietnē šis izskats tiek panākts, izmantojot pludiņa īpašumu.

Pludiņa īpašumam ir četras pieņemamas vērtības: pa kreisi, pa labi, nav un manto. Iepriekš minētā piemēra gadījumā:

  • Ja attēlam tiek piemēroti CSS noteikumi ar mainīgo rekvizītu un kreisās puses vērtību, tas tiks novietots vecāka elementa kreisajā pusē, un teksts plūst pa labi.
  • Pareizā vērtība darbosies tieši tā, kā jūs varētu gaidīt.
  • Neviens neliedz elementam peldēt abos virzienos.
  • Mantojuma dēļ elements varētu mantot pamatlīmenim piemēroto mainīgās daļas vērtību.

Pludiņus parasti izmanto, lai izveidotu vietņu navigācijas izvēlnes. Parasti vietnes navigācijas izvēlne sastāv no nesakārtota HTML saraksta, kurā katrs saraksta vienums tiek mainīts pa kreisi vai pa labi, kā rezultātā saraksta vienumi parādās blakus, nevis sakārtoti saraksta stilā..

Piemēram, tipiska navigācijas izvēlne HTML var izskatīties šādi:

  • Mājas

  • Mūsu veikals

  • Par mums

  • Sazinies ar mums.

Bez CSS noteikumiem šī izvēlne parādīsies kā saraksts ar aizzīmēm, katru vienumu parādot jaunā rindā. Lai katrs elements parādītos vienā horizontālā rindiņā, sākot no lapas kreisās malas, varētu izmantot šādus CSS noteikumus.

li {
pludiņš: pa kreisi;
}

Ņemiet vērā, ka šī piemēra vienkāršošanas nolūkos mēs kā CSS atlasītāju esam izmantojuši saraksta vienības tagu li. Patiesībā tas nekad netiktu izdarīts. Parasti klase tiek piešķirta pašam sarakstam vai katram saraksta vienumam, un šī klase tiks izmantota kā atlasītājs.

Notīriet pludiņu

Vēl viens īpašums, ko bieži izmanto kopā ar pludiņiem, ir skaidrs īpašums. Kad viens elements ir peldošs, visi nākamie elementi slīd uz augšu un izlīdzinās blakus peldošajam elementam.

Gadījumos, kad vēlaties, lai nākamie elementi sāktu zem peldošā vienuma, nevis blakus tam, varat izmantot skaidro īpašumu, lai piespiestu tos sākt jaunā rindā.

Mēs tikko esam saskrāpējuši to, ko var izdarīt ar pludiņiem, un caurspīdīgo īpašumu, taču mēs atradām šo lielisko CSS-Tricks rakstu, kas sniedz padziļinātu ieskatu šajā tēmā.

Izmantojot pozīcijas īpašumu

Īpašums CSS ir vēl viena metode, ko bieži izmanto vietņu izkārtojuma izveidošanai. Atšķirībā no mainīgā rekvizīta, pozīcijas rekvizītu bieži izmanto, lai izdalītu elementus no HTML dokumenta dabiskās plūsmas un ļoti precīzi diktētu to atrašanās vietu..

Pozīcijas īpašībai var izmantot divas vērtības: relatīvo un absolūto. Pēc vienas no šīm vērtībām piemērošanas papildu īpašībām, piemēram, augšai, apakšā, pa kreisi un pa labi, var ļoti precīzi pozicionēt skarto elementu..

Izmantojot pozīcijas īpašumu, lai izveidotu izkārtojumus, tas nav bez riskiem. Atšķirībā no pludiņa rekvizīta, pozīcijas rekvizīti novietotie elementi pārklājas ar citiem vienumiem, radot iespējas vairāk pārlūkprogrammu un skatu porta lieluma problēmu.

Tomēr tas ir plaši izmantots īpašums CSS attīstības pasaulē, un jums būtu labi iemācīties pozīcijas īpašuma izmantošanas pamatus..

Kas jauns CSS3

Kas jauns CSS3

Kamēr CSS2 bija viena specifikācija, CSS3 ir sadalīts vairāk nekā piecdesmit dažādos moduļos, katrs no tiem ir atšķirīgs izstrādes un pieņemšanas posmā..

Pastāvošo darbu ar CSS3 pārvalda globālais tīmekļu konsorcijs jeb W3C, un tie piedāvā centralizētu vietu, kur jūs varat izsekot visiem notiekošajiem CSS3 standartizācijas darbiem..

Kamēr notiek darbs pie dažādiem CSS3 moduļiem, daudziem moduļiem jau ir plaša akceptēšana, un tos plaši izmanto daudzas vietnes. Šeit ir desmit vissvarīgākie CSS3 rekvizīti, kas jau ir guvuši plašu atzinību, un kurus atbalsta visi mūsdienu pārlūkprogrammas.

  • Kaut arī spēja radīt vienkāršu animācijas ir bijusi iespējama ilgu laiku ar JavaScript, CSS animācijas tagad var izveidot, izmantojot vienkāršāku CSS sintakse.
  • aprēķins funkcija, kas tagad pieejama ar CSS3, ir ārkārtīgi noderīga, lai izveidotu adaptīvus izkārtojumus. To var izmantot, lai saskaitītu, atņemtu, reizinātu vai dalītu, un aprēķina rezultātu pēc tam izmanto kā īpašuma vērtību.
  • Dažādas uzlaboti atlasītāji tika pievienoti CSS3, ļaujot paaugstināt specifiskumu, atlasot elementus CSS noteikumiem.
  • Papildinājums slīpumi kā fona tips ir devis CSS izstrādātājiem iespēju radīt iespaidīgus fonus, kas tiek ātri lejupielādēti un parādīti.
  • Elementam piemērotie platuma un augstuma rekvizīti nesatur polsterējumu, apmali un malu. Tā rezultātā polsterējums, rezerve un apmale palielina elementa izmēru, pārsniedzot noteikto platumu un augstumu. Tas jau sen ir satracinājis CSS izstrādātājus, kuri izmanto sarežģītu matemātiku, lai precizētu vietņu izkārtojumus. Tomēr ar jauno lodziņa lieluma rekvizītu var izmantot vērtības robežu lodziņu, piespiežot polsterējumu, apmali un malu noteiktā platuma un augstuma ierobežojumos, tādējādi vienkāršojot tīmekļa lapu izkārtojuma dizainu.
  • CSS var izmantot, lai robežas uzliktu jebkuram HTML elementam, un ar robežas attēla īpašību pielāgotas apmales izveidošana un lietošana ir vienkāršāka nekā jebkad agrāk. Paša īpašuma sintakse ir diezgan sarežģīta, taču, tiklīdz esat paņēmis to, jūs varat ātri izveidot vienreizējas robežas jebkuram vietnes elementam..
  • Plašsaziņas līdzekļu vaicājumi noteikt, vai vietnes skatījums, kas tiek izmantots, lai piekļūtu vietnei, atbilst noteiktiem parametriem. @Media CSS3 modulis ir viens no galvenajiem rīkiem, ko izmanto adaptīvu vietņu izveidošanai. Izmantojot multivides vaicājumus, CSS izstrādātājs var izveidot CSS kārtulas, kuras tiek piemērotas tikai tad, ja tiek ievērotas noteiktas multivides funkcijas, piemēram, skata porta platums un augstums un krāsu displeja iespējas. Šādā veidā CSS izstrādātāji var pārvietot un mainīt elementu izmērus vai tos visus paslēpt, balstoties uz multivides vaicājuma rezultātiem..
  • Izmantojot dažādi foni izveidot CSS3 specifisku fona efektu ir vieglāk nekā jebkad. Izmantojot fona rekvizītu, jebkuram elementam var piemērot vairākus fona attēlus, krāsas un slīpumus.
  • Izmantojot kolonnas izveidot CSS3 kolonnu īpašumu ir vieglāk nekā jebkad, lai izveidotu avīžu iedvesmotu izkārtojumu. Īpašumu var izmantot, lai viegli iestatītu kolonnu skaitu un platumu, izveidojot konteineru, kurā saturs viegli plūst no vienas kolonnas uz nākamo. Slejas ir noderīgas arī elastīgu navigācijas izvēlņu izveidošanai.
  • 3D transformācijas ir iespējams CSS3. Šis ir sarežģīts priekšmets, kas jāpārvalda, un jums būs labi, ja iesākumā izlasīsit par CSS pārveidēm un pēc tam darbosities pēc dažām pamācībām..

Reaģējošu vietņu izveidošana ar CSS

Reaģējošu vietņu izveidošana ar CSS

Katru dienu, lai piekļūtu tīmeklim, tiek izmantoti simtiem, ja ne tūkstošiem dažādu displeju izmēru un izšķirtspēju, un tāpēc vairs nepietiek ar vienu pilna izmēra vietni un vienu vai diviem dizainiem mazākām ierīcēm..

Mūsdienās jūsu vietnei jābūt skatāmai lielos ekrānos, mazās ierīcēs un visos skata porta lielumos starp tiem.

Lai to izdarītu, jūsu vietnes CSS ir jāatbilst trim reaģējoša tīmekļa dizaina pamatprincipiem.

  • Pirmkārt, mugurkaulam jeb režģim, kas nosaka jūsu kopējo izkārtojumu, jābūt mainīgam.
  • Otrkārt, attēliem automātiski jāmaina lielums, lai tos varētu skaisti attēlot jebkurā ierīcē.
  • Treškārt, plašsaziņas līdzekļu vaicājumi jāizmanto, lai pievērstos punktiem, kur oriģinālais šķidruma dizains sabojājas.

Tuvojoties jaunam tīmekļa dizaina projektam, daudzi pieredzējuši dizaineri sāk ar vispirms mobilais tehnika. Vietne, kas izstrādāta ar šo paņēmienu, sākas ar visvienkāršāko dizainu, kas paredzēts mazākajam skatu logam, un, palielinoties skata porta lielumam, tiek pievienoti papildu stili.

Pirmajai mobilajai tehnikai ir divas ievērojamas priekšrocības:

  • Pirmkārt, tas piespiež dizaineru identificēt vietnes galvenās funkcijas un izmantot tās par pamatu vietnes dizainam. Diezgan bieži pilna izmēra vietnē ir saturs, piemēram, logrīki, izvēlnes un tāds, kas neietilpst vietnē, kad tiek apskatīts mobilajā ierīcē. Pirmā mobilā pieeja palīdz nodrošināt, ka vietnes galvenajam mērķim un funkcionalitātei tiek pievērsta galvenā uzmanība visos skatu portu izmēros.
  • Otrkārt, vietņu apmeklētāji, kuri vietnei piekļūst no mobilā tālruņa, lejupielādē mazāk CSS noteikumu un vietnes resursu. Ja pirmā vietne tiek ielādēta pilnībā, mobilais lietotājs lejupielādēs daudz vairāk resursu, nekā nepieciešams. Pirmā pieeja mobilajā ierīcē mobilajā ierīcē tiek ielādēti tikai atbilstoši priekšmeti, ietaupot daļu no apmeklētāja vērtīgajiem datiem un radot vietņu ielādēšanas pieredzi..

Mācīšanās reaģējošs dizains

Viens no labākajiem veidiem, kā iemācīties adaptīvas dizaina metodes, ir vienkāršs, praktisks, adaptīvs dizaina projekts. Izveidojot savu pirmo adaptīvo vietnes dizainu, jūs iegūsit labāku izpratni par jēdzieniem, par kuriem mēs runājām.

Pieaugot kolonnu stila izkārtojumu popularitātei, vietņu dizaineriem ir parādījies jauns izaicinājums: izaicinājums pielāgot kolonnu izkārtojumus jebkura lieluma ierīcēm..

Par laimi, ir resursi, kas palīdz gan CSS iesācējiem, gan pieredzējušiem izstrādātājiem iemācīties strādāt ar šo jauno CSS īpašumu atsaucīgā vidē.

Vēl viens lielisks veids, kā saprast, kā labākie CSS izstrādātāji pielāgo vietnes, ir aplūkot atsaucīgu vietni dažādu izmēru diapazonā. Multivides vaicājumi ir viena vietne, kurā vienā ekrānā var redzēt simtiem atsaucīgu vietņu dizainu dažādos izmēros.

Kā padarīt bīdāmo durvju pogas

Kā padarīt bīdāmo durvju pogas

Tikai izmantojot CSS, jūs varat izveidot lieliskas un spēcīgas pogas. Ar nelielu jQuery jūs varat izdarīt vēl vairāk.

Zemāk mēs parādīsim, kā uzņemt vienkāršus pogu attēlus un iestatīt tos tā, lai jūsu vietnē tos varētu izmantot kā visu izmēru pārslēdzamas pogas. Rezultātā jūs izveidosit atkārtoti izmantojamu pogu kodu, kuru varat izmantot, lai ģenerētu šādas pogas.

Noklikšķiniet uz attēla, lai pārslēgtu animāciju.

Bīdāmo durvju pogas 1. piemērs

Attēlu izveidošana

Metode, kuru mēs izmantosim, lai izveidotu šīs pogas, tiek saukta par “bīdāmo durvju” CSS. Lai uzstādītu šīs pogas, mums ir nepieciešami divi attēli katrai pogas versijai – mūsu gadījumā divi melnu pogu attēli un divi zilas pogas attēli, kopā četri attēli.

Lai izveidotu šos attēlus, mēs sākam ar cietiem pogu attēliem.

Zila poga
Melna poga

Mums ir jāsadala katra poga divos attēlos:

  • Kreisās puses attēls būs pēc iespējas šaurs, vienlaikus saglabājot visu pogas stūru rādiusu.
  • Labās puses attēls būs pēc iespējas platāks, jo faktiski mēs gribēsim izmantot attēla manipulācijas programmu, lai pāris reizes kopētu pogas korpusu, lai mēs varētu izveidot patiešām garas pogas ar attēlu.

Šie ir attēli, kurus mēs gatavosim pēc tam, kad būsim tos sagriezuši atbilstošajos izmēros:

Zila poga pa kreisiZila poga pa labiZila poga pa labi
Melnā poga pa kreisiMelna poga pa labiMelna poga pa labi

Kad esat izveidojis visus četrus attēlus, esat gatavs sākt kodēšanu.

Pogas HTML

Mūsu pogas HTML sastāvēs no trim komponentiem: ārējā div aptinuma, enkura elementa un laiduma elementa.

Pogas teksts

Iepriekš redzamajā kodu blokā visi trīs elementi ir sadalīti atsevišķās rindās, lai jūs varētu vieglāk redzēt notiekošo.

Tomēr praksē jūs, iespējams, vēlēsities tos visus turēt iekšā, it īpaši, ja jūs izmantojat satura pārvaldības sistēmu (CMS), piemēram, WordPress, kas ievietos rindkopu tagus pēc katras rindiņas pārtraukuma.

Pogas attēlu pievienošana

Šobrīd, ja no iepriekšminētā piemēra atveidosit mazliet HTML, viss, ko iegūsit, ir saite “Pogas teksts”. Nākamais solis, ko mēs vēlamies spert, ir pogas attēls savam kodam.

Tomēr pirms mēs to darīsim, pievienosim nedaudz stila ārējam div apvalkam, lai mēs mazliet skaidrāk redzētu notiekošo.

.bīdāma poga {
displejs: inline-block;
platums: auto;
rezerve: 20 pikseļi;
}

Šis koda kods vienkārši pievienos nelielu vietu ap mūsu pogu un piespiedīs saturošo div samazināties līdz saites un teksta lielumam. Tagad mēs esam gatavi pievienot savus pogu attēlus.

.bīdāma saite {
fona attēls: url (‘blue-button-right.png’);
fona izmērs: auto 100%;
fona stāvoklis: labais;
fonu atkārtot: neatkārtot;
}
.bīdāms teksts {
fona attēls: url (‘blue-button-left.png’);
fona izmērs: auto 100%;
fona pozīcija: pa kreisi;
fonu atkārtot: neatkārtot;
}

Tāpēc tagad mēs esam pievienojuši savu pogas attēlu. Diemžēl pagaidām nav daudz jāapskata. Tuvinot un uzmanīgi apskatot, jūs arī pamanīsit, ka kreisās puses attēls faktiski atrodas tikai labās puses attēla augšpusē. Ne jau tas, ko mēs gaidām.

Slikta poga

Pogas veidošana

Pievienosim mazliet polsterējumu ap tekstu. Tādējādi mūsu poga izskatīsies vairāk kā poga. Turklāt mums būs jāmaina laiduma un enkura elementu attēlojums, lai bloķētu inline, lai tie abi reaģētu uz polsterējumu un atzīmētu to, kā mēs vēlamies.

.bīdāma saite {
displejs: inline-block;
}
.bīdāms teksts {
polsterējums: 20 pikseļi;
displejs: inline-block;
}

Šis kods mūsu pogai piešķirs zināmu izmēru. Tomēr mums joprojām ir traucējošs pārklāšanās jautājums starp kreiso un labo attēlu. Mums ir jāizmanto marža, lai labās puses attēlu nedaudz pārvietotu pa labi, un tad kreisās puses attēlam tiek piemērota tieši tāda pati negatīvā rezerve..

.bīdāma saite {
kreisā mala: 17 pikseļi;
}
.bīdāms teksts {
kreisā mala: -17 pikseļi;
}

17 pikseļu vērtība ir piemērojama mūsu konkrētajiem pogu attēliem. Ja izmantojat dažādus attēlus, jums šī vērtība būs jāprecizē, izmantojot izmēģinājuma un kļūdas kļūdas, līdz poga izskatās pa labi.

Pirms turpināt, pāriesim arī pie mūsu pogas teksta un pievienosim tam nedaudz stila.

.bīdāms teksts {
krāsa: #fff;
fonta lielums: 14pt;
fontu saime: “Open-Sans”, Arial, sans-serif;
teksta pārveidošana: lielie burti;
burtu svars: treknrakstā;
text-align: centrs;
}

Šajā brīdī mūsu poga faktiski izskatās kā poga!

Laba poga

Pogas kursora efekts

Patlaban, novietojot peli virs pogas, nav nekādu vizuālu norāžu, ka pele atrodas virs pogas. Labosim to, pievienojot kursora efektu.

.bīdāmais teksts: lidināties, .bīdāmais teksts: aktīvais {
box-shadow: iespiests 0 0 0 1000px rgba (255,255,255, .2);
}

Lai gan tas noteikti darbojas, tas ir nedaudz aptuvens. Pirmkārt, lidmašīnas efekts pārāk skarbi pāriet uz iekšu un ārā. Otrkārt, ja jūs novietosit pogu uz tumša fona, jūs pamanīsit, ka kursora novirzīšanas efekts pārsniedz pogas noapaļotos stūrus..

Mēs varam novērst abas šīs problēmas ar pāris koda rindiņām, kas pievienotas laiduma elementam.

.bīdāms teksts {
-webkit-pārejas īpašums: box-ēna; / * Safari * /
-Web komplekta pārejas ilgums: .2s; / * Safari * /
pārejas īpašums: kaste-ēna;
pārejas ilgums: .2s;
apmales rādiuss: 12 pikseļi;
}

Tagad mūsu lidmašīnas efekts tiks mainīts uz priekšu un atpakaļ divu sekundes simtdaļu laikā – neliels atvieglojums, bet pietiekami, lai pāreja justos vienmērīgi. Otrkārt, robežas rādiusa noteikums noapaļos virziena efekta stūrus, lai tas būtu piemērots attēlam.

Ņemiet vērā, ka 12 pikseļu vērtība, kuru mēs piemērojām apmales rādiusam, ir raksturīga mūsu pogas attēlam. Ja izmantojat citu attēlu, jums šī vērtība ir precīzi jānosaka.

Pogu attēlu pārslēgšana

Pašlaik mēs varam pievienot atribūtu enkura elementa href vietrādi URL, un mūsu pogas darbosies lieliski kā saites. Tomēr šī ziņojuma augšdaļā bija gif, kas demonstrēja pārslēgšanas efektu, kas mainīja pogas attēlu. Tagad apskatīsim pārslēgšanas pogu izveidošanas procesu.

Pirmkārt, mums jaunais attēls būs jāpievieno pogām. Mēs to darīsim, pievienojot pogas attēlus jaunai klasei un pēc tam izmantojot jQuery, lai ieslēgtu un izslēgtu klasi, kad poga tiek noklikšķināta.

Sāksim ar CSS.

.pašreizējā poga. slīdēšanas saite {
fona attēls: url (‘melnā poga-labā.png’);
}
.pašreizējā poga. slīd-teksts {
fona attēls: url (‘melnā poga-kreisā.png’);
}

Šobrīd pārslēgšanas efekts nedarbojas. Tomēr, ja jūs manuāli pievienojat klases pašreizējo pogu pogu konteinera dalīšanai, jūs redzēsit savas pogas otro versiju.

Lai pārslēgtos starp divām pogas versijām uz klikšķa, jQuery jāizmanto, lai ieslēgtu un izslēgtu pašreizējo pogu klasi..

Tomēr pirms mēs to darīsim, mums būs jāizlemj, kuras pogas mēs vēlamies pārslēgt. Mēs to varam izdarīt, pievienojot klasi jebkurām pogām, kuras mēs vēlamies izmantot kā pārslēgšanas pogas. Šim nolūkam izmantosim klases pārslēgšanas pogu.

Tātad, lai jebkuru pogu norādītu kā pārslēgšanas pogu, mēs vienkārši pievienojam šo klasi ārējam div aptinumam:

Tagad mēs varam izmantot jQuery, lai ieslēgtu vai izslēgtu pašreizējo pogu klasi šai pogai.

$ (‘. pārslēgšanas poga’). noklikšķiniet uz (function () {
$ (this) .toggleClass (‘pašreizējā poga’);
atgriezties nepatiess;
});

Šajā kodā ir dažas lietas. Iziesim to cauri.

Pirmkārt, mēs ielādējam jQuery no Google mitinātajām bibliotēkām. Ja jūsu vietne jau izmanto jQuery, tad pirmo skripta elementu varat izlaist.

Otrais skripta elements satur vienkāršu jQuery funkciju.

Funkcija vēro jebkuru elementu ar klases pārslēgšanas pogu. Kad tiek noklikšķināts uz jebkuru šīs klases elementu, tiek aktivizēta funkcija, ar kuru tiek ieslēgta vai izslēgta klases pašreizējā poga..

Visbeidzot, funkcija atgriež nepatiesu vērtību, kas novērš saites noklusējuma darbību, proti, lapas atkārtotu ielādi, jo mūsu enkura elementa href atribūts pārslēgšanas pogā būs tukšs.

Kad ir pievienoti šie koda biti, mēs varam pārslēgt pogu uz mūsu sirds saturu.

Noklikšķiniet uz attēla, lai pārslēgtu animāciju.

Bīdāmo durvju poga 2. piemērs

Pilns avota kods

Ja jūs soli pa solim sekojāt līdzi, tad šīm pogām jau būsit izveidojis pilnu avota koda versiju. Tomēr, ja jūs neesat sekojis līdzi, varat saķert pilnu apmācības pogas avota kodu, nokopējot zemāk esošo kodu HTML dokumentā.

Bīdāmo durvju pogas

.bīdāma poga {
displejs: inline-block;
platums: auto;
rezerve: 20 pikseļi;
}
.bīdāma saite {
fona attēls: url (‘blue-button-right.png’);
fona izmērs: auto 100%;
fona stāvoklis: labais;
fonu atkārtot: neatkārtot;
displejs: inline-block;
kreisā mala: 17 pikseļi;
}
.bīdāms teksts {
fona attēls: url (‘blue-button-left.png’);
fona izmērs: auto 100%;
fona pozīcija: pa kreisi;
fonu atkārtot: neatkārtot;
displejs: inline-block;
polsterējums: 20 pikseļi;
kreisā mala: -17 pikseļi;
krāsa: #fff;
fonta lielums: 14pt;
fontu saime: “Open-Sans”, Arial, sans-serif;
teksta pārveidošana: lielie burti;
burtu svars: treknrakstā;
text-align: centrs;
-webkit-pārejas īpašums: box-ēna; / * Safari * /
-Web komplekta pārejas ilgums: .2s; / * Safari * /
pārejas īpašums: kaste-ēna;
pārejas ilgums: .2s;
apmales rādiuss: 12 pikseļi;
}
.bīdāmais teksts: lidināties, .bīdāmais teksts: aktīvais {
box-shadow: iespiests 0 0 0 1000px rgba (255,255,255, .2);
}
.pašreizējā poga. slīdēšanas saite {
fona attēls: url (‘melnā poga-labā.png’);
}
.pašreizējā poga. slīd-teksts {
fona attēls: url (‘melnā poga-kreisā.png’);
}


Pārslēgšanas poga

Saites poga

$ (‘. pārslēgšanas poga’). noklikšķiniet uz (function () {
$ (this) .toggleClass (‘pašreizējā poga’);
atgriezties nepatiess;
});

Jūsu pogas lietderīga izmantošana

Pēdējais mīklas gabals ir jūsu jauno pogu lietderīga izmantošana. Šeit ir dažas idejas, kā sākt darbu:

  • Pievienojiet URL enkura elementa href atribūtam un izmantojiet pogu, lai izveidotu saiti uz jebkuru tīmekļa lapu. Ņemiet vērā, ka, lai to izdarītu, no pogas div iesaiņojuma vēlaties izlaist pārslēgšanas pogas klasi.
  • Izmantojiet papildu jQuery vai JavaScript, lai parādītu vai paslēptu papildinformāciju, kad poga tiek pārslēgta.
  • Ja jūs patiešām jūtaties ambiciozi, izmantojiet pogas navigācijai vietnē un izmantojiet jQuery, lai noteiktu, vai pašreizējā lapa atbilst pogas URL, un pārslēdziet pašreizējās pogas klasi, ja abas atbilst.

Viss par CSS krāsām

Viss par CSS krāsām

Viena no vissvarīgākajām un, iespējams, mulsinošajām lietām, kuras var norādīt ar CSS, ir krāsa. Gandrīz visus Web lapas elementus var iekrāsot, izmantojot CSS.

CSS krāsu īpašības

CSS krāsu īpašība ir viena detaļa, kas bieži piesaista jaunus priekšplāna izstrādātājus. Mulsina tas, ka krāsa nekontrolē pašu elementu, bet tekstu elementa iekšpusē.

Paša elementa (lodziņa) krāsu parasti kontrolē fona krāsa, apmales krāsa vai saīsināti fona un apmales rekvizīti, kas ietver informāciju par krāsām. Kastītes ēnai var iestatīt arī krāsu.

Parasti elementa fona krāsa aptver elementa saturu, polsterējumu un apmales laukumu. Tā ir ierasta rīcība, ko iedomājušies CSS standarta veidotāji. Tomēr ir veidi, kā padarīt polsterējumu un tā saturu atšķirīgās krāsās.

Krāsu deklarācijas

Papildus dažādām CSS īpašībām, kuras var izmantot, lai norādītu krāsu, ir trīs dažādi veidi, kā identificēt krāsu CSS: RGB, heksa vērtība vai nosaukums.

/ * Visi šie trīs būs vienā krāsā. * /

.red-rgb {
fona krāsa: rgb (255, 0, 0);
}

.sarkans-heks {
fona krāsa: # ff0000;
}

.sarkanais vārds {
fona krāsa: sarkana;
}

Otrais (heksa vērtība) ir visizplatītākais, bet mēs sāksim ar RGB, jo heksa vērtības nav jēgas, ja vien jūs nesaprotat, kā darbojas RGB.

RGB vērtības

Datoru monitoriem, televīzijas ekrāniem un citiem līdzīgiem displejiem ir pikseļi. Krāsu displejos katrs pikselis ir sadalīts trīs apakšpikselos: sarkanā, zaļā un zilā krāsā.

Tās ir tā saucamās “primārās gaismas krāsas”. Šo trīs krāsu kombināciju ar dažādu intensitāti var izmantot, lai izveidotu jebkuru krāsu, ko cilvēka acs spēj redzēt. To sauc par “piedevu krāsas sajaukšanu”.

(Ir vērts zināt, ka tam visam ir sakars ar cilvēka aci, nevis ar pašu gaismu.)

Dažādiem displeju ekrāniem ir dažādas iespējas attiecībā uz intensitātes diapazonu, ko katrs apakšpikselis var radīt. Ļoti vienkāršam displejam var būt tikai divas intensitātes katrai krāsai (izslēgta vai ieslēgta), turpretim ļoti augstas kvalitātes displejam var būt daudz vairāk gradāciju.

Parasti datoriem katram apakšpikselim tiek izmantots diapazons no nulles (0 – pilnībā izslēgts) līdz 255 (pilnīgi ieslēgts) (piemēram, 128 ir pusē). Tas ir 256 iespējamās intensitātes katram apakšpikselim, kas nozīmē, ka katra apakšpikseļa vērtību var uzglabāt kā 8 bitu baitu (2 8 = 256).

Tā kā ir trīs krāsas, katra no tām ir attēlota ar 8 bitiem, kopējais krāsu skaits, ko var attēlot, ir lielāks par 16 miljoniem (256 3 = 16 777 216)..

Šo krāsu diapazonu var attēlot, vienkārši atzīmējot katra apakšpikseļa vērtību, piemēram:

rgb (0, 128., 255.)

Šajā piemērā sarkanais apakšpikselis ir pilnībā izslēgts, zaļais apakšpikselis ir ieslēgts pusceļā un zils apakšpikselis ir pilnībā ieslēgts. Šī krāsa izskatās šādi:

Šajā sistēmā baltā krāsa (visās krāsās visu ieslēgtu) ir rgb (255, 255, 255) un melna (visas krāsas izslēgtas) ir rgb (0, 0, 0).

RGB krāsas var norādīt arī procentos, izmantojot decimāldaļu, nevis ar vienu aizmugures ciparu:

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

Šī lietošana nav ļoti izplatīta.

Hex vērtības

Kompaktāks veids, kā rakstīt to pašu precīzu informāciju, ir heksa vērtību izmantošana. Sešstūra krāsas vērtību raksta ar hash (mārciņas) zīmi, kam seko sešas heksadecimālas zīmes trīs pāros, piemēram:

# 0080ff

Pirmais pāris apzīmē sarkano vērtību, otrais pāris apzīmē zaļo vērtību, un trešais pāris apzīmē zilo vērtību. Šajā piemērā 00 nozīmē, ka sarkanā krāsā vispār nav, 80 nozīmē zaļu pusceļā, un ff nozīmē zilu visu garu. Tātad šī krāsa ir tāda pati kā rgb (0, 128, 255).

Tas varētu šķist nedaudz mulsinoši, ja nelietojat heksadecimālos skaitļus. Parastajā decimāldaļu sistēmā katram ciparam var būt 10 vērtības (0–9). Heksadecimālā numerācijā katram ciparam ir 16 iespējamās vērtības (0-9, a-f).

Tas ļauj attēlot visas vērtības no 0 līdz 255 ar diviem cipariem, 0-ff. Lai iegūtu papildinformāciju, skatiet šo heksadecimālo apmācību.

Šajā sistēmā balts ir #ffffff un melns ir # 000000.

Hex krāsu vērtības ir visizplatītākais veids, kā norādīt krāsas CSS.

CSS krāsu nosaukumi

Pēdējais veids, kā norādīt konkrētu krāsu, ir izmantot vienu no iepriekš definētajiem krāsu nosaukumiem. W3C uztur un ik pa laikam atjaunina oficiālo krāsu nosaukumu sarakstu, ko var izmantot numurēto krāsu kodu vietā. Piemēram, # 000000 vietā var izmantot melnu krāsu.

Tīmekļa pirmajās dienās šīs nosauktās krāsas palīdzēja definēt nelielu, neoficiālu “tīmeklī drošu krāsu” kopumu, kas tika labi atbalstīts lielākajā daļā pārlūkprogrammu un displeju ekrānu.

Mūsdienās krāsu nosaukumu lielākā priekšrocība ir tā, ka tos ir vieglāk atcerēties. Piemēram, gaiši zilo krāsu ir vieglāk atcerēties (un pareizi rakstīt) nekā tā ekvivalentus # add8e6 vai rgb (173, 216, 230)..

CSS krāsu vārdu saraksts

Krāsas nosaukums
Hex vērtības
Krāsu piemērs
aliceblue# f0f8ff
antiquewhite# faeb7
akva# 00ffff
akvamarīns# 7fffd4
debeszils# f0ffff
smilškrāsas# f5f5dc
biskvīts# ffe4c4
melns# 000000
blanchedalmond# ffe4c4
zils# 0000ff
blueviolet# 8a2be2
brūns# a52a2a
burvids# deb887
kadetblue# 5f9ea0
chartreuse# 7fff00
šokolāde# d2691e
koraļļu# ff7f50
rudzupuķu zils# 6495ed
cornsilk# fff8dc
sārtināt# dc143c
tumši zils# 00008b
tumšais ciāns# 008b8b
tumšā zelta rinda# b8860b
tumši pelēks# a9a9a9
tumši zaļa# 006400
tumši pelēks# a9a9a9
darkkhaki# bdb76b
tumšmaizīte# 8b008b
tumši zaļš# 556b2f
darkorange# ff8c00
darkorchid# 9932cc
tumši sarkans# 8b0000
darksalmon# e9967a
tumšzaļš# 8fbc8f
darkslateblue# 483d8b
darkslategray# 2f4f4f
darkslategrey# 2f4f4f
darkturkūza# 00ced1
tumšvioletā# 9400d3
Dziļi rozā# ff1493
deepskyblue# 00bfff
dimgray# 696969
blāvs# 696969
dodgerblue# 1e90ff
ugunsmūris# b22222
ziedu balts# fffaf0
mežzaļš# 228b22
fuksija# ff00ff
Ginsboro#dcdcdc
spoku balts# f8f8ff
zelts# ffd700
zelta grauda# daa520
pelēks# 808080
zaļš# 008000
zaļgani# adff2f
pelēks# 808080
medus rasa# f0fff0
Koši rozā# ff69b4
indiāņi# cd5c5c
indigo# 4b0082
ziloņkaula# fffff0
haki# f0e68c
lavandas# e6e6fa
lavandas sarkt# fff0f5
zāliena zaļš# 7cfc00
citronšifons#fffacd
gaiši zils# add8e6
gaismas koraļļu# f08080
gaišas krāsas# e0ffff
gaiši zeltainais stils# fafad2
gaiši pelēks# d3d3d3
gaiši zaļš# 90ee90
gaiši pelēks# d3d3d3
gaiši rozā# ffb6c1
Gaismasmons# ffa07a
gaiši zaļš# 20b2aa
gaismas zibens# 87cefa
gaiši pelēks# 778899
gaismaslategrey# 778899
gaismas zilganzils# b0c4de
gaiši dzeltens# ffffe0
laims# 00ff00
Laima zaļš# 32cd32
veļa# faf0e6
sarkanbrūns# 800000
mediumaquamarine# 66cdaa
vidēji zils# 0000cd
vidēja orhideja# ba55d3
vidēja purpursarkana# 9370db
vidējaszāļš# 3cb371
vidēja lieluma zils# 7b68ee
vidēja auguma zaļa# 00fa9a
vidēja tirkīza# 48d1cc
vidēja violeta# c71585
pusnakts zils# 191970
piparmētru krēms# f5fffa
misiroze# ffe4e1
mokasīns# ffe4b5
navajowhite#ffdead
flotes# 000080
vecenīte# fdf5e6
olīvu# 808000
olīvbērns# 6b8e23
apelsīns# ffa500
oranžs# ff4500
orhideja# da70d6
palegoldenrod# eee8aa
Palegreen# 98fb98
paleturquoise#afeeee
palevioletred# db7093
papaijas draudzība# ffefd5
persiku pīrāgs# ffdab9
peru# cd853f
rozā# ffc0cb
plūme# dda0dd
pūderzils# b0e0e6
violets# 800080
rebeccapurple# 663399
sarkans# ff0000
rosybrown# bc8f8f
royalblue# 4169e1
seglu brūns# 8b4513
lasis# fa8072
smilšbrūns# f4a460
seagreen# 2e8b57
gliemeņu# fff5ee
sienna# a0522d
Sudrabs# c0c0c0
debesu zils# 87ceeb
šīfera zils# 6a5acd
šīferis# 708090
slategrey# 708090
sniegs#fffafa
pavasara zaļš# 00ff7f
tērauda zils# 4682b4
iedegums# d2b48c
zīle# 008080
dadzis# d8bfd8
tomātu# ff6347
tirkīza# 40e0d0
violets# ee82ee
kvieši# f5deb3
balts#ffffff
baltsmode# f5f5f5
dzeltenā krāsā# ffff00
dzeltenzaļš# 9acd32

Citi CSS krāsu resursi

  • W3Schools piedāvātā CSS krāsu apmācība ir ātrs tēmas pārskats ar papildu piemēriem.
  • CSS Color Converter ir tiešsaistes rīks, kas ņem jebkuru krāsu formātu un pārvērš to visos pārējos, kā arī nodrošina iespējamo krāsu paletes izvēli..
  • CSS krāsu atsauce no Mozilla izstrādātāju tīkla ir viena no labākajām vietām, kur iegūt informāciju par dažādiem krāsu standartiem un specifikācijām.
  • Krāsas, foni un gradienti: Ērika A Meijera pievienošana individualitātei ar CSS (2015) ir lieliska grāmata, kurā sīki aprakstītas CSS krāsas.

Efektīva CSS rakstīšana

Efektīva CSS rakstīšana

Efektīva CSS rakstīšana ir neticami svarīga. Mūsdienu interneta lietotājiem ir ļoti īss uzmanības attālums, tāpēc jo ilgāk jūsu vietne tiek ielādēta, jo lielākas iespējas, ka viņi sitīs atpakaļ pogu..

Ja veidojat vienkāršu vietni, efektīvai CSS nav tik lielas nozīmes. Bet šādas tīmekļa vietnes ir arvien retākas. Ja jūs veidojat lielu un sarežģītu vietni, jums vajadzētu rūpēties par savas CSS efektivitāti.

Zemāk mēs uzsveram, kāpēc svarīga ir efektīva CSS, kā uzrakstīt efektīvākus atlasītājus, un piedāvājam dažus rīkus, kas var palīdzēt jums vēl vairāk optimizēt savu kodu.

Kāpēc ir svarīgi CSS?

Ja CSS efektivitāti neņem vērā, rakstot kodu, tas var nopietni kaitēt jūsu lapas kopējai veiktspējai. Un pēdējais, ko vēlaties, ir vietne ar lēnu ielādi.

Jūsu mērķis ir pēc iespējas vienkāršāk pārlūkprogrammai atveidot jūsu kodu – pat pārlūkprogrammām, kas darbojas mazāk efektīvi.

Tika izteikti argumenti, ka par selektoru optimizēšanu nav jāuztraucas autorei, bet koda sastādīšanas motora pienākumam vajadzētu būt. Lai gan tas zināmā mērā ir taisnība, ne katrs lietotājs izmantos modernu pārlūku.

Joprojām visā pasaulē ir lietotāji, kuriem ir piekļuve tikai vecākiem datoriem un pārlūkprogrammām. Jums nepatīk sodīt šos lietotājus tikai tāpēc, ka viņiem nav piekļuves jaunākajām tehnoloģijām. Varbūt laika gaitā tas mainīsies.

Bet vienmēr ir laba ideja ņemt vērā lietotājus, rakstot kodu.

Visnozīmīgākie ir atlasītāji

Viens no svarīgākajiem efektīvas CSS rakstīšanas aspektiem ir izpratne par to, kā pārlūki to lasa un apkopo. Liela lieta, kas jāsaprot, ir tā, ka viņi lasa no labās uz kreiso pusi.

Tas sākas ar taustiņu atlasītāju un pārvietojas pa kreisi, lai meklētu senčus kārtulu atlasītājā. Pēc tam tas turpina virzīties pa kreisi, līdz kārtula tiek pabeigta, vai arī rodas neatbilstība.

Tātad, ja jūsu kods ir ul > li a img, tad pirmā lieta, kas tiks interpretēta, ir img.

Taustiņu atlasītājs ir pēdējā daļa, kuru esam iedalījuši selektora galā.

Četri CSS atlasītāju veidi

Pastāv četri galvenie CSS atlasītāju veidi, kas jums jāzina un jādod pareizais ceļš, lai CSS kods būtu efektīvs. Zemāk esošie atlasītāji ir sakārtoti to efektivitātes ziņā. Tie, kas atrodas augšpusē, ir visefektīvākie, bet apakšējie – vismazāk.

ID atlasītājs

ID atlasītājs attiecas uz noteiktu HTML elementu, izmantojot ID atribūtu, un izskatās šādi:

# galvenā navigācija

HTML to izmantos šādi:

Klases atlasītājs

Klases atlasītājs atlasīs elementus noteiktā klases atribūcijā un izskatās šādi:

.centrā

HTML to izmantos šādi:

Tagu atlasītājs

Tagu atlasītāji ir mazāk efektīvi nekā ID un klases, tāpēc tie ir jāizmanto taupīgi. Bet tie joprojām var būt efektīvi pareizajos apstākļos. Tagu atlasītāji parasti izskatās šādi:

ul

HTML formātā tags vienkārši tiks veidots tā, kā to nosaka CSS, ikreiz, kad tags tiek izmantots (šajā gadījumā ul).

Universālais atlasītājs

Universālo selektoru var izmantot jebkuram dokumenta dokumentam. Lai rakstītu efektīvu CSS, pēc iespējas jāizvairās no universālā selektora izvēles. Universālo selektoru apzīmē šādi:

*

Efektīvi CSS noteikumi, kas jāpatur prātā

Ir daži galvenie noteikumi, kas jāpatur prātā, kas palīdzēs jums uzrakstīt efektīvāku CSS. Ievērojot šos noteikumus, jūsu CSS kods tiks ielādēts daudz ātrāk un labāk darbosies visos Web pārlūkos.

Nelietojiet pēcnācēju atlasītājus

Pēcnācēju atlasītājs ir jebkurš divi atlasītāji, kurus neatdala kombinētājs. Pēcnācēju atlasītājs ir visefektīvākais selektors, un tas tiešām var negatīvi ietekmēt veiktspēju.

Daži pēcnācēju atlasītāju piemēri, kurus nevajadzētu izmantot, ir šādi:

galvene h3

kājenes lpp

.ķermeņa div

Neatzīmējiet ID

Tā kā ID var attiekties tikai uz vienu elementu, nav jēgas tos kvalificēt ar īpašu tagu, ar kuru tie tiks izmantoti. Piemēram,

li # navigācija pa kreisi

Pārlūkprogrammai nav nepieciešams pateikt, uz kuru atzīmi atlasītājs tiks izmantots. Tā vietā tas ir efektīvāk:

# navigācija pa kreisi

Ņemiet vērā, ka tas pats attiecas arī uz nodarbībām, bet mazākā mērā. Tāpēc arī nekvalificējiet nodarbības.

Izmantojiet CSS mantojumu cik vien iespējams

Īpašuma mantošana ir svarīga lieta, ko apgūt. Uzziniet, kuras īpašības tiks nodotas no viena elementa uz otru, un ļaujiet viņiem veikt savu darbu.

Piemēram, fonta lielums tiek mantots. Tātad, ja jūs to iestatāt dokumenta pamattekstam, tas nav jāiestata p un li tagos.

Ierobežojiet savus noteikumus

Ja tagos pievienosit pārāk daudz noteikumu, tas palēninās jūsu CSS kodu un ievērojami sarežģīs saskaņošanas procesu.

Piemēram

korpuss. kreisais # logrīks

Tas ir slikts kods. Notiek tikai par daudz. No otras puses:

# logrīks

.logrīks – pa kreisi

Tie ir daudz efektīvāki.

Iepriekš minēto padomu ieviešana palīdzēs padarīt jūsu CSS kodu daudz efektīvāku. Ja vēlaties pārbaudīt savu kodu vai atrast vēl citus veidus, kā padarīt to efektīvu, pārbaudiet dažus no zemāk izceltajiem rīkiem.

Rīki CSS uzlabošanai

Ja ņemsit vērā iepriekš minētos noteikumus, jūsu CSS kods būs daudz efektīvāks.

Bet, ja vēlaties optimizēt savu CSS kodu vēl vairāk, ir rīki, kas jums palīdzēs nokļūt. Zemāk mēs profilējam dažus rīkus, kas palīdzēs saspiest jūsu CSS, definēt atlasītājus un pat izveidot jūsu ID jums.

  • CSS stresa pārbaude: tas ir forši, jo tajā jūsu vietnei tiek veikti mikro pielāgojumi, piemēram, ritināšana, tālummaiņa, izmēru maiņa un daudz kas cits. Turklāt tas tiek darīts mazāk nekā 30 sekundēs. Pēc tam tas jums nosūta ziņojumu par jūsu CSS efektivitāti.
  • Definējiet CSS ID: tīmekļa pakotnes CSS ielādētājs ir ļoti noderīgs rīks. Tas var palīdzēt noteikt klases un ID un pat var jums veikt dažas CSS optimizācijas.
  • Samaziniet CSS atlasītājus: tas parāda visus pašreiz uzstādītos CSS atlasītājus kopā ar to, kurus elementu atlasītājus izmanto. Tas ļauj samazināt izmantoto selektoru skaitu, tādējādi samazinot kopējo atmiņas slodzi. Izmantojot šo rīku, varat pievienot jebkuru URL, lai jūs varētu izpētīt arī citas vietnes.
  • Samaziniet savu CSS kodu: sašauriniet esošo CSS kodu. Jo mazāk koda jāapkopo, jo labāk. Tas nodrošina ekrānuzņēmumu “pirms” un “pēc”, lai jūs varētu redzēt šī rīka veiktās izmaiņas.
  • Saspiest CSS failus: CSS failu sakopšana palīdzēs to notīrīt. Tādējādi tas var palīdzēt samazināt HTTP atbildes kopējo lielumu un tādējādi servera reakcijas laiku.

Efektīva CSS rakstīšana ir laba ideja

Tas, vai izvēlaties optimizēt savu CSS, ir atkarīgs no jums. Mūsdienu pārlūkprogrammās tas nav pilnīgi nepieciešams. Tomēr, ja veidojat sarežģītu vietni, to ir vērts darīt.

Turklāt jums joprojām var būt lietotāji, kuriem ir vecāki iestatījumi, un tā ir gudra ideja arī rūpēties par viņu vajadzībām. Cerams, ka šī sadaļa palīdzēs jums to izdarīt un uzrakstīt efektīvāku CSS.

Master CSS Online

Master CSS Online

Tiešsaistē ir daudz vietu, kur, apgūstot CSS, varat skatīties videoklipus, pilnīgus norādījumus un pat kodu pārlūkā. Lai gan pieejamo resursu ir desmitiem, ja pat ne simtiem, šeit ir dažas no mūsu iecienītākajām bezmaksas vietām, kur uzzināt par CSS.

Ja jūs patiešām esat pilnīgi jauns CSS, Nebaidieties no interneta ir iesācējiem draudzīga video sērija, kas iepazīstina gan ar CSS, gan HTML. Ja jūs sākat no nulles, šī ir labi veidota sērija, kas neiebiedēs tos, kuri tikai sāk savu ceļojumu, lai uzzinātu CSS.

Ja jūs nekad iepriekš neesat rakstījis stila lapu, laba vieta, kur rakstīt savu pirmo, ir tā CSS apmācība, ko nodrošina globālais tīmekļa konsorcijs (W3C). Šī apmācība nesniedz daudz skaidrojumu, tāpēc, ja esat praktisks skolēns, šī varētu būt ideāla vieta, kur sākt.

HTML un CSS rakstīšanai nepieciešams izmantot teksta redaktoru, saglabāt failus ar pareizu formatējumu un galvenēm un izmantot darbu pārlūku. Ja jūs labprātāk apmeklētu programmu, kas ļauj rediģēt failus tieši pārlūkprogrammā, Codecademy ir tieši tas, ko jūs meklējat.

Cits resurss, kas aptver gandrīz visu to pašu, ko Codecademy, bet kurš prasa iemācīties izmantot teksta redaktoru un saglabāt failus pareizajā formātā, ir Iemācieties kodēt HTML un CSS autors Šajs Hovs. Kad esat apguvis pamatus, ir pieejama arī uzlabota programma.

Lapu izkārtojumu kontrole ir viens no vissarežģītākajiem un vissvarīgākajiem CSS uzdevumiem. Ja jums rodas grūtības kontrolēt izkārtojumus, apmācība no Uzziniet izkārtojumu ir tikai tas, kas jums nepieciešams.

Izstrādātāju tīkls Mozilla piedāvā CSS apmācību, kas aptver visas CSS pamatfunkcijas tādā veidā, kas jūs sagatavos pāriet uz sarežģītākām tēmām.

Ja vēlaties stabilu pamatu, no kura jūs varat kļūt par pilntiesīgu CSS izstrādātāju, jūs varētu darīt daudz sliktāk nekā MDN CSS apmācība.

Visbeidzot, neviens resursu saraksts nebūtu pilnīgs, neminot organizāciju, kas virza CSS attīstību.

Lai arī šī saraksta apmācība noteikti nav vienkāršākā, tā ir visaptveroša un detalizēta. Ja jūsu mērķis ir iemācīties nedaudz CSS, šī nav jums domāta apmācība, bet, ja jūs dodaties ceļojumā, lai kļūtu par pilntiesīgu CSS izstrādātāju, šī ir laba apmācība, kā nokļūt zem jostas..

Dizaina iedvesma

Pārsteidzoši CSS darbi

Ja meklējat dizaina iedvesmu vai vēlaties labāk izprast, ko CSS var darīt, šeit ir dažas vietas, kur apskatīt demonstrētos CSS darbus.

  • Creative Bloq ir apkopojis šo divdesmit divu iespaidīgo CSS animāciju sarakstu. Aplūkojot tos, ņemiet vērā, ka daudzās no šīm animācijām papildus CSS tiek izmantots arī JavaScript.
  • CSS Dizaina balvas izveidoja šo desmit animāciju sarakstu, kas papildināts ar demonstrācijām un pamācībām, lai jūs varētu šīs koncepcijas izmantot saviem projektiem..
  • MDN DemoStudio ir vieta, kur varat apskatīt simtiem CSS demonstrāciju, kas sakārtoti pēc popularitātes, skatījumu skaita, tendenču statusa vai vispirms apskatot jaunākās demonstrācijas..
  • Daudzas no iepriekšējiem sarakstiem atlasītās animācijas tiek mitinātas Code Pen, un, tieši dodoties uz pildspalvām, jūs varēsit piekļūt milzīgam skaitam iespaidīgu animāciju, kas veidota, izmantojot HTML, CSS un JavaScript..
  • Ja esat redzējis visas izdomātās animācijas, kuras jums patīk redzēt, un tā vietā vēlaties redzēt, kā CSS var izmantot, lai pilnībā mainītu visu vietni, neveicot vienas izmaiņas HTML, pārbaudiet šos elegantos vietņu dizainus, kas uzsver CSS.

Oficiālais vārds CSS3

Oficiālais vārds CSS3

W3C ir organizācija, kas virza tīmekļa standartu, ieskaitot CSS3 moduļus, attīstību. Mācoties CSS un paaugstinot prasmju līmeni, jums vajadzētu iepazīties ar W3C un viņu piedāvāto tehnisko dokumentāciju..

W3C CSS mājaslapa ir sākumpunkts visām lietām, ko CSS piedāvā W3C. Šajā lapā jūs varat atrast informāciju par notiekošo standarta izstrādes darbu.

Ieteicamais lasījums

Ieteicamais lasījums

Viens no efektīvākajiem veidiem, kā padziļināt CSS3 izpratni un zināšanas, ir vairāku avotu un mācību metožu izmantošana.

Ja esat izmēģinājis divus vai vairākus mācību materiālus un vēlaties izmēģināt papildu metodi, vai arī, ja vēlaties izmantot tikai rakstisku tekstu, šeit ir daži no labākajiem CSS tekstiem tirgū:

  • CSS3 tīmekļa dizaineriem (2010), autors Dans Cedarholms: Ar Affet dibinātāja Džefrija Zeldmana priekšvārdu un CSS-Tricks Chris Coyier, kā arī vairāku grāmatu par CSS autora Eric Meyer ieteikumiem, šo tekstu autors Dan Cedarholm, Dribbble līdzdibinātājs, ir CSS3 tekstu zelta standarts.
  • HTML un CSS: vietņu noformējums un veidošana (Design and Build Websites, 2011), autors: Jon Duckett: Šajos tekstos ir gan HTML, gan CSS, un tas ir viens no populārākajiem un cienījamākajiem abu tēmu ievadiem..
  • Apgūstiet CSS vienā dienā un apgūstiet to labi (2015), autors Džeimijs Čans: Ja esat CSS iesācējs un vēlaties ātri iegūt pamatus, šī grāmata ir paredzēta jums.
  • CSS: The Missing Manual (2015), Autors: Deivids Saivers Makflanlands: Šis teksts nav paredzēts tikai iesācējiem, bet tā vietā tiek apskatītas uzlabotas tēmas, piemēram, Flexbox un Sass izmantošana. Ja esat gatavs pakāpties no iesācēja statusa, šis teksts jums palīdzēs nokļūt.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map