Tabloul Lui Mondrian: Piet Mondrian La Un Preț Foarte Bun

Tabloul lui Mondrian
Tablourile pictorului danez Piet Mondrian au fost vândute recent la un preț
foarte bun la o licitație americană.
Acum, vei „picta” tabloul lui Mondrian care se numește „Compoziție cu
roșu, albastru și galben”.
Object 1
Nu te îngrijora, vom utiliza doar HTML și CSS, deci îți putem garanta că nu
vei fi acoperit de vopsea.

Ce vom învăța?
Dacă privești mai atent imaginea, aceasta este compusă din dreptunghiuri
mici și colorate, care diferă unul față de altul ca dimensiune și poziție.
Site-urile web sunt și ele realizate într-un mod similar. De obicei desenezi o
schiță (wireframe) mai întâi când creezi site-uri web, unde poți crea
unitățile mari de pe site și pozițiile lor unele față de altele.
Cu puțină imaginație, tabloul poate fi planul unui site web. De exemplu,
planul unui site web de știri. Putem pune știrile principale în caseta roșie,
câteva elemente de navigare în micile casete din partea stângă,
informațiile de contact pentru editor în partea de jos și așa mai departe.
În acest proiect, prin replicarea tabloului, vei învăța cum să creezi
asemenea layouturi utilizând elemente HTML și reguli CSS.
Realizează o schiță a tabloului pe o bucată de hârtie pentru a te familiariza
cu acesta.
Sarcină
De câte bucăți de hârtie dreptunghiulare de o singură culoare ai nevoie pentru a

compune imaginea, dacă nu trebuie să se suprapună una peste cealaltă? (Indiciu:
răspunsul corect nu este 7)
Trimite răspunsul meu
Creează pânza
Din moment ce tabloul este pictat pe o pânză, imaginea noastră digitală
va fi pictată pe o pânză virtuală.
Deschide o fereastră JSBin
https://jsbin.com/?html,css,output
și copiază următorul cod în panoul HTML între tag-urile: <body>

<div></div>
Copy
Nu pare că s-ar fi întâmplat ceva, dar în spatele scenei a fost creată pânza
pe care vom picta. Doar că nu are încă o culoare, o dimensiune și un
conținut.
Dacă pui cuvântul „canvas” între tag-urile<div>, poți vedea cum textul
apare în panoul output. Tag-ul <div> în HTML este pentru a pune diferite
unități de conținut (diviziuni, secțiuni) și a le sorta așa cum dorești. Atunci
când dezvoltăm site-uri web, redimensionăm și repoziționăm tag-
urile <div> utilizând CSS pentru a seta elementele de bază ale site-ului
web.
Hai să setăm dimensiunea și culoarea
pânzei noastre.
Acum, utilizând CSS, vei seta dimensiunea și culoarea pânzei. Vei avea
nevoie de un selector pentru regula CSS. Dacă am defini o regulă pentru
elementul <div>în acest caz, ar afecta toate tag-urile <div> și nu am putea
să le poziționăm unul câte unul. Modifică în schimb doar pânza:
<div id="canvas"></div>
Copy
Un atribut id poate fi adăugat în orice tag HTML. Acesta este identificatorul
cu ajutorul căruia putem să ne referim la respectivul element în regulile
CSS și în codul JavaScript.
În CSS, trebuie să utilizezi un hashtag (#) înainte de id pentru a face
programul să înțeleagă ce fel de regulă vrei să creezi:
#canvas {
...
}
Copy
Tabloul este, în principiu, un pătrat. Setează o dimensiune pentru pânză
utilizând codul pe care l-ai pus în panoul CSS, și adaugă o culoare de
fundal pentru a face ca rezultatul să fie vizibil:
#canvas {
width: 300px;
height: 300px;
background-color: ivory;
}
Copy
width stabilește lățimea, height stabilește înălțimea. Acum am setat
dimensiunea exprimată în pixeli (px), deci va avea aceeași dimensiune,
indiferent de mărimea ferestrei.
Nu am setat fundalul folosind un cod hexadecimal pentru o culoare
(ex: #fff4db) sau un cod rgba (ex: rgba(255,0,0,0.1)), ci mai degrabă folosind
termenul în engleză al acesteia. Poți găsi întreaga listă a culorilor
disponibile doar cu denumirea în engleză aici.
Important: deoarece id este un idenficator unic, nu atribui niciodată
același ID mai multor elemente. De asemenea, atribuirea mai multor ID-
uri unui singur element nu este necesară.
Sarcină
Asigură-te că atât înălțimea, cât și lățimea pânzei sunt mai mari cu 100 de pixeli fața
de cele inițiale. Copiază linia care se referă la înălțime aici:
Pune imaginea pe perete

Aliniază la centru
Un tablou arată mai bine dacă este pus pe un perete. Amplasează tabloul
aliniat în centrul orizontal al paginii:
#canvas {
width: 400px;
height: 400px;
margin: 0 auto;
}
Copy
Reține: poți folosi forma prescurtată pentru proprietatea marginii. În
cazul margin: 0 auto; prima valoare va fi pentru marginile de sus și de jos, iar
cea de-a doua valoare va fi pentru cele două margini laterale. Setarea
automată pentru cele două margini laterale îi indică browserului că nu
știm care ar trebui să fie valoarea exactă încă, dar cele două ar trebui să
fie egale. Prin urmare, conținutul va fi aliniat la mijloc.

