Selektor CSS
CSS selektory sú chrbtovou kosťou každej štýlovej webovej stránky. Zameriavajú sa na prvky HTML na vašich stránkach, čo vám umožňuje pridávať štýly na základe ich ID, triedy, typu, atribútu a ďalších. Táto príručka sa ponorí do zložitosti selektorov CSS a ich kľúčovej úlohy pri zlepšovaní estetiky a používateľského zážitku vašich webových stránok.
Typy selektorov CSS
Selektory CSS existujú v rôznych typoch, z ktorých každý má svoj jedinečný spôsob výberu prvkov HTML. Poďme ich preskúmať:
| Selektor CSS | Popis |
|---|---|
| Jednoduché selektory | Používa sa na výber prvkov HTML na základe ich názvu prvku, ID, atribútov atď |
| Univerzálny selektor | Vyberie všetky prvky na stránke. |
| Výber atribútov | Zacieľuje prvky na základe ich hodnôt atribútov. |
| Selektor pseudotriedy | Vyberá prvky na základe ich stavu alebo polohy, ako napr :hover> pre efekty vznášania. |
| Selektory kombinátorov | Kombinujte selektory na určenie vzťahov medzi prvkami, ako sú potomkovia ( > ) alebo dieťa ( >> ). |
| Selektor pseudoprvkov | Vyberá konkrétne časti prvku, ako napr ::before> alebo ::after> . |
Obsah
- Typy selektorov CSS
- Jednoduché selektory
- Selektor prvkov
- Id Selector
- Výber triedy
- Univerzálny selektor
- Výber skupiny
- Výber atribútov
- Selektor pseudotriedy
- Selektor pseudoprvkov
Jednoduché selektory
Jednoduché selektory obsahujú nižšie uvedené triedy.
| Jednoduchý selektor | Popis |
|---|---|
| Selektor prvkov | Vyberá prvky HTML na základe ich názvov značiek. |
| Id Selector | Zacieľuje na prvok HTML so špecifickým atribútom id. |
| Výber triedy | Vyberie prvky s konkrétnym atribútom triedy. |
Príklad: V tomto príklade napíšeme kód, aby sme lepšie porozumeli selektorom a ich použitiu.
HTML Názov selektora CSS> <link rel='stylesheet' href='style.css' />hlava> <body> <h1>Vzorový nadpis1> <p>Toto je obsah v prvom odsekup> <div id='div-container'>Toto je div s id div-container div> <p>Toto je odsek s triedou paragraf-trieda p> telo> html> </pre> </code> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Na vyššie uvedený príklad použijeme pravidlá CSS. </span> </p> <h2 id='element-selector'> <b> <strong>Selektor prvkov </strong> </b> </h2> <p dir='ltr'> <span>The </span> <span>selektor prvkov </span> <span>vyberá prvky HTML na základe názvu prvku (alebo značky), napríklad p, h1, div, span atď. </span> </p> <p dir='ltr'> <b> <strong>POZNÁMKA : </strong> </b> <span>Vo vyššie uvedenom príklade je použitý nasledujúci kód. Môžete vidieť, že pravidlá CSS platia pre všetkých </span> <span> </span> </p> <p> <span>značky a </span> </p> <h1>značky. <p> </p> </h1> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>h1 { color: red; font-size: 3rem; } p { color: white; background-color: gray; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt='CSS-Element-Selectors-Example-output'> <p>Výstup CSS Element Selector </p> <h2 id='id-selector'> <b> <strong>Id Selector </strong> </b> </h2> <p dir='ltr'> <span>The </span> <b> <strong>selektor ID </strong> </b> <span>používa </span> <i> <em>atribút id </em> </i> <span>prvku HTML na výber konkrétneho prvku. </span> <b> <strong> </strong> </b> <span>An </span> <b> <strong>id </strong> </b> <span>prvku je jedinečný na stránke na použitie </span> <b> <strong>id </strong> </b> <span>selektor. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Nasledujúci kód je použitý vo vyššie uvedenom príklade pomocou selektora id. </span> </p> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>#div-container{ color: blue; background-color: gray; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-2.webp' alt='CSS-Id-selectors-example-output'> <p>Príklad výstupu selektorov CSS ID </p> <h2 id='class-selector'> <b> <strong>Výber triedy </strong> </b> </h2> <p dir='ltr'> <span>The </span> <b> <strong>selektor triedy </strong> </b> <span>vyberie prvky HTML so špecifickým atribútom triedy. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Nasledujúci kód je použitý vo vyššie uvedenom príklade pomocou selektora triedy. Ak chcete použiť selektor triedy, musíte použiť ( . ), za ktorým nasleduje názov triedy v CSS. Toto pravidlo sa použije na prvok HTML s atribútom class </span> <i> <em>odsek-trieda </em> </i> <span> </span> </p> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>.paragraph-class { color:white; font-family: monospace; background-color: purple; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt='CSS-Class-Selectors-Example-Output'> <p>Príklad výstupu selektora triedy CSS </p> <h2 id='universal-selector'> <b> <strong>Univerzálny selektor </strong> </b> </h2> <p dir='ltr'> <span>The </span> <span>Univerzálny volič </span> <span>(*) v CSS sa používa na výber všetkých prvkov v dokumente HTML. Zahŕňa aj ďalšie prvky, ktoré sú vo vnútri pod iným prvkom. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Nasledujúci kód je použitý vo vyššie uvedenom príklade pomocou univerzálneho voliča. Toto pravidlo CSS sa použije na každý prvok HTML na stránke: </span> </p> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>* { color: white; background-color: black; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt='CSS-Universal-Selector-Example-Output'> <p>Príklad výstupu CSS univerzálneho selektora </p> <h2 id='group-selector'> <b> <strong>Výber skupiny </strong> </b> </h2> <p dir='ltr'> <span>The </span> <b> <strong>Selektor skupiny </strong> </b> <span>sa používa na úpravu štýlu všetkých prvkov oddelených čiarkami rovnakým štýlom. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Predpokladajme, že chcete použiť spoločné štýly na rôzne selektory, namiesto samostatného písania pravidiel ich môžete napísať do skupín, ako je uvedené nižšie. </span> </p> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt='CSS-Group-Selector-Example-Output'> <p>Príklad výstupu selektora skupiny CSS </p> <h2 id='attribute-selector'> <b> <strong>Výber atribútov </strong> </b> </h2> <p dir='ltr'> <span>The </span> <b> <strong>selektor atribútov </strong> </b> <span>[atribút] sa používa na výber prvkov so špecifikovaným atribútom alebo hodnotou atribútu. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Nasledujúci kód je použitý vo vyššie uvedenom príklade pomocou selektora atribútov. Toto pravidlo CSS sa použije na každý prvok HTML na stránke: </span> </p> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>[href] { background-color: lightgreen; color: black; font-family: monospace; font-size: 1rem; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt='CSS-Atribút-Selekcie-Príklad-Výstup'> <p>Príklad výstupu výberu atribútov CSS </p> <h2 id='pseudoclass-selector'> <b> <strong>Selektor pseudotriedy </strong> </b> </h2> <p dir='ltr'> <span>Používa sa na štýl špeciálneho typu stavu akéhokoľvek prvku. Napríklad- Používa sa na štýl prvku, keď nad ním prejde kurzor myši. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Jednobodku (:) používame v prípade a </span> <span>Selektor pseudotriedy </span> <span>. </span> </p> <p dir='ltr'> <b> <strong>Syntax: </strong> </b> </p> <pre>Selector:Pseudo-Class { Property: Value; } </pre> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>h1:hover{ background-color: aqua; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt='CSS-Pseudo-Selector-Example-Output'> <p>Príklad výstupu CSS pseudoselektora </p> <h2 id='pseudoelement-selector'> <b> <strong>Selektor pseudoprvkov </strong> </b> </h2> <p dir='ltr'> <span>Používa sa na úpravu akejkoľvek konkrétnej časti prvku. Napríklad - Používa sa na úpravu prvého písmena alebo prvého riadku akéhokoľvek prvku. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Dvojbodku (::) používame v prípade a </span> <span>Selektor pseudoprvkov </span> <span>. </span> </p> <p dir='ltr'> <b> <strong>Syntax: </strong> </b> </p> <pre>Selector:Pseudo-Element{ Property:Value; } </pre> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>p::first-line{ background-color: goldenrod; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt='CSS-Pseudo-Element-Selector-Example-Output'> <p>Príklad výstupu selektora Pseudoprvku CSS </p> <p dir='ltr'> <br> </p> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Zdieľať </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Selektor CSS&url=https://www.techcodeview.com/sk/css-selectors"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/sk/css-selectors"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/sk/css-selectors&title=Selektor CSS"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Mohlo By Sa Vám Páčiť </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/sk/linear-regression-machine-learning" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/ai-ml-ds-with-python/49/linear-regression-machine-learning.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Lineárna regresia v strojovom učení" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/sk/linear-regression-machine-learning">Lineárna regresia v strojovom učení </a>
</h4>
</div> <div class="group">
<a href="/sk/binomial-random-variables" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/mathematical/72/binomial-random-variables.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Binomické náhodné premenné" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/sk/binomial-random-variables">Binomické náhodné premenné </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Najlepšie Články </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/latex-lists">
<img src="https://techcodeview.com/img/latex-tutorial/24/latex-lists.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="LATEXOVÉ ZOZNAMY" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/latex-lists" class="hover:text-tech-500 transition-colors line-clamp-3">LATEXOVÉ ZOZNAMY </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/java-convert-double-string">
<img src="https://techcodeview.com/img/java-conversion/97/java-convert-double-string.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Java Convert double to String" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/java-convert-double-string" class="hover:text-tech-500 transition-colors line-clamp-3">Java Convert double to String </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/shell-sort-algorithm">
<img src="https://techcodeview.com/img/ds-tutorial/72/shell-sort-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Algoritmus triedenia škrupín" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/shell-sort-algorithm" class="hover:text-tech-500 transition-colors line-clamp-3">Algoritmus triedenia škrupín </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/remote-procedure-call-operating-system">
<img src="https://techcodeview.com/img/it-problems-solutions/45/remote-procedure-call-operating-system.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vzdialené volanie procedúr (RPC) v operačnom systéme" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/remote-procedure-call-operating-system" class="hover:text-tech-500 transition-colors line-clamp-3">Vzdialené volanie procedúr (RPC) v operačnom systéme </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/what-is-docker">
<img src="https://techcodeview.com/img/it-problems-solutions/39/what-is-docker.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Čo je Docker?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/what-is-docker" class="hover:text-tech-500 transition-colors line-clamp-3">Čo je Docker? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/different-types-joins-pandas">
<img src="https://techcodeview.com/img/picked/96/different-types-joins-pandas.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Rôzne typy spojení v Pandas" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/different-types-joins-pandas" class="hover:text-tech-500 transition-colors line-clamp-3">Rôzne typy spojení v Pandas </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/how-get-into-bs-md-program-1311130">
<img src="https://techcodeview.com/img/blog/74/how-get-into-bs-md-program.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ako sa dostať do programu BS/MD: Sprievodca krok za krokom" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/how-get-into-bs-md-program-1311130" class="hover:text-tech-500 transition-colors line-clamp-3">Ako sa dostať do programu BS/MD: Sprievodca krok za krokom </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/how-check-data-type-java">
<img src="https://techcodeview.com/img/java-tutorial/98/how-check-data-type-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ako skontrolovať typ údajov v jazyku Java?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/how-check-data-type-java" class="hover:text-tech-500 transition-colors line-clamp-3">Ako skontrolovať typ údajov v jazyku Java? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/bash-substring">
<img src="https://techcodeview.com/img/bash-tutorial/53/bash-substring.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Podreťazec Bash" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/bash-substring" class="hover:text-tech-500 transition-colors line-clamp-3">Podreťazec Bash </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/json-dump-python">
<img src="https://techcodeview.com/img/python-json/48/json-dump-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="json.dump() v Pythone" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/json-dump-python" class="hover:text-tech-500 transition-colors line-clamp-3">json.dump() v Pythone </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Kategórie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/sk/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/sk/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Konverzia Java
</a> <a href="/sk/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Matematika
</a> <a href="/sk/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Kolekcie Java
</a> <a href="/sk/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Rozdiely
</a> <a href="/sk/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java Reťazec
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Zaujímavé Články </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/uncategorized/44/how-update-my-location-settings-snap-map.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ako aktualizovať nastavenia polohy na mape Snap" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sk/uncategorized/">Nezaradené Do Kategórie </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/how-update-my-location-settings-snap-map-24224">Ako aktualizovať nastavenia polohy na mape Snap </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/mysql-tutorial/46/mysql-joins.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="MySQL sa pripája" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sk/mysql-tutorial/">Výukový Program Mysql </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/mysql-joins">MySQL sa pripája </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/typescript-tutorial/42/difference-between-typescript.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Rozdiel medzi TypeScript a ES6" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sk/typescript-tutorial/">Výukový Program Typescript </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/difference-between-typescript">Rozdiel medzi TypeScript a ES6 </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/category/42/what-is-full-form-eta.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Aká je úplná forma ETA" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sk/category/">Kategória </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/what-is-full-form-eta">Aká je úplná forma ETA </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/amazon/83/hamiltonian-cycle.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Hamiltonovský cyklus" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sk/amazon/">Amazon </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/hamiltonian-cycle">Hamiltonovský cyklus </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/microsoft-azure-tutorial/82/what-is-microsoft-azure-subscription.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Čo je predplatné Microsoft Azure?" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sk/microsoft-azure-tutorial/">Kurz Microsoft Azure </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/what-is-microsoft-azure-subscription">Čo je predplatné Microsoft Azure? </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Všetky Práva Vyhradené |
<a href="//www.techcodeview.com/cs/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Odmietnutie Zodpovednosti </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nás </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Zásady Ochrany Osobných Údajov </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>