50 parasta CSS-haastattelun kysymystä ja vastausta (2025)

Täältä löydät CSS (CSS3) -haastattelukysymykset ja -vastaukset niin uusille kuin kokeneille hakijoille unelmatyönsä saamiseksi.

Ilmainen PDF-lataus: CSS-haastattelukysymykset

1. Mikä on CSS?

CSS:n täysi muoto on Cascading Style Sheets. Se on tyylikieli, joka on tarpeeksi yksinkertainen HTML elementtejä. Se on suosittu web-suunnittelussa, ja sen sovellus on yleinen myös XHTML:ssä.

---

2. Mikä on CSS:n alkuperä?

Tavallinen yleinen merkintäkieli merkitsi tyylisivujen alkua 1980-luvulla.

---

3. Mitkä ovat CSS:n eri muunnelmat?

CSS:n muunnelmat ovat:

• CSS 1
• CSS 2
• CSS 2.1
• CSS 3
• CSS 4

---

4. Mitkä ovat CSS:n rajoitukset?

Rajoitukset ovat:

•  Nouseminen valitsimilla ei ole mahdollista
• Pystysuoran ohjauksen rajoitukset
• Ei ilmaisuja
• Ei sarakeilmoitusta
• Pseudoluokka, jota dynaaminen käyttäytyminen ei hallitse
• Säännöt, tyylit, kohdistaminen tiettyyn tekstiin eivät ole mahdollisia

---

5. Mitkä ovat CSS:n edut?

Edut ovat:

• kaistanleveys
• Koko sivuston yhtenäisyys
• Sivun alustaminen uudelleen
• Käytettävyys:
• Esityksestä erotettu sisältö

---

6. Mitä CSS-kehykset ovat?

Se on ennalta suunniteltu kirjasto, joka mahdollistaa helpomman ja standardinmukaisemman verkkosivun muotoilun CSS-kielellä.

---

7. Miten lohkoelementit voidaan keskittää CSS1:llä?

Lohkotason elementit voidaan keskittää seuraavasti:

Marginaalivasen ja marginaalioikea ominaisuudet voidaan asettaa johonkin eksplisiittiseen arvoon:

BODY {

width: 40em;

background: fluorescent;

}

P {

width: 30em;

margin-right: auto;

margin-left: auto

}

Tässä tapauksessa vasen ja oikea marginaali ovat kumpikin viisi emä leveitä, koska ne jakavat kymmenen emä, jotka jäävät jäljelle (40 em-30 em). Se oli tarpeeton määritettäessä nimenomaista leveyttä BODY-elementille; se tehtiin täällä yksinkertaisuuden vuoksi.

---

8. Kuka ylläpitää CSS-spesifikaatioita?

World Wide Web Consortium ylläpitää CSS-spesifikaatioita.

---

9. Kuinka monella tavalla CSS voidaan integroida web-sivuksi?

CSS voidaan integroida kolmella tavalla:

• Inline: Style-attribuuttia voidaan käyttää CSS:n HTML-elementtien käyttämiseen.
• Embedded: Head-elementissä voi olla Style-elementti, johon koodi voidaan sijoittaa.
• Linkitetty/ tuotu: CSS voidaan sijoittaa ulkoiseen tiedostoon ja linkittää linkkielementin kautta.

---

10. Mitä etuja ja haittoja ulkoisilla tyylisivuilla on?

Hyödyt:

• Yhdellä tiedostolla voidaan hallita useita eri tyylejä olevia asiakirjoja.
• Useilla HTML-elementeillä voi olla useita asiakirjoja, joilla voi olla luokkia.
• Tyylien ryhmittelyyn yhdistelmätilanteissa käytetään valitsimen ja ryhmittelyn menetelmiä.

haitoista:

• Tyylitietoja sisältävien asiakirjojen tuomiseen tarvitaan lisälataus.
• Asiakirjan renderöintiä varten on ladattava ulkoinen tyylisivu.
• Ei käytännöllinen pienille tyylimäärittelyille.

---

11. Keskustele sulautettujen tyylisivujen eduista ja haitoista?

Upotettujen tyylisivujen edut:

• Yhdessä asiakirjassa voidaan luoda useita tunnistetyyppejä.
• Tyylit monimutkaisissa tilanteissa voidaan soveltaa käyttämällä Selector- ja Grouping-menetelmiä.
• Ylimääräinen lataus on tarpeeton.

Upotettujen tyylisivujen haitat:

• Useita asiakirjoja ei voi hallita.

---

12. Mitä CSS-valitsin tarkoittaa?

HTML-elementtien merkkijonovastine, jolla ilmoitukset tai niiden joukko ilmoitetaan, ja se on linkki, johon voidaan viitata HTML:n ja Tyylisivun linkittämiseen, on CSS-valitsin.

