CSS

CSS
REALIZAT DE: TOFAN VICTOR GR-191FR

VERIFICAT DE: ANA ŢURCAN
CSS – dar ce inseamna?
Cascading Style Sheets
CSS se foloseste pentru a personaliza tagurile HTML.

CSS se ocupa în general cu aspectul și controlul grafic al elementelor din pagină.
CSS folosește stiluri care înglobează sub un anumit nume, atribute de formatare care
se aplica asupra unui element individual din pagina, asupra unui grup de elemente
sau la nivelul intregului document.
CSS funcționează cu HTML, însă nu este HTML.
El extinde functionalitățile HTML prin redefinirea etichetelor HTML existente.
de încărcare mai rapid și ar putea reduce costurile de găzduire web.
Lansare inițială 17 decembrie 1996 ; acum 26 de ani
CSS este folosit împreună cu HTML și JavaScript în majoritatea site-urilor web
pentru a crea interfețe de utilizator pentru aplicații web și interfețe de utilizator pentru
multe aplicații mobile
Fara CSS Cu CSS
CSS (Cascading Style Sheets)
Obiectele CSS, indiferent de tipul lor, au în
componență urmatoarele elemente:
Selectorii - identifica un obiect; pot fi
selectori de etichete HTML, clase sau identificatori.
Proprietatile - identifica o proprietate de stil a obiectului.
Valorile - definesc valoarea unei proprietăți;
pot fi cuvinte cheie, valori numerice sau
procentuale, tipul valorii depinde de
proprietate.
Sintaxa
• O regulă CSS constă din un selector și un bloc declarativ.
• Blocul declarativ conține una sau mai multe declarații separate prin ”;”
• Fiecare declarație conține o proprietate și o valoare separate prin ”:”
• O declaratie CSS se termină cu semnul ”;” iar grupurile de declarații sau blocurile declarative se includ în ”{ }”.
• p {color:red;text-align:center;}
• O manieră bună de programare este de a pune fiecare declarație din rând nou.
•p{
• color: red;
• text-align: center;
•}
Există mai multe modalități de a include stilurile CSS în codul HTML:
Inline – direct în eticheta HTML
Intern – în antetul documentului
Extern – în fișier extern cu extensia .css

Inline
Pentru adăugarea unui STYLE inline la un element se folosește atributul style urmat de
proprietăți și valori, folosind următoarea sintaxa:
<element style="proprietate:valoare; proprietate:valoare;"></element>
Exemplu:
<h4 style="color:#ff1111;">Exemplu h4</h4>
Intern
În acest caz se adaugă în secțiunea HEAD a documentului HTML următoarea sintaxă
<style type="text/css"> ... </style>.
Aceasta spune browser-ului că sunt adăugate elemente de stil CSS.

Această metodă este utilă cînd se dorește folosirea acelorași stiluri pentru mai multe elemente din
pagină astfel sunt scrise o singură dată și nu la fiecare element.
Exemplu
<html>
<head>
<title>titlu</title>
<style type="text/css">
h2 {color:blue; text-decoration:underline;}
</style>
</head>
<body>
</body>
</html>
Extern
Aici proprietățile și valorile pentru diverse stiluri sunt specificate într-
un fișier extern special, cu extensia "css".
Avantajul folosirii fișierelor externe CSS este faptul că aceleași coduri
de stil pot fi folosite de mai multe pagini din site, fiind scrise o singură
dată. În plus ajută la micșorarea ca mărime a documentului HTML
care astfel se încarcă mai repede.
CSS ofera posibilitatea de a schimba aspectul fiecarei etichete în parte, prin stabilirea unui
anume stil in interiorul ei, cu atributul: style.
Sintaxa pentru definirea stilurilor in interiorul unei etichete HTML este urmatoarea:
<eticheta style="proprietate:valoare;"> text ... </eticheta>
CSS permite și definirea unor reguli de stil generale într-o pagina web.
Acest set de reguli trebuie scris în sectiunea <head> a paginii, în cadrul tag- ului <style>
Foile de stil pot fi utilizate nu doar la nivel de pagina web, ci si la nivel de întreg site. Astfel,
trebuie creat un fisier cu extensia ".css", care va contine codul CSS și poate fi inclus in
paginile HTML prin doua procedee: legatura sau import
Adaugarea comentariilor la CSS
Pentru a adauga comentarii în regulile de stil avem la dispozitie doua modalități:
cazul in care comentariul se intinde pe un singur rand este suficienta folosirea
perechii de caractere ’//’ urmata de comentariu.
În cazul in care comentariul contine mai multe linie, trebuie plasat intre "/*" care
deschide zona de comentariu si "*/" care indica sfarsitul comentariului.
/* Comentariu, pe mai
multe linii */
.nume_clasa { proprietate1:valoare1; proprietate2:valoare2; ... }
// Comentariu pe o singura linie