Adaugă luminozitate
Singurul lucru care lipsește este lumina corespunzătoare, așadar vom
indica asta printr-o „umbră” (shadow):
#canvas {
width: 300px;
height: 300px;
margin: 0 auto;
box-shadow: 15px 15px 10px gray;
}
Copy
box-shadow funcționează cu parametri multipli:
box-shadow: h-shadow v-shadow [blur] [spread] color;

Copy
h-shadow e poziția orizontală a umbrei, în timp ce v-shadow e poziția
verticală. Acești doi parametri sunt necesari (iar pentru unele browsere și
culoarea), pe când blur și spread dintre parantezele drepte nu sunt.
Parametrii opționali trebuie definiți în ordine (așa că valoarea pentru
spread nu poate fi definită înainte de a defini valoarea pentru blur).

Încearcă să modifici umbra. Rescrie numerele, șterge unele valori și
adaugă un alt parametru înainte de culoare.
Poți seta și o valoare negativă.
Sarcină
În cazul setării box-shadow: 15px 15px 10px gray; 10px se referă la valoarea lui
spread sau cea a lui blur?
Structura imaginii
Dacă ai desenat imaginea sau ai încercat să ți-o imaginezi realizată din
mici dreptunghiuri colorate, atunci ai deja o structură gata creată în minte.
În codul pe care îl oferim ca exemplu pentru acest proiect, împărțim
tabloul în trei rânduri:
•rândul dreptunghiului roșu,
•rândul liniei negre subțiri și
•rândul dreptunghiului albastru.
De obicei, nu există un „mod unic de realizare” în programare, deci în
acest exercițiu s-ar putea să te fi gândit la o structură diferită față de

