Interes. Pixeli, Em, Ex și Procente sunt dimensiuni relative în CSS. Atribute și proprietăți și

Se susține că, în general, numărul covârșitor de utilizatori vizualizează doar materiale de pe Internet, dar nu participă activ la discuții (pe forumuri, în comunitățile online etc.).

Definiție

Conform această regulă, proporția utilizatorilor de internet care creează conținut nu este mai mare de 1% dintre persoanele care pur și simplu vizionează acel conținut. Deci, de exemplu, pentru fiecare persoană care postează un mesaj pe un forum, există 99 de persoane care văd acea postare, dar nu reacţionează la ea.

Modele similare

Regula unu la sută este similară cu legea lui Pareto (raportul 80:20), care spune că 20% dintre membrii echipei fac 80% din muncă.

Scrieți o recenzie despre articolul „The One Percent Rule”

Note

Legături

Extras care descrie regula unu la sută

- Uite, Anisyushka, corzile sunt intacte sau ceva de la chitară? Nu l-am mai luat de mult timp - este pur marș! abandonat.
Anisya Fedorovna a mers de bunăvoie cu călcarea ei ușoară pentru a îndeplini instrucțiunile maestrului ei și a adus o chitară.
Unchiul a suflat praful fără să se uite la nimeni, a bătut cu degetele osoase capacul chitarei, a acordat-o și s-a așezat pe scaun. A luat (cu un gest oarecum teatral, punând cotul mâinii stângi) chitara deasupra gâtului și, făcându-i cu ochiul lui Anisya Fedorovna, nu a început Doamna, ci a lovit o coardă sonoră, curată și a început măsurat, calm, dar ferm. pentru a termina celebrul cântec într-un ritm foarte liniștit: Po li și pavaj de gheață. În același timp, în timp cu acea bucurie liniștită (aceeași pe care a respirat întreaga ființă a Anisiei Fedorovna), motivul cântecului a început să cânte în sufletele lui Nikolai și Natasha. Anisya Fedorovna s-a înroșit și, acoperindu-se cu o batistă, a părăsit încăperea râzând. Unchiul a continuat să termine cântecul curat, sârguincios și energic, privind cu o privire schimbată, inspirată, locul din care plecase Anisya Fedorovna. Era doar ceva ce râdea în fața lui pe o parte, sub mustața lui cenușie, și râdea mai ales când cântecul progresa mai departe, ritmul se accelera și ceva ieșea în locurile unde era prea tare.
- Drăguț, drăguț, unchiule; mai mult, mai mult”, a țipat Natasha imediat ce a terminat. Ea a sărit de pe scaun, și-a îmbrățișat unchiul și l-a sărutat. - Nikolenka, Nikolenka! - spuse ea, uitându-se înapoi la fratele ei și parcă întrebându-l: ce este asta?
Lui Nikolai îi plăcea foarte mult jocul unchiului său. Unchiul a cântat melodia a doua oară. Chipul zâmbitor al Anisiei Feodorovna a apărut din nou la ușă și din spatele ei mai erau și alte fețe... „În spatele cheii rece, ea strigă: fată, stai!” Unchiul s-a jucat, a făcut o altă mișcare abil, a rupt-o și și-a mișcat umerii.
„Ei bine, dragul meu, unchiule”, gemu Natasha cu o voce atât de rugătoare, de parcă viața ei ar depinde de asta. Unchiul s-a ridicat și parcă ar fi fost doi oameni în el - unul dintre ei i-a zâmbit serios tipului vesel, iar veselul a făcut o farsă naivă și îngrijită înainte de dans.
- Păi, nepoată! – a strigat unchiul, fluturând mâna către Natasha, rupând coarda.
Natasha a aruncat eșarfa care era drapată peste ea, a alergat înaintea unchiului ei și, punându-și mâinile pe șolduri, a făcut o mișcare cu umerii și s-a ridicat.
Unde, cum, când această contesă, crescută de un emigrant francez, a aspirat în sine din aerul acela rusesc pe care-l respira, acest spirit, de unde a luat aceste tehnici care ar fi trebuit de mult înlocuite pas de chale? Dar aceste spirite și tehnici erau aceleași, inimitabile, nestudiate, rusești pe care unchiul ei le aștepta de la ea. De îndată ce s-a ridicat, a zâmbit solemn, mândră și viclean, veselă, a trecut prima frică care l-a cuprins pe Nikolai și pe toți cei prezenți, teama că va greși, a trecut și deja o admirau.

