<style>
.color li { color: red; }
.color li span { color: #000; }
</style>
<ul>
<li><span>kropka</span></li>
</ul>
Tag Archives: style
Ustawienie kolejności warstw za pomocą z-index
<html>
<head>
<style>
<head>
<style>
.rel {
height: 20px;
position: relative;
background: #CCFFFF;
}
.dymek {
left:10px;
position:absolute;
background: #FFFFCC;
font: normal 12px Arial, Verdana, Tahoma, Helvetica, sans-serif;
padding: 5px;
border: #CCCCCC 1px solid;
width: 150px;
}
#rd1 {z-index:13;}
#rd2 {z-index:12;}
#rd3 {z-index:11;}
#rd4 {z-index:10;}
</style>
</head>
<body>
<div id="rd1" class="rel"><div id="d1" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div></div>
<div id="rd2" class="rel"><div id="d2" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div></div>
<div id="rd3" class="rel"><div id="d3" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div></div>
<div id="rd4" class="rel"><div id="d4" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div></div>
</body>
</html>
height: 20px;
position: relative;
background: #CCFFFF;
}
.dymek {
left:10px;
position:absolute;
background: #FFFFCC;
font: normal 12px Arial, Verdana, Tahoma, Helvetica, sans-serif;
padding: 5px;
border: #CCCCCC 1px solid;
width: 150px;
}
#rd1 {z-index:13;}
#rd2 {z-index:12;}
#rd3 {z-index:11;}
#rd4 {z-index:10;}
</style>
</head>
<body>
<div id="rd1" class="rel"><div id="d1" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div></div>
<div id="rd2" class="rel"><div id="d2" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div></div>
<div id="rd3" class="rel"><div id="d3" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div></div>
<div id="rd4" class="rel"><div id="d4" class="dymek">Polska, Warszawa, Lublin, Siedliszcze</div></div>
</body>
</html>
Domyślne style dla tagów H1..H6
h1, h2, h3, h4, h5, h6, p, form { margin: 0; padding: 0; }
oczywiście można jeszcze prościej, czyli na samym początku styli dodać nawet przed samym body {}:
* {
margin: 0;
padding: 0;
}
Prosty zestaw styli do formularzy
<style>
body {background:white;line-height:17px;font-size:12px;font-family:tahoma, arial, helvetica, sans-serif;}
form { padding: 0px; margin: 0px; display: inline; }
input { cursor: hand; }
.lista td { border-bottom: 1px solid #EDEDED; }
.lista td { padding-left: 10px; padding-right: 10px; }
.lista td .button { text-align: center; }
</style>
Możliwe wartości właściwości border-style
border-style:
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border: 1px solid gray;
border: 1px dashed gray;
Style na półprzezroczysty div
style=”filter: alpha(opacity=50); opacity: 0.5;”
Zmiana rozmiaru mapy
map = new GMap2(document.getElementById(„mapcan”));
…..
map.getContainer().style.width = 500+’px’;
map.getContainer().style.height = 500+’px’;
map.checkResize();
Kod należy umieścić w funkcji JS.
Wywołanie funkcji powoduje zmiane rozmiaru mapy.
przycisk submit w jednej linii z polem input
.submit { vertical-align: middle; *vertical-align: text-bottom; }
<input type=”text” name=”cos”><input type=”image” name=”search” src=”images/szukaj.gif” class=”submit”>
Aby ustawić obok siebie pole input i przycisk submit należy zstosować powyższy kod.
Pokazywanie i ukrywanie elementu
if(tow_nr==6) {
var felem = document.getElementById(‚fadd’);
felem.style.visibility = ‚hidden’;
return;
}
if(tow_nr==1) {
var felem = document.getElementById(‚fdel’);
felem.style.visibility = ‚visible’;
}
Zwiększenie wysokości pola textarea
function tekstsize(h) {
var elem = document.getElementById(„main_text”);
elem.style.height = h+’px’;
}
<input type=”button” name=”wybor” value=” – ” onClick=”tekstsize(150)”>
<input type=”button” name=”wybor” value=” + ” onClick=”tekstsize(1000)”>
<textarea name=”main_text” id=”main_text” cols=’90’ rows=’10’ wrap=’virtual’>