cea pe care o vom utiliza în exemplu. Asta nu înseamnă neapărat că
modalitatea ta este greșită.
Realizează primul rând
Vom așeza dreptunghiurile unul câte unul. Mai întâi, dreptunghiul roșu va
fi așezat în colțul din dreapta sus.
Pentru a face asta, trebuie să desenezi virtual primul rând, care conține
pătratul roșu:
<div id="canvas">
<div id="first-row"></div>
</div>
Copy
În codul HTML, am anexat noul element div în elementul div pe care l-am
poziționat mai devreme (pictăm pe pânza noastră pe care deja am creat-
o). În acest fel, elementul <div id="canvas"> devine elementul părinte,
iar <div id="first-row"> devine elementul copil.
Elementul copil va moșteni unele calități ale elementului părinte (de
exemplu, dacă ai setat deja fontul elementului părinte, nu trebuie să îl

mai setezi din nou și pentru elementul copil, decât dacă vrei un font
diferit pentru acesta).
I-am atribuit și acestui nou element div un ID: id="first-row". Utilizând acest
ID te vei putea referi la el.
Utilizează ID-uri ușor de reținut, care se referă la elementele
identificate într-un mod evident.
Dacă un id conține mai multe cuvinte, desparte-le prin liniuțe (-).
Setează dimensiunea primului rând
Primul rând, care conține dreptunghiul roșu, umple aproape trei sferturi
din imagine. Poți seta dimensiunile ca reguli CSS în procente. În acest caz,
dimensiunea elementului conținător va fi luată în calcul. Setează
dimensiunea primului rând:
#first-row {
height: 75%;
width: 100%;
}
Copy
Din moment ce elementul #first-row nu are o culoare de fundal definită
separat, momentan nu este vizibil pe pagină. Atribuie-i o culoare
temporară de fundal (de exemplu: background-color: brown;) și apoi îți va fi
mai ușor să monitorizezi ce se întâmplă.
Deci #first-row este elementul copil al #canvas și ai setat o dimensiune fixă
pentru el. Dacă lățimea lui #canvas este de 500 de pixeli, atunci #first-row va
avea aceeași lățime. Dacă #canvas are o înălțime de 500 de pixeli, atunci
elementul #first-row va fi 75% din dimensiunea sa, având în acest caz
înălțimea de 375 de pixeli.
Sarcină
Dacă lățimea elementului părinte este de 100 de pixeli, iar lățimea elementului copil de
50%, ce lățime exprimată în pixeli ar avea elementul copil al elementului copil, care
are o lățime de 100%?
Pătratul roșu
Este timpul să punem primul dreptunghi real pe pânză.
Un pătrat mare în dreapta
Adăugă pătratul în codul HTML (îl „încorporăm” în primul rând):
<div id="canvas">
<div id="first-row">
<div id="big-rectangle"></div>
</div>
</div>
Copy
Setează-i dimensiunile:
#big-rectangle {
height: 100%;
width: 75%;
}
Copy
Poți vedea ceva? Nu încă, deși probabil ai făcut totul corect. Din moment
ce elementul #big-rectangle nu are o culoare de fundal definită în mod
separat, nu îl poți vedea încă pe pagină.
Este mult mai interesant dacă este
colorat
Hai să pregătim culorile. De această dată, nu vom folosi atributul unic id,
ci clasele. Atributul class="class-name" poate fi setat pentru elementele
HTML în același fel ca și id. Diferența este că putem seta
același class pentru multiple elemente, în timp ce poate exista doar un
singur element pentru un id. Lucrurile care sunt vizibile mai des și pot fi
folosite pentru mai multe elemente sunt, de obicei, marcate cu aceeași
clasă.
Setează clasa "red" pentru dreptunghiul mare:
<div id="big-rectangle" class="red"></div>

Copy
În codul CSS, te poți referi la clase folosind selectorul .class-name. Creează o
regulă pentru clasa realizată chiar acum:
.red {
background-color: red;
}
Copy
Dacă totul a decurs corect, pătratul tău mare este acum roșu.
Sarcină
Pictează primul rând cu maro deocamdată, folosind o nouă clasă. Copiază selectorul
CSS pe care-l folosești aici:
Pătratul roșu este la locul

potrivit
Pătratul este roșu, dar se află încă în partea stângă. Există mai multe
metode pentru a-l așeza în partea dreaptă, vom folosi metoda „flotării”.
Hai să învățăm cum să-l „flotăm de la dreapta”.
De cele mai multe ori, browserul citește elementele HTML în ordine și le va
afișa în aceeași ordine, unul după celălalt. Putem însă schimba acest
aspect pentru câteva elemente (de exemplu, imaginează-ți un articol în
care paragrafele apar unul după celălalt și dorim să punem o imagine
drept cadru pentru text). Asta face codul CSS float.
Clipul video de mai jos demonstrează cum funcționează comanda float. Te
rugăm să-l urmărești (are 3 minute):

