Aquesta és una altra manera de posar una icona a una llista <li>. Al css posarem:
.mac {
font-size: 11px;
padding-left: 17px;
margin-bottom: 5px;
background:url(images/macosx.gif) bottom left no-repeat;
List-style:none;
}
I al document html:
<li class=”mac”>Macintosh</li>
Per insertar un css s’ha d’escriure això al <head>:
<link rel=”StyleSheet” href=”estils.css” type=”text/css>
Per fer un recuadre amb el contorn puntejat, ens fixarem en la darrera línia del següent codi:
.requadre {
background-color:#ffffcc;
text-align:left;
border-width:0;
padding:5px;
border: 1px dotted #FFAA00;
}
<!– #FFAA00 fa referència al color taronja del contorn –>
Quedarà així:
Aquest codi, per exemple, també és aplicable a una imatge.
Per posar-li un marc a les imatges (estil flickr):
.Marc {
margin-top: 5px;
margin-bottom: 5px;
width: 91px;
height: 95px;
padding: 7px 0 0 7px;
background: url(http://l.yimg.com/www.flickr.com/images/set_case.gif)
no-repeat;
}
<div class=”Marc”>
<img src=”…” />
</div>
Quedaria així:
Per posar un contorn (border) a una imatge, farem servir el següent codi css:
img { border: 8px solid white; }
Això ens posarà a totes les imatges de la web un contorn de 8px de color blanc.
De la mateixa manera es pot posar un petit contorn de color negre:
setBorder{border: 1px solid #000;}
<img class=”setBorder” />
A continuació el codi en css per mostrar un text citat:
<style type=”text/css”>
<!–
.codigo {
font-family:courier;
font-size:11px;
background-color:#F2F2F2;
display:block;
line-height:18px;
overflow:scroll;
padding:15px;
}
–>
</style>
que ha de quedar “como así”
Al css hem de definir la imatge mitjançant el següent codi:
li {list-style-image:url(imatge.gif)}
L’efecte aconseguit és:
Comentari 1
Comentari 2
en lloc de:
