Ha van 20 perced, próbáld ki magad alapszintű tesztünkön, vajon Te mennyire vagy képben az alábbi CSS kérdésekkel kapcsolatban. A válaszokra kattintva azonnal láthatod, hogy helyesen döntöttél-e, ezért csak akkor nyomj rá, ha biztos vagy a választásban. A kérdéseket figyelmesen olvasd el, és ha van kedved, tudasd velünk az eredményedet hozzászólásban.
Mit jelent CSS-ben a vessző?
#top, #bottom
Nincs ilyen CSS-ben
Csoportosításra használjuk, amikor ugyanaz a szabály több szelektorra is vonatkozik
Egymás után következő elemek tulajdonságainak megadására használjuk
Kiválasztja a testvéreket (azonos szülővel rendelkezőket)
Mit jelent a > kombinátor?
ul > li > a
Közvetlen gyermek elem
Kiválasztja a testvéreket
Csoportosításra használjuk, amikor ugyanaz a szabály több szelektorra is vonatkozik
Nincs ilyen CSS-ben
Mit jelent a + kombinátor?
#menu + div
Csoportosításra használjuk, amikor ugyanaz a szabály több szelektorra is vonatkozik
Nincs ilyen CSS-ben
Azonos szülővel rendelkező, közvetlenül következő szomszédos testvért választja ki
Közvetlen gyermek elem
Mit jelent a ~ kombinátor?
div ~ p
Azonos szülővel rendelkező, közvetlenül következő szomszédos testvért választja ki
Csoportosításra használjuk, amikor ugyanaz a szabály több szelektorra is vonatkozik
Általános testvér, kiválasztja az összes olyan elemet, melyeket az előbbi választó előz meg
Nincs ilyen CSS-ben
Melyik a helyes CSS szintaxis?
body {color: blue;}
body:color=blue;
{body;color:blue;}
{body:color=blue;}
Mit eredményez az alábbi kódsor a DOM-ban?
<span class=”highlight”>Béla</span>
.highlight:before { content: “Helló”; }
<span class=”highlight”>Helló Béla</span>
Helló<span class=”highlight”>Béla</span>
<span class=”Helló-highlight”>Béla</span>
<span class=”highlight”>HellóBéla</span>
Mi a megfelelő HTML elem a legmagasabb szintű címsorhoz?
<heading>
<h6>
<head>
<h1>
Mi a helyes HTML elem dőlt szöveg formázásához?
<i>
<em>
mindkettő
egyiksem
Mi a helyes HTML elem félkövér szöveg formázásához?
<b>
<bold>
mindkettő
egyiksem
Hogyan készíthetsz számozott listát HTML-ben?
<numberlist>
<ol>
<list>
<ul>
Melyik attribútum adja meg a kép helyettesítő szövegét, ha a kép nem jeleníthető meg?
alt
src
longdesc
title
Melyik HTML elem határozza meg a navigációs hivatkozásokat?
<navigation>
<navigate>
<nav>
<menu>
Hogyan adhatsz háttérszínt az összes <h1> elemnek?
all.h1 {background-color:#ff0000;}
h1.all {background-color:#ff0000;}
h1 {background-color:#ff0000;}
h1* {background-color:#ff0000;}
Hogyan jeleníthetőek meg a hiperhivatkozások aláhúzás nélkül?
a {underline:none;}
a {decoration:no-underline;}
a {text-decoration:no-underline;}
a {text-decoration:none;}
Hogyan formázhatsz verzál (csupa nagybetűs) szöveget?
text-transform:capitalize;
text-transform:uppercase;
text-transform:versal;
Ez nem lehet megoldani CSS-el, be kell gépelni nagybetűvel
Hogyan jelenítesz meg egy ilyen keretet?
felül = 10px, alul = 5px, bal oldalon= 20px, jobb oldalon = 1px
border-width:5px 20px 10px 1px;
border-width:10px 5px 20px 1px;
border-width:10px 1px 5px 20px;
border-width:10px 20px 5px 1px;
Hogyan választod ki CSS-ben a footer HTML elemet?
#footer
.footer
footer
*footer
Hogyan választod ki az összes p elemet a div elemen belül?
div.p
div p
div + p
div#p
Mi a position tulajdonság alapértelmezett értéke?
static
absolute
fixed
relative
A padding tulajdonság használatakor lehet-e negatív értékeket használni?
Igen
Nem
Csak Google Chrome-ban
Csak Internet Explorerben
Mi az img HTML elem alapértelmezett display értéke?
block
inline-block
inline
flex
A margin-top és margin-bottom beállítás hatással van az inline elemekre?
Igen
Nem
Csak Google Chrome-ban
Csak Internet Explorerben
A padding-top és a padding-bottom értéke hozzáadódik az inline elemek a méreteihez?
Igen
Nem
Csak ha border-box az elem
Csak Internet Explorerben
Milyen színű a körte?
<ul>
<li><span>Alma</span></li>
<li><span class=”highlight”>Körte</span></li>
</ul>
ul {color: red}
ul li {color: purple}
ul li span {color: yellow}
.highlight {color: blue}
piros
kék
sárga
lila
Mi történik a bekezdéssel?
<p class=”bekezdes”>Ez itt egy bekezdés</p>
#bekezdes {
margin-bottom: -5px;
}
5px lefelé mozog
5px felfelé mozog
-5px felfelé mozog
Semmi
Letöltődik-e a háttérkép, ha az nincs használatban?
#box {
background-image: url(‘mypic.jpg’);
}
Igen
Nem
Csak Google Chrome-ban
Csak Internet Explorerben
Letöltődik-e a háttérkép, ha az használatban van, de nem látható?
#box {
background-image: url(‘mypic.jpg’);
display: none;
}
Igen
Nem
Csak Google Chrome-ban
Csak Internet Explorerben
Hogyan adhatsz meg töréspontot 600px – 900px között?
@media only screen and (width: 600px – 900px){…}
@media only screen and (min-width: 600) and (max-width: 900){…}
@media only screen and (min-width-start: 600) and (max-width-end: 900){…}
@media only screen and (min-width: 600px) and (max-width: 900px){…}
Melyik előtagot kell használnod, hogy a CSS3 tulajdonságok a régebbi Mozilla Firefox böngészőkben is lefussanak?
-moz
-mozzila
-mo
-webkit
Az alábbiak közül melyik mértékegység határozza meg a viewport szélességének 1% -át?
vh
vw
vp
vmin
