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/transition-table" 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/automata-tutorial/15/transition-table.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Prechodová tabuľka" 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/transition-table">Prechodová tabuľka </a>
</h4>
</div> <div class="group">
<a href="/sk/differences-between-hardware" 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/computer/78/differences-between-hardware.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Rozdiely medzi hardvérom a softvérom" 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/differences-between-hardware">Rozdiely medzi hardvérom a softvérom </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/how-remove-unused-icons-from-windows-desktop">
<img src="https://techcodeview.com/img/computer/11/how-remove-unused-icons-from-windows-desktop.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ako odstrániť nepoužívané ikony z pracovnej plochy Windows?" 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-remove-unused-icons-from-windows-desktop" class="hover:text-tech-500 transition-colors line-clamp-3">Ako odstrániť nepoužívané ikony z pracovnej plochy Windows? </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/decorators-python">
<img src="https://techcodeview.com/img/it-problems-solutions/28/decorators-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Dekoratéri 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/decorators-python" class="hover:text-tech-500 transition-colors line-clamp-3">Dekoratéri v Pythone </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-mount-file-system-linux-mount-command">
<img src="https://techcodeview.com/img/picked/30/how-mount-file-system-linux-mount-command.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ako pripojiť súborový systém v systéme Linux | príkaz mount" 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-mount-file-system-linux-mount-command" class="hover:text-tech-500 transition-colors line-clamp-3">Ako pripojiť súborový systém v systéme Linux | príkaz mount </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/decision-tree-classification-algorithm">
<img src="https://techcodeview.com/img/machine-learning/23/decision-tree-classification-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Algoritmus klasifikácie rozhodovacieho stromu" 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/decision-tree-classification-algorithm" class="hover:text-tech-500 transition-colors line-clamp-3">Algoritmus klasifikácie rozhodovacieho stromu </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-colors-make-brown-13192">
<img src="https://techcodeview.com/img/blog/44/what-colors-make-brown.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Aké farby robia hnedú? Ako vyrobiť 5 bežných odtieňov" 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-colors-make-brown-13192" class="hover:text-tech-500 transition-colors line-clamp-3">Aké farby robia hnedú? Ako vyrobiť 5 bežných odtieňov </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/27-best-liberal-arts-colleges-country-1311610">
<img src="https://techcodeview.com/img/blog/10/27-best-liberal-arts-colleges-country.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="27 najlepších vysokých škôl slobodných umení v krajine" 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/27-best-liberal-arts-colleges-country-1311610" class="hover:text-tech-500 transition-colors line-clamp-3">27 najlepších vysokých škôl slobodných umení v krajine </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/introduction-jdbc">
<img src="https://techcodeview.com/img/java-advanced/53/introduction-jdbc.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Úvod do JDBC (Java Database Connectivity)" 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/introduction-jdbc" class="hover:text-tech-500 transition-colors line-clamp-3">Úvod do JDBC (Java Database Connectivity) </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/best-analysis-valley-ashes-great-gatsby-131272">
<img src="https://techcodeview.com/img/blog/27/best-analysis-valley-ashes-great-gatsby.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Najlepšia analýza: Údolie popola vo Veľkom Gatsbym" 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/best-analysis-valley-ashes-great-gatsby-131272" class="hover:text-tech-500 transition-colors line-clamp-3">Najlepšia analýza: Údolie popola vo Veľkom Gatsbym </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-does-act-stand-1311584">
<img src="https://techcodeview.com/img/blog/31/what-does-act-stand.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Čo znamená ACT? Kompletný príbeh" 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-does-act-stand-1311584" class="hover:text-tech-500 transition-colors line-clamp-3">Čo znamená ACT? Kompletný príbeh </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-zema-dosage-1311550">
<img src="https://techcodeview.com/img/blog/58/what-is-zema-dosage.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Čo je Zema? Dávkovanie, účinky a bezpečnosť" 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-zema-dosage-1311550" class="hover:text-tech-500 transition-colors line-clamp-3">Čo je Zema? Dávkovanie, účinky a bezpečnosť </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/java-swing/54/how-make-an-executable-jar-file-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ako vytvoriť spustiteľný súbor jar v jazyku Java" 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/java-swing/">Java Swing </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/how-make-an-executable-jar-file-java">Ako vytvoriť spustiteľný súbor jar v jazyku Java </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/maths/75/what-is-10-11th-power.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Čo je 10 až 11 moc?" 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/maths/">Matematika </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/what-is-10-11th-power">Čo je 10 až 11 moc? </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/python/54/working-with-zip-files-in-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Práca so súbormi zip v Pythone" 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/python/">Python </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/working-with-zip-files-in-python">Práca so súbormi zip v Pythone </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/picked/45/compiling-with-g.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kompilácia pomocou g++" 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/picked/">Vybrané </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/compiling-with-g">Kompilácia pomocou g++ </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/software-testing/58/functional-testing.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Funkčné testovanie" 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/software-testing/">Testovanie Softvéru </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/functional-testing">Funkčné testovanie </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/picked/30/declaring-an-array-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Deklarovanie poľa v Pythone" 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/picked/">Vybrané </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/declaring-an-array-python">Deklarovanie poľa v Pythone </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/tr/">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>