Mennyire ismered a CSS-t? 30 bemelegítő kérdés sitebuildhez – Webdesign Tanfolyam

Mennyire ismered a CSS-t? 30 bemelegítő kérdés sitebuildhez

2018. április 16. - 15:45 • írta: Pócsik Emese

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
Címkék:

Ezeket láttad már?

A szerző: Pócsik Emese
2007 óta dolgozom webdesignerként. Munkáim nagy részét főleg üzleti weboldalak készítése teszi ki kis- és közép vállalkozásoknak. A tanfolyamon összetettebb weblapok HTML+CSS kódolását oktatom, néhány házi praktikával és gyakorlati tanáccsal megfűszerezve.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.