setați proprietățile imaginii pe baza id-ului din fișierul css (Programare, Html, Css)

JoaoFilipeClementeMartins a intrebat.

Am următoarea structură html:

<div id="bookshelf">
        <img src="images/bookshelf.png" id="background_img" />
        <img src="images/book-cover-people.png"/>
        <img src="images/sports_cover.png" />
        <img src="images/travels_book_cover.png" />
        <img src="images/photoalbum_cover.png"/>
    </div>

și vreau să setez proprietățile css în mod diferit pentru fiecare imagine. cum pot specifica în fișierul css că pentru o imagine vreau anumite proprietăți și pentru altă imagine vreau altele.

în prezent ceea ce fac eu este:

#bookshelf img {
    width: 90%;
    height: 90%;
    background-size: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

dar acest lucru schimbă proprietățile fiecărei imagini din interiorul div-ului de raft, nu ale unor imagini specifice.

Comentarii

  • Puteți face acest lucru cu clase, ID-uri, index, src… orice doriți. Ați încercat ceva?# –  > Por putvande.
  • nu știu cum să o setez în css. în acest caz am încercat cu #bookshelf img care setează fiecare imagine din interiorul div-ului vreau să pot pune acolo id-ul imaginii astfel încât să o afecteze doar pe aceasta. –  > Por JoaoFilipeClementeMartins.
  • Ei bine… ai putea să dai fiecărei imagini un ID și să folosești asta în CSS-ul tău. Cum ar fi #background_img { ... } –  > Por putvande.
  • a funcționat. css are atât de multe posibilități diferite –  > Por JoaoFilipeClementeMartins.
2 răspunsuri
michaelward82

Cea mai bună modalitate ar fi să folosiți un id atribut pe fiecare imagine, unic pentru fiecare img element.

Luați:

<div id="bookshelf">
    <img src="images/bookshelf.png" id="background_img" id="one" />
    <img src="images/book-cover-people.png" id="two"/>
    <img src="images/sports_cover.png" id="three" />
    <img src="images/travels_book_cover.png" id="four" />
    <img src="images/photoalbum_cover.png" id="five"/>
</div>

acum puteți utiliza următorul selector pentru a seta proprietăți comune tuturor imaginilor:

#bookshelf img {}

și următorii selectori pentru stiluri aplicabile imaginilor individuale:

#one { }
#two { }
#three { }
#four { }
#five { }

Comentarii

  • Este puțin inutil să aveți 2 ID-uri în selector. img#one ar fi de ajuns în loc de #bookshelf img#one –  > Por putvande.
  • chiar și doar #one ar avea același efect, cu excepția cazului în care nu există un alt element pebthye pagină cu același id –  > Por Sam Denton.
  • @SamDenton da, aveți dreptate, nu este nevoie de img pentru că nu poate exista decât un singur #one pe pagină. ID-urile trebuie să fie unice. –  > Por putvande.
  • Un alt element de pe pagina aceeași pagină cu același ID ar fi invalid. –  > Por Paulie_D.
  • scuze, mă gândeam la clasele de clasă, pentru că asta e tot ce folosesc cu adevărat –  > Por Sam Denton.
Amey Sawant
<div id="bookshelf">
    <img class="image01" src="images/bookshelf.png" id="background_img" />
    <img class="image02" src="images/book-cover-people.png" />
    <img class="image03" src="images/sports_cover.png" />
    <img class="image04" src="images/travels_book_cover.png" />
    <img class="image05" src="images/photoalbum_cover.png" />
</div>

<style type="text/css">
#bookshelf img.image01{}
#bookshelf img.image02{}
#bookshelf img.image03{}
#bookshelf img.image04{}
#bookshelf img.image05{}
</style>

This way also you can do.

Comentarii

  • Aceasta este o utilizare nepotrivită a clasei, cu excepția cazului în care vor exista alte grupuri de imagini care au nevoie de același stil. Atributele ID ar fi modalitatea corectă și eficientă de a atinge același obiectiv. –  > Por michaelward82.

Tags:,