https://www.youtube.com/watch?time_continue=1&v=xara4Z1b18I
Creează o regulă care se referă la o nouă clasă în codul CSS:
.right {
float: right;
}
Copy
Deci float scoate elementul în afara procesului de afișare
normală: float:right; îl face flotant în partea dreaptă, iar float:left; îl face
flotant în partea stângă.
Setează o nouă clasă right pentru pătratul roșu:
<div id="big-rectangle" class="red right"></div>

Copy
După cum poți vedea, poți seta aceeași clasă pentru multiple elemente,
dar în același timp poți și să setezi mai multe classe pentru un element.
Pentru a face asta, trebuie să separi valorile atributului class prin spații.
Din acest motiv, dacă dorești să utilizezi o combinație de cuvinte atunci
când numești o class, e important să combini cuvintele punând cratime
între ele.
Sarcină
Cum ar arăta atributul elementului clasei div, care se referă la pătratul roșu, dacă am
adăuga o a treia clasă? Scrie-l aici:
Primul separator negru
Acum vom „picta” dreptunghiul negru despărțitor. Vom avea nevoie de
două lucruri pentru a face aceasta - culoarea neagră ca și clasă
reutilizabilă:
.black {
background-color: black;
}
Copy
Și un alt element în structura HTML, introdus la locul potrivit:
<div id="canvas">
<div id="first-divider"></div>
</div>
</div>
Copy
Noul element a fost și el așezat în primul rând (#first-row), dar, spre
deosebire de cele anterioare, nu este în elementul interior, ci stă la același
nivel. Așadar, #big-rectangle și #first-divider nu se află într-o relație de
părinte-copil, ci sunt elemente sibling (frați).
Este clar vizibil în acest exemplu că o indentare corect aplicată face
codul mai ușor de citit. Elementele frați sunt scrise pornind de la
același nivel, în timp ce elementele copil sunt indentate.

Dimensionează dreptunghiul negru
despărțitor:
#first-divider {
height: 100%;
width: 3%;
}
Copy
Colorează-l și aliniază-l la dreapta
Colorează-l cu negru (setează clasa black pentru el) și fă-l „flotant” de la
dreapta (setează clasa right pentru el).
A funcționat? (Ia aminte: poți adăuga multiple clase dacă le separi prin
spații.)
Schimbă ordinea liniilor care se referă la cele două dreptunghiuri din
codul HTML. Ce s-a întâmplat?
Proprietatea float funcționează în ordinea în care apar elementele HTML,
așadar, cât timp ele intră pe același rând, elementul care a fost pus primul
va fi cel mai în lateral.

Coloana de sus
În partea stângă a liniei de sus vezi trei dreptunghiuri unul sub celălalt;
două dreptunghiuri mai deschise cu dimensiuni aproape egale și un
dreptunghi negru care se află între acestea.
Este logic să „împachetăm” întreaga coloană într-o unitate HTML,
deoarece în acest fel îi vom putea poziționa conținutul ca un grup.
Creează structura HTML cu ID-urile și clasele corespunzătoare:
<div id="first-column" class="right">

<div id="first-medium-rectangle"></div>
<div id="second-divider" class="black"></div>
<div id="second-medium-rectangle"></div>
</div>
Copy
Dacă setezi clasa .right pentru elementul #first-column care conține cele trei
dreptunghiuri, poziționarea va fi aplicată în mod automat la toate
elementele din el.
Setează dimensiunea elementelor
Prima coloană ocupă restul spațiului de pe prima linie. Pe primul rând
avem #big-rectangle (75%) și #first-divider (3%) până acum. Spațiul rămas este
de 22% (100-75-3).
#first-column {
height: 100%;
width: 22%;
}
Copy
Observă ce se întâmplă dacă setezi un procentaj mai mare pentru lățimea
primei coloane.
Adaugă o clasă de culoare lui #first-column și observă ce se întâmplă.
Pentru dreptunghiul negru despărțitor:

