Rezultate pentru tag: procente
Rapoarte și procente
Raportul a două numere, scara hărții, titlul unui aliaj. Procente, concentrația procentuală
Zaharide – produşi de policondensare ai monozaharidelor
Zaharoza – carcateristici şi aplicaţii practice. Zahăr rafinat şi zahăr nerafinat. Amidonul. Amiloza şi amilopectina. Surse de amidon. Fotosinteza. Celuloza. Surse de celuloză. Proprietăţi şi aplicaţii practice.
Procente
Procente, raport procentual, determinarea procentului dintr-un număr.
CSS Height și Width
Proprietățiile height și width sunt utilizate pentru a seta înălțimea și lățimea unui element.
Proprietățiile height și width nu includ padding, borders sau margins. Stabilește înălțimea / lățimea (height/width) zonei din interiorul padding-ului, border-ului și marginii elementului.
Valori CSS înălțime / lățime (height/width)
Proprietățiile de înălțime și lățime (height/width) pot avea următoarele valori:
auto - Aceasta este implicită. Browserul calculează înălțimea și lățimea (height/width).
lenght - Definește înălțimea / lățimea (height/width) în px, cm etc.
% - Definește înălțimea / lățimea (height/width) în procente din blocul conținut.
inițial - Setează înălțimea / lățimea (height/width) la valoarea implicită.
inherit - Înălțimea / lățimea (height/width) vor fi moștenite de la valoarea sa parentală.
Nu uitați că proprietățiile de înălțime și lățime nu includ padding, borders sau margins! Ei setează înălțimea / lățimea zonei din interiorul paddingu-ului, border-ului și marginii elementului!
Setarea lățimii maxime (max-width).
Proprietatea max-width este utilizată pentru a seta lățimea maximă a unui element.
Lățimea maximă (max-width) poate fi specificată în valori de lungime, cum ar fi px, cm, etc., sau în procente (%) din blocul conținut sau setat pe niciunul (acesta este implicit. Înseamnă că nu există o lățime maximă).
Problema cu <div> de mai sus apare atunci când fereastra browserului este mai mică decât lățimea elementului (500px). Browserul apoi adaugă o pagină de defilare orizontală la pagină.
Folosind în schimb această lățime maximă (max-width), în această situație, veți îmbunătăți gestionarea browserului de la ferestrele mici.
Trageți fereastra browserului la o lățime mai mică de 500px, pentru a vedea diferența dintre cele două div-uri!
height - Setează înălțimea unui element.
max-height - Setează înălțimea maximă a unui element.
max-width - Setează lățimea maximă a unui element.
min-height - Setează înălțimea minimă a unui element.
min-width - Setează lățimea minimă a unui element.
width - Setează lățimea unui element.
CSS Fonturi
Proprietățiile fontului CSS definesc font family, boldness, size și style of a text.
Familii de fonturi CSS (CSS Font Families).
În CSS, există două tipuri de nume de fonturi:
generic family - un grup de familii de fonturi cu aspect similar (cum ar fi „Serif” sau „Monospace”).
font family - o familie de fonturi specifică (cum ar fi „Times New Roman” sau „Arial”).
Font Family.
Familia de fonturi a unui text este setată cu proprietatea font-family.
Proprietatea font-family ar trebui să dețină mai multe nume de font ca sistem „fallback”. Dacă browserul nu acceptă primul font, încearcă următorul font și așa mai departe.
Începeți cu fontul dorit și terminați cu o familie generică (generic family), pentru a permite browserului să aleagă un font similar în familia generică (generic family), dacă nu sunt disponibile alte fonturi.
Dacă numele unei familii de fonturi este mai mult de un cuvânt, acesta trebuie să fie între ghilimele, cum ar fi: „Times New Roman”.
Mai multe familii de fonturi sunt specificate într-o listă separată de virgule.
Stilul fontului (Font Style)
Proprietatea font-style este utilizată mai ales pentru a specifica textul italic.
Această proprietate are trei valori:
normal - Textul este afișat normal.
italic - Textul este afișat cu caractere italice.
oblique - Textul este „aplecat” (oblic este foarte similar cu italic, dar mai puțin susținut).
Proprietatea font-size stabilește dimensiunea textului.
Posibilitatea de a gestiona dimensiunea textului este importantă în proiectarea web. Cu toate acestea, nu ar trebui să utilizați ajustări de dimensiune a fontului pentru a face ca paragrafele să arate ca titluri sau rubricile să pară paragrafe.
Utilizați întotdeauna etichetele HTML adecvate, cum ar fi <h1> - <h6> pentru titluri și <p> pentru paragrafe.
Valoarea font-size poate fi o dimensiune absolută sau relativă.
Dimensiune absolută:
Setează textul la o dimensiune specificată.
Nu permite utilizatorului să modifice dimensiunea textului în toate browserele (greșit din motive de accesibilitate).
Dimensiunea absolută este utilă atunci când dimensiunea fizică a ieșirii este cunoscută.
Mărime relativă:
Setează dimensiunea în raport cu elementele din jur.
Permite unui utilizator să modifice dimensiunea textului în browsere.
Dacă nu specificați o dimensiune a fontului, dimensiunea implicită pentru textul normal, cum ar fi alineatele, este 16px (16px = 1em).
Setarea dimensiunii fontului cu pixeli.
Setarea dimensiunii textului cu pixeli vă oferă un control complet asupra dimensiunii textului.
Dacă utilizați pixeli, puteți utiliza în continuare zoom tool pentru a redimensiona întreaga pagină.
Setați dimensiunea fontului cu Em
Pentru a permite utilizatorilor să redimensioneze textul (în meniul browserului), mulți dezvoltatori folosesc em în loc de pixeli.
Unitatea de dimensiuni em este recomandată de W3C.
1em este egal cu dimensiunea curentă a fontului. Dimensiunea implicită a textului în browsere este 16px. Deci, dimensiunea implicită de 1em este 16px.
Mărimea poate fi calculată de la pixeli la em folosind această formulă: pixeli / 16 = em.
Font Weight
Proprietatea font-weight specifică greutatea unui font:
Responsive Font Size
Mărimea textului poate fi setată cu o unitate vw, ceea ce înseamnă „viewport width”.
Astfel dimensiunea textului va urma dimensiunea ferestrei browserului:
Font Variant
Proprietatea font-variant specifică dacă un text ar trebui să fie afișat sau nu într-un font cu caractere mici.
Într-un font cu caractere mici, toate literele mici sunt convertite în litere mari. Cu toate acestea, literele majuscule convertite apar cu o dimensiune de font mai mică decât literele majuscule originale din text.
font - Setează toate proprietățile fontului într-o singură declarație.
font-family - Specifică familia de fonturi pentru text.
font-size - Specifică dimensiunea fontului textului.
font-style - Specifică stilul de font pentru text.
font-variant - Specifică dacă un text trebuie să fie afișat sau nu într-un font cu caractere mici.
font-weight - Specifică greutatea unui font.
CSS Fundaluri multiple
În acest capitol veți învăța cum să adăugați mai multe imagini de fundal la un element.
Proprietățiile background-size, background-origin, background-clip.
CSS vă permite să adăugați mai multe imagini de fundal pentru un element, prin proprietatea background-image.
Diferitele imagini de fundal sunt separate prin virgule, iar imaginile sunt stivuite una peste alta, unde prima imagine este cea mai apropiată de privitor.
Mai multe imagini de fundal pot fi specificate utilizând fie proprietățiile de fundal individuale (ca mai sus), fie proprietatea background shorthand.
CSS Background Size
Proprietatea CSS background-size vă permite să specificați dimensiunea imaginilor de fundal.
Mărimea poate fi specificată în lungimi, procente (lengths, percentages) sau utilizând unul dintre cele două cuvinte cheie: conține sau acoperire(contain sau cover).
Redimensionare background image la o dimensiune mult mai mică decât imaginea originală (folosind pixeli).
Celelalte două valori posibile pentru background-size sunt contain și cover.
Cuvântul cheie contain scalează imaginea de fundal (scales the background image) pentru a fi cât mai mare (dar atât lățimea cât și înălțimea sa trebuie să se încadreze în zona conținutului). Ca atare, în funcție de proporțiile imaginii de fundal (background image) și de zona de poziționare a fundalului, pot exista anumite zone ale fundalului care nu sunt acoperite de imaginea de fundal (background image).
Cuvântul cheie cover scalează imaginea de fundal (scales the background image) astfel încât zona de conținut să fie acoperită complet de imaginea de fundal (background image) (atât lățimea cât și înălțimea acesteia sunt egale sau depășesc aria conținutului). Ca atare, este posibil ca unele părți ale imaginii de fundal (background image) să nu fie vizibile în zona de poziționare a fundalului.
Definirea dimensiunilor mai multor imagini de fundal (Define Sizes of Multiple Background Images)
Proprietatea background-size acceptă, de asemenea, mai multe valori pentru dimensiunea fundalului (folosind o listă separată de virgule), atunci când lucrați cu mai multe fundaluri.
Full Size Background Image
Acum vrem să avem o imagine de fundal (background image) pe un site web care să acopere întreaga fereastră a browserului în orice moment.
Cerințele sunt următoarele:
Completează întreaga pagină cu imaginea (fără spațiu alb).
Scalați imaginea după caz.
Centrați imaginea pe pagina.
Nu provocați bare de defilare (scrollbars).
Hero Image
De asemenea, puteți utiliza diferite proprietăți de fundal (background) pe un <div> pentru a crea hero image (o imagine mare cu text) și să o plasați acolo unde doriți.
Proprietatea CSS background-origin
Proprietatea CSS background-origin specifică unde este poziționată imaginea de fundal.
Proprietatea are trei valori diferite:
border-box - imaginea de fundal pornește din colțul din stânga sus al border-ului.
padding-box - (implicit) imaginea de fundal pornește din colțul din stânga sus al marginii padding-ului.
content-box - imaginea de fundal pornește din colțul din stânga sus al conținutului.
Proprietatea CSS background-clip
Proprietatea CSS background-clip specifică zona de pictură a fundalului.
Proprietatea are trei valori diferite:
border-box - (implicit) fundalul este pictat pe marginea exterioară a border-ului.
padding-box - fundalul este vopsit până la marginea exterioară a padding-ului.
content-box - fundalul este pictat în caseta de conținut.
Proprietăți CSS background avansate:
background - O proprietate shorthand pentru setarea tuturor proprietăților de fundal într-o singură declarație
background-clip - Specifică zona de pictură a fundalului
background-image - Specifică una sau mai multe imagini de fundal pentru un element
background-origin - Specifică unde este / sunt poziționate imaginile de fundal
background-size - Specifică dimensiunea imaginii de fundal
CSS Animații
Animații CSS
CSS permite animarea elementelor HTML fără a utiliza JavaScript sau Flash!
În acest capitol veți afla despre următoarele proprietăți: @keyframes, animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-timing-function, animation-fill-mode, animation.
Asistență browser pentru animații (Browser Support for Animations)
Prefixuri specifice browserului
Unele browsere mai vechi au nevoie de prefixe specifice (-webkit-) pentru a înțelege proprietățiile de animație.
Ce sunt animațiile CSS?
O animație permite unui element să se schimbe treptat de la un stil la altul.
Puteți modifica câte proprietăți CSS doriți, de câte ori doriți.
Pentru a utiliza animația CSS, trebuie mai întâi să specificați câteva cadre cheie pentru animație.
Cadrele cheie conțin ce stiluri va avea elementul în anumite momente.
Regula @keyframes
Când specificați stiluri CSS din regula @keyframes, animația se va schimba treptat de la stilul curent la noul stil în anumite momente.
Pentru ca animația să funcționeze, trebuie să legați animația de un element.
Legarea animației „exemplu” de elementul <div>. Animația va dura 4 secunde și va schimba treptat culoarea de fundal a elementului <div> de la „red” la „yellow”.
Proprietatea animation-duration definește cât timp ar trebui să dureze o animație. Dacă proprietatea animation-duration nu este specificată, nu va apărea nicio animație, deoarece valoarea implicită este 0s (0 secunde).
Am specificat când stilul se va schimba folosind cuvintele cheie „from” și „to” (care reprezintă 0% (start) și 100% (complet)).
Este posibilă utilizarea procentului. Utilizând procente, puteți adăuga oricâte modificări de stil doriți.
Schimbarea culorii de fundal (background-color) a elementului <div> atunci când animația este completă 25%, 50% completă și din nou când animația este 100% completă:
Întârziere animație (Delay an Animation)
Proprietatea animation-delay specifică o întârziere pentru începerea unei animații.
De asemenea, sunt permise valori negative. Dacă utilizați valori negative, animația va începe ca și cum ar fi jucat deja N secunde.
Setați de câte ori ar trebui să ruleze o animație
Proprietatea animation-iteration-count specifică numărul pe care trebuie să-l ruleze o animație.
Valoarea „infinite” - pentru a face animația să continue pentru totdeauna
Rulați animația în direcție inversă sau cicluri alternative
Proprietatea animation-direction specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative.
Proprietatea animation-direction poate avea următoarele valori:
normal - Animația este redată normal (înainte). Aceasta este implicită
reverse - animația este redată în sens invers (înapoi)
alternate - animația este redată mai întâi, apoi înapoi
alternate-reverse - animația este redată mai întâi înapoi, apoi înainte
Rulare animație în sens invers (înapoi)(backwards).
Valoarea "alternate" pentru a face ca animația să fie difuzată mai întâi înainte (forwards), apoi înapoi (backwards).
Valoarea „alternate-reverse” pentru a face ca animația să fie rulată mai întâi înapoi(backwards), apoi înainte (forwards)
Rulați animația în direcție inversă sau cicluri alternative
Proprietatea animation-direction specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative.
Proprietatea animation-direction poate avea următoarele valori:
normal - Animația este redată normal (înainte)(forwards). Aceasta este implicită
reverse - animația este redată în sens invers (înapoi)
alternate - animația este redată mai întâi înainte(forwards), apoi înapoi(backwards)
alternate-reverse - animația este redată mai întâi înapoi(backwards), apoi înainte(forwards)
Rulare animație în sens invers (înapoi)(backwards):
Valoarea "alternate" pentru a face ca animația să fie difuzată mai întâi înainte (forwards), apoi înapoi (backwards).
Valoarea „alternate-reverse” pentru a face ca animația să fie rulată mai întâi înapoi(backwards), apoi înainte(forwards).
Precizați curba de viteză (Speed Curve) a animației
Proprietatea animation-timing-function specifică curba de viteză (speed curve) a animației.
Proprietatea animation-timing-function poate avea următoarele valori:
ease - Specifică o animație cu început lent, apoi rapid, apoi sfârșit încet (aceasta este implicit)
linear - Specifică o animație cu aceeași viteză de la început până la sfârșit
ease-in - Specifică o animație cu pornire lentă
ease-out - Specifică o animație cu sfârșit lent
ease-in-out - Specifică o animație cu început și sfârșit lent
cubic-bezier(n,n,n,n) - Vă permite să definiți propriile valori într-o funcție cubic-bezier
Precizați modul de completare (fill-mode) pentru o animație
Animațiile CSS nu afectează un element înainte de a fi redat primul cadru-cheie (keyframe) sau după ce ultimul cadru-cheie (keyframe) este redat. Proprietatea animation-fill-mode poate înlocui acest comportament.
Proprietatea animation-fill-mode specifică un stil pentru elementul țintă atunci când animația nu se joacă (înainte de a începe, după ce se termină, sau ambele).
Proprietatea animation-fill-modepoate avea următoarele valori:
none - Valoare implicită. Animația nu va aplica niciun stil la element înainte sau după executarea acestuia
forwards - Elementul va pastra valorile stilului setate de ultimul cadru cheie (keyframe) (depinde de animation-direction și animation-iteration-count)
backwards - Elementul va obține valorile de stil setate de primul cadru-cheie (keyframe) (depinde de animation-direction) și îl va păstra în timpul perioadei de întârziere a animației
both - Animația va respecta regulile atât în față cât și înapoi (forwards și backwards), extinzând proprietățiile de animație în ambele direcții
Elementul <div> păstrează valorile stilului de la ultimul cadru cheie (keyframe) la încheierea animației.
Exemple animation-fill-mode
Elementul <div> obține valorile style setate de primul cadru cheie (keyframe) înainte de începerea animației (în perioada de întârziere a animației (animation-delay)).
Elementul <div> obține valorile style setate de primul cadru cheie (keyframe) înainte de începerea animației și să păstreze valorile stilului de la ultimul cadru de cheie (keyframe) atunci când animația se încheie.
Proprietatea Shorthand Animation
Proprietăți CSS animation
@keyframes - Specifică codul de animație
animation - O proprietate shorthand pentru setarea tuturor proprietăților de animație
animation-delay - Specifică o întârziere pentru începerea unei animații
animation-direction - Specifică dacă o animație trebuie să fie redată înainte, înapoi sau în cicluri alternative
animation-duration - Specifică cât timp trebuie să dureze o animație pentru a finaliza un ciclu
animation-fill-mode - Specifică un stil pentru element atunci când animația nu se joacă (înainte de a începe, după ce se termină sau ambele)
animation-iteration-count - Specifică numărul de ori când trebuie să fie redată o animație
animation-name - Specifică numele animației @keyframes
animation-play-state - Specifică dacă animația este în curs de execuție sau în pauză
animation-timing-function - Specifică curba de viteză a animației
Săruri
Structura și formula generală a sărurilor; săruri neutre, săruri acide și săruri bazice; nomenclatura sărurilor; proprietățile și reacțiile chimice ale sărurilor; metode generale de obținere a sărurilor; neutralizare și hidroliză.
