Cum pot integra în paginile html 2 stiluri CSS diferite pentru 2 imagini diferite, ambele fiind separate vertical printr-un spațiu?

#1
me_suzy

Posted 10 February 2022 - 11:17

Member

Grup: Members
Posts: 630
Înscris: 29.04.2007

salut prieteni. Cum pot integra într-o pagina html 2 stiluri CSS diferite pentru 2 imagini diferite, ambele fiind separate printr-un spațiu vertical (una sub alta) ?

Uitati-va la tablourile de mai jos. Au dimensiuni diferite, stiluri diferite. Asta nu stiu cum sa fac in css.

Attached Files

Hanging+Art+On+a+Vertical+Wall+Space.jpg 147.94K 28 downloads

Back to top

#2
miki07

Posted 10 February 2022 - 11:23

Simplu și banal

Grup: Senior Members
Posts: 15,755
Înscris: 18.09.2008

ID-uri diferite in CSS?

Back to top

#3
GaBogdan

Posted 10 February 2022 - 11:24

Member

Grup: Members
Posts: 625
Înscris: 02.09.2020

Daca am inteles bine intrebarea. Prin Id sau clasa diferita
<img id="firstImg" scr="" alt="" />
<img id="secondImg" scr="" alt="" />

Si in css:
#firstImg{
width: 500px;
}

#secondImg{
width: 200px;
}

Edited by GaBogdan, 10 February 2022 - 11:26.

Back to top

#4
me_suzy

Posted 10 February 2022 - 11:25

Member

Grup: Members
Posts: 630
Înscris: 29.04.2007

GaBogdan, on 10 februarie 2022 - 11:24, said:

Daca am inteles bine intrebarea. Prin Id sau clasa diferita

nu stiu css, acum invat. Dar ID sau CLASS, imi poate arata cineva in cod cum se fac ambele variante ?

Back to top

#5
GaBogdan

Posted 10 February 2022 - 11:28

Member

Grup: Members
Posts: 625
Înscris: 02.09.2020

me_suzy, on 10 februarie 2022 - 11:25, said:

nu stiu css, acum invat. Dar ID sau CLASS, imi poate arata cineva in cod cum se fac ambele variante ?

Dada, da-mi te rog 5 minute si iti trimit link pentru adaugare css in html, id, clasa

Back to top

#6
miki07

Posted 10 February 2022 - 11:29

Simplu și banal

Grup: Senior Members
Posts: 15,755
Înscris: 18.09.2008

https://codepen.io/miki07/pen/JjONWaQ

Asa ceva?

Back to top

#7
Bogdan__26

Posted 10 February 2022 - 11:42

Junior Member

Grup: Junior Members
Posts: 39
Înscris: 26.01.2016

Uite exemplu acesta: https://jsfiddle.net/Ln3y0bz7/
Dacă vrei dimensiuni diferite imaginile trebuie să fie de dimensiuni diferite iar dacă vrei stiluri diferite le poți pune într-un div și le poți targeta folosind :first-child, :last-child, :nth-child() sau cum a spus colegul mai sus prin clase sau id-uri diferite.

Back to top

#8
GaBogdan

Posted 10 February 2022 - 11:42

Member

Grup: Members
Posts: 625
Înscris: 02.09.2020

Ai indexul html, langa el mai creezi un fisier numit style.css de exemplu unde o sa tii tot css-ul. E mult mai ok decat css inline.
Pentru a "lega" fisierul style.css cu index.html, in head, scrii <link rel="stylesheet" href="style.css"> ( daca pui style.css in alt folder trebuie sa ai grija la path, exact ca si la imagini. ) https://www.w3school...s/css_howto.asp
Pentru a stiliza o imagine, un div, un p etc etc. Folosesti atributuri precum "id" sau "class" https://www.w3school...tml_classes.asp
Pentru a folosi class: <img class="myClassDeExemplu" scr="" alt="" />
iar in css clasa se targheteaza asa:
.myClassDeExemplu{
// ce stil vrei tu sa aplici aici
width: 300px;
}

Pentru a folosi id: <img id="myID" scr="" alt="" />
iar in css clasa se targheteaza asa:
#myID{
// ce stil vrei tu sa aplici aici
width: 600px;
}

Am incercat sa fac un scurt si utli rezumat, sper sa ajute.

Edited by GaBogdan, 10 February 2022 - 11:43.

Back to top

#9
me_suzy

Posted 10 February 2022 - 11:47

Member

Grup: Members
Posts: 630
Înscris: 29.04.2007

multumesc GaBogdan si Miki07

da, asa ceva. Testez si vad cum merg amandoua variantele. Thanks !!

.picture, .leftPicture, .rightPicture {
	border: 2px dotted gray;
	width: 200px;
}
.leftPicture {
	float:left;
}
.rightPicture {
	float:right;
}

mai ulte raspunsuri se pot gasi aici: https://stackoverflo...ges-differently

Back to top

#10
GaBogdan

Posted 10 February 2022 - 11:53

Member

Grup: Members
Posts: 625
Înscris: 02.09.2020

Iti sugerez sa te mai uiti peste https://www.w3school...ls.com/Â Â html si css
Pentru inceput, acopera destul de multe chestii.
Daca te mai pot ajuta cu ceva, nu ezita sa lasi un pm.
Succes!

Back to top

Anunturi

Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

www.neurohope.ro

Cum pot integra în paginile html 2 stiluri CSS diferite pentru 2 imagini diferite, ambele fiind separate vertical printr-un spațiu?

#1 me_suzy Posted 10 February 2022 - 11:17

Attached Files

#2 miki07 Posted 10 February 2022 - 11:23

#3 GaBogdan Posted 10 February 2022 - 11:24

#4 me_suzy Posted 10 February 2022 - 11:25

#5 GaBogdan Posted 10 February 2022 - 11:28

#6 miki07 Posted 10 February 2022 - 11:29

#7 Bogdan__26 Posted 10 February 2022 - 11:42

#8 GaBogdan Posted 10 February 2022 - 11:42

#9 me_suzy Posted 10 February 2022 - 11:47

#10 GaBogdan Posted 10 February 2022 - 11:53

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
me_suzy

Posted 10 February 2022 - 11:17

#2
miki07

Posted 10 February 2022 - 11:23

#3
GaBogdan

Posted 10 February 2022 - 11:24

#4
me_suzy

Posted 10 February 2022 - 11:25

#5
GaBogdan

Posted 10 February 2022 - 11:28

#6
miki07

Posted 10 February 2022 - 11:29

#7
Bogdan__26

Posted 10 February 2022 - 11:42

#8
GaBogdan

Posted 10 February 2022 - 11:42

#9
me_suzy

Posted 10 February 2022 - 11:47

#10
GaBogdan

Posted 10 February 2022 - 11:53