---

13. Ota käyttöön mediatyypit, jotka CSS sallii?

Asiakirjojen suunnittelu ja räätälöinti toteutetaan median avulla. Käyttämällä median ohjausta ulkoisiin tyylisivuihin, ne voidaan hakea ja käyttää lataamalla ne verkosta.

---

14. Erottaako loogiset tunnisteet fyysisistä tunnisteista?

• Vaikka fyysisiä tunnisteita kutsutaan myös esityslisäksi, loogiset tunnisteet ovat hyödyttömiä esiintymisessä.
• Fyysiset tunnisteet ovat uudempia versioita, kun taas loogiset tunnisteet ovat vanhoja ja keskittyvät sisältöön.

---

15. Erottaa Style Sheet -konsepti HTML:stä?

Vaikka HTML tarjoaa helpon rakennemenetelmän, siitä puuttuu tyyli, toisin kuin Tyylisivut. Lisäksi tyylisivuilla on paremmat selainominaisuudet ja muotoiluvaihtoehdot.

---

16. Kuvaile 'ruleset'?

Sääntöjoukko: Valitsimia voidaan liittää muihin valitsimiin sääntöjoukon tunnistamiseksi.

Siinä on kaksi osaa:

• Valitsin, esim. R ja
• ilmoitus {text-indent: 11pt}

---

17. Kommentti CSS:n kirjainkoolla?

CSS:ssä ei kuitenkaan ole kirjainerottelua, mutta kirjasinperheet, kuvien URL-osoitteet jne. ovat kuitenkin. Vain kun XML sivulla käytetään XHTML DOCTYPE -määrityksiä, CSS on kirjainkoolla.

---

18. Määritä ilmoituslohko?

Aaltosulkeissa olevaa ohjeluetteloa, joka koostuu ominaisuudesta, kaksoispisteestä ja arvosta, kutsutaan ilmoituslohkoksi.
esim.: [ominaisuus 1: arvo 3]

---

19. Listaa eri fonttien attribuutit?

Ne ovat:

• Fonttityyli
• Fontti-variantti
• Fontin paino
• Fontin koko/rivin korkeus
• Font-perhe
• Kuvateksti
• ikoni

 

---

20. Miksi tiedoston lisääminen on helppoa tuomalla se?

Tuominen mahdollistaa ulkoisten arkkien yhdistämisen useille arkeille. Eri tiedostoja ja arkkeja voidaan käyttää eri toimintoihin. Syntaksi:

@import-merkintä, käytetään kanssa tag.

---

21. Mitä luokanvalitsinta käytetään?

Tietylle tyylille ainutlaatuisia valitsimia kutsutaan LUOKAN valitsimiksi. Tämän avulla voidaan tehdä ilmoitus tyylistä ja assosiaatiosta HTML:ään. Syntaksi:

Luokan nimi
se voi olla AZ, az tai numeroita.
.top {font: 14em ;}, luokan valitsin
tämä luokka liittyy elementtiin

---

22. Erottaako luokan valitsin ID-valitsimesta?

Vaikka luokan valitsimelle annetaan kokonaislohko, ID-valitsin suosii vain yhtä elementtiä, joka eroaa muista elementeistä. Toisin sanoen tunnukset ovat ainutlaatuisia, kun taas luokat eivät ole. On mahdollista, että elementillä on sekä luokka että tunnus.

---

23. Voidaanko CSS:ään lisätä useampi kuin yksi ilmoitus?

Kyllä, se voidaan saavuttaa käyttämällä puolipistettä.

---

24. Mitä on pseudoelementit?

Pseudoelementtejä käytetään erikoistehosteiden lisäämiseen joihinkin valitsimiin. CSS:ää käytetään tyylien soveltamiseen HTML-merkinnöissä. Joissakin tapauksissa, kun ylimääräinen merkintä tai tyyli ei ole mahdollista dokumentille, CSS:ssä on saatavana pseudoelementteinä tunnettu ominaisuus. Se mahdollistaa ylimääräisen merkinnän asiakirjaan häiritsemättä varsinaista asiakirjaa.

---

25. Kuinka ohittaa alleviivatut hyperlinkit?

Ohjauslauseita ja ulkoisia tyylisivuja käytetään ohittamaan alleviivatut hyperlinkit.

Esim:

B {

text-decoration: none;

}

<B href="career.html" style="text-decoration: none">link text</B>

 

---

26. Mitä tapahtuu, jos 100 % leveyttä käytetään yhdessä kellukkeiden kanssa koko sivulla?