#second-divider {
height: 3%;
width: 100%;
}
Copy
Doar dreptunghiul negru ocupă un spațiu (3%) din înălțimea totală a
primei coloane (100%). Cele două dreptunghiuri deschise la culoare împart
restul spațiului distribuit în mod egal: 97 / 2 = 48.5% va fi dimensiunea lor:
#first-medium-rectangle {
height: 48.5%;
width: 100%;
}
Copy
#second-medium-rectangle {
height: 48.5%;
width: 100%;
}
Copy
Sarcină
Schimbă temporar înălțimea acelui #second-divider pe care tocmai l-am modificat la

6%. Cât ar trebui să fie înălțimea lui #medium-rectangle exprimată în procente astfel
încât cele trei dreptunghiuri să umple întreaga înălțime a primei coloane?
Al doilea rând
Al doilea rând conține doar dreptunghiul negru, care se întinde peste întreaga lățime a
imaginii.
Extinde structura HTML cu un nou rând și fii sigur că o încadrezi în elementul corect:
<div id="second-row" class="black"></div>

Copy
Și setează o dimensiune pentru aceasta:
#second-row {
height: 3%;
width: 100%;
}
Copy
A doua linie trebuie să fie elementul frate al primei linii.

Sarcină
Cu toate că #second-divider și #second-row au amândouă înălțimea de 3%, înălțimile

lor nu sunt aceleași la final. De ce?
Cum ți s-a părut această sarcină?
Rândul de jos
A mai rămas doar un singur rând, deci acum vei lucra pe cont propriu. Nu-
ți face griji, deja știi tot ceea ce ai nevoie.
Al treilea rând este, în principiu, o combinație a ceea ce am învățat în
primele două rânduri: în partea dreaptă există o coloană mică similară cu
cea din partea din stânga sus a imaginii, iar lângă ea sunt patru
dreptunghiuri de diferite lățimi (albastru, negru, alb, negru).
Ordinea recomandată:
1.creează rândul virtual care încapsulează a treia linie (#third-row)

2.setează dimensiunile celui de-al treilea rând (lățimea totală, spațiul
rămas din înălțime după primele două rânduri)
3.creează virtual coloana mică de la marginea dreaptă a celui de-al
treilea rând (#last-column, elementul copil al celui de-al treilea rând), și
atribuie-i lățimea de 5%
4.„flotează” coloana mică din partea dreaptă (float:right;)
5.pune trei dreptunghiuri diferite în coloana mică (elementele copil
din cadrul #last-column sunt frați unii cu alții)
6.colorează-l pe cel negru folosind clasa corectă
7.creează o nouă clasă astfel încât să poți colora cu galben și

folosește-o pe dreptunghiul de jos
8.creează un nou element în locul potrivit pentru dreptunghiul

negru, setează-i dimensiunea (3%) și colorează-l (nu uita să-l aliniezi
la dreapta)
9.creează dreptunghiul mare, alb, setează-i dimensiunea și aliniază-l

la dreapta
10.adaugă un nou dreptunghi negru despărțitor la acesta
11.la final, adaugă pătratul albastru, dimensionează-l și creează clasa

de culoare corectă pentru el.
Nu-ți face griji dacă nu va funcționa din prima, doar continuă să încerci. În
cazul în care ceva chiar nu merge, trebuie doar să ștergi până când totul
funcționează și să adaugi noi elemente unul câte unul pentru a vedea
unde te-ai blocat.

Sarcină
Ai reușit? Copiază linkul JSBin aici dacă ai terminat. (Nu-ți face griji dacă nu
funcționează. Continuă să încerci, iar dacă ți se pare că te-ai blocat, atunci doar copiază
linkul aici și continuă mai departe, deoarece vei găsi ajutor pe pagina următoare.)
O posibilă soluție pentru

rândul de jos
Acum îți voi arăta o soluție posibilă.
Sarcinile:
1.creează rândul virtual care încapsulează a treia linie (#third-row)
2.setează dimensiunile celui de-al treilea rând (lățimea totală, spațiul

rămas din înălțime după primele două rânduri)
3.creează virtual coloana mică de la marginea dreaptă a celui de-al
treilea rând (#last-column, elementul copil al celui de-al treilea rând), și
atribuie-i lățimea de 5%
4.„flotează” coloana mică din partea dreaptă (float:right;)
5.pune trei dreptunghiuri diferite în coloana mică (elementele copil
din cadrul #last-column sunt frați unii cu alții)
6.colorează-l pe cel negru folosind clasa corectă
7.creează o nouă clasă astfel încât să poți colora cu galben și

folosește-o pe dreptunghiul de jos
8.creează un nou element în locul potrivit pentru dreptunghiul

negru, setează-i dimensiunea (3%) și colorează-l (nu uita să-l aliniezi
la dreapta)
9.creează dreptunghiul mare, alb, setează-i dimensiunea și aliniază-l

la dreapta
10.adaugă un nou dreptunghi negru despărțitor la acesta
11.la final, adaugă pătratul albastru, dimensionează-l și creează clasa

de culoare corectă pentru el.
HTML
<div id="third-row">
<div id="last-column" class="right">
<div id="first-tiny-rectangle"></div>
<div id="third-divider" class="black"></div>
<div id="second-tiny-rectangle" class="yellow"></div>
</div>
<div id="fourth-divider" class="black right"></div>
<div id="wide-rectangle" class="right"></div>
<div id="fifth-divider" class="black right"></div>
<div id="small-rectangle" class="blue right"></div>
</div>
Copy
pozițiile și dimensiunile CSS
#third-row {
height: 22%;
width: 100%;
}
#last-column {
height: 100%;
width: 5%;
}
#first-tiny-rectangle {
height: 45%;
width: 100%;
}
#second-tiny-rectangle {
height: 45%;
width: 100%;
}
#third-divider {
height: 10%;
width: 100%;
}
#fourth-divider {
height: 100%;
width: 3%;
}
#fifth-divider {
height: 100%;
width: 3%;
}
#wide-rectangle {
height: 100%;
width: 67%;
}
#small-rectangle {
height: 100%;
width: 22%;
}
Copy
clasele de culoare CSS
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
Copy
Dacă te-ai blocat cu adevărat, iată un link JSBin - uită-te prin el, poate te va
ajuta.
Sarcină
Copiază linkul soluției tale JSBin aici.
Colorează cum vrei

