CSS Skizo Stiloj

CSS-strekoj estas pli ol nur limo

La CSS- streka proprieto estas konfuza propraĵo. Kiam vi unue lernas pri ĝi, estas malfacile kompreni kiel ĝi estas eĉ remotamente malsama de la landlima posedaĵo. La W3C klarigas ĝin kiel havanta la jenajn diferencojn:

Skizoj Ne Prenas Spacon

Ĉi tiu deklaro, en kaj de si mem estas malklara. Kiel povas objekto en via retpaĝaro ne prenas spacon en la retpaĝaro? Sed se vi pensas pri via retpaĝaro kiel simila al cepo, ĉiu ero en la paĝo povas esti manteloj sur supro de alia ero. La streko proprieto ne prenas spacon ĉar ĝi ĉiam estas metita sur supro de la skatolo de la elemento.

Kiam skizo estas ĉirkaŭ unu elemento, ĝi ne havas neniun efikon sur kiel tiu elemento estas metita sur la paĝon. Ĝi ne ŝanĝas la grandecon aŭ pozicion de la elemento. Se vi metas esbozon pri elemento, ĝi prenos la saman kvanton de spaco kvazaŭ vi ne havis esbozon de tiu elemento. Ĉi tio ne estas vera pri limo. Limo sur elemento estas aldonita al la ekstera larĝo kaj alteco de la elemento. Do se vi havis bildon, kiu estis 50 pikseloj larĝe, kun 2-pikselo, ĝi prenus 54 rastrumeroj (2 rastrumeroj por ĉiu flanko). Tiu sama bildo kun 2-rastruma streko devus preni nur 50 pikselojn larĝecon sur via paĝo, la streko montriĝus super la ekstera rando de la bildo.

Skizoj Povas Esti Ne-Rektangula

Antaŭ ol vi komencas pensi "malvarmeta, nun mi povas desegni rondojn!" Pensu denove. Ĉi tiu aserto havas malsaman signifon ol vi povus pensi. Kiam vi limigas elementon, la retumilo interpretas la elementon kvazaŭ ĝi estus giganta rektangula skatolo. Se la skatolo dividas plurajn liniojn, la retumilo nur lasas la randojn malfermitaj ĉar la skatolo ne estas fermita. Estas kvazaŭ la retumilo vidas la limon kun senfine ampleksa ekrano sufiĉe ampleksa por tiu limo esti unu kontinua rektangulo.

Kontraŭe, la streko proprieto prenas randojn en konsideron. Se esboza elemento ampleksas plurajn liniojn, la streko fermiĝas ĉe la fino de la linio kaj reapensas denove en la sekva linio. Se eble, la streko restos tute konektita, kreante ne-rektangulajn formon.

Uzoj de la Skizo Proprieto

Unu el la plej bonaj uzoj de la streka proprieto estas reliefigi serĉajn terminojn. Multaj retejoj faras ĉi tion kun fonkolora koloro, sed vi ankaŭ povas uzi la strekstan proprieton kaj ne zorgas pri aldonado de kroma interspaco en viaj paĝoj.

La skizo de kolizio akceptas la terminon "renversi", kiu faras la strekkoloron la inversaĵon de la nuna fono. Ĉi tio permesas al vi reliefigi elementojn sur dinamikaj TTT-paĝoj sen neceso scii, kiajn kolorojn estas uzataj .

Vi povas ankaŭ uzi la strekon proprieton por forigi la punktitan linion ĉirkaŭ aktivaj ligoj. Ĉi tiu artikolo de CSS-Tricks montras kiel forigi la streĉitan strekon.