Klasoj kaj IDoj Helpo Etendu Vian CSS
Konstruado de retejoj en la retejo de hodiaŭ bezonas profundan komprenon pri CSS (Cascading Style Sheets). Ĉi tiuj estas la instrukcioj, kiujn vi donas retejo por determini kiel ĝi aranĝos en la retumilo. Vi aplikas serion de "stiloj" al via HTML-dokumento, kiu kreos la aspekton kaj senton de via retpaĝo.
Ekzistas multaj manieroj apliki tiujn menciitajn stilojn tra dokumento, sed ofte vi volas uzi stilon nur pri iuj elementoj en dokumento, sed ne ĉiuj ekzemploj de tiu elemento.
Vi eble ankaŭ volas krei stilon, kiun vi povas apliki al pluraj elementoj en dokumento, sen devi ripeti la regulon de stilo por ĉiu individua petskribo. Por atingi ĉi tiujn deziritajn stilojn, vi uzos la klasajn kaj identajn HTML-atributojn. Ĉi tiuj atributoj estas tutmonda atributoj, kiuj povas esti aplikataj al preskaŭ ĉiuj HTML-etikedoj. Tio signifas, ke ĉu vi desegnas dividojn, alineojn, ligilojn, listojn aŭ iujn aliajn pecojn de HTML en via dokumento, vi povas turni al klaso kaj ID-atributoj al Helpu vin plenumi ĉi tiun taskon!
Klasaj Elektantoj
La klasa elektilo permesas al vi agordi plurajn stilojn al la sama elemento aŭ etikedo en dokumento. Ekzemple, vi eble volas certigi iujn sekciojn de via teksto en malsama koloro de la resto de la teksto en la dokumento. Ĉi tiuj reliefigitaj sekcioj povus esti "garde", ke vi fiksas la paĝon. Vi povus atribui viajn alineojn kun klasoj kiel ĉi tiu:
p {koloro: # 0000ff; }
p.alert {koloro: # ff0000; }
Ĉi tiuj stiloj agordis la koloron de ĉiuj alineoj al blua (# 0000ff), sed iu ajn alineo kun klasa atributo de "garde" anstataŭe per stiligita en ruĝa (# ff0000). Ĉi tio estas ĉar la klasa atributo havas pli altan specifecon ol la unua CSS-regulo, kiu nur uzas etikedo-selectoron.
Kiam laborante kun CSS, pli specifa regulo anstataŭos malpli specifan. Do en ĉi tiu ekzemplo, pli ĝenerala regulo agordas la koloron de ĉiuj alineoj, sed la dua, pli specifa regulo ol forĵetaĵoj, kiuj difinas nur al iuj alineoj.
Jen kiel ĉi tio povus esti uzata en iu HTML-marko:
Ĉi tiu alineo estus montrata en bluo, kiu estas la defaŭlta por la paĝo.
Ĉi tiu alineo ankaŭ estus blua.
Kaj ĉi tiu alineo estus montrata en ruĝa ekde la klasa atributo anstataŭigus la norman blua koloro de la elemento-elektilo-stilo.
En tiu ekzemplo, la stilo de "p.alert" nur aplikus al alineaj elementoj, kiuj uzas tiun "atentigan" klason. Se vi volus uzi tiun klason tra multajn elementojn de HTML, vi simple forigus la HTML-elementon de la komenco de la Alvoko de stilo (simple certu ke vi forlasu la periodon (.) en la loko), kiel ĉi tiu:
.alert {background-color: # ff0000;}
Ĉi tiu klaso nun estas havebla al iu ajn elemento, kiu bezonas ĝin. Ajna peco de via HTML kiu havas klasan atributan valoron de "garde" nun ricevos ĉi tiun stilon. En la HTML-sube, ni havas ambaŭ alineon kaj titolon nivelo 2, kiuj uzas la "atentigan" klason. Ambaŭ ĉi tiuj havus fonkoloron de ruĝa bazita sur la CSS ni nur montris.
Ĉi tiu alineo estus skribita ruĝa.
Kaj ĉi tiu h2 ankaŭ estus ruĝa.
En retejoj hodiaŭ, klasaj atributoj ofte estas uzataj en plej multaj elementoj ĉar ili estas pli facile labori kun specifaĵoj, kiuj estas ID. Vi trovos plej multajn aktualajn HTML-paĝojn plenajn de klasaj atributoj, kelkaj el kiuj ripetas multfoje en dokumento kaj aliaj, kiuj nur aperos unufoje.
ID-Elektantoj
La ID- elektilo permesas al vi doni nomon al specifa stilo sen asocii ĝin per etikedo aŭ alia HTML-elemento . Diru, ke vi havas dividon en via HTML-marko, kiu enhavas informon pri evento.
Vi povus doni ĉi tiun dividon ID-atributo de "evento", kaj tiam se vi volis pripensi tiun dividon kun 1-piksa larĝa nigra limo vi skribas ID-kodon kiel ĉi:
#event {limo: 1px solid # 000; }
La defio kun ID-elektiloj estas, ke ili ne povas esti ripetitaj en HTML-dokumento. Ili devas esti unikaj (vi povas uzi la saman ID en pluraj paĝoj de via retejo, sed nur unufoje en ĉiu individua HTML-dokumento). Do se vi havis 3 eventojn, ke ĉiuj bezonis ĉi tiun limon, vi devus doni al ili identajn atributojn de "evento", "evento" kaj "evento" kaj stiligi ĉiun el ili. Estus do multe pli facile uzi la menciitan klasan atributon de "okazaĵo" kaj stiligi ilin ĉiujn samtempe.
Alia defio kun ID-atributoj estas, ke ili havas pli altan specifecon ol klasaj atributoj. Ĉi tio signifas, ke se vi bezonas havi CSS, kiu preterlasas antaŭe establitan stilon, ĝi povas esti malfacile fari tion, se vi tro forte dependis pri ID. Estas pro tio, ke multaj retejaj programistoj malproksimiĝis de uzado de ID en sia marko, eĉ se ili nur intencas uzi tiun valoron unufoje, kaj anstataŭe turnis sin al la malpli specifaj klasaj atributoj por preskaŭ ĉiuj stiloj.
La areo, kie identaj atributoj fariĝas ludata, estas kiam vi volas krei paĝon, kiu havas en-paĝajn ankrojn ligilojn. Ekzemple, se vi havas paralaje-stilon-retejo, kiu enhavas la tutan enhavon en sola paĝo kun ligiloj, kiuj "saltas" al diversaj partoj de tiu paĝo. Ĉi tio estas uzata ID-atributoj kaj tekstaj ligiloj, kiuj uzas ĉi tiujn ankrojn.
Vi simple aldonus la valoron de tiu atributo, antaŭita de la # simbolo, al la atributo de la ligilo, kiel ĉi tiu:
Ĉi tiu estas la ligilo
Kiam klakita aŭ tuŝita, ĉi tiu ligo saltos al la parto de la paĝo, kiu havas ĉi tiun identigan atributon. Se neniu elemento en la paĝo uzis ĉi tiun ID-valoron, la ligo ne farus ion.
Memoru, se vi volas krei retpaĝan ligon sur retejo, oni bezonos uzon de ID-atributoj, sed vi ankoraŭ povas turni al klasoj por ĝeneralaj CSS-celoj. Jen kiel mi markas paĝojn hodiaŭ - mi uzis klasajn elektilojn kiel eble plej multe, kaj nur turni sin al ID, kiam mi bezonas la atributon agi ne nur kiel engankon por CSS, sed ankaŭ kiel enpaĝan ligilon.
Originala artikolo de Jennifer Krynin. Redaktita de Jeremy Girard la 8/9/17