Než začneme spolecně s twitter bootstrap rozvrzenim stranek pomoci jejich css.
Predtim doporucuji precist a nastudovat tyto pravidla – hlavne zjistit jaky je rozdil mezi jednotlivymi zapisy
Mam pro tebe takovy priklad na ověřeni pochopeni, jak funguji zapisy a jak se prioritizuji jednotlive prvky pres sebe. Není to ukázka jak má vypadat kódování.
Bez toho aniz bys zadaval příklad do prohlízece zkus zjistit, jake budou mit jednotlive prvky barvu při
—————————————————————————————————————————————
nasledujici definici css:
body {
background: #dcdcdc
}
body * {
padding: 30px;
display: block;
border: 1px solid black;
}
div {
background: pink
}
#moje-id #id8 {
background: green;
}
#moje-id.moje-trida {
background: orange
}
.moje-trida div:first-child {
background: magenta
}
#moje-id .moje-trida {
background: black
}
#moje-id > div.moje-trida {
background: blue
}
#moje-id .moje-trida span.moje-trida {
background: yellow
}
—————————————————————————————————————————————
a nasledujici html:
<html>
<head>
<style>
body {
background: #dcdcdc
}
body * {
padding: 30px;
display: block;
border: 1px solid black;
}
</style>
</head>
<body>
<div id=“d1″>
<div id=“moje-id“ class=“moje-trida“>
<div id=“id2″ class=“moje-trida“>
<div id=“id3″ class=“moje-trida“></div>
</div>
<div id=“id4″ class=“moje-trida“>
<div id=“id5″>
<div class=“moje-trida“>
<span class=“moje-trida“></span>
</div>
</div>
</div>
<div id=“id6″>
<span id=“id7″ class=“moje-trida“></span>
<div id=“id8″ class=“moje-trida“></div>
<span id=“id9″ class=“moje-trida“></span>
</div>
</div>
</div>
</body>
</html>
—————————————————————————————————————————————
HTML v prohlizeci pak diky padding 30px a 1px border vypada nasledovne:
—————————————————————————————————————————————
Otazkou je jake budou mit ted jednotlive prvky pozadi?
Muzes si zkusit napsat odhad, jaky by jednotlive id mely mit pozadi:
- id1 => pink (ruzove)
- id2
- id3
- id4
- id5
- id6
- id7
- id8
—————————————————————————————————————————————
Az budes mit nejakou predstavu, tak si zkopiruj to css do <style> a nacti si v prohlizeci 🙂
—————————————————————————————————————————————
asi to nedas takle z hlavy – to ale malo kdo, vetsina lidi to zkousi a meni primo pomoci chrome developer tools. Nicmene je to dobry na procviceni a zaroven si muzes projit v developer tools jak se jednotlvie prvky navzajem prepisuji.
Napsat komentář