#div1 { proprietate1:valoare1; proprietate2:valoare2; ... }
Prioritatea
Determinarea ordinii
execuției:
Formatarea Inline (în interiorul tag-ului HTML)
Formaterea externă(fișier .css extern)
Formatarea internă (în secțiunea head a documentului)
Standardul Browser-ului (valori CSS atribuite standard)
Un stil inline are cea mai mare prioritate el va suprascrie un stil intern, extern sau al
navigatorului web
CSS combinatori
Un selector CSS poate fi format din unul sau mai mulți selectori. Între
doi selectori simpli putem adăuga combinatori.
În CSS sunt 4 combinatori:
Selector descendent (spațiu)

Selector copil (>)
Selector frate adiacent(+)
Selector frate general (~)
Font
Proprietatea font-family se utilizează pentru a indica ce font trebuie să fie utilizat la
reprezentarea textului. O practică bună este de a indica cîteva valori ca un mecanizm de
siguranță, dacă primul font lipsește pe calculator sau din oarecare motiv nu poate fi utilizat, se
va trece la următorul ș.a.m.d.
Dacă numele fontului are mai multe cuvinte acesta trebuie încadrat în ” ”.
selector { font-family:"nume_font1", "nume_font2", ..., nume_generic }
Exista cinci familii de fonturi de baza:
serif – au un ornament (serif) plasat la terminația literei, care ii ofera o
distincție speciala. Sunt folosite pentru tiparire
sans serif – sunt fonturi care nu folosesc serife, fiind indicate pentru continut text general.
monospace – fonturile monospațiate pot avea serife, ele se deosebesc prin faptul ca fiecare litera
ocupa aceeași cantitate de spațiu. Sunt cele mai indicate pentru textele care trebuie citite cu
exactitate, ca de exemplu liniile de program.
cursive – imită scrisul de mână, într-o maniera stilizata.
fantasy – nu se încadrează în nici una dintre categoriile de mai sus, fiind fonturi care au un
caracter predominant ornamental (reprezentand ilustrații sau pictograme).
Când este specificată o lista de fonturi, navigatorul încearcă să folosească primul font din listă, dacă nu este găsit
parcurge lista pană în momentul în care întalnește un font instalat.
• Exemplu: p { font-family: "Times New Roman", Times, serif;}
Dimensiunile textului in CSS
Cu ajutorul CSS se poate stabili dimensiunea fontului folosind valori absolute procentuale, sau chiar relative.
Pentru a defini dimensiunea fontului se foloseste proprietatea font-size urmata de o valoare a dimensiunii care poate lua
una din urmatoarele tipuri de valori:
- unitate de masura - exprimata în pixeli (px), puncte (pt),
sau
(cm)
- expresiile smaller sau larger, ca raport cu elementul parinte
- procent - un numar exprimat în procente (cu %), care indica marimea textului în raport cu dimensiunea elementului
parinte.
Forma generala a codului CSS pentru stabilirea dimensiunii fontului:
selector { font-size:valoare;
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
}
CSS în JavaFX
JavaFX vă oferă posibilitatea de a utiliza CSS pentru a îmbunătăți aspectul
aplicației. Pachetul javafx.css conține clasele care sunt folosite pentru a aplica CSS pentru aplicațiile JavaFX.
Un CSS cuprinde reguli de stil care sunt interpretate de browser și apoi aplicate elementelor corespunzătoare
din documentul dumneavoastră.
O regulă de stil este alcătuită din trei părți, care sunt −
•Selector - Un selector este o etichetă HTML la care va fi aplicat un stil. Aceasta ar putea fi orice etichetă
precum <h1> sau <table> etc.
•Proprietate - O proprietate este un tip de atribut al etichetei HTML. În termeni mai simpli, toate atributele
HTML sunt convertite în proprietăți CSS. Ele pot fi de culoare, chenar etc.
•Valoare - Valorile sunt atribuite proprietăților. De exemplu, o proprietate de culoare poate avea valoare
fie roșu , fie #F1F1F1 etc.
CSS3
CSS3 este compatibil cu versiunile mai vechi de CSS.