Bună ziua, dragi cititori ai blogului. Astăzi vom continua conversația despre foile de stil în cascadă (puteți găsi materiale pe acest subiect în). Aproape niciun site web de pe Internet nu poate funcționa acum fără această tehnologie, așa că învățarea limbajului de marcare a stilului este la fel de necesară ca și studiul).

Fără a înțelege elementele de bază ale acestei tehnologii, nu veți putea face nici măcar mici modificări șablonului site-ului dvs. și veți fi forțat fie să îl suportați, fie să angajați specialiști terți. Dacă, de exemplu, PHP este greu de învățat, atunci HTML și CSS nu vor fi greu de stăpânit la nivel de utilizator. În orice caz, merită încercat și apoi vei vedea că se va rezolva de la sine.

Valori pentru reguli în CSS - culori, funcționalitate și dimensiuni

În ultimul articol despre care am vorbit (Stil și Link). Astăzi vom continua subiectul început și vom vorbi despre moștenirea în stilizarea și setarea dimensiunilor fontului (pixel, punct, procent etc.).

În general, astăzi nu va fi nimic complicat sau voluminos, dar în următorul articol vom începe să ne uităm la selectoare - un subiect destul de voluminos și probabil dificil de stăpânit.

Deci, să vedem, de unde putem obține informații despre foile de stil în cascadă? Probabil ar fi logic să le cauți pe toate pe același site, ei bine, sau să mergi imediat la pagina cu specificația CSS actuală. Pentru a vedea toate regulile disponibile în această specificație, trebuie doar să urmați linkul de la meniul de sus intitulat " proprietăți" .

