Jump to content

BeNy gL

Retired Staff
  • Posts

    228
  • Joined

  • Last visited

  • Days Won

    1
  • Country

    Romania
  • Points

    6,015 [ Donate ]

Everything posted by BeNy gL

  1. Hellowwwww, nici o activitate nimic, Cosmin REMOVE ! Ca nu se mai poate 😤
  2. This post cannot be displayed because it is in a password protected forum. Enter Password
  3. El Patrone, @COSMIN , nu mai merge asta, asa stau de 5 min
  4. Potoleste.l tu Serifule, ca iar se da' mare =)))))
  5. @Seriful Uita-te la el, a mai dat si bump la topic sa vedem ca si-a colorat numele, noi astia restu' n-avem fata de culori si linie sub nume =)))))
  6. Hey, nu esti singurul ce a vazut acest film de 3 ori =))))) Mila Kunis 💞
  7. Da, da, am bagat de seama, o sa-l tin minte stai fara grija =)))))
  8. Am facut si eu ceva simplist, doar font si efect, am impresia ca sunt prea mari, dar daca iti plac, le redimensionez =))))
  9. Daaaa, mai intram ocazional sa-mi mai verific rank-ul 😂
  10. This post cannot be displayed because it is in a password protected forum. Enter Password
  11. This post cannot be displayed because it is in a password protected forum. Enter Password
  12. Cummm naiba, le fac cu acelasi plugin
  13. Cand le-am facut spawn-ul, am pus 16 cu 16, acum nu m-o pacalii =)))
  14. Da, altfel nu le puneam :)))
  15. Hai ca am mai gasit cateva harti , sunt cu spawn-ul facut awp_circular Imagine awp_industyle Imagine de_dice Imagine de_gladiators Imagine de_grec Imagine de_legends Imagine de_nizer Imagine de_westtime Imagine https://easyupload.io/6md9ok
  16. Salut, De acestă dată o să vă prezint cel de-al 5-lea modul din micul plan, și anume, "Bazele CSS" ! Ce este CSS? CSS (Cascading Style Sheets) este un limbaj care se foloseşte pentru descrierea semanticii de prezentare a documentului scris într-un limbaj descriptiv (markup language). Cu alte cuvinte, acesta descrie, respectiv ordonează aspectul şi formatarea oricărui element de pe pagină. Regulile CSS ne permit să stilizăm elementele HTML şi alte documente. CSS se foloseşte doar pentru ordonarea şi stilizarea conţinutului în HTML şi a altor documente. CSS este separat de limbajul HTML şi de tag-urile sale. Dacă avem o pagină HTML, nu mai trebuie să corectăm codul respectiv pentru a introduce codul CSS. Pe acesta îl introducem fie într-un fişier separat (cu extensia .css), fie în partea head a documentului HTML. Cum funcţionează CSS-ul? Utilizând CSS, putem crea reguli, cu ajutorul cărora stilizăm cadrul respectiv, dar şi elementele din el. Sintaxa CSS constă în regula CSS (CSS Rule). Regulile CSS sunt alcătuite în mod obligatoriu din două părţi: selectorul (selector) şi declaraţia (declaration). Selectorul indică elementul (sau, dacă sunt mai multe, le separăm prin virgulă) la care se referă respectiva regulă CSS. Declaraţia implementează stilizarea pentru elementul la care se referă regula CSS. Când creăm o regulă CSS, plasăm selectorul, apoi introducem un spaţiu gol şi apoi punem paranteze acolade, după care introducem declaraţia, ca în exemplul de mai jos: h1 { color:red; } Declaraţiile sunt, de asemenea, alcătuite din două părţi: proprietate (property) şi valoare (value). Dacă vrem ca paragrafele paginii noastre să aibă fontul Tahoma şi dimensiunea de 12 px, vom scrie următoarele: p { font-family:Tahoma; font-size:12px; } Prin urmare: limbajul CSS este alcătuit din reguli. Fiecare regulă este alcătuită din selector şi declaraţie. Declaraţia este alcătuită din proprietate şi valoare. Modalitatea de scriere a unei reguli CSS Am menţionat că CSS este separat de codul HTML, de aceea există trei opțiuni de plasare a acestuia, din care două se folosesc în mod activ. CSS-ul extern După cum îi spune și numele, CSS-ul extern se află în afara documentului HTML, într-un fişier separat. Cea mai simplă versiune este cea în care avem un fişier HTML, iar lângă el, un fişier CSS. Este suficient să introducem un anumit tag în partea head a fişierului HTML, tag care va conecta fişierul CSS extern. Pe de altă parte, în fişierul CSS scriem doar regulile. În fişierele CSS, nu trebuie să apară nicio parte a limbajului HTML. Tag-ul pentru legarea regulilor CSS în partea head a paginii este <link>. În cazul tag-ului <link>, aceste atribute sunt: href – defineşte calea până la fişierul CSS extern. Poate fi relativă sau absolută. type – defineşte tipul de document la care ne legăm, deoarece tag-ul <link> se poate folosi şi în alte scopuri, deşi în ultimul timp se foloseşte doar pentru CSS. Setăm: ”text/css”. rel – defineşte relaţia dintre fişierul HTML şi cel legat, adică fişierul extern. Setăm: ”stylesheet” <!DOCTYPE html> <html> <head> <title>CSS extern</title> <link href=”css/stilizare.css” type=”text/css” rel=”stylesheet”> </head> <body> </body> </html> CSS-ul intern Spre deosebire de CSS-ul extern, CSS-ul intern se află direct în documentul HTML, mai exact în partea head. În loc să punem un tag <link> ca mai sus, putem adăuga tag-ul <style>, iar în cadrul lui să scriem direct regulile CSS. <!DOCTYPE html> <html> <head> <title>CSS intern</title> <style type=”text/css”> p { font-family:Tahoma; font-size:12px; } </style> </head> <body> </body> </html> Inline CSS Am menţionat că există trei moduri de a scrie codul CSS. În afară de CSS-ul extern şi intern, există şi modul de scriere inline. Acesta se deosebeşte prin faptul că selectorul este omis, iar CSS-ul se scrie direct în tag-ul HTML, la fel ca atributul. În CSS inline, adăugăm atributul style (pe tag-ul HTML pe care vrem să-l stilizăm) și în el scriem între ghilimele proprietăţile şi valorile, ca mai devreme. <p>First paragraph</p> <p style=”font-family:Tahoma; font-size:12px;”>My paragraph</p> <p>Third paragraph</p> Regula ordonării stilurilor CSS In cadrul fişierelor CSS sau al secțiunii CSS din cadrul paginii se poate ajunge la suprapunere. În astfel de situaţii, există anumite reguli care se aplică în mod automat şi determină care regulă CSS va fi aplicată. În cazul în care regulile CSS se suprapun, browser-ul va aplica regula de proximitate (engl. proximity rule), care specifică aplicarea regulii CSS care este cea mai apropiată de elementul-ţintă. Practic, aceasta înseamnă că, în caz că există mai multe stilizări diferite pentru acelaşi element, browser-ul va folosi cel mai apropiat element de elementul respectiv, cu condiţia ca selectorul să fie identic. În caz că selectorii se deosebesc (dar ţintesc acelaşi element), este important care dintre aceştia este mai precis, iar apoi este importantă şi ordinea. Semantica şi noile elemente HTML5 Dacă ne axăm numai asupra aspectului vizual, toate elementele noi se comportă ca niște div-uri şi nu există niciun fel de diferenţă. Dar, pe de altă parte, contribuie la semantica paginii, adică definesc scopul și menirea părților paginii. Cele mai frecvente elemente noi de bază sunt: Elementul <section> inserează o parte a paginii, respectiv a documentului. Poate cuprinde mai multe elemente identice (de exemplu, <article>), care au subiect sau scop similar. Se poate folosi pentru gruparea altor elemente în unități. Dintre elementele noi, unii autori îl consideră cel mai apropiat de vechiul div. Elementul <article> se comportă ca un cadru pentru orice parte a paginii care se poate evidenția în raport cu restul conţinutului. Este destinat pentru articole, postări pe blog, pe forumuri şi orice alt conţinut independent. Se pot ordona unul după altul sau unul într-altul (de exemplu, comentarii pentru un anumit post care este article - comentariile în sine pot fi, de asemenea, article). Deseori, la început putem face confuzie între <section> şi <article>. Elementul <nav> se foloseşte pentru introducerea şi setarea principalelor elemente de navigare pe pagină (site). Încă există o polemică dacă nav trebuie folosit pentru toate poziţiile de pe linkuri din pagină sau doar pentru navigarea principală. O regulă general-acceptată este că nav trebuie folosit pentru Block-uri mai mari de navigare. De exemplu, dacă în footer setăm doar linkuri pentru termenii de utilizare, informaţii legale şi pagina de start, acestea nu trebuie puse în nav. Dar, dacă în acelaşi footer avem repetate complet principalele linkuri, principala navigare a site-ului, atunci trebuie folosit nav. Elementul <aside> are două scopuri, în funcţie de faptul dacă se află în cadrul elementului <article> sau nu. Elementul <header> se foloseşte pentru a defini un header individual al unei anumite părţi sau al unui anumit element al paginii (de exemplu: <article> sau <section>) sau, mult mai frecvent, pentru a defini principalul header al paginii. În cazul în care se află direct pe pagină, setează headerul site-ului care conţine logoul, motorul de căutare, navigarea etc. Elmelentul <footer> este asemănător cu headerul, dar are alt scop. În timp ce headerul setează antetul, footerul setează partea finală a elementului sau a paginii. Dacă se află în interiorul unei părţi a paginii, poate conţine numele autorului textului, paginile legate etc. Dacă se află direct pe pagină, poate să conţină diferite elemente care se găsesc, de obicei, în partea de jos a site-urilor (informaţii legale, linkuri către harta site-ului şi către regulile de utilizare, navigarea repetată etc.). Elementul <figure> are ca principal scop încadrarea conţinutului suplimentar legat de text (partea paginii). De exemplu, pentru setarea imaginilor, a materialului video, a diagramelor etc. În cadrul său, se poate adăuga şi <figcaption> pe lângă conţinutul în sine, ca descriere. În ultimul timp, se pune foarte des întrebarea: „Când şi în ce situaţie putem folosi un element HTML5 sau altul şi, în general, dacă le putem folosi sau dacă ar trebui să le folosim sau ar trebui să revenim la bine cunoscutul DIV?” Toate aceste elemente vi se pot părea confuze acum, deoarece unele sunt identice (de exemplu: aside şi figure), dar fiecare are propriul scop. În general, şi elementele div se folosesc în continuare, nu sunt eliminate din uz. Putem spune că div-ul se foloseşte întotdeauna, excepţie făcând existenţa unui element determinat cu exactitate pentru o anumită aplicare (de exemplu, header sau footer, şi atunci folosim <header>, respectiv <footer>). Elementele Block si Elementele Inline Toate elementele vizibile de pe o pagină, de la imagini şi paragrafe până la linkuri, sunt localizate în cadre invizibile (în limba engleză, se foloseşte termenul box). Aceste cadre apar în două variante: Block şi Inline. Diferenţa dintre aceste elemente constă în comportamentul lor pe pagină: Elementele Block sunt dreptunghiuri, care tind să umple întregul spaţiu orizontal. Elementele Inline sunt dreptunghiuri, care se potrivesc cu alte elemente. În ilustraţia de mai sus, putem vedea în ce constă diferenţa dintre aceste elemente. Elementele Block se aranjează unul sub altul, indiferent de lăţimea lor. Elementele Inline se aranjează unul lângă altul, precum literele într-un text. Dacă nu le definim altfel, elementele Block ocupă cât mai mult spaţiu pe orizontală şi mută elementul precedent şi pe cel următor deasupra sau sub ele. Practic, împing toate elementele aflate lângă ele dedesubt şi rămân singure pe rândul respectiv. Elementele Block reprezintă instrumentul principal de a ordona paginile. Elementele Inline se bazează pe formatarea textului şi astfel se şi scriu. Dimensiunile lor depind doar de conţinutul din cadrul lor. Dacă definim lăţimea unui element Inline, de exemplu la 200 px, nu se va întâmpla nimic, lăţimea lui va depinde în continuare de lăţimea conţinutului. Contrar acestui lucru, adăugarea de text va mări lăţimea. În mod implicit, fiecare element de pe pagină (în cadrul secțiunii <body>) este element Block sau Inline. Totuşi, cu ajutorul lui CSS, putem schimba un element Inline într-unul Block sau invers. De exemplu, elementele de pe o listă neordonată (Block) se pot transforma în elemente Inline şi astfel obţinem un rând de text cu elemente puse unul lângă altul. De asemenea, putem schimba un şir de linkuri dintr-un text (Inline) în elemente Block, pentru a obţine linkuri aranjate pe verticală. In mod implicit, în elementele Block intră: elemente div (<div>) paragrafe (<p>) liste (<ul>) elementele listelor (<li>) titluri (<h1> – <h6>) tabele (<table>) elementele HTML5 de bază (<section>, <aside>, <nav>, <header> şi <footer>) tag-ul body (<body>) În mod implicit, în elementele Inline intră: elemente span (<span>) linkuri (<a>) formatarea bold (<strong> sau <b>) formatarea italică (<em> sau <i>) imagini (<img>) citate (<cite>) etichete (<label>) Gruparea elementelor. Gruparea mai multor elemente într-un singur element Block (div) Elementul <div> ne permite să grupăm mai multe elemente într-un singur element Block. De exemplu, putem să creăm un div pentru antetul paginii şi să punem în el toate elementele antetului (logo, slogan, navigare, căutare). Tag-ul div, fiind de tip Block, începe pe un rând nou. În afară de aceasta, el nu influenţează aspectul paginii. În mod implicit, div-urile nu au niciun fel de stilizare (fundalul este transparent, border, margin şi padding sunt 0, înălţimea depinde de conţinut şi aşa mai departe). Totuşi, le putem adăuga valori ID şi/sau CLASS şi să le ţintim cu regulile CSS. Această simplitate de bază, pe de o parte, și marile posibilităţi de stilizare, pe de altă parte, fac din elementele div structura de bază a fiecărui site. Gruparea mai multor elemente într-un singur element Inline (SPAN) Elementul <span> este echivalentul Inline al elementului <div>. Cu ajutorul lui putem grupa mai multe elemente Inline într-unul singur. De obicei, se foloseşte pentru a separa părţile din text, deoarece putem, de exemplu, să marcăm o parte din text, să adăugăm CLASS sau ID, iar apoi cu o descriere CSS să influenţăm partea respectivă a textului (care este înconjurată de span). Modelul CSS Box După cum am menţionat deja, în jurul fiecărui element vizibil de pe pagină există un cadru (box) imaginar pe care îl putem stiliza. Dacă am împărți afişarea unui element în etape, am obţine următoarea ordine: HTML setează conţinutul şi creează un cadru imaginar. CSS stilizează cadrul respectiv, îl modifică după nevoie, pentru ca în final să afişeze utilizatorului elementul respectiv. Modelul Box este alcătuit din 5 proprietăţi de bază ale elementelor. Acestea sunt: Width (lăţimea) Height (înălţimea) Margin (marginea sau spaţiul extern) Padding (padding sau spaţiul intern) Border (bordură, cadru) Marginile sunt întotdeauna transparente şi separă elementul de alte elemente de pe pagină. Cadrele (Borders) pot avea diferite stiluri şi stabilesc graniţele elementului. Padding separă conţinutul (content) unui element de cadrele sale. Setările elementelor de fundal se referă la aria din interiorul cadrului, împreună cu secțiunea Padding şi Content (în imagine, secțiunea Padding este afişată cu verde mai închis, deşi în realitate este invizibilă). Proprietăţile Margins, Borders şi Padding pot avea valori diferite pentru fiecare parte a unui element (Top, Right, Bottom, Left). În mod implicit, aceste proprietăţi sunt, de obicei, 0. Este important de reţinut că valorile Width şi Height determină doar lăţimea, respectiv înălţimea conţinutului elementului. Înălţimea şi lăţimea reală pe care elementul le ocupă pe pagină sunt: Content + Padding + Border De exemplu, dacă avem un element div în care conţinutul este de 100x100 pixeli, Padding este 10 px (pe toate părţile), iar Border este 2 pixeli (de asemenea, pe toate părţile), acesta va ocupa 124x124 pixeli. Asta se datorează faptului că lăţimea totală este: 100px pentru conţinut + 10px pentru Padding x2 pentru Padding-ului din stânga şi dreapta + 2px pentru Border x2, deoarece avem şi cadru în stânga şi în dreapta (100 + 10x2 + 2x2 = 124px). Acelaşi lucru este valabil şi pentru înălţime. Codul CSS pentru elementele din acest exemplu ar putea fi: div { width:100px; height:100px; padding:10px; margin:0; border-width:2px; border-style:solid; border-color:#f90; } Proprietăţile CSS în modelul box Width şi Height Cele două proprietăţi reprezintă lăţimea, respectiv înălţimea conţinutului elementului. În mod implicit, lăţimea şi înălţimea sunt atât de mari cât trebuie să înconjoare conţinutul. Excepţie face lăţimea elementelor Block, care se extinde la maxim. Valoarea poate fi în pixeli, procente sau în valori em. Pixelii sunt cel mai popular mod și se folosesc în majoritatea cazurilor. Dacă folosim procente, dimensiunea va fi stabilită de dimensiunea ferestrei browser-ului, respectiv de dimensiunea elementului părinte (dacă există). La valoarea em, dimensiunea depinde de dimensiunea textului (fontului) din cadrul lui: .myDiv { width:400px; height:80%; } Padding Această proprietate defineşte spaţiul intern (Padding). Dacă nu punem nicio valoare, cea implicită este 0. Dacă proprietatea nu conţine niciun sufix, atunci aceasta se aplică pe toate cele patru părţi: padding:10px; Dacă vrem valori Padding diferite, sus, la dreapta, la stânga şi jos, putem scrie, de exemplu: padding-top:10px; padding-right:15px; padding-bottom:20px; padding-left:25px; Există şi un mod prescurtat de scriere (Shorthand). Putem folosi doar proprietatea Padding (fără sufix), pentru a determina toate cele 4 valori: padding:10px 15px 20px 25px; Este important de menţionat doar că valorile se scriu întotdeauna în sensul acelor de ceasornic, începând de sus. În exemplul nostru, 10 px este valoarea Padding-ului de sus, 15 px a celui din dreapta, 20 px a celui de jos, iar 25 px a celui din stânga. Margin Această proprietate defineşte spaţiul extern (Margin). Toate regulile valabile pentru Padding sunt valabile şi pentru Margin. Valoarea implicită este 0 la elementele div. Putem să scriem proprietatea generală (Margin) sau să folosim aceleaşi sufixe pentru părți ca şi la Padding sau putem să scriem şi proprietatea shorthand (prescurtată). margin:100px; margin-top:100px; margin-right:30px; margin-bottom:200px; margin-left:25px; margin:100px 30px 200px 25px; Border-width Folosim această proprietate pentru a defini grosimea marginii din jurul elementului. Putem folosi pixeli sau una dintre următoarele trei valori: thin, medium, thick. În acest caz, procentele şi alte unităţi nu sunt permise. La fel ca la margin şi padding, valoarea border se aplică tuturor celor patru părţi. Valorile diferite le putem scrie prescurtat (shorthand) sau separat, de exemplu: border-top-width: 6px; border-right-width: medium; border-bottom-width: 3px; border-left-width: thin; Border-style Această proprietate se folosește pentru a determina tipul de bordură, cadrul (border) din jurul elementului. În imaginea de mai jos, putem vedea opțiunile posibile. În general, se foloseşte solid (o linie simplă). Valoarea este propriul nume al tipului: solid, double, grooved etc. Dacă toate marginile elementului sunt identice, scriem: border-style:solid; De asemenea, putem determina şi tipul marginii, folosind: border-top-style: solid; border-right-style: groove; border-bottom-style: dotted; border-left-style: outset; Border-color După cum îi spune numele, această proprietate defineşte culoarea marginii. Valoarea culorii poate fi scrisă în diferite moduri, cu ajutorul sistemului hex, RGB sau cu ajutorul numelor culorilor (despre culorile pe web vom discuta într-o lecţie separată): border-color: #FF9900; Alte proprietăţi importante: Display Mai devreme, am menţionat că elementele Block se pot transforma în elemente Inline şi invers. Tipul de element poate fi determinat folosind proprietatea Display prin CSS. Dacă, de exemplu, la valoarea Display a unui element Inline îi atribuim valoarea Block, atunci acest element va fi tratat ca oricare alt element Block: span { display:block; } Cu acest exemplu, am transformat elementele span în elemente Block. În afară de valorile Block şi Inline, pe care le folosim pentru a schimba tipul, proprietatea Display poate avea şi valoarea none. În acest caz, dacă aplicăm display:none, browser-ul se va comporta ca și când elementul nu ar exista, deşi acesta se va afla în cod. De asemenea, orice element încorporat în cadrul elementului respectiv nu va fi afişat, deşi îi este acordată o altă valoare Display. De exemplu, tag-ul span este un element Inline. Dacă atribuim valoarea display:block, practic aceasta se va comporta ca un div. Pe de altă parte, dacă postăm display:none, span-ul menţionat nu va fi vizibil. Totuşi, trebuie să reţinem faptul că, datorită acestei opţiuni nu eliminăm în totalitate elementul, ci doar ascundem afişarea lui, însă utilizatorul va putea citi întotdeauna codul-sursă HTML, pe care îl conţine partea respectivă. Datele sensibile nu ar trebui ascunse în acest mod. Visibility Proprietatea visibility asigură ascunderea unui anumit element, în timp ce spaţiul rezervat pentru elementul respectiv rămâne. Poate avea una dintre următoarele două valori: hidden (ascunde elementul) sau visible (afişează elementul - aceasta este valoarea implicită şi nu trebuie să o scriem). span { visibility:hidden; } Diferenţa dintre visibility:hidden; şi display:none; constă în faptul că, în primul caz, elementul dispare, însă rămâne un spaţiu rezervat pentru el, iar celelalte elemente nu se mută, în timp ce în al doilea caz, elementul dispare de pe pagină și odată cu el şi spaţiul rezervat, aşadar şi celelalte elemente se mută pe pagină. Vă reamintim că, atunci când se utilizează aceste două tehnici, elementele sunt ascunse utilizatorului doar din punct de vedere vizual, rămânând în continuare disponibile în cod, aşadar nu trebuie să ascundem date sensibile în acest mod. Overflow Această proprietate se folosește pentru a defini ce se întâmplă în cazul în care conţinutul depăşeşte cadrele date. De exemplu, putem să definim lăţimea şi înălţimea unui div la 200x300 px, iar apoi să introducem întreaga pagină de text. Deoarece dimensiunile definite sunt mai mici decât cele necesare, textul întreg nu va fi vizibil (partea care depășește div-ul). Totuşi, folosind proprietatea overflow, putem să definim cazul în care conţinutul din cadrul elementului se derulează utilizând overflow:scroll; . O altă valoare posibilă este overflow:hidden; , care va tăia partea ce iese în afara cadrului. Valoarea implicită este overflow:visible; div.myText { overflow:scroll; } În trecut, această proprietate se folosea mai mult pentru introducerea textelor mai lungi în niște cadre limitate. Acum, odată cu dezvoltarea web-ului, proprietatea a devenit inutilă, chiar ineficientă. Totuşi, o caracteristică secundară a acestei proprietăţi a devenit utilă pe site-urile moderne. Min-width, max-width După cum ne şi spun denumirile acestor proprietăţi, este vorba de o lăţime minimă, respectiv maximă a elementelor. În loc să folosim dimensiuni fixe, putem să definim dimensiunea minimă şi/sau maximă: #wrapper { min-width:960px; max-width:1280px; } Utilizarea ambelor proprietăţi în acelaşi element nu este obligatorie. Nu trebuie combinate cu lățimea fixă. Min-height, max-height Proprietăţile min-height şi max-height se comportă la fel ca proprietățile menționate mai sus, singura diferenţă constând în faptul că se referă la înăţimea elementului: p { min-height:10px; max-height:26px; }
×
×
  • Create New...