Lectia 3 CSS

CSS
LECȚIA 3
INTRODUCERE CSS
Ce este CSS?
CSS standuri pentru C ascading S Tyle S heets
CSS descrie modul în care elementele HTML vor fi afișate pe ecran, pe hârtie sau pe alte suporturi media
CSS salvează o mulțime de muncă . Acesta poate controla aspectul mai multor pagini web simultan
Foile de stil externe sunt stocate în fișierele CSS.
De ce să folosiți CSS?
CSS este folosit pentru a defini stiluri pentru paginile dvs. web, inclusiv designul, aspectul și variațiile de afișare pentru
diferite dispozitive și dimensiuni ale ecranului.
HTML nu intenționa NICIODATA să conțină etichete pentru formatarea unei pagini web!
HTML a fost creat pentru a descrie conținutul unei pagini web, cum ar fi:
<h1> Acesta este un titlu </ h1>
<p> Acesta este un paragraf. </ p>
Atunci când tag-uri precum <font> și atributele de culoare au fost adăugate la specificația HTML 3.2, a început un coșmar
pentru dezvoltatorii web. Dezvoltarea de site-uri mari, în care fonturile și informațiile de culoare au fost adăugate pe
fiecare pagină, au devenit un proces lung și costisitor.
Pentru a rezolva această problemă, consorțiul World Wide Web (W3C) a creat CSS.
CSS a eliminat formatarea stilului din pagina HTML!
Definițiile de stil sunt salvate în mod normal în fișiere externe .css.
Cu un fișier de foi de stil extern puteți modifica aspectul unui întreg site web prin schimbarea unui singur fișier!
Prevalența metodelor de a însera CSS în documentele HTML

Codul CSS se poate însera în HTML după cum urmează:
1. Fișier extern (.css)
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
Fișierul extern arată astfel:
body {
background-color: lightblue;
}
h1 {
color: navy;
1
margin-left: 20px;
}
2. Intern - în head
<head>
<style>
body {background-color: linen;
}
h1 {color: maroon;
margin-left: 40px;
}
</style>
</head>
3. În tagul care se vrea personalizat (inline)
<h1 s<h1 style="color:blue;margin-left:30px;">Aceasta este o denumire!</h1>
Voi adăuga acum și cea de-a 4-a modalitate și anume:
4. Toate cele trei anterioare.
Ce se întâmplă însă atunci când formatăm un element și folosim mai multe modalități de înserare a CSS-ului? Ordinea de
reproducere în browser va fi următoarea:
1. Formatare CSS inline (-în interiorul tag-ului HTML)

2. Formatere CSS interna (în secțiunea head a documentului)
3. FormatareCSS externă (fișier .css extern)
4. Standardul browser-ului (valori CSS atribuite standard)
Astfel formatarea inline anulează toate celelalte expresii CSS de formatare. Iar standardele de formatare ale browser-ului
intervin doar atunci când nu este specificată o altă formatare CSS.
! Excepție: In cazul în care tagul <link> este pus după tagul <style> codul CSS aflat în fișierul .css extern va anula codul
CSS intern.
Sintaxă CSS și selectori

