Luokat ja ID:t
HTML:llä on rajallinen määrä tageja, mutta joskus on tarpeen erottaa tietyt elementit toisistaan. Esimerkiksi, jos haluat käyttää erilaisia tyylejä eri kappaleisiin (<p>-elementteihin), voit käyttää class- ja id-attribuutteja.
class-attribuutti liittää luokan tiettyyn HTML-elementtiin. Useat elementit voivat jakaa saman luokan. Tämä mahdollistaa samojen tyylien käyttämisen useissa elementeissä.
index.html
styles.css
Tässä esimerkissä kaksi kappaletta jakaa saman highlight-luokan, jolloin voit käyttää samoja tyylejä molemmissa.
id-attribuutti liittää yksilöllisen tunnisteen tiettyyn HTML-elementtiin. Toisin kuin class-attribuutilla, jokaisella elementillä voi olla vain yksi yksilöllinen id. Tämä on hyödyllistä, kun halutaan käyttää tyylejä tai käsitellä tiettyä elementtiä JavaScriptin avulla.
index.html
styles.css
On tärkeää muistaa, että id-arvon tulee olla yksilöllinen sivulla. Samaa id-arvoa ei voi käyttää useissa eri elementeissä.
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you give examples of how to use class and id in HTML?
What happens if I accidentally use the same id for multiple elements?
How do I style elements with class and id in CSS?
Awesome!
Completion rate improved to 4.35Luokat ja ID:t
Pyyhkäise näyttääksesi valikon
HTML:llä on rajallinen määrä tageja, mutta joskus on tarpeen erottaa tietyt elementit toisistaan. Esimerkiksi, jos haluat käyttää erilaisia tyylejä eri kappaleisiin (<p>-elementteihin), voit käyttää class- ja id-attribuutteja.
class-attribuutti liittää luokan tiettyyn HTML-elementtiin. Useat elementit voivat jakaa saman luokan. Tämä mahdollistaa samojen tyylien käyttämisen useissa elementeissä.
index.html
styles.css
Tässä esimerkissä kaksi kappaletta jakaa saman highlight-luokan, jolloin voit käyttää samoja tyylejä molemmissa.
id-attribuutti liittää yksilöllisen tunnisteen tiettyyn HTML-elementtiin. Toisin kuin class-attribuutilla, jokaisella elementillä voi olla vain yksi yksilöllinen id. Tämä on hyödyllistä, kun halutaan käyttää tyylejä tai käsitellä tiettyä elementtiä JavaScriptin avulla.
index.html
styles.css
On tärkeää muistaa, että id-arvon tulee olla yksilöllinen sivulla. Samaa id-arvoa ei voi käyttää useissa eri elementeissä.
Kiitos palautteestasi!