Joacă-te puțin!
1.Redimensionează pânza și observă ce s-a întâmplat.
2.Folosește clasele de culoare pentru alte elemente pentru a

„recolora” imaginea.
3.Mondrian nu a folosit exact aceleași culori în tabloul său. Găsește

culorile care sunt cele mai apropiate aici.
Ce ai învățat în acest proiect?
HTML
<div id="canvas">
<div id="first-divider" class="black right"></div>
</div>
</div>
Copy
CSS
#first-row { /* ID ca selector */
width: 300px; /* lățime în pixeli ficși
*/
height: 75%; /* lățime dată relativ */
box-shadow: 15px 15px 10px gray; /* umbră -- h-shadow v-
shadow [blur] [spread] color */
}
.right { /* clasa ca selector */

float: right; /* flotant de la dreapta
*/
}
Copy
Comentarii în cod: La sfârșitul liniilor de cod de mai sus, poți vedea câteva
note despărțite de restul textului prin marcajele /* */. Acestea sunt
comentariile CSS. Orice este cuprins între cele două marcaje (/* */) va fi
ignorat de către browser când se citește codul, deci poți avea propriile
comentarii pentru activitatea ta. Aceste comentarii sunt de ajutor în mai
multe feluri: pe de o parte, poți sorta propriul cod utilizându-le, iar pe de
altă parte poți lăsa explicații și instrucțiuni pentru tine sau pentru alți
dezvoltatori. Poți pune comentariile HTML între marcajele  .
Sarcină
Trimite linkul JSBin cu cea mai bună lucrare a ta

Tabloul Lui Mondrian: Piet Mondrian La Un Preț Foarte Bun

Î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

Tabloul Lui Mondrian: Piet Mondrian La Un Preț Foarte Bun

Încărcat de

Drepturi de autor:

Formate disponibile

Tabloul lui Mondrian

Tablourile pictorului danez Piet Mondrian au fost vândute recent la un preț

