50 nejčastějších otázek a odpovědí na pohovory CSS (2025)

Zde jsou otázky a odpovědi na pohovor CSS (CSS3) pro začátečníky i zkušené kandidáty, aby získali svou vysněnou práci.

Zdarma ke stažení PDF: Otázky k rozhovoru CSS

1. Co je CSS?

Úplnou formou CSS jsou kaskádové styly. Je to stylovací jazyk, který je dostatečně jednoduchý HTML Prvky. Je populární ve webdesignu a jeho aplikace je běžná také v XHTML.

---

2. Jaký je původ CSS?

Standard Generalized Markup Language znamenal počátek stylů v 1980. letech.

---

3. Jaké jsou různé varianty CSS?

Variace pro CSS jsou:

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

---

4. Jaká jsou omezení CSS?

Omezení jsou:

•  Vzestup pomocí selektorů není možný
• Omezení vertikálního řízení
• Žádné výrazy
• Žádná deklarace sloupce
• Pseudotřída neřízená dynamickým chováním
• Pravidla, styly, cílení na konkrétní text není možné

---

5. Jaké jsou výhody CSS?

Výhody jsou:

• Šířka pásma
• Konzistence na celém webu
• Přeformátování stránky
• Přístupnost
• Obsah oddělený od prezentace

---

6. Co jsou to CSS frameworky?

Jedná se o předem naplánované knihovny, které umožňují snazší a standardům vyhovující stylování webových stránek pomocí jazyka CSS.

---

7. Jak lze pomocí CSS1 vycentrovat prvky bloku?

Prvky na úrovni bloku lze vycentrovat pomocí:

Vlastnosti margin-left a margin-right lze nastavit na nějakou explicitní hodnotu:

BODY {

width: 40em;

background: fluorescent;

}

P {

width: 30em;

margin-right: auto;

margin-left: auto

}

V tomto případě bude levý a pravý okraj každý, pět ems široký, protože rozdělují deset ems zbylých z (40em-30em). Nastavení explicitní šířky pro prvek BODY bylo zbytečné; zde to bylo provedeno pro jednoduchost.

---

8. Kdo spravuje specifikace CSS?

World Wide Web Consortium udržuje specifikace CSS.

---

9. Kolika způsoby lze CSS integrovat jako webovou stránku?

CSS lze integrovat třemi způsoby:

• Inline: Atribut Styl lze použít k použití prvků HTML CSS.
• Embedded: Element Head může mít element Style, do kterého lze umístit kód.
• Linked/Imported: CSS lze umístit do externího souboru a propojit pomocí odkazového prvku.

---

10. Jaké výhody a nevýhody mají externí styly?

Výhody:

• Jeden soubor lze použít k ovládání více dokumentů s různými styly.
• Více prvků HTML může mít mnoho dokumentů, které mohou mít třídy.
• Pro seskupení stylů ve složených situacích se používají metody jako selektor a seskupování.

Nedostatek:

• Chcete-li importovat dokumenty s informacemi o stylu, je potřeba další stažení.
• Pro vykreslení dokumentu by měla být načtena externí šablona stylů.
• Není praktické pro malé definice stylu.

---

11. Diskutujte o výhodách a nevýhodách vložených stylů?

Přednosti vložených stylů:

• V jednom dokumentu lze vytvořit více typů značek.
• Styly lze ve složitých situacích použít pomocí metod Selector a Grouping.
• Další stahování je zbytečné.

Nevýhody vložených šablon stylů:

• Nelze ovládat více dokumentů.

---

12. Co znamená CSS selektor?

Řetězcový ekvivalent prvků HTML, pomocí kterého se deklarují deklarace nebo jejich sada, a je to odkaz, na který lze odkazovat pro propojení HTML a šablony stylů je selektor CSS.

---

13. Zapište typy médií, které CSS umožňuje?

Návrh a přizpůsobení dokumentů jsou poskytovány pomocí médií. Použitím kontroly médií nad externími šablonami stylů je lze načíst a používat jejich načtením ze sítě.

---

14. Odlišíte logické značky od fyzických?

• Zatímco fyzické značky jsou také označovány jako prezentační značky, logické značky jsou pro vzhled k ničemu.
• Fyzické značky jsou novější verze, zatímco logické značky jsou staré a soustředí se na obsah.

---

15. Odlišit koncept stylů od HTML?

Zatímco HTML poskytuje snadnou metodu struktury, postrádá styl, na rozdíl od šablon stylů. Kromě toho mají šablony stylů lepší možnosti prohlížeče a možnosti formátování.

---

16. Popište „soubor pravidel“?

Sada pravidel: Selektory mohou být připojeny k dalším selektorům, které budou identifikovány sadou pravidel.

Má dvě části:

• Selektor, např. R a
• prohlášení {text-odsazení: 11pt}

---

17. Komentář k rozlišování malých a velkých písmen v CSS?

