Kial simpla komo simpligas kodigon
CSS, aŭ Cascading Style Sheets, estas la akceptita maniero por aldoni vidajn stilojn al retejo. Kun CSS, vi povas kontroli paĝon aranĝo, koloroj, tipografio , fono bildo, kaj multe pli. Esence, se ĝi estas vida stilo, tiam CSS estas la maniero por alporti tiujn stilojn al via retejo.
Kiel vi aldonas CSS-stilojn al dokumento, vi povas rimarki, ke la dokumento komenciĝas pli kaj pli longa. Eĉ malgranda retejo kun nur kelkaj paĝoj povas fini per konsiderinda CSS-dosiero - kaj tre granda retejo kun multaj kaj multaj paĝoj de unika enhavo povas havi tre grandajn CSS-dosierojn. Ĉi tio estas kombinita de respondemaj retejoj, kiuj havas multajn amaskomunikilajn demandojn inkluzivitajn en la stilo-folioj por ŝanĝi kiel aspektas la vidaĵoj kaj la paĝo elstaras por malsamaj ekranoj.
Jes, CSS-dosieroj povas akiri longan. Ĉi tio ne estas grava problemo, kiam ĝi temas pri reteja rendimento kaj elŝuta rapido, ĉar eĉ longa CSS-dosiero eble estas sufiĉe malgranda (ĉar ĝi estas nur nur teksta dokumento). Ankoraŭ tiel, ĉiu iom kalkulas kiam ĝi rilatas al paĝ-rapido, do se vi povas plilongigi vian stilon, tio estas bona ideo. Jen kie la "komo" povas tre bone utiligi vian stilon!
Komoj kaj CSS
Vi eble demandis, kian rolon la komo ludas en CSS- selectora sintakso. Kiel en frazoj, la komo alportas klarecon-ne kodon-al la apartigiloj. La komo en CSS-elektilo apartigas multoblajn elektilojn ene de la samaj stiloj.
Ekzemple, ni rigardu iujn CSS sube.
th {koloro: ruĝa; }
td {koloro: ruĝa; }
p.red {koloro: ruĝa; }
div # firstred {koloro: ruĝa; }
Kun ĉi tiu sintakso, vi diras, ke vi volas t- etikedojn, etikedojn de td , alineaj etikedoj kun la klaso ruĝa, kaj la div-etikedo kun la ID unuavigita ĉio por havi la stilon koloron.
Ĉi tio estas perfekte akceptebla CSS, sed estas du gravaj malfacilaĵoj skribi ĝin tiel:
- En la estonteco, se vi decidas ŝanĝi la tipan koloron de ĉi tiuj propraĵoj al blua, vi devas fari tiun ŝanĝon kvar fojojn en via stilo.
- Ĝi aldonas multajn kromajn karakterojn al via stilo-folio, kiun vi ne bezonas. Ĉi tiuj 4 stiloj eble ŝajnas esti senpaga, sed se vi daŭras ĉi tion tra via tuta stila folio, la linioj aldonos kaj tiu folio estos multe pli multe ol ĝi devas esti.
Por eviti ĉi tiujn malfacilaĵojn, kaj por frapi vian CSS-dosieron, ni provos uzi komojn.
Uzanta Komojn por Apartigi Elektantojn
Anstataŭ skribi 4 apartajn CSS-elektilojn kaj 4 regulojn, vi povas kombini ĉiujn ĉi tiujn stilojn en unu regulon propraĵon apartigante la individuajn elektilojn kun komo. Jen kiel tio fariĝos:
th, td, p.red, div # unuared {koloro: ruĝa; }
La komo-karaktero esence agas kiel la vorto "kaj" ene de la elektilo. Do ĉi tio aplikiĝas al t etikedoj AND td etikedoj Kaj alineaj etikedoj kun la klaso ruĝa Kaj la div-etikedo kun la ID unueca. Tio estas ĝuste tio, kion ni havis antaŭe, sed anstataŭ necesi 4 CSS-regulojn, ni havas solan regulon kun multnombraj elektiloj. Jen kion la komo faras en la elektilo, ĝi permesas havi al ni plurajn elektilojn en unu regulo.
Ne nur ĉi tiu alproksimiĝo fariĝas por pli maldikaj, pli puraj CSS-dosieroj, ĝi ankaŭ faras estontecajn ĝisdatigojn multe pli facila. Nun se vi volis ŝanĝi la koloron de ruĝa al blua, vi nur devas ŝanĝi la unuan lokon anstataŭ la originalajn 4-a regulojn ni havis! Pensu pri ĉi tiuj tempoj ŝparadoj tra tuta CSS-dosiero kaj vi povas vidi kiel ĉi tio savos vin ambaŭ tempon kaj spacon en la longa runo!
Sintaksa variaĵo
Iuj homoj elektas fari la CSS pli legebla apartigante ĉiun elektilon en sia propra linio, anstataŭ skribi ĝin ĉiuj sur unu linio kiel supre. Jen kiel tio fariĝos:
th,
td,
p.red,
div # unuared
{
koloro: ruĝa;
}
Rimarku, ke vi metas komo post ĉiu elektilo kaj tiam uzu "eniri" por rompi la sekvantan elektilon al sia propra linio. Vi NE aldonas komo post la fina elektilo.
Uzante komojn inter viaj elektiloj, vi kreas pli kompaktan stilon, pli facila por ĝisdatigi en la estonteco kaj pli facile legi hodiaŭ!
Originala artikolo de Jennifer Krynin. Redaktita de Jeremy Girard la 5/8/17