Un set de reguli CSS constă dintr-un selector și un bloc de declarație:
2
Selectorul indică elementul HTML pe care doriți să îl stilizați. Blocul de declarație conține una sau mai multe declarații
separate prin punct și virgulă. Se recomandă chiar și în cazul în care proprietatea este unica sau este ultima, de asemenea
să se pună ;.
Fiecare declarație include un nume de proprietate CSS și o valoare separată printr-un colon. Dacă valoarea conține două
sau mai multe cuvinte, atunci ea se ia între ghilimele.
În cazul în care folosim atributul style inline, ghilimelele între care vor fi luate valorile ce conțin 2 și mai multe cuvinte, vor
fi ghilimele simple ca ‘times new roman’ și nu duble.
O declarație CSS întotdeauna se termină cu un punct și virgulă, iar blocurile de declarație sunt înconjurate de acolade.
În exemplul următor, toate elementele <p> vor fi aliniate în centru, cu o culoare de text roșu:
p {
color: red;
text-align: center;
}
Selectori CSS
Selectorii CSS sunt utilizați pentru a "găsi" (sau selecta) elemente HTML pe baza numelui elementului, id-ului, clasei,
atributului și altele.
Selectorul elementului
Selectorul element selectează elemente bazate pe numele elementului.
Puteți selecta toate elementele <p> dintr-o pagină ca aceasta (în acest caz toate elementele <p> vor fi aliniate în centru,
cu o culoare text roșie):
p {
text-align: center;
color: red;
}
Selectorul id
Selectorul de id utilizează atributul id al unui element HTML pentru a selecta un element specific. Id-ul unui element
trebuie să fie unic în cadrul unei pagini, deci selectorul de id este folosit pentru a selecta un element unic!
Pentru a selecta un element cu un id specific, scrieți un caracter hash (#), urmat de id-ul elementului.
Regula de stil de mai jos se va aplica elementului HTML cu id = "para1":
#para1 {
text-align: center;
color: red;
}
Selectorul de clasă
Selectorul de clasă selectează elementele cu un anumit atribut de clasă. Pentru a selecta elemente cu o anumită clasă,
scrieți un caracter de perioadă (.), Urmat de numele clasei.
În exemplul de mai jos, toate elementele HTML cu class = "center" vor fi roșii și aliniate în centru:
.center {
text-align: center;
3
color: red;
}
De asemenea, puteți specifica că numai anumite elemente HTML ar trebui să fie afectate de o clasă.
În exemplul de mai jos, numai <p> elementele cu class = "center" vor fi aliniate în centru:
p.center {
text-align: center;
color: red;
}
Elementele HTML se pot referi, de asemenea, la mai multe clase.
În exemplul de mai jos, elementul <p> va fi decorat în funcție de clasă = "centru" și de clasă = "mare":
<p class="center large">Acest Paragraf se refera la 2 clase.</p>
! Notă: Un nume de clasă nu poate începe cu un număr! În acest caz codul va putea fi interpretat doar de către IE.
Deci atât ID cât și class pot fi folosite pentru a stiliza un document HTML. În practică, însă se folosește doar class. Atributul
ID este folosit în general în Javascript, pentru a localiza un element html și executa acțiuni asupra lui.
Atributul ID trebuie să fie unic în pagină, în caz contrar va genera o eroare Javascript și un cod html invalid.
Gruparea selectorilor
Dacă aveți elemente cu aceleași definiții de stil, cum ar fi:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
Este mai bine să grupați selectorii, pentru a minimiza codul. Pentru a grupa selectorii, separați fiecare selector cu o virgulă.
În exemplul de mai jos am grupat selectorii din codul de mai sus:
h1,h2 {
text-align: center;
color: red;
}
CSS Comentarii
Comentariile sunt folosite pentru a explica codul și pot ajuta atunci când modificați codul sursă la o dată ulterioară.
Comentariile sunt ignorate de browsere.
Un comentariu CSS începe cu / * și se termină cu * /. Comentariile pot include și mai multe linii:
p {
color: red;
/* Acesta este un comentariu cu o singura linie */
4
text-align: center;
}
/*Acesta este
un comentariu
pe mai multe linii */
Exerciții practice
Exercițiul 1
Modificați culoarea de fundal a tuturor paragrafelor în albastru.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Aceasta este o denumire</h1>