Ačkoli CSS nerozlišuje velká a malá písmena, přesto jsou to rodiny písem, adresy URL obrázků atd. Pouze když XML Na stránce se používají deklarace spolu s XHTML DOCTYPE, CSS rozlišuje malá a velká písmena.

---

18. Definujte blok deklarace?

Katalog směrů ve složených závorkách sestávající z vlastnosti, dvojtečky a hodnoty se nazývá deklarační blok.
např.: [vlastnost 1: hodnota 3]

---

19. Uveďte atributy různých písem?

Jedná se o:

• Styl fontu
• Varianta písma
• Tloušťka písma
• Velikost písma/výška řádku
• Rodina písem
• Titulek
• Ikona

 

---

20. Proč je snadné vložit soubor jeho importem?

Import umožňuje kombinovat externí listy a vložit je do mnoha listů. Pro různé funkce lze použít různé soubory a listy. Syntax:

@import notace, používá se s tag.

---

21. Jaké je použití selektoru třídy?

Selektory, které jsou jedinečné pro určitý styl, se nazývají selektory CLASS. Prostřednictvím toho lze provést deklaraci stylu a spojení s HTML. Syntax:

Jméno třídy
může to být AZ, az nebo číslice.
.top {font: 14em ;}, výběr třídy
tato třída je spojena s elementem

---

22. Rozlišit selektor třídy od selektoru ID?

Zatímco selektoru třídy je přidělen celkový blok, selektor ID preferuje pouze jeden prvek, který se liší od ostatních prvků. Jinými slovy, ID jsou jedinečné, zatímco třídy nikoli. Je možné, že prvek má třídu i ID.

---

23. Lze do CSS přidat více než jednu deklaraci?

Ano, lze toho dosáhnout pomocí středníku.

---

24. Co je to Pseudoprvky?

Pseudoprvky se používají k přidání speciálních efektů do některých selektorů. CSS se používá k aplikaci stylů v značkách HTML. V některých případech, kdy není pro dokument možné dodatečné označení nebo styl, pak je v CSS dostupná funkce známá jako pseudo-prvky. Umožní dodatečnou přirážku k dokumentu, aniž by došlo k narušení skutečného dokumentu.

---

25. Jak potlačit podtržení hypertextových odkazů?

Ovládací příkazy a externí šablony stylů se používají k potlačení podtržení hypertextových odkazů.

Např:

B {

text-decoration: none;

}

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

 

---

26. Co se stane, když se použije 100% šířka spolu s plovoucími prvky po celé stránce?

Při vytváření deklarace float je přidán 1 pixel pokaždé, když je použit ve formě ohraničení, a poté je povoleno ještě více float.

---

27. Lze pomocí CSS obnovit výchozí hodnotu vlastnosti? Pokud ano, jak?

V CSS se nemůžete vrátit zpět ke starým hodnotám kvůli nedostatku výchozích hodnot. Vlastnost lze znovu deklarovat a získat tak výchozí vlastnost.

---

28. Uveďte různé používané typy médií?

Různá média mají různé vlastnosti, protože nerozlišují malá a velká písmena.

Jedná se o:

• Aural – pro zvukové syntezátory a řeč
• Tisk – poskytuje náhled obsahu při tisku
• Projekce – promítá CSS na projektory.
• Handheld – používá ruční zařízení.
• Obrazovky počítačů a laptopů.

---

29. Co je CSS Box Model a jaké jsou jeho prvky?

Tento box definuje design a rozložení prvků CSS. Prvky jsou:

Okraj: nejvyšší vrstva, je zobrazena celková struktura
Hranice: zobrazí se možnost odsazení a obsahu s ohraničením. Barva pozadí ovlivňuje ohraničení.
Vycpávka: Zobrazí se mezera. Barva pozadí ovlivňuje ohraničení.
Obsah: Zobrazí se aktuální obsah.

---

30. Co je kontextový selektor?

Selektor používaný k výběru speciálních výskytů prvku se nazývá kontextový selektor. Jednotlivé voliče odděluje mezera. V tomto druhu selektoru je adresován pouze poslední prvek vzoru. Např.: TD P TEXT {barva: modrá}

---

31. Porovnejte hodnoty RGB s hexadecimálními barevnými kódy?

Barvu lze zadat dvěma způsoby:

• Barva je reprezentována 6 znaky, tj. hexadecimálním barevným kódováním. Je to kombinace čísel a písmen a předchází mu #. např.: g {barva: #00cjfi}
• Barvu představuje směs červené, zelené a modré. Lze také zadat hodnotu barvy. např.: rgb(r,g,b): V tomto typu mohou být hodnoty v rozmezí celých čísel 0 až 255. rgb(r%,g%,b%): zobrazí se červená, zelená a modrá procenta.

---

32. Definujte obrazové sprity s kontextem pro CSS?

Když je sada obrázků spojena do jednoho obrázku, nazývá se to „Image Sprites“. Protože načítání každého obrázku na webové stránce spotřebovává čas, používání obrázkových skřítků zkracuje čas a poskytuje informace rychle.

CSS kódování:

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

 