Float-ilmoitusta tehtäessä 1 pikseli lisätään joka kerta, kun sitä käytetään reunan muodossa, ja sen jälkeen sallitaan vielä enemmän floatia.

---

27. Voiko ominaisuuden oletusarvoa palauttaa CSS:n kautta? Jos kyllä, miten?

CSS:ssä et voi palata takaisin vanhoihin arvoihin oletusarvojen puuttumisen vuoksi. Omaisuus voidaan ilmoittaa uudelleen oletusomaisuuden saamiseksi.

---

28. Listaa käytetyt erilaiset mediatyypit?

Eri medioilla on erilaiset ominaisuudet, koska ne eivät erota kirjainkoosta.

Ne ovat:

• Aural – äänisyntetisaattoreita ja puhetta varten
• Tulosta – näyttää esikatselun sisällöstä tulostettaessa
• Projektio - projisoi CSS:n projektoreille.
• Handheld- käyttää kämmenlaitteita.
• Näyttö - tietokoneiden ja kannettavien näytöt.

---

29. Mikä on CSS Box Model ja mitkä ovat sen elementit?

Tämä laatikko määrittelee CSS-elementtien suunnittelun ja asettelun. Elementit ovat:

Marginaali: ylin kerros, kokonaisrakenne näytetään
Raja: täyttö- ja sisältövaihtoehto, jonka ympärillä on reunus, näytetään. Taustan väri vaikuttaa reunaan.
täyte: Tila näkyy. Taustan väri vaikuttaa reunaan.
Sisältö: Todellinen sisältö näytetään.

---

30. Mikä kontekstuaalinen valitsin on?

Valitsinta, jota käytetään elementin erityistapahtumien valitsemiseen, kutsutaan kontekstivalitsimeksi. Välilyönti erottaa yksittäiset valitsijat. Tällaisessa valitsimessa käsitellään vain kuvion viimeistä elementtiä. Esimerkiksi: TD P TEKSTI {väri: sininen}

---

31. Vertaa RGB-arvoja heksadesimaalivärikoodeihin?

Väri voidaan määrittää kahdella tavalla:

• Väriä edustaa 6 merkkiä eli heksadesimaalinen värikoodaus. Se on numeroiden ja kirjainten yhdistelmä, ja sitä edeltää #. esim.: g {väri: #00cjfi}
• Väriä edustaa punaisen, vihreän ja sinisen sekoitus. Värin arvo voidaan myös määrittää. esim.: rgb(r,g,b): Tässä tyypissä arvot voivat olla kokonaislukujen 0 ja 255 välissä. rgb(r%,g%,b%): näytetään punaisen, vihreän ja sinisen prosenttiosuudet.

---

32. Määrittele kuvaspritit kontekstin kanssa CSS:ään?

Kun joukko kuvia yhdistetään yhdeksi kuvaksi, se tunnetaan nimellä "Image Sprites". Koska jokaisen verkkosivun kuvan lataaminen vie aikaa, kuvaspriitien käyttö lyhentää aikaa ja antaa tietoa nopeasti.

CSS-koodaus:

img.add { width: 60px; height: 55px; background: url (image.god) 0 0; }

 

Tässä tapauksessa käytetään vain tarvittavaa osaa. Käyttäjä voi säästää huomattavasti marginaalia ja aikaa tällä.

---

33. Vertaa ryhmittelyä ja sisäkkäisyyttä CSS:ssä?

Ryhmittely: Valitsimet voidaan ryhmitellä samoilla ominaisuusarvoilla ja koodia pienentää.
Esim:

h1 {

color: blue;

}

h2 {

color: blue;

}

p {

color: blue;

}

 

Koodista voidaan nähdä, että jokaisella elementillä on sama ominaisuus. Uudelleenkirjoittaminen voidaan välttää kirjoittamalla kukin valitsin pilkulla erotettuna.

Sisäkkäisyys: Valitsimen määrittämistä valitsimen sisällä kutsutaan sisäkkäisiksi.

P

{

color: red;

text-align: left;

}

.marked

{

background-color: blue;

}

.marked p

{

color: green;

}

 

---

34. Kuinka elementin ulottuvuus voidaan määrittää?

Mittojen ominaisuudet voidaan määrittää seuraavasti:

• Korkeus
• Max korkeus
• Max leveys
• Min-korkeus
• Min-leveys
• Leveys

---

35. Määrittele CSS:n float-ominaisuus?

Float-ominaisuuden avulla kuvaa voidaan siirtää oikealle tai vasemmalle sen ympärille käärittävän tekstin kanssa. Elementit ennen tämän ominaisuuden käyttöönottoa eivät muuta niiden ominaisuuksia.

---

36. Miten Z-indeksi toimii?