<p>Acesta este un paragraf.</p>
<p>Acesta este alt paragraf.</p>
</body>
</html>
R: <style>
p{
background-color:blue
}
</style>
Exercițiul 2
Modificați culoarea elementelor cu id-ul ”para1”, în roșu.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<p id="para1">Acesta este un paragraf.</p>
<p>Acesta este un alt paragraf.</p>
</body>
</html>
R: #para1{
color:red;
}
5
Exercițiul 3
Modificați tipul fontului în COURIER pentru toate elementele clasei FONT:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<p>Aceasta este un paragraf..</p>
<p class="font">Acesta este alt paragraf..</p>
<p class="font">Acesta de asemenea este un paragraf.</p>
</body>
</html>
R: .font{
Font-family:courier;
Exercițiul 4
Modificați culoarea paragrafelor și a denumirii h1 în roșu, grupați selectorii pentru a minimiza codul.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<h2>Aceasta este o denumire mai scurta</h2>
</body>
</html>
R: p,h1{
color:red;}
Exercițiul 5
Adăugați un fișier css extern cu url-ul ”css.css”
<!DOCTYPE html>
<html>
<head>
</head>
<body>
6
</body>
</html>
R: <link rel="stylesheet"type="text/css"href="css.css">
Exercițiul 6
Setați culoarea de fundal albastru, folosind stilizarea internă a elementelor.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
R: <style>
body{background-color:blue;}
</style>
Exercițiul 7
Setați culoarea de fundal albastru pentru pagina, folosind stilizarea inline.
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>
R: <body style="background-color:blue;">
CSS Backgrounds
Proprietățile de fundal CSS sunt utilizate pentru a defini efectele de fundal pentru elemente.
Proprietăți CSS de fundal:
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
7
Și dacă background-image și background-color le-am folosit de mai multe ori până acum, atunci pe celelalte haideți
să le analizăm:
Background-repeat
Implicit, proprietatea background-image repetă o imagine atât pe orizontală cât și pe verticală. Însă de cele mai dese ori
arată mai bine dacă imaginea va fi repetată doar pe orizontală sau doar pe verticală. În acest caz se folosește pentru a
afișa doar pe orizontală următorul cod:
body {
background-image: url("exemplu.jpg");
background-repeat: repeat-x;
}
Iar pentru a repeta pe verticală:
body {
background-repeat: repeat-y;
}
Pentru a afișa imaginea de fundal o singură dată:
body {
background-repeat: no-repeat;
}
Background-position
Poziția imaginii este specificată de proprietatea background-position:
body {
background-position: right top;
}
Background-attachment
Pentru a specifica că imaginea de fundal trebuie să fie fixată (nu va derula cu restul paginii), utilizați proprietatea
background-attachment:
body {
background-position: right top;
background-attachment: fixed;
}
Proprietatea shorthand
8
Pentru a scurta codul, este de asemenea posibil să specificați toate proprietățile de fundal dintr-o singură proprietate.
Aceasta se numește proprietate stenografică.
Proprietatea stenografică pentru fundal este background:
body {
background: red url("exemplu.jpg") no-repeat right top;
}
Atunci când se utilizează proprietatea stenografică, ordinea valorilor proprietății este:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Nu contează dacă una dintre valorile de proprietate lipsește, atâta timp cât celelalte sunt în această ordine.
Exerciții practice
Exercițiul 1
Setați culoarea de fundal a paginii în albastru, iar culoarea de fundal a lui h1 în gri.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Titlul</h1>
</body>
</html>
R: body{
background-color:blue;}
h1{
background-color:lightblue;}
Exercițiul 2
Setați exemplu.jpg ca imagine de fundal a paginii.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
R: body{background-image:url(“exemplu.jpg”);}
9
Exercițiul 3
Setați imaginea exemplu.jpg, ca imagine de fundal a paginii și repetați-o doar pe verticală.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
R: body{
background-image:url("exemplu.jpg");
background-repeat:repeat-y;}
Exercițiul 4
Specificați că imaginea de fundal trebuie să apară doar o singură dată, în colțul dreapta de sus.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
R: body {
background-image: url("exemplu.png");
background-repeat:no-repeat;
background-position:top right;
}
Exercițiul 5
Folosiți proprietatea shorthand pentru a seta ca imagine de fundal exemplu.jpg, să fie în colțul din dreapta sus și să se
repete o data.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
R: body{
background:url("exemplu.jpg") no-repeat top right;}
10

Lectia 3 CSS

Încărcat de

Informații document

Titlu original

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

Lectia 3 CSS

Încărcat de

Drepturi de autor:

Formate disponibile

CSS

Foile de stil externe sunt stocate în fișierele CSS.

<h1> Acesta este un titlu </ h1>

<p> Acesta este un paragraf. </ p>

CSS a eliminat formatarea stilului din pagina HTML!

Definițiile de stil sunt salvate în mod normal în fișiere externe .css.

Prevalența metodelor de a însera CSS în documentele HTML

1. Fișier extern (.css)

Fișierul extern arată astfel:

3. În tagul care se vrea personalizat (inline)

<h1 s<h1 style="color:blue;margin-left:30px;">Aceasta este o denumire!</h1>

Voi adăuga acum și cea de-a 4-a modalitate și anume:

4. Toate cele trei anterioare.

1. Formatare CSS inline (-în interiorul tag-ului HTML)

Sintaxă CSS și selectori

Selectorul element selectează elemente bazate pe numele elementului.

Regula de stil de mai jos se va aplica elementului HTML cu id = "para1":

Elementele HTML se pot referi, de asemenea, la mai multe clase.

<p class="center large">Acest Paragraf se refera la 2 clase.</p>

Dacă aveți elemente cu aceleași definiții de stil, cum ar fi:

Modificați culoarea de fundal a tuturor paragrafelor în albastru.

<h1>Aceasta este o denumire</h1>

Modificați culoarea elementelor cu id-ul ”para1”, în roșu.

<h1>Aceasta este o denumire</h1>

Modificați tipul fontului în COURIER pentru toate elementele clasei FONT:

<h1>Aceasta este o denumire</h1>

<h1>Aceasta este o denumire</h1>

<h1>Aceasta este o denumire</h1>

Setați culoarea de fundal albastru, folosind stilizarea internă a elementelor.

Setați culoarea de fundal albastru pentru pagina, folosind stilizarea inline.

<h1>Aceasta este o denumire</h1>

Proprietăți CSS de fundal:

Iar pentru a repeta pe verticală:

Pentru a afișa imaginea de fundal o singură dată:

Poziția imaginii este specificată de proprietatea background-position:

Proprietatea stenografică pentru fundal este background:

Atunci când se utilizează proprietatea stenografică, ordinea valorilor proprietății este:

Setați exemplu.jpg ca imagine de fundal a paginii.

Setați imaginea exemplu.jpg, ca imagine de fundal a paginii și repetați-o doar pe verticală.

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