Valorile acestor reguli pot fi niște cuvinte (de exemplu, stânga, dreapta, centru, justificare etc.), care sunt cunoscute în prealabil și specificate în tabelul din această specificație (a se vedea figura de mai sus - „Valori” coloana) . Valorile pot fi, de asemenea, pur și simplu numere care nu au o dimensiune (de exemplu, în ) sau o desemnare (de exemplu, #fff8dc).

Să aruncăm o privire mai atentă la setarea culorilor în CSSși cum poate fi implementat acest lucru:

Poate fi folosit ca valori pentru regulile CSS și așa-numitele funcționalități. Un exemplu izbitor de funcționalitate este Url și inclus în paranteze rotunde— url (images/navtabr.png). Astfel, este foarte obișnuit să setați o imagine de fundal în stiluri:

Ei bine, și în CSS foarte des ca valori dimensiunile fonturilor utilizateși alte lucruri. Dacă vă amintiți, acestea erau pur și simplu date prin numere de la 1 la 7. Și, de exemplu, dimensiunile imaginilor din atribute erau pur și simplu date prin numere fără o desemnare a dimensiunii, deși aceste numere însemnau pixeli.

Marcarea stilului a fost inițial destinată diverse dispozitive ieșire - nu numai pentru monitoare, ci și, de exemplu, pentru formatarea informațiilor destinate tipăririi. Prin urmare, dimensiunile fonturilor sau, de exemplu, indentările sunt întotdeauna specificate în CSS cu unități de dimensiune. Mai mult, sintaxa presupune scrierea continuă a numerelor și unităților de dimensiune (fără a adăuga spații între ele).

În acest caz, pot fi utilizate atât unități relative, cât și absolute. Cele absolute sunt asociate cu lumea fizică și pot fi folosite următoarele unități pentru a le indica:

Dimensiuni absolute în CSS toate pot fi folosite pentru aceeași imprimare. Centimetri (cm) și milimetri (mm) sunt unitățile fundamentale ale sistemului metric, iar inchii (in) sunt unitatea de bază de la care punctele (pt) și picas (pc) sunt adesea folosite în tipărire.

Un inch (in), în consecință, este de 25,4 milimetri (mm), iar un punct (pt) este format prin împărțirea unui inch (in) în 72 de părți. Acea. un punct (pt) va fi egal cu aproximativ o treime de milimetru (mm). Ei bine, o pică (buc) are o dimensiune egală cu 12 puncte (pt). Aici, cred, totul este clar.

Pixeli, Em, Ex și Procente - Dimensiuni relative în CSS

Deci, toate unitățile absolute sunt folosite exclusiv pentru imprimare. Dar pentru a afișa informații pe monitoare, trebuie să utilizați dimensiunile în unități relative. Chestia este că dimensiunea fizică a punctelor care formează imaginile pe monitor (se mai numesc și pixeli) poate varia în funcție de tip și dimensiune fizică același monitor.

In plus, pe orice monitor puteti seta o rezolutie diferita de cea fizica (atunci cand pixelul este atat de mic incat nu se poate distinge) si este posibil ca, cu diagonala mare a monitorului si rezolutie mica, un pixel sa fie vizibil de catre cu ochiul liber. Acestea. Un pixel de monitor este o valoare pur relativă și, prin urmare, ar trebui să se pună accent pe specificarea dimensiunilor în termeni relativi.

Dimensiuni relative în CSS poate fi specificat folosind următoarele unități:

Deci, să începem cu pixeli, despre care, de fapt, am spus deja totul. Sunt valori relative pentru simplul motiv că nu există o astfel de măsură fizică. Pe ecranul monitorului apare un pixel ca urmare a procesării unor semnale de către placa video, iar dimensiunea acestuia va varia în funcție de monitorul utilizat și în funcție de setările instalate(rezolutia ecranului).

Urmează altele mai viclene unități relative dimensiunile fonturilor utilizate în CSS − Em și Ex. Mai întâi este înălțimea fontului implicit al computerului utilizatorului, iar Ex este înălțimea literei majuscule „x” în fontul implicit. Probabil că este puțin neclar. Să ne uităm la asta mai detaliat.

Multe browsere acceptă valoarea Ex ca jumătate din valoarea Em (de exemplu IE). Orice font are o linie de bază, există litere mari si unele speciale literă mică, care se extind dincolo de linia de bază (de exemplu, „y”). Există și litere cu semne diacritice, de exemplu, „е” și „й” în rusă sau niște dieresale etc. De aceea dimensiunea fontului (Em) determinat de elementele de extensie.

Ei bine, Ex este, așa cum am spus deja, înălțimea literei mari (mică) „x” (x) în Aspect latin. Este clar că în funcție de raportul dintre litere mici și litere mariîntr-un font, aceste valori Em și Ex pot fi legate între ele în moduri diferite, mai degrabă decât pur și simplu Ex=Em/2.

Unitatea de dimensiune relativă Ex este folosită destul de rar în CSS; Em este folosit în cea mai mare parte (fără a ține cont de pixeli, care sunt folosiți pentru a indica dimensiunea și mai des). Dar există o altă modalitate de a seta dimensiuni relative - interes, adică va trebui calculat relativ la ceva.

Nu toate regulile CSS pot fi specificate cu procente. Chiar și în lista W3C, acest lucru este evidențiat într-o coloană separată:

Dacă nu este scris nimic lângă o regulă în coloana „Procente”, atunci utilizarea procentelor pentru această regulă nu este disponibilă. Pentru aceleași reguli de stil cărora li se permite să utilizeze dimensiuni procentuale, această coloană va explica de ce poate fi utilizat.

Moștenirea în CSS conform specificației

Toate valorile posibile ale regulilor și toate valorile lor valabile sunt descrise în această specificație și sunt cunoscute în prealabil. Dar există unul foarte mare diferență din HTML. Toate etichetele de limbă disponibile marcare hipertext sunt suportate și interpretate la fel în toate browserele, ceea ce nu este cazul cu CSS.

Unele proprietăți de stil pot fi acceptate și interpretate browsere diferite diferit. Mai mult, depinde atât de browser, cât și de versiunea acestuia.

Să ne uităm la moștenirea în CSS cu exemple pentru a consolida materialul, ca să spunem așa. Pentru a face acest lucru, să creăm un fel de păpușă de cuib din trei containere Div imbricate unul în celălalt și să folosim acest exemplu pentru a vedea cum se realizează moștenirea pentru unele reguli și nu pentru altele:

Deci, ne amintim că moștenirea este permisă pentru regula de culoare, dar nu pentru regula de fundal. În consecință, avem următoarea imagine:

În primul element (container exterior) specificăm cu Atribut de stil regula „culoare:roșu”, care indică ca textul inclus în acest container să fie colorat în roșu. Deoarece Regula „culoare” acceptă moștenirea, ceea ce înseamnă că în toate elementele imbricate în containerul exterior, textul va trebui și el colorat în roșu.

De fapt, asta se întâmplă, cu excepția celui mai interior container Div, care are propriul „culoare: albastru” specificat. Desigur, regula scrisă direct pentru asta Etichetă HTML, va avea prioritate față de cel care a fost specificat în element exterior. Prin urmare, textul din containerul interior va fi albastru.

Deși regula „de fundal” conform specificației CSS nu acceptă moștenirea, este... Al treilea container Div este situat în interiorul celui de-al doilea, ceea ce dă iluzia de a moșteni umplerea fundalului. Dar asta nu este adevărat. Dacă încercați să mutați ipotetic containerul interior în afara celui de-al doilea, atunci acesta nu va mai avea fundal.

În următorul articol vom începe să facem asta concept de bază V .

Multă baftă! Inainte de pe curând pe paginile site-ului blogului

Puteți viziona mai multe videoclipuri accesând

");">

S-ar putea să fiți interesat

Stil listă (tip, imagine, poziție) - reguli Css pentru personalizare aspect liste în cod HTML
Fundal în CSS (culoare, poziție, imagine, repetare, atașament) - totul pentru a seta culoarea de fundal sau imagine de fundal elemente HTML
Prioritățile în Css și creșterea lor datorită Important, combinarea și gruparea de selectoare, stiluri de utilizator și autor
Căptușeală, margine și chenar - instalate CSS internși marginile externe, precum și cadre pentru toate părțile (sus, jos, stânga, dreapta)
Înălțime, lățime și preaplin - Reguli CSS pentru a descrie o zonă de conținut când aspectul blocului
Pentru ce este CSS, cum să conectați foile de stil în cascadă document HTMLși sintaxa de bază a acestui limbaj

Utilizarea atributului font-size pentru a scala textul este unul dintre cele mai dificile aspecte stylingîn CSS. CSS oferă patru unități pentru a măsura dimensiunea textului afișat într-un browser web. Care dintre aceste patru unități este cea mai potrivită pentru documente web? Această problemă a stârnit multe discuții și controverse. Este dificil să dai un răspuns cert la o astfel de întrebare.

Cunoașterea unităților

Hm ( ei): em este o unitate scalabilă care este utilizată pentru documente web. Un em este egal cu dimensiunea actuală a fontului. De exemplu, dacă dimensiunea fontului documentului este de 12 pt, atunci 1 em este egal cu 12 pt. Deoarece em este scalat, 2em este egal cu 24pt, .5em este egal cu 6pt etc. Datorită scalabilității și compatibilității ridicate cu dispozitivele mobile, em este din ce în ce mai folosit în documentele web.

Pixeli ( px): Pixelii sunt unități de dimensiuni fixe care sunt utilizate pentru tot ceea ce este citit pe ecranul unui computer. Un pixel este egal cu un punct pe ecranul unui computer (aceasta este cea mai mică diviziune a rezoluției ecranului). Mulți designeri web folosesc pixeli în documentele web pentru a se asigura că site-ul web pare perfect pixeli atunci când este afișat într-un browser. Singura problemă este că pixelii nu pot fi măriți pentru a găzdui cititorii cu vedere redusă sau redusi pentru o citire mai ușoară. dispozitive mobile Oh.

Puncte ( pct): Punctele sunt folosite în mod tradițional în publicații tipărite(adică pentru tot ceea ce este tipărit pe hârtie). Un punct este egal cu 1/72 de inch. Punctele sunt foarte asemănătoare cu pixelii prin faptul că au o dimensiune fixă și nu pot fi mărite/micșurate.

Procent ( % ): Procentul este foarte asemănător cu em , cu excepția câtorva diferențe cheie. În primul rând, dimensiunea actuală a fontului este de 100% (adică 12 pt = 100%). Utilizarea unității Procent vă permite să măriți/reduceți textul pentru o citire mai ușoară.

Care este diferența?

Diferența dintre aceste unități este ușor de înțeles la exemple concrete. Iată cum se leagă între ele: 1em = 12pt = 16px = 100%. Să vedem ce se întâmplă când creștem dimensiunea fontului principal (folosind selectorul CSS de corp) de la 100% la 120%.

După cum puteți vedea, Ems și Procentage cresc pe măsură ce dimensiunea fontului de bază crește, dar Pixelii și punctele nu cresc. Este ușor să utilizați o dimensiune absolută pentru textul dvs., dar este mult mai ușor să utilizați text scalabil care se afișează pe orice dispozitiv. Prin urmare, este de preferat să folosiți unitățile Em și Procent pentru textul unui document web.

EM sau procent?

Am descoperit că Point și Pixel nu sunt cele mai bune unități pentru documente web. Deci, am rămas cu Em și Percent. Teoretic, Em și Procent sunt aceleași unități, dar în practică există diferențe minore între ele care nu pot fi ignorate.

În exemplul de mai sus, am folosit unitatea Procent ca dimensiune de bază a fontului (pentru eticheta body). Dacă te schimbi dimensiunea bazei font de la Percent la Em (adică body ( font-size: 1em; )), atunci cel mai probabil nu veți observa diferența. Să vedem ce se întâmplă când dimensiunea fontului corpului este 1em și când clientul modifică setarea „Dimensiune text” a browserului (această setare este disponibilă în unele browsere, cum ar fi Internet Explorer).

Când dimensiunea textului din browserul clientului este setată la „medie”, nu există nicio diferență între Em și Procent. Dar dacă modificați această setare, diferența va deveni destul de vizibilă. Cu cea mai mică setare, Ems sunt mult mai mici decât procente. Și cu setarea „Cel mai mare”, opusul este adevărat - Em este mult mai mare decât Procent. Ați putea spune că unitățile Em sunt scalate așa cum ar trebui, dar, în practică, un astfel de text este scalat prea puternic, iar pe unele dispozitive cel mai mic text devine ilizibil.

Concluzie

În teorie, unitatea Em este noul standard pentru dimensiunile fonturilor din documentele web, dar în practică se dovedește că unitatea Procent este mai ușor de utilizat. Când setările clientului se modifică, textul care utilizează unitatea Procent se scalează corespunzător, permițând designerilor să mențină lizibilitatea, accesibilitatea și designul vizual.

Câștigător: procent (%).

De obicei când creez design nou apoi pentru elementul body folosesc procente (corp (dimensiunea fontului: 62,5%; )) și apoi folosesc em pentru a scala mai departe. Atâta timp cât body este setat la Procent, puteți folosi fie Procent sau Em pentru orice alte reguli și selectoare CSS profitând în același timp de avantajele utilizării Procentaj ca dimensiune principală a fontului.

În ultimii ani, această practică a devenit foarte comună în designul web.
Pixelii sunt acum folosiți ca unități valide de dimensiune a fontului (utilizatorii pot folosi funcția de „zoom” a browserului pentru a citi text mic). Cu toate acestea, utilizarea pixelilor devine problematică din cauza dispozitivelor mobile cu ecrane foarte mari. densitate mare pixeli (unii dispozitive Android iar iPhone au o densitate de 200-300 de pixeli pe inch, ceea ce face ca fonturile de 11 și 12 pixeli să fie dificil de citit). Deci, continui să folosesc procentul ca dimensiune principală a fontului pentru documentele web.

Notarea procentuală este de obicei folosită în cazurile în care este necesară modificarea valorii relativ la element părinte sau când dimensiunile depind de conditii externe. Deci, o lățime a tabelului de 100% înseamnă că se va adapta la dimensiunea ferestrei browserului și se va modifica odată cu lățimea ferestrei.

Denumiri

	Descriere	Exemplu
<тип>	Indică tipul valorii.	<размер>
A && B	Valorile trebuie să fie afișate în ordinea specificată.	<размер> && <цвет>
A \| B	Indică faptul că trebuie să selectați o singură valoare dintre cele propuse (A sau B).	normal \| litere mici
A \|\| B	Fiecare valoare poate fi folosită independent sau împreună cu altele în orice ordine.	lățime \|\| numara
	Grupează valori.	[ recolta \|\| cruce ]
*	Repetați de zero sau de mai multe ori.	[,<время>]*
+	Repetați una sau mai multe ori.	<число>+
?	Tipul, cuvântul sau grupul specificat este opțional.	medalion?
(A, B)	Repetați cel puțin A, dar nu mai mult de B ori.	<радиус>{1,4}
#	Repetați o dată sau de mai multe ori, separate prin virgule.	<время>#

Exemplu

Lățimea în procente

Cuprinsul tabelului

Specificație

Fiecare specificație trece prin mai multe etape de aprobare.

Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru a implementa standardul.
Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
Ciornă ( Proiect de specificație) - prima versiune a standardului.

Browsere

Următoarele notații sunt utilizate în tabelul browserului.

- proprietatea este pe deplin suportată de browser cu toate valorile valide;
- proprietatea nu este perceputa de browser si este ignorata;
- poate apărea în timpul funcționării diverse erori, sau proprietatea este acceptată doar parțial, de exemplu, nu toate valorile valide sunt valide sau proprietatea nu se aplică tuturor elementelor care sunt specificate în specificație.

Numărul indică versiunea de browser din care este acceptată proprietatea.