CSS3 a fost împărțit în ”module”. Acesta conține atât specificațiile vechi de CSS, cât și
elemente noi.
Unele din cele mai importante module noi sunt:
Selectori, Box Model, Fundal și borduri, Efecte pentru text, Transformări 2D/3D,
Animații
Spre deosebire de CSS 2, care este o specificație unică mare care definește diverse
caracteristici, CSS 3 este împărțit în mai multe documente separate numite „module”.
Fiecare modul adaugă noi capabilități sau extinde caracteristicile definite în CSS 2,
păstrând compatibilitatea cu versiunea anterioară. Lucrările la nivelul CSS 3 au început
în jurul datei de publicare a recomandării originale CSS 2.
CSS4- Nu există o specificație CSS4 unică, integrată, deoarece specificația a fost împărțită în
multe module separate care se nivelează independent.
Avantaje
CSS facilitează publicarea conținutului în mai multe formate de prezentare bazate pe parametri nominali. Parametrii
nominali includ preferințele explicite ale utilizatorului, diferite browsere web, tipul de dispozitiv utilizat pentru a
vizualiza conținutul (un computer desktop sau un dispozitiv mobil), locația geografică a utilizatorului și multe alte
variabile.
Consecvență la nivelul întregului site
Când CSS este utilizat eficient, în termeni de moștenire și „în cascadă”, o foaie de stil globală poate fi utilizată pentru a
afecta și stiliza elementele la nivelul întregului site. Dacă apare situația ca stilul elementelor să fie schimbat sau ajustat,
aceste modificări pot fi făcute prin editarea regulilor în foaia de stil globală. Înainte de CSS, acest tip de întreținere era
mai dificil, mai costisitor și mai consumator de timp.
O foaie de stil, internă sau externă, specifică stilul o dată pentru o serie de elemente HTML selectate de class, tip sau
relație cu altele. Acest lucru este mult mai eficient decât repetarea informațiilor de stil în linie pentru fiecare apariție a
elementului. O foaie de stil externă este de obicei stocată în memoria cache a browserului și, prin urmare, poate fi
utilizată pe mai multe pagini fără a fi reîncărcată, reducând și mai mult transferul de date într-o rețea.
Reformatarea paginii
Cu o simplă schimbare a unei linii, o altă foaie de stil poate fi utilizată pentru aceeași pagină. Acest lucru are avantaje
pentru accesibilitate, precum și oferind posibilitatea de a adapta o pagină sau un site la diferite dispozitive țintă. În plus,
dispozitivele care nu sunt capabile să înțeleagă stilul afișează în continuare conținutul.
Fără CSS, designerii web trebuie de obicei să-și aranjeze paginile cu tehnici precum tabelele HTML care împiedică
accesibilitatea utilizatorilor cu deficiențe de vedere
Reducerea lățimii de bandă
Reducerea lățimii de bandă este un alt motiv pentru a face acest pas important pentru site-ul dvs. Când
CSS separă conținutul site-ului dvs. de limbajul său de proiectare, reduceți dramatic dimensiunea
transferului de fișiere.
Documentul dvs. CSS va fi stocat extern și va fi accesat o singură dată când un vizitator cere site-ul
dvs. Web. În schimb, atunci când creați un site web folosind tabele, fiecare pagină a site-ului dvs. web
va fi accesată cu fiecare vizită. Nevoile de lățime de bandă redusă vor avea ca rezultat un timp
De ce sa folosim CSS?
Acestea sunt cele trei avantaje majore ale CSS:
1) Rezolvă o mare problemă

Înainte de CSS, etichetele precum fontul, culoarea, stilul de fundal, alinierea elementelor, chenarul și dimensiunea
trebuiau repetate pe fiecare pagină web. Acesta a fost un proces foarte lung. De exemplu: dacă dezvoltați un site
web mare în care fonturile și informațiile de culoare sunt adăugate pe fiecare pagină, va deveni un proces lung și
costisitor. CSS a fost creat pentru a rezolva această problemă. A fost o recomandare W3C.
Play Video
2) Economisește mult timp

Definițiile stilului CSS sunt salvate în fișiere CSS externe, astfel încât este posibil să schimbați întregul site prin
schimbarea unui singur fișier.
3) Furnizați mai multe atribute

CSS oferă atribute mai detaliate decât HTML simplu pentru a defini aspectul site-ului.
Concluzie:
CSS ne poate ajuta să abordam aceasta provocareinsa in diferite moduri, permițând prezentarea aceleiași
pagini de marcare în diferite stiluri de vizualizare – de exemplu, putem crea o foaie de stiluri separată
pentru imprimare sau pentru un dispozitiv mobil.
CSS este o alegere înțeleaptă pentru designul web, amatori si oameni induziasti de cereat ceva frumos si
placut.
CSS este considerat o tehnică clara de codificare, ceia ce ii pernite motoarelor de cautare sa proceseze
foarte rapid informatia si sa afiseze rezultatele cautarilor.
Avind posibilitatede de invatate si intelegerea a functiilor CSS ne permite sa ne largim sprectul de gindire
sa vedem in alte unghuri crearea unor saituri si cel mai important ne permite sa ne dezvoltam oferindu-ne
foarte multe unelte de creare si manipulare in scopul oferirii unui design modern si practic.

CSS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSS

Încărcat de

Drepturi de autor:

Formate disponibile

CSS

REALIZAT DE: TOFAN VICTOR GR-191FR

CSS se foloseste pentru a personaliza tagurile HTML.

• Fiecare declarație conține o proprietate și o valoare separate prin ”:”

Inline – direct în eticheta HTML

Intern – în antetul documentului

Extern – în fișier extern cu extensia .css

<element style="proprietate:valoare; proprietate:valoare;"></element>

<style type="text/css"> ... </style>.

Aceasta spune browser-ului că sunt adăugate elemente de stil CSS.

// Comentariu pe o singura linie

În CSS sunt 4 combinatori:

Selector descendent (spațiu)

CSS3 este compatibil cu versiunile mai vechi de CSS.

1) Rezolvă o mare problemă

2) Economisește mult timp

3) Furnizați mai multe atribute

S-ar putea să vă placă și