Päällekkäisyyksiä voi esiintyä käytettäessä CSS:ää HTML-elementtien sijoittamiseen. Z-indeksi auttaa määrittämään päällekkäisen elementin. Se on luku, joka voi olla positiivinen tai negatiivinen oletusarvon ollessa nolla.

---

37. Mitä on siro degradaatio?

Jos komponentti vioittuu, se jatkaa toimintaansa kunnolla, vaikka se hajoaakin. Verkkosivun suunnittelussa käytetään uusinta selainsovellusta. Koska se ei ole kaikkien saatavilla, siinä on perustoiminto, joka mahdollistaa sen käytön laajemmalle yleisölle. Jos kuva ei ole katsottavissa, teksti näytetään alt-tunnisteella.

---

38. Mitä on progressiivinen parantaminen?

Se on vaihtoehto sulavalle degradaatiolle, joka keskittyy verkkoon. Toiminnot ovat samat, mutta se tarjoaa lisäedun käyttäjille, joilla on uusin kaistanleveys. Se on ollut näkyvästi käytössä viime aikoina, kun mobiili-internet-yhteydet ovat laajentaneet pohjaansa.

---

39. Kuinka taaksepäin yhteensopivuus voidaan suunnitella CSS:ssä?

HTML-taulukkomenetelmiä tehdään yhteistyössä CSS:n kanssa ja niitä käytetään sen mukaisesti.

---

40. Miten kuvan alla oleva rako voidaan poistaa?

Koska kuvat ovat tekstin sisäisiä elementtejä, niitä käsitellään samalla tavalla kuin tekstejä, joten jäljelle jää aukko, jonka voi poistaa seuraavasti:

CSS

img { display: block ; }

 

---

41. Miksi @import on vain yläreunassa?

@import on suositeltava vain yläreunassa, jotta vältetään ylivoimaiset säännöt. Yleisesti ottaen sijoitusjärjestystä noudatetaan useimmissa ohjelmointikielissä, kuten Java, Modula jne. C:ssä # on näkyvä esimerkki @importin olevan yläosassa.

---

42. Kumpi seuraavista on ennakkotapaus: CSS-ominaisuudet vai HTML-menettelyt?

CSS on ennakkotapaus HTML-menettelyihin verrattuna. Selaimet, joissa ei ole CSS-tukea, näyttävät HTML-attribuutteja.

---

43. Mikä on Inline-tyyli?

Inline-tyyliä CSS:ssä käytetään lisäämään tyyliä yksittäisiin HTML-elementteihin.

---

44. Miten kommentteja voidaan lisätä CSS:ään?

CSS:n kommentit voidaan lisätä /* ja */.

---

45. Määritä attribuuttivalitsin ?

Sen määrittelee joukko elementtejä, arvo ja sen osat.

---

46. ​​Määrittele ominaisuus?

Tyyli, joka auttaa vaikuttamaan CSS:ään. Esimerkiksi FONT. Niillä on vastaavat arvot tai ominaisuudet, kuten FONTilla on erilainen tyyli, kuten lihavoitu, kursivoitu jne.

---

47. Mikä on vaihtoehtoinen tyylisivu?

Vaihtoehtoiset tyylisivut -toiminnon avulla käyttäjä voi valita tyylin, jolla sivu näytetään, käyttämällä Näytä>sivun tyyli -valikkoa. Vaihtoehtoisen tyylisivun kautta käyttäjä voi nähdä useita versioita sivusta tarpeidensa ja mieltymystensä mukaan.

---

48. Ovatko lainausmerkit pakollisia URL-osoitteissa?

Lainaukset ovat valinnaisia ​​URL-osoitteissa, ja ne voivat olla yksittäisiä tai kaksinkertaisia.

---

49. Mikä on at-rule?

Sääntöä, jota sovelletaan koko taulukkoon eikä osittain, kutsutaan at-ruleksi. Sitä edeltää @ ja sen jälkeen AZ, az tai 0-9.

---

50. Kuinka CSS voidaan peräkkäin sekoittaa käyttäjän henkilökohtaiseen taulukkoon?

Ominaisuudet voidaan asettaa suositeltuihin paikkoihin ja dokumenttia muokata CSS:ää varten, jotta se sekoittuu käyttäjän henkilökohtaiseen arkkiin.

Nämä haastattelukysymykset auttavat myös viva-asioissasi. Kaikilla toimialoilla verkkosivustojen ja verkkosovellusten käyttö lisääntyy päivä päivältä, ja CSS on olennainen osa houkuttelevien verkkosivustojen rakentamista. UI/UX- ja Web-suunnittelijoille, joilla on hyvä CSS:n ja HTML:n tuntemus, on siis valtava kysyntä.