foarte bun la o licitație americană.

Acum, vei „picta” tabloul lui Mondrian care se numește „Compoziție cu

roșu, albastru și galben”.

vei fi acoperit de vopsea.

mici și colorate, care diferă unul față de altul ca dimensiune și poziție.

unitățile mari de pe site și pozițiile lor unele față de altele.

Cu puțină imaginație, tabloul poate fi planul unui site web. De exemplu,

câteva elemente de navigare în micile casete din partea stângă,

informațiile de contact pentru editor în partea de jos și așa mai departe.

În acest proiect, prin replicarea tabloului, vei învăța cum să creezi

asemenea layouturi utilizând elemente HTML și reguli CSS.

Realizează o schiță a tabloului pe o bucată de hârtie pentru a te familiariza

De câte bucăți de hârtie dreptunghiulare de o singură culoare ai nevoie pentru a

Din moment ce tabloul este pictat pe o pânză, imaginea noastră digitală

va fi pictată pe o pânză virtuală.

Deschide o fereastră JSBin

și copiază următorul cod în panoul HTML între tag-urile: <body>

pe care vom picta. Doar că nu are încă o culoare, o dimensiune și un

apare în panoul output. Tag-ul <div> în HTML este pentru a pune diferite

unități de conținut (diviziuni, secțiuni) și a le sorta așa cum dorești. Atunci

când dezvoltăm site-uri web, redimensionăm și repoziționăm tag-

urile <div> utilizând CSS pentru a seta elementele de bază ale site-ului

Hai să setăm dimensiunea și culoarea

nevoie de un selector pentru regula CSS. Dacă am defini o regulă pentru

elementul <div>în acest caz, ar afecta toate tag-urile <div> și nu am putea

să le poziționăm unul câte unul. Modifică în schimb doar pânza:

Un atribut id poate fi adăugat în orice tag HTML. Acesta este identificatorul

cu ajutorul căruia putem să ne referim la respectivul element în regulile

CSS și în codul JavaScript.

În CSS, trebuie să utilizezi un hashtag (#) înainte de id pentru a face

programul să înțeleagă ce fel de regulă vrei să creezi:

Tabloul este, în principiu, un pătrat. Setează o dimensiune pentru pânză

utilizând codul pe care l-ai pus în panoul CSS, și adaugă o culoare de

fundal pentru a face ca rezultatul să fie vizibil:

dimensiunea exprimată în pixeli (px), deci va avea aceeași dimensiune,

indiferent de mărimea ferestrei.

Nu am setat fundalul folosind un cod hexadecimal pentru o culoare

(ex: #fff4db) sau un cod rgba (ex: rgba(255,0,0,0.1)), ci mai degrabă folosind

termenul în engleză al acesteia. Poți găsi întreaga listă a culorilor

disponibile doar cu denumirea în engleză aici.

Important: deoarece id este un idenficator unic, nu atribui niciodată

același ID mai multor elemente. De asemenea, atribuirea mai multor ID-

uri unui singur element nu este necesară.

Trimite răspunsul meu

Pune imaginea pe perete

aliniat în centrul orizontal al paginii:

Reține: poți folosi forma prescurtată pentru proprietatea marginii. În

cazul margin: 0 auto; prima valoare va fi pentru marginile de sus și de jos, iar

automată pentru cele două margini laterale îi indică browserului că nu

fie egale. Prin urmare, conținutul va fi aliniat la mijloc.

Singurul lucru care lipsește este lumina corespunzătoare, așadar vom

indica asta printr-o „umbră” (shadow):

box-shadow funcționează cu parametri multipli:

box-shadow: h-shadow v-shadow [blur] [spread] color;

h-shadow e poziția orizontală a umbrei, în timp ce v-shadow e poziția

culoarea), pe când blur și spread dintre parantezele drepte nu sunt.

Parametrii opționali trebuie definiți în ordine (așa că valoarea pentru

spread nu poate fi definită înainte de a defini valoarea pentru blur).

adaugă un alt parametru înainte de culoare.

Poți seta și o valoare negativă.

Trimite răspunsul meu