V tomto případě se použije pouze potřebná část. Uživatel tak může ušetřit značnou rezervu a čas.

---

33. Porovnat seskupování a vnořování v CSS?

Seskupování: Selektory lze seskupovat se stejnými hodnotami vlastnosti a kód se zmenšuje.
Např.:

h1 {

color: blue;

}

h2 {

color: blue;

}

p {

color: blue;

}

 

Z kódu je vidět, že každý prvek sdílí stejnou vlastnost. Přepisování se lze vyhnout tak, že každý selektor napíšete oddělený čárkou.

Vnoření: Určení selektoru v selektoru se nazývá vnoření.

P

{

color: red;

text-align: left;

}

.marked

{

background-color: blue;

}

.marked p

{

color: green;

}

 

---

34. Jak lze definovat rozměr prvku?

Vlastnosti dimenze lze definovat:

• Výška
• Maximální výška
• Maximální šířka
• Min-výška
• Min. šířka
• Šířka

---

35. Definovat float vlastnost CSS?

Pomocí vlastnosti float lze obrázek posunout doprava nebo doleva spolu s textem, který má být obtékán. Prvky před použitím této vlastnosti nemění své vlastnosti.

---

36. Jak funguje Z index?

Při použití CSS pro umístění prvků HTML může docházet k překrývání. Z index pomáhá určit překrývající se prvek. Je to číslo, které může být kladné nebo záporné, výchozí hodnota je nula.

---

37. Co je ladná degradace?

V případě, že komponenta selže, bude i nadále správně fungovat i v případě ladné degradace. Při návrhu webové stránky se používá nejnovější aplikace prohlížeče. Protože není dostupný pro každého, existuje základní funkcionalita, která umožňuje jeho využití širšímu publiku. V případě, že obrázek není k dispozici pro prohlížení, zobrazí se text se značkou alt.

---

38. Co je progresivní vylepšení?

Je to alternativa k půvabné degradaci, která se soustředí na záležitost webu. Funkce je stejná, ale uživatelům s nejnovější šířkou pásma poskytuje další výhodu. V poslední době se výrazně používá díky mobilnímu připojení k internetu, které rozšiřuje jejich základnu.

---

39. Jak lze navrhnout zpětnou kompatibilitu v CSS?

Metody listů HTML spolupracují s CSS a odpovídajícím způsobem se používají.

---

40. Jak lze odstranit mezeru pod obrázkem?

Vzhledem k tomu, že s obrázky, které jsou vloženými prvky, se zachází stejně jako s texty, zbývá tedy mezera, kterou lze odstranit:

CSS

img { display: block ; }

 

---

41. Proč je @import pouze nahoře?

@import je upřednostňován pouze nahoře, aby se předešlo jakýmkoli převažujícím pravidlům. Obecně platí, že pořadí pořadí je dodržováno ve většině programovacích jazyků, jako je Java, Modula atd. V C je # významným příkladem toho, že @import je nahoře.

---

42. Která z následujících možností je precedentnější: vlastnosti CSS nebo procedury HTML?

CSS má větší přednost před HTML procedurami. Prohlížeče, které nemají podporu CSS, zobrazují atributy HTML.

---

43. Co je to Inline styl?

Styl Inline v CSS se používá k přidání stylů do jednotlivých prvků HTML.

---

44. Jak lze v CSS přidávat komentáře?

Komentáře v CSS lze přidat pomocí /* a */.

---

45. Definovat selektor atributů ?

Je definován souborem prvků, hodnotou a jejími částmi.

---

46. ​​Definujte majetek?

Styl, který pomáhá ovlivňovat CSS. Např. FONT. Mají v sobě odpovídající hodnoty nebo vlastnosti, jako FONT má jiný styl, jako je tučné písmo, kurzíva atd.

---

47. Co je alternativní šablona stylů?

Alternativní šablony stylů umožňují uživateli vybrat styl, ve kterém se stránka zobrazí, pomocí nabídky zobrazení>styl stránky. Prostřednictvím alternativní šablony stylů může uživatel vidět více verzí stránky podle svých potřeb a preferencí.

---

48. Jsou uvozovky v URL povinné?

Uvozovky jsou v URL volitelné a mohou být jednoduché nebo dvojité.

---

49. Co je to pravidlo?

Pravidlo, které je použitelné v celém listu a ne částečně, se nazývá at-rule. Před ním následuje znak @ následovaný AZ, az nebo 0-9.

---

50. Jak lze kaskádově kombinovat CSS s osobním listem uživatele?

Vlastnosti lze nastavit na doporučených místech a upravit dokument pro CSS tak, aby se míchal s osobním listem uživatele.

Tyto otázky na pohovoru také pomohou ve vašem viva (orals). V každém odvětví se používání webových stránek a webových aplikací každým dnem zvyšuje a CSS je nezbytnou součástí vytváření atraktivních webových stránek. Existuje tedy obrovská poptávka po UI/UX a webových designérech, kteří mají dobré znalosti CSS s HTML.