Ultimele tutoriale de dezvoltare web
×

CSS Referinţă

CSS Referinţă CSS selectori CSS funcţii CSS Referință audio CSS Safe Web Fonts CSS Animatable CSS Unități CSS Convertor PX-EM CSS colorate CSS Culoare valori CSS3 Suport pentru browser

CSS Proprietăți

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight hanging-punctuation height justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index



 

Unități CSS


Unități CSS

CSS are mai multe unități diferite pentru a exprima o lungime.

Multe proprietati CSS ia "length" valori, cum ar fi latimea, marja, padding, font-size, border-width, etc.

Lungimea este un număr urmat de o unitate de lungime, cum ar fi 10px, 2em etc.

Un spațiu gol nu poate apărea între numărul și unitatea. Cu toate acestea, în cazul în care valoarea este 0, unitatea poate fi omisă.

Pentru unele proprietăți CSS, sunt permise lungimi negative.

Există două tipuri de unități de lungime: relative și absolute.


Suport pentru browser-

Numerele din tabel specifica prima versiune de browser care acceptă pe deplin unitatea de lungime.

Unitatea Lungime
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27,0 9 1.0 7 20.0
rem 4 9 3.6 4.1 11.6
vh, vw 20.0 9 19.0 6 20.0
vmin 20.0 9.0 * 19.0 6 20.0
vmax 26.0 Nu sunt acceptate 19.0 Nu sunt acceptate 20.0

Note: Internet Explorer 9 suportă Vmin cu numele non-standard: vm.


Lungimile relative

Unități de lungime relative specificați o lungime în raport cu o altă proprietate lungime. Unități de lungime relative scalează mai bine între diferite medii de redare.

Unitate Descriere
em Relativ la font-dimensiunea elementului (2em means 2 times the size of the current font) de (2em means 2 times the size of the current font) Încearcă - l
ex Relativ la înălțimea literei x a fontului curent (rarely used) Încercați
ch Comparativ cu lățimea "0" (zero)
rem Comparativ cu font-size elementului rădăcină
vw Comparativ cu 1% din lățimea ferestrei de vizualizare * Încercați
vh Comparativ cu 1% din înălțimea imaginii curente * Încercați
vmin Comparativ cu 1% din viewport lui * dimensiuni mai mici Încercați
vmax Comparativ cu 1% din viewport lui * dimensiune mai mare Încercați
%

Tip: em și rem unități sunt practice în crearea de aspect perfect scalabile!
* Viewport = dimensiunea ferestrei browser-ului. În cazul în care portul de vizualizare este 50cm, 1vw = 0.5cm.


absolute Lungimi

Absolute unități de lungime sunt fixe și o lungime exprimată în oricare dintre acestea vor apărea ca exact acea dimensiune.

Unități de lungime absolute nu sunt recomandate pentru utilizarea pe ecran, deoarece dimensiunea ecranului variază atât de mult. Cu toate acestea, ele pot fi utilizate în cazul în care mediul de ieșire este cunoscut, cum ar fi de aspect al imprimării.

Unitate Descriere
cm centimetri Încercați
mm milimetri Încercați
in inch (1in = 96px = 2.54cm) Încearcă - l
px * pixeli (1px = 1/96th of 1in) Încercați
pt puncte (1pt = 1/72 of 1in) Încercați
pc picas (1pc = 12 pt) Încercați

* Pixeli (px) , sunt în raport cu dispozitivul de vizualizare. Pentru dispozitivele de mici dpi, 1px este un pixel dispozitiv (dot) a ecranului. Pentru imprimante și ecrane de înaltă rezoluție 1pixel implică mai mulți pixeli dispozitiv.